/* Страница готового ПК */

.product-sections {}

#chart {
	scroll-margin-top: 6.25rem;
}

#hardwares {
	margin-bottom: 10.9375rem;
}

.hardware-anchors:not(.configurator-anchors) .anchors-overlay {
	visibility: hidden;
}

.hardware-anchors:not(.configurator-anchors).anchors-ready .anchors-overlay {
	visibility: visible;
}



/* Список комплектующих готового ПК */

.hardware-list {
	width: 100%;
	max-width: 81.25rem;
	margin: 0 auto;
	margin-bottom: 11.25rem;
}

.hardware-list__item {
	gap: 6.25rem;
	padding: 4.25rem 0;
	position: relative;
	scroll-margin-top: 6.25rem;
}

.hardware-list__item:nth-child(odd) {
	flex-direction: row-reverse;
}

.hardware-list__item::before {
	content: '';
	width: 100vw;
	height: 0.125rem;
	position: absolute;
	left: 50%;
	bottom: 0;
	background-size: 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='1920' height='2' viewBox='0 0 1920 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.27835e-08 0.625C-1.09278e-08 0.875 1.09278e-08 1.125 3.27835e-08 1.375C32 1.41666 64 1.45624 96 1.49374C384 1.83122 672 1.99994 960 1.99992C1248 1.99989 1536 1.83112 1824 1.49359C1856 1.45609 1888 1.4165 1920 1.37483C1920 1.12483 1920 0.874832 1920 0.624832C1888 0.583168 1856 0.543588 1824 0.506091C1536 0.168616 1248 -0.000109104 960 -8.39259e-05C672 -5.87481e-05 384 0.168716 96 0.506242C64 0.543744 32 0.583331 -3.27835e-08 0.625Z' fill='url(%23paint0_linear_327_16873)' /%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_327_16873' x1='4.37107e-08' y1='1.49999' x2='1920' y2='1.49982' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23141414' /%3E%3Cstop offset='0.5' stop-color='%230060F0' /%3E%3Cstop offset='1' stop-color='%23141414' /%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	transform: translate(-50%);
}


.hardware-list-item__text {
	width: calc(50% - 3.125rem);
	gap: 3.5rem;
	position: relative;
	z-index: 1;
}

.hardware-list-item__text>div>p {
	margin: 0 0 1.5625rem 0;
}


.hardware-list-item__text>div>p:last-child {
	margin: 0;
}

.hardware-list-item__text h2 {
	margin: 0;
}

.hardware-list-item__img {
	width: calc(50% - 3.125rem);
	position: relative;
	z-index: 1;
	background: radial-gradient(
		ellipse 75% 55% at 50% 50%,
		color-mix(in srgb, var(--main-blue) 20%, transparent) 0%,
		transparent 70%
	);
}

.hardware-list-item__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: 20.625rem;
	position: relative;
	z-index: 1;
}

.hardware-list__item h2 {
	margin-bottom: 0.75rem;
}

.hardware-list__item h3 {
	margin-bottom: 2.25rem;
}


.product-info-gallery {
	width: 50%;
}

.single-portfolio .product-info-gallery {
	width: 75%;
	margin: 0 auto 2.25rem;
}


.product-info-gallery img.no-product {
	width: 50%;
	height: auto;
	object-fit: contain;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.product-gallery-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 100%;
	aspect-ratio: 86 / 72;
}

.product-gallery__item {
	height: 100% !important;
}


.product-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* aspect-ratio: 86 / 72; */
}

.product-info-text {
	width: 50%;
	background: var(--dark-grey);
	border-radius: 0 0.625rem 0.625rem 0;
	padding: 3rem 4rem;
	overflow: hidden;
}

.product-info-text__title {
	gap: 1.375rem;
}

.product-info-text__title h1 {
	margin: 0;
}

.compare {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	gap: 0.75rem;
	color: #fff;
	font-size: 1rem;
}

.compare span {
	transition: .2s;
}

.compare span svg path {
	transition: .2s;
}


.compare:hover span {
	transition: .2s;
	color: var(--main-blue);
}

.compare:hover span svg path {
	transition: .2s;
	fill: var(--main-blue);
}

.product-info {
	margin-bottom: 1.5rem;
	z-index: 1;
	position: relative;
}

.product-info-text__container {
	gap: 2.25rem;
}

.product-info__price {
	gap: 0.75rem;
}

.product-info__price .price-full {
	color: var(--main-blue);
	font-size: 2rem;
}


.chars-table {
	width: 100%;
}

