/**
 * BlueGam shop and product archive presentation.
 *
 * Product card visuals intentionally remain owned by Commerce Components.
 * The integration layer is responsible for enqueueing this stylesheet.
 */

.bg-shop {
	overflow-x: clip;
}

.bg-shop-catalog,
.bg-shop-search {
	display: grid;
	gap: clamp(var(--wp--preset--spacing--70), 5vw, var(--wp--preset--spacing--100));
}

.bg-shop-header {
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--70);
}

.bg-shop-title {
	margin-block: 0;
	max-inline-size: 22ch;
}

.bg-shop-intro {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--typography--line-height--body);
	margin-block: 0;
	max-inline-size: 62ch;
}

.bg-shop-notices {
	margin-block: 0;
}

.bg-shop-layout {
	display: grid;
	gap: clamp(var(--wp--preset--spacing--40), 2.5vw, var(--wp--preset--spacing--70));
	grid-template-columns: clamp(180px, 22vw, 248px) minmax(0, 1fr);
}

.bg-shop-filter-region,
.bg-shop-results,
.bg-shop-product-collection {
	min-inline-size: 0;
}

.bg-shop-filter-region {
	align-self: start;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--xs);
	padding: var(--wp--preset--spacing--60);
	position: sticky;
	inset-block-start: calc(72px + var(--wp--preset--spacing--40));
}

.bg-shop-filters {
	--wc-product-filters-background-color: var(--wp--preset--color--surface);
	--wc-product-filters-text-color: var(--wp--preset--color--text-secondary);
	inline-size: 100%;
}

.bg-shop-filters__title,
.bg-shop-filter__heading {
	color: var(--wp--preset--color--text-primary);
	line-height: var(--wp--custom--typography--line-height--compact);
	margin-block: 0;
}

.bg-shop-filters :where(
	.wp-block-woocommerce-product-filter-taxonomy,
	.wp-block-woocommerce-product-filter-price
) {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--50);
}

.bg-shop-filters .wc-block-product-filter-checkbox-list__label {
	min-block-size: var(--wp--custom--control--min-size);
}

.bg-shop-filters .wc-block-product-filter-checkbox-list__input {
	flex: 0 0 auto;
}

.bg-shop-results {
	container-name: bg-shop-results;
	container-type: inline-size;
}

.bg-shop-toolbar {
	align-items: center;
	border-block-end: 1px solid var(--wp--preset--color--border);
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--40);
}

.bg-shop-toolbar > * {
	margin-block: 0;
}

.bg-shop-results-count {
	color: var(--wp--preset--color--text-muted);
}

.bg-shop-sorting,
.bg-shop-sorting .woocommerce-ordering {
	margin-block: 0;
}

.bg-shop-sorting .woocommerce-ordering {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.bg-shop-sorting .orderby {
	max-inline-size: 100%;
}

.bg-shop-product-collection {
	margin-block: 0;
}

.bg-shop-product-grid {
	gap: clamp(var(--wp--preset--spacing--40), 2vw, var(--wp--preset--spacing--60));
}

.bg-shop-pagination {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--80);
	padding-block-start: 0;
}

.bg-shop-pagination :where(a, .page-numbers) {
	align-items: center;
	border-radius: var(--wp--custom--radius--small);
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--wp--custom--control--min-size);
	min-inline-size: var(--wp--custom--control--min-size);
	padding-inline: var(--wp--preset--spacing--20);
}

.bg-shop-pagination a:hover {
	background-color: var(--wp--preset--color--blue-50);
}

.bg-shop-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.bg-shop-empty-state {
	grid-column: 1 / -1;
}

.bg-shop-empty-state__search {
	inline-size: min(100%, 520px);
	margin-block-start: var(--wp--preset--spacing--30);
}

.bg-shop-term-description:not(:empty) {
	border-block-start: 1px solid var(--wp--preset--color--border);
	line-height: var(--wp--custom--typography--line-height--body);
	margin-block: 0;
	max-inline-size: 78ch;
	padding-block-start: var(--wp--preset--spacing--70);
}

@container bg-shop-results (max-width: 860px) {
	.bg-shop-product-grid.wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container bg-shop-results (max-width: 600px) {
	.bg-shop-product-grid.wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container bg-shop-results (max-width: 350px) {
	.bg-shop-product-grid.wc-block-product-template__responsive {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.bg-shop-filter-region {
		padding: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	.bg-shop-catalog,
	.bg-shop-search {
		gap: var(--wp--preset--spacing--80);
	}

	.bg-shop-header {
		padding-block-end: var(--wp--preset--spacing--60);
	}

	.bg-shop-intro {
		font-size: var(--wp--preset--font-size--body);
	}

	.bg-shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bg-shop-filter-region {
		background-color: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		position: static;
	}

	.bg-shop-filters .wc-block-product-filters__open-overlay {
		background-color: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--input);
		font-weight: 600;
		inline-size: 100%;
		justify-content: center;
		min-block-size: var(--wp--custom--control--min-size);
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--40);
	}

	.bg-shop-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.bg-shop-sorting,
	.bg-shop-sorting .woocommerce-ordering,
	.bg-shop-sorting .orderby {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-shop-filters .wc-block-product-filters__overlay,
	.bg-shop-filters .wc-block-product-filters__overlay-dialog {
		transition-duration: 0s;
	}
}