/**
 * Grovidex Shop V1 catalog archive (Phase 13F).
 *
 * Archive-scoped in two ways: this stylesheet is enqueued only on
 * catalog archives (see inc/enqueue.php), and every rule is nested under
 * a .gvx-shop* class. Nothing here restyles WooCommerce, Astra or
 * Elementor globally, and the homepage, single product, cart, account
 * and checkout routes are untouched.
 *
 * All colors, spacing, radii and type come from the Grovidex tokens in
 * tokens.css. The product card itself is the shared component and is not
 * restyled here — only the grid that lays the cards out.
 */

/* ==================================================================
 * 1. Archive shell
 * ================================================================== */

/* Compact commerce surface. The section rhythm token is deliberately
   overridden: a catalog page opens with content, not with the
   homepage's editorial breathing room, and there is no Shop hero. */
.gvx-shop.gvx-section {
	padding-block: var(--gvx-space-4) var(--gvx-space-7);
}

/* Astra's own content container already supplies the page gutter on
   every archive route, so the Grovidex container keeps its max width
   but drops its inline padding — otherwise the two would double-pad and
   squeeze the grid on small screens. */
.gvx-shop > .gvx-container {
	padding-inline: 0;
}

/* ==================================================================
 * 2. Breadcrumb
 * ================================================================== */

.gvx-shop-breadcrumb {
	margin-bottom: var(--gvx-space-3);
	font-size: var(--gvx-text-xs);
	color: var(--gvx-ink-muted);
}

.gvx-shop-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gvx-space-1) var(--gvx-space-2);
}

.gvx-shop-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-2);
}

/* Separator is decorative, so it is generated rather than placed in the
   accessible name of any crumb. */
.gvx-shop-breadcrumb__item + .gvx-shop-breadcrumb__item::before {
	content: "\203A";
	color: var(--gvx-border);
}

.gvx-shop-breadcrumb__item a {
	color: var(--gvx-ink-muted);
	text-decoration: none;
}

.gvx-shop-breadcrumb__item a:hover,
.gvx-shop-breadcrumb__item a:focus-visible {
	color: var(--gvx-teal-dark);
	text-decoration: underline;
}

.gvx-shop-breadcrumb__item [aria-current="page"] {
	color: var(--gvx-ink);
	font-weight: 600;
}

/* ==================================================================
 * 3. Heading area (compact — never a hero band)
 * ================================================================== */

.gvx-shop__head {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-1);
	margin-bottom: var(--gvx-space-4);
}

.gvx-shop__title {
	font-size: var(--gvx-text-xl);
	font-weight: 700;
	color: var(--gvx-ink);
	line-height: var(--gvx-leading-tight);
}

.gvx-shop__sub {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
	line-height: var(--gvx-leading-snug);
}

/* ==================================================================
 * 4. Quick-category navigation
 * Mobile/tablet: a natively swipeable rail that never wraps, with the
 * next chip allowed to peek. Desktop (992px+): one visible row plus the
 * More disclosure, which needs a non-clipping overflow context.
 * ================================================================== */

.gvx-shop-nav {
	margin-bottom: var(--gvx-space-4);
}

.gvx-shop-nav__rail {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gvx-space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* Room for the focus ring, which must never be clipped by the rail. */
	padding-block: var(--gvx-space-1);
	scrollbar-width: none;
}

.gvx-shop-nav__rail::-webkit-scrollbar {
	display: none;
}

.gvx-shop-nav__item {
	flex: 0 0 auto;
}

.gvx-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-1);
	min-height: 40px;
	padding: var(--gvx-space-2) var(--gvx-space-4);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-pill);
	color: var(--gvx-teal);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--gvx-duration) var(--gvx-ease),
		border-color var(--gvx-duration) var(--gvx-ease),
		color var(--gvx-duration) var(--gvx-ease);
}