.chars-table td {
	width: 50%;
	padding: 0.75rem 0;
	border-bottom: 0.0625rem solid var(--black);
}

.chars-table tr:first-child td {
	padding-top: 0;
}

.chars-table tr:last-child td {
	border: none;
}

.char-value {
	padding-left: 0.9375rem;
}

.product-info__buttons>* {
	width: calc(50% - 1.125rem);
	gap: 0.75rem;
}

.product-info__buttons {
	gap: 2.25rem;
	z-index: 3;
}

.credit-slide {
	gap: 0.75rem;
	cursor: pointer;
}

.credit-slide img {
	transition: .2s;
	border-radius: 0.625rem;
	max-width: 175px;
	width: 100%;
	object-fit: contain;
}

.credit-item {
	width: 10.6875rem !important;
	margin-right: 0;
	cursor: pointer;
}

.product-info__credits {
	overflow-x: hidden;
	margin-top: -1.875rem;
	width: calc(100% + 1.875rem);
	margin-left: -1.875rem;
	padding: 1.875rem 0 0 1.875rem;
	position: relative;
}

.credits-swiper {
	/* position: relative; */
}

.credits-swiper::before {
	content: '';
	width: 1.875rem;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, #141414 100%);
	z-index: 2;
}

.credits-swiper::after {
	content: '';
	width: 1.875rem;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #141414 100%);
	z-index: 2;
}

#credit-dialog {
	width: calc(100% - 1.875rem);
	max-width: 36.5625rem;
	border: none;
	padding-top: 2.1875rem;
	background: transparent;
	padding: 2.1875rem 0 0 0;
	overflow: hidden;
}

#credit-dialog>form {
	position: absolute;
	right: 0;
	top: 0.3125rem;
}

#credit-dialog>form>button {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0.3125rem;
	transition: .2s;
	will-change: transform;
}

.dialog-content {
	position: relative;
	height: 100%;
	background:
		radial-gradient(
			ellipse 21.25rem 11.875rem at 100% 100%,
			color-mix(in srgb, var(--main-blue) 20%, transparent) 0%,
			transparent 75%
		),
		var(--dark-grey);
	border-radius: 0.625rem;
	padding: 1.5rem;
	overflow: hidden;
	transition: .2s;
	color: #fff;
	gap: 1.5rem;
}

.credit-info-list {
	background: #fff;
	color: var(--black);
	border-radius: 0.625rem;
	padding: 1rem 0.625rem;
	gap: 0.625rem;
	transition: .2s;
}

.credit-info-item>* {
	width: calc(50% - 0.75rem);
}

.credit-info-item {
	gap: 1.5rem;
}

.credit-info-item>*:last-child {
	color: var(--main-blue);
}

#credit-dialog .pretty-button {
	width: 100%;
}


.bank-list {
	display: none;
	gap: 0.3125rem;
	background: #fff;
	color: var(--black);
	border-radius: 0.625rem;
	padding: 1rem 0.625rem;
	position: absolute;
	pointer-events: none;
	transition: .2s;
	opacity: 0;
	top: calc(100% + 0.625rem);
	left: 0;
	width: 100%;
	overflow: hidden;
}

.bank-list-items {
	overflow-y: auto;
	max-height: 9.375rem;
	height: 100%;
	width: 100%;
}

.bank-list-items::-webkit-scrollbar {
	width: 0.375rem;
	border-radius: 0.625rem;
}

.bank-list-items::-webkit-scrollbar-thumb {
	background-color: var(--main-blue);
	border-radius: 0.625rem;
	width: 0.25rem;
	border: 0.0625rem solid #d9d9d9;
}

.bank-list-items::-webkit-scrollbar-track {
	background: #d9d9d9;
	border-radius: 0.625rem;
	padding: 0.0625rem;
}



.bank-list.open {
	display: flex;
	pointer-events: all;
	opacity: 1;
}


@starting-style {
	.bank-list {
		top: calc(100% + 1.875rem)
	}
}

.banks-list-content {
	position: relative;
	z-index: 2;
}

.banks-list-content>p {
	margin-bottom: 0.3125rem;
}

.active-bank {
	width: 100%;
	padding: 1rem 2.5rem 1rem 0.625rem;
	border-radius: 0.625rem;
	font-size: 1rem;
	text-align: start;
	position: relative;
}

.active-bank::before {
	content: '';
	width: 0.625rem;
	height: 0.625rem;
	position: absolute;
	right: 0.625rem;
	top: calc(50% - 0.3125rem);
	background-position: center;
	background-size: contain;
	transition: .2s;
	background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.65375 0.000129798L4.32688 6.79492L0 0.000130177L8.65375 0.000129798Z' fill='%23141414' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
}


