.equipments-cards {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 20px;
}

.equipments .container {
	position: relative;
}

.equipments-selects {
	position: absolute;
	top: 0;
	right: 20px;
	display: flex;
	gap: 14px;
}

.equipments-selects .ss-main {
	padding: 0 14px;
	border: none;
	border: 1px solid #c3b7b7;
	border-top-left-radius: 28px;
	border-top-right-radius: 28px;
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
	max-width: 260px;
	width: 260px;
	background-color: var(--color-white);
	transition: border-radius 0.3s ease;
}

.equipments-selects .ss-main.ss-dir-below {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.equipments-selects .ss-main:focus {
	box-shadow: none;
}

.equipments-selects .ss-values:focus-visible,
.equipments-selects .ss-value:focus-visible {
	outline: none;
}

.equipments-selects .ss-main .ss-values .ss-placeholder {
	font-size: 16px;
	line-height: 100%;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #000;
}

.equipments-selects .ss-main .ss-values .ss-single {
	font-size: 16px;
	line-height: 100%;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #000;
}

.equipments-selects .ss-content .ss-list .ss-option {
	font-size: 16px;
	font-weight: 400;
	color: #212121;
}

@media (hover: hover) {
	.ss-content .ss-list .ss-option:not(.ss-disabled):hover,
	.ss-content .ss-list .ss-option:hover:not(.ss-disabled) {
		background: var(--color-accent);
		border-left: none;
	}
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
	background: var(--color-accent);
}

.ss-main .ss-values .ss-value,
.ss-main .ss-values .ss-max {
	border-radius: 0;
	background: red;
}

.equipments-selects .ss-main.ss-disabled {
	background: none;
}

.equipments-selects .ss-main.ss-disabled .ss-values .ss-placeholder {
	color: #a2a2a2;
}

.equipments-selects .ss-content .ss-search input {
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

.equipments-selects .ss-content .ss-search input:focus {
	box-shadow: none;
}

.equipments-selects .placeholder-uppercase,
.equipments-selects .placeholder-uppercase option {
	text-transform: none;
}

.equipments-selects .placeholder-uppercase option:disabled:checked {
	text-transform: uppercase;
}

.ss-new-arrow {
	transition: all 0.3s ease;
}

.ss-main.ss-dir-below .ss-new-arrow {
	transform: rotateX(180deg);
	margin-top: 5px;
}

.equipments-item {
	background-color: var(--color-white);
	border-radius: 10px;
	height: 200px;
	padding: 20px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	align-items: center;
}

.equipments-item-info {
	position: relative;
	height: 100%;
}
.equipments-item-info-name {
	font-size: 30px;
	margin-bottom: 15px;
}
.equipments-item-info-equip-wrap:hover {
    overflow: scroll;
}
.equipments-item-info-equip-wrap {
    max-width: 200px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 86px;
    overflow: hidden;
    /* overflow: scroll; */
}
.equipments-item-info-equip {
	color: var(--color-accent);
	background-color: #fbdce1;
	font-size: 14px;
	line-height: 1;
	padding: 6px 16px;
	border-radius: 24px;
}

.equipments-item-info-brand-img {
	max-width: 210px;
	width: 100%;
	/* position: absolute;
	left: 0;
	bottom: 0; */
    margin-left: auto;
    margin-bottom: 20px;
}

.equipments-item-info-brand-img-mobile {
	display: none;
}
.equipments-item-info-car-img {
	max-width: 270px;
	position: absolute;
	right: 70px;
	bottom: -20px;
}

.equipments-specs {
	max-width: 530px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 236px);
	grid-template-rows: repeat(2, auto);
	column-gap: 56px;
	row-gap: 16px;
}
.equipments-specs-item {
	display: flex;
	justify-content: space-between;
	padding-bottom: 12px;
	position: relative;
	font-size: 14px;
}

.equipments-specs-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-image: repeating-linear-gradient(to right, #d5d5d5 0, #d5d5d5 6px, transparent 6px, transparent 12px);
}
.equipments-specs-item-name {
	font-size: 14px;
}
.equipments-specs-item-value {
	font-size: 14px;
}

.equipments-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-left: auto;
}