.gvx-shop-chip:hover,
.gvx-shop-chip:focus-visible {
	border-color: var(--gvx-teal);
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

/* Active context: dark teal with inverted text. */
.gvx-shop-chip.is-active,
.gvx-shop-chip.is-active:hover,
.gvx-shop-chip.is-active:focus-visible {
	background-color: var(--gvx-teal);
	border-color: var(--gvx-teal);
	color: var(--gvx-ink-on-dark);
}

/* More disclosure. Hidden until there is room for it on one line. */
.gvx-shop-nav__item--more {
	display: none;
}

.gvx-shop-more__toggle {
	list-style: none;
	cursor: pointer;
}

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

.gvx-shop-more__caret {
	font-size: 0.7em;
	line-height: 1;
}

.gvx-shop-more[open] > .gvx-shop-more__toggle {
	border-color: var(--gvx-teal);
	background-color: var(--gvx-teal-tint);
}

.gvx-shop-more__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gvx-shop-more__link {
	display: block;
	padding: var(--gvx-space-2) var(--gvx-space-3);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-soft);
	font-size: var(--gvx-text-sm);
	text-decoration: none;
}

.gvx-shop-more__link:hover,
.gvx-shop-more__link:focus-visible {
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

@media (min-width: 992px) {
	/* The seven locked chips plus More fit comfortably from here up, so
	   the rail can stop scrolling and let the disclosure panel escape
	   its box. */
	.gvx-shop-nav__rail {
		overflow: visible;
	}

	.gvx-shop-nav__item--more {
		display: block;
		position: relative;
	}

	.gvx-shop-more__list {
		position: absolute;
		top: calc(100% + var(--gvx-space-2));
		left: 0;
		z-index: var(--gvx-z-raised);
		min-width: 232px;
		max-height: 320px;
		overflow-y: auto;
		padding: var(--gvx-space-2);
		background-color: var(--gvx-surface);
		border: 1px solid var(--gvx-border);
		border-radius: var(--gvx-radius-md);
		box-shadow: var(--gvx-shadow-md);
	}
}

/* ==================================================================
 * 5. Toolbar (result count + sorting). No Filters control in 13F.
 * ================================================================== */

.gvx-shop-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gvx-space-2);
	padding-block: var(--gvx-space-3);
	border-block: 1px solid var(--gvx-border);
	margin-bottom: var(--gvx-space-4);
}

/* WooCommerce's own result-count paragraph, restyled only inside this
   toolbar so the stock element is untouched everywhere else. */
.gvx-shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
}

.gvx-shop-sort {
	display: flex;
	align-items: center;
	gap: var(--gvx-space-2);
	margin: 0;
	max-width: 100%;
	min-width: 0;
	/* The WooCommerce ordering class is carried for behavior, not layout;
	   the parent theme floats that class, which this flex row does not
	   want. Floats are inert on flex items, but this keeps the intent
	   explicit if the toolbar's display ever changes. */
	float: none;
}

.gvx-shop-sort__label {
	flex-shrink: 0;
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	color: var(--gvx-ink-soft);
}

.gvx-shop-sort__select {
	flex: 1 1 auto;
	/* Explicit: the parent theme sets a global select{width:100%}, which
	   inside this flex row resolves against the FORM rather than the
	   space left beside the label — the select then overhangs the
	   container and pushes the page into horizontal overflow. Sizing the
	   select from flex instead keeps it inside the toolbar at every
	   width. */
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: 40px;
	padding: var(--gvx-space-1) var(--gvx-space-3);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	line-height: 1.3;
}

.gvx-shop-sort__select:hover {
	border-color: var(--gvx-teal);
}

/* Explicit focus ring for the sorting control. The shared ring in
   base.css does not survive the form-control styling that reaches this
   select, and a sorting control with no visible focus state is not
   keyboard-usable — so it is restated here at toolbar specificity. */
.gvx-shop-toolbar .gvx-shop-sort__select:focus-visible,
.gvx-shop-toolbar .gvx-shop-sort__go:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-color: var(--gvx-teal);
}

