.catalog-item {

}

/* gallery */
.catalog-gallery {
	padding-bottom: 20px;
}
.catalog-gallery__image {
	border-radius: 4px;
	aspect-ratio: 1;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px var(--neutral-0150);
	background: url('../../images/placeholder.svg') no-repeat center center / 48px var(--neutral-0100);
	overflow: hidden;
}
.catalog-gallery__image:has(img) {
	background: var(--neutral-0000);
}
.catalog-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.catalog-gallery._image-cover .catalog-gallery__image img {
	object-fit: cover;
}
.catalog-gallery__thumbnails {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.catalog-gallery__thumbnails:has(> :only-child) {
	display: none;
}
.catalog-gallery__thumbnail {
	--border-color: var(--neutral-0300);
	--border-opacity: 0;

	position: relative;
	width: 80px;
	height: 80px;
	background-color: var(--neutral-0100);
	border-radius: 4px;
	overflow: hidden;
}
.catalog-gallery__thumbnail._active {
	--border-color: var(--primary-0500);
	--border-opacity: 1;
}
.catalog-gallery__thumbnail::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
	box-shadow:
		inset 0px 0px 0px 2px var(--border-color),
		inset 0px 0px 0px 4px var(--neutral-0000);
	pointer-events: none;
	opacity: var(--border-opacity);
}
.catalog-gallery__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.catalog-gallery__thumbnail:hover,
.catalog-gallery__thumbnail:focus-visible {
	--border-opacity: 1;
}

/* content */
.catalog-item__content {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.catalog-item__group {
	position: relative;
	padding-block: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.catalog-item__content:first-child .catalog-item__group:first-child::before {
	content: none;
}

.catalog-item__group::before {
	content: '';
	position: absolute;
	top: -1px;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--neutral-0150) 0%, var(--neutral-0000) 100%);
}
.catalog-item__group-caption {
	flex-shrink: 0;
	font-weight: var(--fw-500);
	font-size: 20px;
	line-height: 24px;
	color: var(--neutral-1000);
}
.catalog-item__group-content {
	padding-top: 2px;
	flex-grow: 1;
	overflow: hidden;
}

/* params */
.catalog-item__params {
	display: grid;
	gap: 12px;

	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
	color: var(--neutral-0600);
}
.catalog-item__params > div {
	padding-left: 48px;
	background: var(--img-url) no-repeat left center / 40px;
}
.catalog-item__params dd {
	color: var(--neutral-1000);
}


.catalog-item__address {
	padding-bottom: 8px;
	display: flex;
	flex-direction: column;
	font-weight: var(--fw-400);
	font-size: 15px;
	line-height: 20px;
	color: var(--neutral-0600);
}
.catalog-item__address b {
	font-weight: var(--fw-500);
	color: var(--neutral-0800);
}

.catalog-item__map-button {
	margin-bottom: 8px;
}
.catalog-item__map-button input {
	display: none;
}
.catalog-item__map-button span::after {
	content: attr(data-more);
}
.catalog-item__map-button input:checked ~ span::after {
	content: attr(data-less);
}
.catalog-item__map-button input:checked ~ svg {
	transform: rotate(180deg);
}
.catalog-item__map-button:has(input:not(:checked)) + .content-map {
	height: 0;
	border-width: 0;
}

/* action buttons */
.catalog-item__action-buttons {
	display: flex;
	gap: 6px;
}
.catalog-item__action-buttons > * {
	flex: 1;
	padding-inline: 10px;
}
.catalog-item__action-buttons._sticky {
	position: sticky;
	bottom: 0;
	margin-top: -20px;
	padding-block: 24px 8px;
	z-index: 10;
	transform: translateY(100%);
	background: linear-gradient(360deg, var(--neutral-0000) 68.41%, transparent 100%);
	transition: transform 240ms ease-in-out;
}
.catalog-item__action-buttons._sticky._show {
	transform: translateY(0);
}

