.catalog {
	padding: 45px 40px 135px;
	background: #ffffff;
	font-family: var(--vk-font);
}

.catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 90px 20px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Каталог разбит на два блока: сначала своё производство, ниже остальное. */

.catalog--focus {
	padding-bottom: 70px;
}

.catalog--general {
	padding-top: 0;
}

.catalog__heading {
	max-width: 1360px;
	margin: 0 auto 45px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

.catalog__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1360px;
	margin: 55px auto 0;
	padding: 0;
	list-style: none;
}

.catalog__links-link {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid #e0ddd6;
	color: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--vk-transition), color var(--vk-transition);
}

.catalog__links-link:hover {
	border-color: var(--vk-accent);
	color: var(--vk-accent);
}

/* Вариант с боковым фильтром: колонка фильтра и колонка витрины */

.catalog--aside {
	padding: 45px 50px 135px;
}

/* Витрина с фильтром тянется на всю ширину окна: на широком мониторе карточка
   становится шире и обе кнопки встают в одну строку. Ограничения по ширине нет. */
.catalog__inner {
	width: 100%;
}

.catalog__layout {
	display: grid;
	grid-template-columns: 297px minmax(0, 1fr);
	column-gap: 30px;
	align-items: start;
}

.catalog__sidebar {
	padding: 30px;
	background: #ffffff;
}

.catalog__main {
	min-width: 0;
}

/* Витрина с фильтром занимает всю ширину окна, поэтому в ряд идут четыре изделия */
.catalog--aside .catalog__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: none;
}

/* Поиск и сортировка над витриной */

.catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px 20px;
	margin-bottom: 20px;
}

.catalog__search {
	position: relative;
	width: 220px;
}

.catalog__search-field {
	width: 100%;
	min-width: 0;
	height: 27px;
	padding: 0 30px 0 10px;
	border: 1px solid #dddddd;
	border-radius: 3px;
	background: #f8f8f8;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	color: #000000;
	appearance: none;
}

.catalog__search-field::-webkit-search-cancel-button {
	appearance: none;
}

.catalog__search-icon {
	position: absolute;
	top: 50%;
	right: 9px;
	width: 13px;
	height: 13px;
	margin-top: -7px;
	fill: #3f3f3f;
	pointer-events: none;
}

.catalog__sort {
	width: 200px;
	height: 28px;
	padding: 2px 26px 2px 10px;
	border: 1px solid #dddddd;
	border-radius: 3px;
	background-color: #f8f8f8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23333' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	color: #000000;
	appearance: none;
	cursor: pointer;
}

/* Кнопка догрузки следующей порции */

.catalog__more {
	display: block;
	min-height: 45px;
	margin: 50px auto 0;
	padding: 8px 30px;
	border-radius: 4px;
}

.catalog__more[hidden] {
	display: none;
}

.catalog__empty {
	margin: 60px 0 0;
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	color: #666666;
}

.catalog__empty[hidden] {
	display: none;
}

.catalog-card[hidden] {
	display: none;
}

/* Карточка товара каталога */

.catalog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: center;
}

.catalog-card__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Изделие без снимка: место под фото остаётся, иначе ряд карточек съедет */
.catalog-card__image--empty {
	background: #f2f2f2;
}

.catalog-card__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #000000;
	overflow-wrap: anywhere;
}

.catalog-card__note {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.55;
	color: #000000;
	overflow-wrap: anywhere;
}

.catalog-card__price {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
}

/* Цену не назначили — вместо неё спокойная подпись, а не пустое место. */
.catalog-card__price--order {
	color: #6b6459;
}

.catalog-card__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: auto;
}

.catalog-card__button {
	min-height: 45px;
	padding: 8px 30px;
	border-radius: 4px;
}

/* Подробная карточка: фотография вписана целиком, текст слева, есть описание */

.catalog-card--detailed {
	text-align: left;
}

.catalog-card--detailed .catalog-card__image {
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.catalog-card--detailed .catalog-card__title {
	font-weight: 600;
}

/* Описание есть не у всех изделий: без него до цены остаётся тот же зазор,
   что и от описания, — ряд карточек не разъезжается. */
.catalog-card--detailed .catalog-card__title:has(+ .catalog-card__price) {
	margin-bottom: 12px;
}

.catalog-card--detailed .catalog-card__price {
	margin-bottom: 40px;
}

.catalog-card--detailed .catalog-card__buttons {
	justify-content: flex-start;
	gap: 8px;
}

.catalog :focus-visible {
	outline: 2px solid var(--vk-accent);
	outline-offset: 3px;
}

/* Кнопка раскрытия фильтра — только на узких экранах */

.catalog__filter-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #000000;
	cursor: pointer;
}

.catalog__filter-toggle-icon {
	width: 11px;
	height: 17px;
	fill: currentColor;
}

/* Страница изделия */

.product-single {
	padding: 45px 20px 135px;
	background: #ffffff;
	font-family: var(--vk-font);
}

.product-single__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	max-width: 1160px;
	margin: 0 auto;
	align-items: start;
}

.product-single__image {
	display: block;
	width: 100%;
	height: auto;
}

.product-single__note {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.55;
	color: #000000;
}

.product-single__price {
	margin: 0 0 30px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.4;
	color: #000000;
}

.product-single__button {
	min-height: 45px;
	margin-bottom: 40px;
	padding: 8px 40px;
	border: 0;
	border-radius: 4px;
	font-family: inherit;
	cursor: pointer;
}

.product-single__descr {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	color: #000000;
}

.product-single__descr > * + * {
	margin-top: 20px;
}

/* Media */

@media (min-width: 1024px) {
	/* На широком экране фильтр открыт всегда: тумблер узких экранов его не прячет */
	.catalog__sidebar[hidden] {
		display: block;
	}
}

@media (max-width: 1279px) {
	.catalog--aside {
		padding: 45px 20px 90px;
	}

	.catalog__layout {
		grid-template-columns: 250px minmax(0, 1fr);
		column-gap: 20px;
	}

	.catalog__sidebar {
		padding: 0 20px 0 0;
	}

	.catalog--aside .catalog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 50px 20px;
	}
}

@media (max-width: 1023px) {
	.catalog {
		padding: 45px 20px 90px;
	}

	.catalog__grid,
	.catalog--aside .catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 50px 20px;
	}

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

	.catalog__sidebar {
		padding: 0;
		margin-bottom: 30px;
	}

	.catalog__filter-toggle {
		display: inline-flex;
	}

	.product-single {
		padding-bottom: 90px;
	}

	.product-single__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 35px;
	}
}

@media (max-width: 559px) {
	.catalog {
		padding-bottom: 60px;
	}

	.catalog__grid,
	.catalog--aside .catalog__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.catalog__toolbar {
		justify-content: stretch;
	}

	.catalog__search,
	.catalog__sort {
		flex: 1 1 140px;
		width: auto;
	}
}