.gvx-shop-sort__go {
	min-height: 40px;
	padding: var(--gvx-space-1) var(--gvx-space-4);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	cursor: pointer;
}

@media (min-width: 768px) {
	.gvx-shop-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--gvx-space-4);
	}

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

	.gvx-shop-sort__select {
		flex: 0 1 auto;
		width: auto;
		min-width: 200px;
	}
}

/* ==================================================================
 * 6. Product grid
 * Locked columns: 2 below 768px (including the smallest phones — there
 * is no one-column fallback), 3 from 768px, 4 from 1200px. The card
 * component supplies its own geometry; this only lays cards out.
 * ================================================================== */

.gvx-shop-grid {
	--gvx-shop-gap: var(--gvx-space-3); /* 12px */

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gvx-shop-gap);
}

@media (min-width: 768px) {
	.gvx-shop-grid {
		--gvx-shop-gap: 1.25rem; /* 20px — between the 18–24px targets */

		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.gvx-shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==================================================================
 * 7. Pagination
 * ================================================================== */

.gvx-shop-pagination {
	margin-top: var(--gvx-space-6);
}

.gvx-shop-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gvx-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gvx-shop-pagination li {
	display: flex;
}

.gvx-shop-pagination a.page-numbers,
.gvx-shop-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gvx-space-1);
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--gvx-space-3);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.gvx-shop-pagination a.page-numbers:hover,
.gvx-shop-pagination a.page-numbers:focus-visible {
	border-color: var(--gvx-teal);
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

/* Current page: filled, and marked with aria-current in the markup. */
.gvx-shop-pagination .page-numbers.current {
	background-color: var(--gvx-teal);
	border-color: var(--gvx-teal);
	color: var(--gvx-ink-on-dark);
}

/* The gap indicator is not interactive. */
.gvx-shop-pagination .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
	color: var(--gvx-ink-muted);
	min-width: auto;
	padding-inline: var(--gvx-space-1);
}

/* Compact mobile pagination: Previous/Next collapse to their arrow
   glyphs. The words stay in the accessible name — they are visually
   hidden, never removed, so the links keep a meaningful label. */
@media (max-width: 767px) {
	.gvx-pagination__word {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.gvx-shop-pagination a.page-numbers,
	.gvx-shop-pagination span.page-numbers {
		min-width: 36px;
		min-height: 36px;
		padding: 0 var(--gvx-space-2);
	}
}

/* ==================================================================
 * 8. Empty state
 * ================================================================== */

.gvx-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-3);
	padding: var(--gvx-space-7) var(--gvx-space-5);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
}

.gvx-shop-empty__title {
	font-size: var(--gvx-text-lg);
	font-weight: 700;
	color: var(--gvx-ink);
}

.gvx-shop-empty__text {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
}

.gvx-shop-empty__cta {
	margin-top: var(--gvx-space-1);
}

/* ==================================================================
 * 9. Filter layout + desktop sidebar (Phase 13H)
 * The sidebar is desktop-only. Below 992px the catalog returns to the
 * Phase 13F single-column shell; the mobile drawer is the next phase,
 * so nothing is rendered there that would not work.
 * ================================================================== */

.gvx-shop-layout {
	display: block;
}

.gvx-shop-content {
	min-width: 0;
}

.gvx-shop-sidebar {
	display: none;
}

@media (min-width: 992px) {
	.gvx-shop-layout {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--gvx-space-5);
		align-items: start;
	}

	.gvx-shop-sidebar {
		display: block;
		min-width: 0;
		padding: var(--gvx-space-4);
		background-color: var(--gvx-surface);
		border: 1px solid var(--gvx-border);
		border-radius: var(--gvx-radius-md);
		/* Sticky, never fixed: the page keeps scrolling normally and the
		   sidebar simply stops under the sticky site header. When its own
		   content is taller than the space left, it scrolls internally,
		   which keeps every control keyboard-reachable. */
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--gvx-header-h-desktop) + var(--gvx-space-4));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--gvx-header-h-desktop) - var(--gvx-space-6));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (min-width: 1200px) {
	.gvx-shop-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--gvx-space-5);
	}
}