/* meta */
.catalog-meta {
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.catalog-meta._migrate:not(._show) {
	display: none;
}

.catalog-meta__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.catalog-meta__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.catalog-meta__price {
	display: flex;
	gap: 6px;
	font-weight: var(--fw-700);
	font-size: 32px;
	line-height: 32px;
	color: var(--neutral-0900);
}
.catalog-meta__price span {
	font-weight: var(--fw-600);
	color: var(--neutral-0400);
}
.catalog-meta__price-group small {
	font-weight: var(--fw-500);
	font-size: 16px;
	line-height: 24px;
	color: var(--neutral-0600);
}

.catalog-meta__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.catalog-meta__contract {
	display: flex;
	gap: 4px;
	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
	color: var(--neutral-0500);
}
.catalog-meta__contract span {
	color: var(--neutral-0900);
}

.catalog-meta__info {
	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
	color: var(--neutral-0600);
}
.catalog-meta__info._deadline {
	padding-left: 24px;
	background: url('../../images/i-deadline.svg') no-repeat left center;
}

/* catalog-meta-seller */
.catalog-meta-seller {
	--avatar-size: 48px;
	--avatar-radius: 4px;
	--name-color: var(--neutral-1000);

	display: flex;
	flex-direction: column;
	gap: 6px;
}
.catalog-meta-seller._simple {
	--avatar-size: 40px;
	--avatar-radius: 50%;
	--name-color: var(--neutral-0800);
}
.catalog-meta-seller__caption {
	font-weight: var(--fw-500);
	font-size: 15px;
	line-height: 20px;
	color: var(--neutral-0800);
}

.catalog-meta-seller__main {
	padding: 8px;
	display: flex;
	gap: 8px;
	background-color: var(--neutral-0050);
	box-shadow: inset 0 0 0 1px var(--neutral-0150);
	border-radius: 4px;
}
.catalog-meta-seller__avatar-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.catalog-meta-seller__avatar {
	--avatar-size: inherit;
	border-radius: var(--avatar-radius);
}

.catalog-meta-seller__rating {
	--gap: 2px;

	padding: 4px;
	border-radius: 4px;
	background-color: var(--neutral-0050);
	box-shadow: inset 0 0 0 1px var(--neutral-0150);
}
.catalog-meta-seller__avatar-group + .catalog-meta-seller__content {
	position: relative;
	padding: 4px 0 0 5px;
}
.catalog-meta-seller__avatar-group + .catalog-meta-seller__content::before {
	content: '';
	position: absolute;
	left: -2px;
	height: 100%;
	width: 1px;
	background: linear-gradient(180deg, var(--neutral-0050) 0%, var(--neutral-0150) 25%, var(--neutral-0150) 75%, var(--neutral-0050) 100%);
}

.catalog-meta-seller__name {
	font-weight: var(--fw-500);
	font-size: 15px;
	line-height: 20px;
	color: var(--name-color);
}
.catalog-meta-seller__city {
	padding: 2px 0 0 20px;
	font-weight: var(--fw-450);
	font-size: 14px;
	line-height: 20px;
	color: var(--neutral-0800);
	background: url('../../images/i-catalog-meta-city.svg') no-repeat left center;
}
.catalog-meta-seller__badges {
	padding-top: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.catalog-meta-seller__representative-group {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
	color: var(--neutral-0500);
}
.catalog-meta-seller__representative {
	padding: 1px 7px 1px 1px;
	display: flex;
	align-items: center;
	gap: 4px;
	background-color: var(--neutral-0050);
	border: 1px solid var(--neutral-0150);
	border-radius: 12px 4px 4px 12px;
	color: var(--neutral-0800);
}
.catalog-meta-seller__representative .avatar {
	--avatar-size: 20px;
}

@media (min-width: 768px) {
	.catalog-item__group {
		flex-direction: row;
	}
	.catalog-item__group-caption {
		width: 172px;
	}
	.catalog-item__params {
		grid-template-columns: 1fr 1fr;
	}
	.catalog-item__address-group {
		position: relative;
	}
	.catalog-item__address {
		padding-right: 130px;
	}
	.catalog-item__map-button {
		position: absolute;
		top: 2px;
		right: 0;
	}
}

@media (max-width: 1139.98px) {
	.catalog-gallery {
		margin-inline: calc(-1 * max(calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)), var(--container-padding)));
	}
	.catalog-gallery__thumbnails {
		display: none;
	}
	.catalog-meta {
		box-shadow: inset 0 -1px 0 var(--neutral-0150);
	}
	.catalog-item__group:first-child::before {
		content: none;
	}
}

@media (min-width: 1140px) {
	.catalog-gallery__slider {
		height: 420px;
		position: relative;
		overflow: hidden;
	}
	.catalog-gallery__image {
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		position: absolute !important;
		transition: opacity 240ms ease-in-out;
	}

	.catalog-gallery__slider:not(._init) .catalog-gallery__image,
	.catalog-gallery__image._hide {
		opacity: 0;
	}

	.catalog-item__content:first-child .catalog-item__group:first-child {
		padding-top: 0;
	}

	.catalog-item__action-buttons._sticky {
		display: none;
	}
}