.equipments-button-credit {
	max-width: unset;
	width: 260px;
	height: 50px;
}

.equipments-button-offer {
	max-width: unset;
	width: 260px;
	height: 50px;
}

.equipments-cards-more-btn {
	height: 50px;
	max-width: 260px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 1540px) {
	.equipments-selects .ss-main {
		max-width: 230px;
		width: 230px;
	}
	.equipments-specs {
		max-width: 236px;
		display: flex;
		flex-direction: column;
		row-gap: 4px;
		margin-left: auto;
		margin-right: 60px;
	}

	.equipments-specs-item {
		padding-bottom: 10px;
	}
	.equipments-item-info-name {
		font-size: 24px;
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 1200px) {
	.equipments-button-credit,
	.equipments-button-offer {
		width: 200px;
	}
	.equipments-specs {
		margin-right: 40px;
	}
}

@media screen and (max-width: 1100px) {
	.equipments-selects {
		position: unset;
		margin-bottom: 20px;
	}

	.equipments-selects .ss-main {
		max-width: 100%;
		width: 100%;
	}

	.equipments-item-info-car-img,
	.equipments-item-info-brand-img {
		position: unset;
	}
	.equipments-item {
		height: 270px;
	}
	.equipments-item-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.equipments-item-info-name {
		margin-bottom: 0;
	}
	.equipments-specs {
		margin-left: unset;
		margin-right: unset;
	}
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 920px) {
	.equipments-cards {
		gap: 12px;
		margin-top: 20px;
		margin-bottom: 16px;
	}

	.equipments-item {
		height: 100%;
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		gap: 16px;
		display: flex;
	}

	.equipments-item-info {
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.equipments-item-info-name {
		font-size: 20px;
		margin-bottom: 0;
		line-height: 1.2;
	}

	.equipments-item-info-brand-img {
		max-width: 100%;
		position: relative;
		left: 0;
		bottom: 0;
		margin-top: 8px;
	}

	.equipments-item-info-car-img {
		max-width: 100%;
		position: relative;
		right: 0;
		bottom: 0;
		/* margin-top: -20px; */
		align-self: flex-end;
	}

	.equipments-specs {
		max-width: 100%;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 16px;
		row-gap: 12px;
		margin: 0;
	}

	.equipments-specs-item {
		font-size: 12px;
		padding-bottom: 8px;
		align-items: flex-start;
		gap: 4px;
	}

	.equipments-buttons {
		width: 100%;
		flex-direction: column;
		gap: 8px;
	}

	.equipments-button-credit,
	.equipments-button-offer {
		width: 100%;
		max-width: 100%;
		height: 48px;
		font-size: 14px;
	}

	.equipments-cards-more-btn {
		max-width: 214px;
		width: 100%;
		font-size: 14px;
	}
}

@media screen and (max-width: 768px) {
	.equipments-selects {
		flex-direction: column;
		gap: 8px;
	}

	.equipments-title {
		font-size: 24px;
	}

	.equipments-item-info-name {
		font-size: 18px;
	}

    .equipments-item-info-equip-wrap {
        max-width: 100%;
    }

	.equipments-item-info-brand-img {
		display: none;
	}

	.equipments-item-info-brand-img-mobile {
		display: block;
		max-width: 100%;
		width: 100%;
	}

	.equipments-specs {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}

	.equipments-specs-item {
		justify-content: space-between;
		align-items: center;
	}
}

@media screen and (max-width: 540px) {
	.equipments-item {
		gap: 12px;
	}

	.equipments-specs-item {
		font-size: 11px;
		padding-bottom: 6px;
	}

	.equipments-button-credit,
	.equipments-button-offer {
		height: 44px;
		font-size: 13px;
	}

	.equipments-cards-more-btn {
		height: 44px;
		font-size: 13px;
	}
}

.filtered-show,
.showmore-show {
	transition: 0.3s;

	opacity: 1;
}

.filtered-hide,
.showmore-hide {
	display: none;
	/* opacity: 0; */
}

.js--show-more.hidden {
	display: none;
}