/* ==================================================================
 * 10. Sidebar facets
 * ================================================================== */

.gvx-shop-facet {
	margin: 0 0 var(--gvx-space-5);
	padding: 0;
	border: 0;
}

.gvx-shop-facet:last-of-type {
	margin-bottom: var(--gvx-space-4);
}

.gvx-shop-facet__title {
	display: block;
	margin: 0 0 var(--gvx-space-2);
	padding: 0;
	font-size: var(--gvx-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gvx-ink);
}

.gvx-shop-facet__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Category entries are navigation links, not controls. */
.gvx-shop-facet__link {
	display: block;
	padding: var(--gvx-space-1) var(--gvx-space-2);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-soft);
	font-size: var(--gvx-text-sm);
	text-decoration: none;
}

.gvx-shop-facet__link:hover,
.gvx-shop-facet__link:focus-visible {
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

.gvx-shop-facet__link.is-active {
	background-color: var(--gvx-teal);
	color: var(--gvx-ink-on-dark);
	font-weight: 600;
}

/* Comfortable hit areas for the checkbox/radio rows. */
.gvx-shop-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--gvx-space-2);
	min-height: 32px;
	padding-block: 2px;
}

.gvx-shop-choice input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--gvx-teal);
}

.gvx-shop-choice label {
	font-size: var(--gvx-text-sm);
	line-height: var(--gvx-leading-snug);
	color: var(--gvx-ink-soft);
	cursor: pointer;
	overflow-wrap: break-word;
	min-width: 0;
}

.gvx-shop-choice input:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
}

/* "View more" disclosure — native <details>, no JavaScript. */
.gvx-shop-more-disclosure {
	margin-top: var(--gvx-space-2);
}

.gvx-shop-more-disclosure__toggle {
	list-style: none;
	display: inline-flex;
	align-items: center;
	padding: var(--gvx-space-1) var(--gvx-space-2);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.gvx-shop-more-disclosure__toggle::-webkit-details-marker {
	display: none;
}

.gvx-shop-more-disclosure__toggle:hover,
.gvx-shop-more-disclosure__toggle:focus-visible {
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

.gvx-shop-more-disclosure[open] > .gvx-shop-more-disclosure__toggle {
	margin-bottom: var(--gvx-space-1);
}

/* Price inputs. */
.gvx-shop-price {
	display: flex;
	align-items: flex-end;
	gap: var(--gvx-space-2);
}

.gvx-shop-price__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 0;
}

.gvx-shop-price__field label {
	font-size: var(--gvx-text-xs);
	font-weight: 600;
	color: var(--gvx-ink-muted);
}

.gvx-shop-price__field input {
	width: 100%;
	min-width: 0;
	min-height: 36px;
	padding: var(--gvx-space-1) var(--gvx-space-2);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
}

.gvx-shop-price__field input:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-color: var(--gvx-teal);
}

.gvx-shop-price__sep {
	padding-bottom: 8px;
	color: var(--gvx-ink-muted);
}

/* Apply / Clear all. */
.gvx-shop-filters__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-2);
	padding-top: var(--gvx-space-3);
	border-top: 1px solid var(--gvx-border);
}

.gvx-shop-filters__apply {
	width: 100%;
	min-height: 40px;
	padding-inline: var(--gvx-space-4);
	font-size: var(--gvx-text-sm);
}

.gvx-shop-filters__clear {
	color: var(--gvx-ink-muted);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvx-shop-filters__clear:hover,
.gvx-shop-filters__clear:focus-visible {
	color: var(--gvx-teal-dark);
}

/* ==================================================================
 * 11. Active filter chips
 * ================================================================== */

.gvx-shop-active {
	margin-bottom: var(--gvx-space-3);
}

.gvx-shop-active__title {
	margin: 0 0 var(--gvx-space-2);
	font-size: var(--gvx-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gvx-ink-muted);
}

.gvx-shop-active__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gvx-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each chip is a real link whose href removes exactly that filter. */
.gvx-shop-active__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-2);
	min-height: 32px;
	padding: var(--gvx-space-1) var(--gvx-space-3);
	background-color: var(--gvx-teal-tint);
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-pill);
	color: var(--gvx-teal-dark);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	text-decoration: none;
	max-width: 100%;
}

