.catalog-page__filter-button {
	margin-block: 12px;
	width: 100%;
}

/* navigation */
.catalog-page__navigation-item {
	padding: 8px 12px;
	display: flex;
	border-radius: 3px;
	font-weight: var(--fw-500);
	font-size: 16px;
	line-height: 20px;
	color: var(--color-content-neutral-strong);
	text-decoration: none;
}
.catalog-page__navigation-item._active {
	background-color: var(--color-surface-accent-medium);
	color: var(--color-content-on-accent-strong);
}

a.catalog-page__navigation-item:hover,
a.catalog-page__navigation-item:focus-visible,
button.catalog-page__navigation-item:hover,
button.catalog-page__navigation-item:focus-visible {
	background-color: rgba(var(--color-surface-neutral-regular-rgb), 0.05);
	color: inherit;
}

.catalog-page__filter-result {
	position: sticky;
	bottom: 0;
	margin-top: 8px;
	width: 100%;
}
.catalog-page__filter-result:not(._show) {
	display: none;
}


/* items */
.catalog-page__items {
	--border-color: var(--color-border-neutral-soft);

	display: grid;
	gap: 1px;
	border: 1px solid var(--border-color);
}
.catalog-page__items:first-of-type {
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}
.catalog-page__items:last-of-type {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
.catalog-page__items:not(:last-of-type) {
	border-bottom: none;
}

[data-catalog-load-more] {
	--catalog-preview-height: 180px;
	position: relative;
}

.catalog-page__items._preview {
	height: var(--catalog-preview-height);
	overflow: hidden;
	pointer-events: none;
}

.catalog-page__load-more {
	--padding: 8px;
	--button-height: 52px;
	--button-alpha: 0;
	--border-color: transparent;
	--border-hover-color: transparent;
	--count-color: rgba(var(--color-content-neutral-reverse-rgb), 0.72);
	--count-hover-color: rgba(var(--color-content-neutral-reverse-rgb), 0.72);
	--label-color: var(--color-content-neutral-reverse);
	--label-hover-color: var(--color-content-neutral-reverse);
	--diveder-color: var(--color-border-neutral-medium);

	position: absolute;
	z-index: 10;
	inset: auto 1px 1px;
	height: var(--catalog-preview-height);
	padding: var(--padding);

	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.catalog-page__load-more:hover {
	--button-alpha: 0.12;
	--border-color: var(--border-hover-color);
	--count-color: var(--count-hover-color);
	--label-color: var(--label-hover-color);
}

.catalog-page__load-more::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(var(--color-background-rgb), 1) 0,
		rgba(var(--color-background-rgb), 0.75) var(--padding),
		rgba(var(--color-background-rgb), 0.75) var(--button-height),
		rgba(var(--color-background-rgb), 0) 100%
	);
}

.catalog-page__load-more-button {
	z-index: 1;
	padding-block: 3px;
	height: var(--button-height);
	width: 100%;

	display: flex;
	gap: 6px;
	align-items: stretch;
	justify-content: center;

	border: 1px solid var(--border-color);
	border-radius: 3px;
	background-color: var(--color-content-neutral-strong);
	background-image: linear-gradient(
		rgba(var(--color-surface-neutral-faint-rgb), var(--button-alpha)),
		rgba(var(--color-surface-neutral-faint-rgb), var(--button-alpha))
	);

	font-size: 16px;
	font-weight: var(--fw-500);
	line-height: 20px;
	color: var(--color-content-neutral-reverse);
}

.catalog-page__load-more-count,
.catalog-page__load-more-label {
	padding: 12px;
}
.catalog-page__load-more-count {
	color: var(--count-color);
	order: -1;
}
.catalog-page__load-more-label {
	color: var(--label-color);
}
.catalog-page__load-more-button::before {
	content: '';
	display: flex;
	width: 1px;
	flex-shrink: 0;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--diveder-color) 50%,
		transparent 100%
	);
}

/* light version */
[data-load-more-variant="light"] {
	--catalog-preview-height: 220px;
}

:where([data-load-more-variant="light"]) .catalog-page__load-more {
	--border-color: var(--color-surface-neutral-soft);
	--border-hover-color: var(--color-border-accent-medium);
	--diveder-color: var(--color-border-neutral-soft);
	--count-color: var(--color-content-neutral-regular);
	--count-hover-color: var(--color-content-neutral-medium);
	--label-color: var(--color-content-neutral-medium);
	--label-hover-color: var(--color-content-neutral-strong);

	--margin-top: 12px;

	position: relative;
	inset: auto;
	padding: var(--margin-top) 0 0;
	height: auto;
	width: 100%;
	background: none;
}

[data-load-more-variant="light"] .catalog-page__load-more::after {
	inset: auto 1px calc(100% + 1px);
	height: var(--catalog-preview-height);
}

[data-load-more-variant="light"] .catalog-page__load-more-button {
	background-color: var(--color-surface-neutral-faint);
	color: var(--color-content-neutral-medium);
}


/* product-item */
:where(.catalog-page__items) .product-item {
	background-color: transparent;
	outline: 1px solid var(--border-color);
}
.catalog-page__items .product-item:hover,
.catalog-page__items .product-item:focus-visible {
	z-index: 1;
}
.catalog-page__items .product-item:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.catalog-page__items .product-item:last-child {
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
}

@media (min-width: 640px) {
	[data-catalog-load-more] {
		--catalog-preview-height: 206px;
	}

	.catalog-page__items {
		grid-template-columns: repeat(2, 1fr);
	}
	.catalog-page__items .product-item:nth-child(n) {
		border-radius: 0;
	}
	.catalog-page__items .product-item:first-child {
		border-top-left-radius: inherit;
	}
	.catalog-page__items .product-item:nth-child(2) {
		border-top-right-radius: inherit;
	}
	.catalog-page__items .product-item:nth-child(2n + 1):nth-last-child(-n + 2) {
		border-bottom-left-radius: inherit;
	}
	.catalog-page__items .product-item:nth-child(2n):last-child {
		border-bottom-right-radius: inherit;
	}

	.catalog-page__load-more {
		--padding: 32px;
	}
}

@media (max-width: 1139.98px) {
	.catalog-page__navigation,
	.catalog-page__navigation + hr {
		display: none;
	}
}

@media (min-width: 1140px) {
	.catalog-page__filter-button {
		display: none;
	}
	.catalog-page__side-group {
		padding: 8px;
		border-radius: 3px;
		box-shadow: inset 0 0 0 1px var(--color-border-neutral-soft);
	}
	.catalog-page__filter-result {
		bottom: 8px;
	}
	.catalog-page__items {
		grid-template-columns: repeat(3, 1fr);
	}
	.catalog-page__items .product-item:nth-child(2) {
		border-top-right-radius: 0;
	}
	.catalog-page__items .product-item:nth-child(2n + 1):nth-last-child(-n + 2) {
		border-bottom-left-radius: 0;
	}
	.catalog-page__items .product-item:nth-child(3) {
		border-top-right-radius: inherit;
	}
	.catalog-page__items .product-item:nth-child(3n + 1):nth-last-child(-n + 3) {
		border-bottom-left-radius: inherit;
	}
	.catalog-page__items .product-item:nth-child(3n):last-child {
		border-bottom-right-radius: inherit;
	}
}