.banks-list-content:has(.bank-list.open) .active-bank::before {
	transform: rotateX(-180deg);
	transition: .2s;
}


.dialog-content:has(.bank-list.open) .credit-info-list {
	opacity: .5;
	transition: .2s;
}


.bank-list__item {
	padding: 0.625rem;
	transition: .2s;
	border-radius: 0.625rem;
	cursor: pointer;
}

.bank-list__item:hover {
	background: #0000000a;
}

.bank-list__item.active {
	color: var(--main-blue);
}


@media screen and (min-width: 1024px) {
	.credit-slide:hover img {
		box-shadow: 0 0 1.375rem 0.5625rem #0060f0;
		transition: .2s;
	}
}

@media screen and (max-width: 1499px) {
	.hardware-list__item {
		padding: 2.5rem 0;
		gap: 3rem;
	}

	.hardware-list {
		margin-bottom: 6.25rem;
		max-width: calc(100% - 110px);
		padding: 0 15px;
	}

	.hardware-list-item__text {
		width: calc(50% - 1.5rem);
	}

	.hardware-list-item__img {
		width: calc(50% - 1.5rem);

	}
}


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

	.product-info-text__container {
		gap: 1.5rem;
	}

	.product-info-text {
		padding: 2rem;
	}

	.product-info-text__title h1 {
		font-size: 1.7rem;
	}

	.product-info__price .price-full {
		font-size: 1.7rem;
	}

	.hardware-list-item__img img {
		max-height: 15rem;
	}

	.hardware-list__item h3 {
		margin-bottom: 1.5rem;
	}

	#hardwares {
		margin-bottom: 6.25rem;
	}

}

@media screen and (max-width: 1023px) {
	.hardware-anchors {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.hardware-anchors::-webkit-scrollbar {
		display: none;
	}

	.hardware-anchors > li:not(.anchors-overlay) {
		flex-shrink: 0;
		min-width: 8rem;
	}

	.hardware-anchors li.anchors-overlay {
		top: 0;
		bottom: 0;
		height: auto;
	}

	.product-info-gallery {
		width: 100%;
		margin: 0 auto;
	}

	.single-portfolio .product-info-gallery {
		width: 100%;
	}

	.product-info-text {
		width: 100%;
		padding: 1.5rem 1rem;
		border-radius: 0;
	}

	.product-info__buttons>* {
		width: calc(50% - .75rem);
		white-space: nowrap;
	}

	.product-info__buttons {
		gap: 1.5rem;
	}

	.credits-swiper::after {
		width: 1rem;
	}

	.hardware-list__item h2 {
		font-size: 1.5rem;
	}

	.hardware-list__item h3 {
		margin-bottom: 1rem;
	}

	.hardware-list__item {
		padding: 1.5rem 0;
		gap: 2rem;
	}

	.hardware-list-item__text {
		width: calc(50% - 1rem);
	}

	.hardware-list-item__img {
		width: calc(50% - 1rem);

	}

	.hardware-list {
		margin-bottom: 3.25rem;
		max-width: 100%;
	}

	.anchors {
		margin-bottom: 2.5rem;
		top: 64px;
	}

	#hardwares {
		margin-bottom: 3.25rem;
	}

	.anchors__title {
		font-size: 1.5rem;
		padding: .75rem;
	}

	.pc-build-container {
		flex-direction: column-reverse;
	}

	.product-info {
		margin-bottom: 0;
		z-index: 1;
		position: relative;
	}

	.bank-list-items {
		max-height: 12rem;
	}

	.product-info-gallery img.no-product{
		display: none;
	}
}


@media screen and (max-width: 767px) {
	.anchors__title {
		opacity: 1;
		transform: translateY(0);
		transition: opacity .2s ease, transform .2s ease;
	}

	.anchors.anchors--stuck .anchors__title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		transform: translateY(-.5rem);
		pointer-events: none;
	}

	.product-info-text__container {
		gap: 1rem;
	}

	.credit-item {
		width: 8.5rem !important;
	}

	.credits-swiper {
		overflow: hidden;
	}

	.hardware-list-item__text {
		width: 100%;
	}

	.hardware-list-item__img img {
		margin: 0 auto;
		display: block;
	}

	.hardware-list-item__img{
		width: 75%;
		margin: 0 auto;
	}

	.hardware-list__item {
		gap: 1rem;
	}
}



@media screen and (max-width: 635px) {
	.hardware-list-item__img img {
		max-height: 10rem;
	}
}