.gvx-shop-active__chip:hover,
.gvx-shop-active__chip:focus-visible {
	background-color: var(--gvx-teal);
	color: var(--gvx-ink-on-dark);
}

.gvx-shop-active__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}

.gvx-shop-active__x {
	font-size: 1.05rem;
	line-height: 1;
}

.gvx-shop-active__clear {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--gvx-ink-muted);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvx-shop-active__clear:hover,
.gvx-shop-active__clear:focus-visible {
	color: var(--gvx-teal-dark);
}

/* ==================================================================
 * 12. Filter panel presentation (Phase 13I)
 * One panel, three presentations: desktop sidebar, mobile modal
 * drawer, and — via the <noscript> block in filters.php — an inline
 * form when JavaScript is unavailable.
 * ================================================================== */

/* Desktop: the dialog is displayed as an ordinary static sidebar. Its
   ARIA role stays `region` here; shop.js only promotes it to `dialog`
   while it is genuinely open as a modal. */
@media (min-width: 992px) {
	.gvx-shop-filter-panel {
		display: block;
		position: static;
		width: auto;
		max-width: none;
		max-inline-size: none;
		margin: 0;
		border: 1px solid var(--gvx-border);
		color: inherit;
	}

	/* Drawer-only chrome never appears on desktop. */
	.gvx-shop-filter-panel__header,
	.gvx-shop-filter-panel__footer,
	.gvx-shop-filters-trigger {
		display: none;
	}
}

/* Mobile/tablet: bottom sheet. */
@media (max-width: 991px) {
	.gvx-shop-filter-panel {
		/* Closed dialogs are display:none by UA default; these rules
		   describe the open sheet. */
		width: 100%;
		max-width: 100%;
		max-inline-size: 100%;
		margin: 0;
		margin-block-start: auto;
		margin-block-end: 0;
		padding: 0;
		max-height: 88dvh;
		max-block-size: 88dvh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: var(--gvx-surface);
		border: 0;
		border-radius: var(--gvx-radius-lg) var(--gvx-radius-lg) 0 0;
		box-shadow: 0 -6px 24px rgba(15, 92, 92, 0.18);
		color: var(--gvx-ink-soft);
		font-family: var(--gvx-font-sans);
	}

	/* A closed dialog must stay closed. */
	.gvx-shop-filter-panel:not([open]) {
		display: none;
	}

	.gvx-shop-filter-panel::backdrop {
		background-color: rgba(31, 36, 33, 0.55);
	}

	.gvx-shop-filter-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gvx-space-3);
		flex-shrink: 0;
		padding: var(--gvx-space-4);
		border-bottom: 1px solid var(--gvx-border);
	}

	.gvx-shop-filter-panel__title {
		margin: 0;
		font-size: var(--gvx-text-md);
		font-weight: 700;
		color: var(--gvx-ink);
	}

	.gvx-shop-filter-panel__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background-color: transparent;
		border: 1px solid var(--gvx-border);
		border-radius: var(--gvx-radius-pill);
		color: var(--gvx-ink);
		font-size: 1.35rem;
		line-height: 1;
		cursor: pointer;
	}

	.gvx-shop-filter-panel__close:hover,
	.gvx-shop-filter-panel__close:focus-visible {
		border-color: var(--gvx-teal);
		background-color: var(--gvx-teal-tint);
		color: var(--gvx-teal-dark);
	}

	/* Only the body scrolls; the header and actions stay put. */
	.gvx-shop-filter-panel__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: var(--gvx-space-4);
	}

	.gvx-shop-filter-panel__footer {
		display: flex;
		align-items: center;
		gap: var(--gvx-space-3);
		flex-shrink: 0;
		padding: var(--gvx-space-3) var(--gvx-space-4);
		/* Clear of the home indicator on devices that report one. The
		   sheet is in the top layer, so it already sits above the fixed
		   mobile bottom navigation rather than behind it. */
		padding-bottom: calc(var(--gvx-space-3) + env(safe-area-inset-bottom, 0px));
		background-color: var(--gvx-surface);
		border-top: 1px solid var(--gvx-border);
	}

	.gvx-shop-filter-panel__clear {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 var(--gvx-space-4);
		background-color: transparent;
		border: 1px solid var(--gvx-border);
		border-radius: var(--gvx-radius-sm);
		color: var(--gvx-ink-soft);
		font-family: var(--gvx-font-sans);
		font-size: var(--gvx-text-sm);
		font-weight: 600;
		cursor: pointer;
	}

	.gvx-shop-filter-panel__clear:hover,
	.gvx-shop-filter-panel__clear:focus-visible {
		border-color: var(--gvx-teal);
		color: var(--gvx-teal-dark);
	}

	.gvx-shop-filter-panel__apply {
		flex: 1 1 auto;
		min-height: 44px;
		font-size: var(--gvx-text-sm);
	}

	/* The sidebar's own action row belongs to desktop only. */
	.gvx-shop-filters__actions {
		display: none;
	}

	/* Inside the sheet the facets need a little more breathing room. */
	.gvx-shop-choice {
		min-height: 40px;
	}

	.gvx-shop-choice input {
		width: 18px;
		height: 18px;
	}
}

