/**
 * 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-breadcrumbs {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	margin-block: 0;
}

.bg-shop-breadcrumbs .woocommerce-breadcrumb {
	font-size: inherit;
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

.bg-shop-breadcrumbs a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.bg-shop-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary-hover);
	text-decoration-thickness: 2px;
}

.bg-shop-breadcrumbs a:focus-visible {
	border-radius: var(--wp--custom--radius--small);
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.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 {
	align-items: start;
	display: grid;
	column-gap: clamp(28px, 2.5vw, 44px);
	grid-template-columns: minmax(272px, 300px) minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--60);
}

.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);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	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%;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.bg-shop-filters .wc-block-product-filter-price-slider__content {
	box-sizing: border-box;
	grid-template-areas:
		"price-slider price-slider"
		"left-input right-input";
	grid-template-columns: repeat(2, minmax(0, 112px));
	justify-content: space-between;
	padding-inline: 5px;
}

.bg-shop-filters :where(
	.wc-block-product-filter-price-slider__left,
	.wc-block-product-filter-price-slider__right
) {
	inline-size: 112px;
	max-inline-size: 112px;
	max-width: 112px;
	min-inline-size: 0;
	min-width: 0;
	width: 112px;
}

.bg-shop-filters .wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	inline-size: 112px;
	max-inline-size: 112px;
	max-width: 112px;
	min-inline-size: 0;
	min-width: 0;
	padding-inline: 8px;
	text-align: center;
	width: 112px;
}

.bg-shop-filters .wp-block-woocommerce-product-filter-price {
	max-inline-size: 100%;
	overflow: hidden;
}

.bg-shop-filters :where(
	.wp-block-woocommerce-product-filter-active,
	.wp-block-woocommerce-product-filter-taxonomy,
	.wp-block-woocommerce-product-filter-price,
	.wc-block-product-filter-checkbox-list,
	.wc-block-product-filter-price-slider
) {
	max-inline-size: 100%;
	min-inline-size: 0;
}

.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);
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.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 {
	column-gap: clamp(18px, 1.5vw, 26px);
	row-gap: clamp(24px, 2vw, 36px);
}

.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: 325px) {
	.bg-shop-product-grid.wc-block-product-template__responsive {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.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);
	}
}

@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-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

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

@media (max-width: 480px) {
	.bg-shop-product-grid.wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 163px));
		justify-content: space-between;
	}
}

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

@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;
	}
}