/**
 * Product Catalogue — Figma shop page (685:1787).
 */

.product-catalogue {
	--product-catalogue-band-pad-block: var(--space-32);
	--product-catalogue-search-gap: 0.75rem; /* 12px */
	--product-catalogue-filter-gap: var(--space-16);
	--product-catalogue-chip-gap: 0.75rem; /* 12px */
	--product-catalogue-results-pad: var(--space-48);
	--product-catalogue-grid-gap: var(--space-32);
	--product-catalogue-card-media: 14rem; /* 224px */
	--product-catalogue-control-h: 3.625rem; /* 58px */

	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-bg-light);
}

.product-catalogue__search-band,
.product-catalogue__filter-band {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-bg-light);
	border-bottom: 1px solid var(--color-blue-200);
}

.product-catalogue__search-inner,
.product-catalogue__filter-inner {
	display: flex;
	align-items: center;
	min-width: 0;
	padding-block: var(--product-catalogue-band-pad-block);
}

.product-catalogue__search {
	display: flex;
	align-items: stretch;
	gap: var(--product-catalogue-search-gap);
	width: min(100%, 57.5625rem); /* 921px search row in Figma */
	max-width: 100%;
}

.product-catalogue__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--product-catalogue-control-h);
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--color-blue-200);
	border-radius: 0;
	background-color: var(--color-bg-white);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04375rem;
	color: var(--color-text-primary);
	box-sizing: border-box;
}

.product-catalogue__search-input::placeholder {
	color: var(--color-grey-blue-1);
}

.product-catalogue__search-input:focus {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 2px;
}

.product-catalogue__search-submit {
	flex: 0 0 auto;
	min-width: 12rem;
	height: var(--product-catalogue-control-h);
	padding-inline: var(--space-24);
	border-radius: 0;
	text-transform: uppercase;
}

.product-catalogue__filter-inner {
	justify-content: space-between;
	gap: var(--space-24);
	flex-wrap: wrap;
}

.product-catalogue__filters {
	display: flex;
	align-items: center;
	gap: var(--product-catalogue-filter-gap);
	flex: 1 1 auto;
	min-width: 0;
}

.product-catalogue__filter-label,
.product-catalogue__sort-label {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: 0.0875rem;
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.product-catalogue__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--product-catalogue-chip-gap);
	min-width: 0;
}

.product-catalogue__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--product-catalogue-control-h);
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	border: 1px solid var(--color-blue-200);
	background-color: var(--color-bg-white);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: 0.075rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-grey-blue-1);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-catalogue__chip:hover {
	border-color: var(--color-brand-secondary);
	color: var(--color-brand-secondary);
}

.product-catalogue__chip.is-active,
.product-catalogue__chip[aria-current='true'] {
	border-color: var(--color-brand-secondary);
	background-color: var(--color-brand-secondary);
	color: var(--color-text-inverse);
}

.product-catalogue__chip:focus-visible {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 2px;
}

.product-catalogue__sort {
	display: flex;
	align-items: center;
	gap: var(--product-catalogue-filter-gap);
	flex-shrink: 0;
}

.product-catalogue__sort-select {
	width: 7.125rem; /* 114px */
	height: 2.4375rem; /* 39px */
	margin: 0;
	padding: 0 0.5rem;
	border: 1px solid var(--color-blue-200);
	border-radius: 0;
	background-color: var(--color-bg-white);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-primary);
	box-sizing: border-box;
	cursor: pointer;
}

.product-catalogue__sort-select:focus {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 2px;
}

.product-catalogue__results {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding-block: var(--product-catalogue-results-pad);
	min-width: 0;
}

.product-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--product-catalogue-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-catalogue__item {
	min-width: 0;
}

.product-catalogue__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-blue-200);
	box-sizing: border-box;
	overflow: clip;
}

.product-catalogue__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--product-catalogue-card-media);
	background-color: var(--color-bg-card);
	overflow: clip;
}

.product-catalogue__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-catalogue__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: var(--space-24);
	min-width: 0;
}

.product-catalogue__cat {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1rem;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	color: var(--color-grey-blue-1);
}

.product-catalogue__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.0875rem;
	text-transform: uppercase;
	color: var(--color-brand-primary);
}

.product-catalogue__desc {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.625;
	color: var(--color-text-secondary);
}

.product-catalogue__cta {
	width: 100%;
	margin-top: auto;
}

.product-catalogue__empty {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-secondary);
}

.product-catalogue__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.product-catalogue__pages {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-catalogue__pager-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-pager-number-size);
	color: var(--btn-pager-text);
}

@media (max-width: 1439px) {
	.product-catalogue__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.product-catalogue__search {
		flex-direction: column;
		width: 100%;
	}

	.product-catalogue__search-submit {
		width: 100%;
		min-width: 0;
	}

	.product-catalogue__filters {
		flex-direction: column;
		align-items: flex-start;
	}

	.product-catalogue__chips {
		width: 100%;
	}

	.product-catalogue__chip {
		flex: 1 1 auto;
	}

	.product-catalogue__sort {
		width: 100%;
		justify-content: space-between;
	}

	.product-catalogue__sort-select {
		flex: 1 1 auto;
		width: auto;
	}

	.product-catalogue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.product-catalogue__body {
		padding: var(--space-16);
	}
}

@media (max-width: 479px) {
	.product-catalogue__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}