/* Background scroll lock while the drawer is open. Applied as a class
   by shop.js and removed on close, so the site's own overflow behavior
   is never permanently changed and the scroll position is kept. */
.gvx-shop-scroll-locked,
.gvx-shop-scroll-locked body {
	overflow: hidden;
}

/* ==================================================================
 * 13. Mobile filter trigger
 * ================================================================== */

.gvx-shop-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--gvx-space-2);
	min-width: 0;
}

.gvx-shop-filters-trigger {
	/* Drawer-only control: hidden by default so it can never appear
	   beside the permanent desktop sidebar, and revealed only below the
	   sidebar breakpoint. */
	display: none;
	align-items: center;
	gap: var(--gvx-space-2);
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0 var(--gvx-space-4);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.gvx-shop-filters-trigger:hover,
.gvx-shop-filters-trigger:focus-visible {
	border-color: var(--gvx-teal);
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

.gvx-shop-filters-trigger__icon {
	display: inline-flex;
}

/* Publisher option search — a drawer affordance, so it is not shown on
   the desktop sidebar where the full list is already visible. */
.gvx-shop-pub-search {
	display: none;
	margin-bottom: var(--gvx-space-2);
}

@media (max-width: 991px) {
	.gvx-shop-filters-trigger {
		display: inline-flex;
	}

	.gvx-shop-pub-search {
		display: block;
	}

	.gvx-shop-pub-search__input {
		width: 100%;
		min-height: 40px;
		padding: var(--gvx-space-1) var(--gvx-space-3);
		background-color: var(--gvx-surface);
		border: 1px solid var(--gvx-border);
		border-radius: var(--gvx-radius-sm);
		color: var(--gvx-ink);
		font-family: var(--gvx-font-sans);
		font-size: var(--gvx-text-sm);
	}

	.gvx-shop-pub-search__input:focus-visible {
		outline: 2px solid var(--gvx-teal);
		outline-offset: 2px;
		border-color: var(--gvx-teal);
	}

	/* The toolbar keeps the count on its own line, with the filter and
	   sort controls sharing the row beneath it. */
	.gvx-shop-toolbar__controls {
		justify-content: space-between;
	}

	.gvx-shop-sort {
		flex: 1 1 auto;
		justify-content: flex-end;
	}
}