@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');


input[type="search"]::-webkit-search-cancel-button
{
  -webkit-appearance:none;
}
button{
    font-family: Play;
    border-radius: 0;
    border:0;
}
html{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Play', serif;
    width: 100%;
    margin: 0;
    background-color: #000;
}
h1{
    font-size: 30pt;
}
h2{
    color: #fff;
    font-size: 30px;
    width: auto;
    margin: 0;
    margin-bottom: 20px;
}
p{
    font-family: 'Play', serif;
    margin: 0;
    font-size: 16px;
    color: #fff;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #a3a3a3;
}
input{
    font-family: Play;
    color: #fff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.header-wrapper{
    border-bottom: 2px solid #9f0e0e;
    height: 48px;
    width: 100%;
    position: fixed;
    z-index: 4;
    background-color: #000000;
    top: 0;
}
.burger-menu-button{
    display: none;
    color: #fff;
    border: 0;
    background-color: #000;
    height: 48px;
    padding-top: 17px;
    justify-content: space-evenly;
    width: fit-content;
    cursor: pointer;
}
.burger-menu-button img{
    width: 15px;
    height: 15px;
}
.burger-menu-button:hover{
    background-color: #9f0e0e;
    transition: 0.3s;
}
.burger-menu-wrapper {
    position: fixed;
    top: 0;
    left: -300px; /* Прячем за левый край */
    width: 250px;
    height: 100vh;
    background-color: #000;
    z-index: 4;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 50px;
    transition: left 0.3s ease-in-out;
}
.burger-menu-container{
    padding-left: 50px;
}
.burger-menu-container .header-connect-buttons{
    margin-top: 20px;
    display: none;
}
.burger-menu-container button{
    justify-content: flex-start;
}
.burger-menu-container .header-logo{
    margin-bottom: 20px;
}
.burger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Затемнение */
    backdrop-filter: blur(5px); /* Размытие */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.burger-menu-wrapper.active {
    left: 0;
}

.burger-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.header-logo{
    margin-right: 50px;
    width: 115px;
    cursor: pointer;
}
.header-body{
    max-width: 1600px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}
.header-left-part{
    max-width: 963px;
    display: flex;
    justify-content: flex-start;
}
.header-nav-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    height: 48px;
    position: relative;
}
.header-nav-button{
    background-color: #000;
    width: fit-content;
    height: 48px;
    padding-top: 17px;
    border: 0;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    width: fit-content;
    cursor: pointer;
}
.header-button-icon
{
    width: 15px;
    height: 15px;
}
.header-nav-button:hover{
    transition: 0.3s;
    background-color: #9f0e0e;
}
.header-nav-button-label{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    white-space: nowrap;
}
.header-right-part{
    max-width: 480px;
    margin-left: 20px;
    width: 100%;
    height: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.header-search{
    background-color: #131313;
    border: 0;
    font-family: Play;
    max-width: 400px;
    min-width: 150px;
    width: 100%;
    color: #fff;
    background-image: url('assets/icons/search-icon.svg');
    background-position: 95%; 
    background-repeat: no-repeat;
    text-indent: 5px;
    color: #a3a3a3;
    height: 30px;
}
.header-search::placeholder{
    font-family: Play;
    text-indent: 5px;
    color: #a3a3a3;
}
.header-search:focus{
    outline: 2px solid #9f0e0e;
}
.header-connect-buttons{
    max-width: 110px;
    display: flex;
    gap: 5px;
}
.header-connect-button{
    background-color: #000;
    width: fit-content;
    height: fit-content;
    border: 0;
    padding: 0;
}
.header-connect-icon{
    cursor: pointer;
}
.header-connect-icon:hover ellipse{
    transition: 0.3s;
    fill: #E08026;
}
.header-functional-buttons{
    max-width: 94px;
    display: flex;
    gap: 10px;
    margin-top: 3px;
    
}
.header-functional-buttons button{
    background: none;
    padding: 0;
    margin: 0;
    border:0;
    position: relative;
    
}
.header-funcbutton-icon{
    height: 24px;
    width: 24px;
    cursor: pointer;
}
.header-more-button{
    position: relative;
}
.goods-counter{
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #9f0e0e;
    border-radius: 50%;
    position: absolute;
    right: -10px;
    bottom: -10px;
    text-align: center;
}
.header-more-menu {
    display: none;
    position: fixed;
    flex-direction: column;
    top: 48px;
    background:#131313;
    border: 2px solid #9f0e0e;
    z-index: 5;
    width: fit-content;
}

.header-more-menu button {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: flex-start;

}
.header-more-menu button:hover {
    background-color: #9f0e0e;
}
.catalogue-menu {
    position: fixed;
    top: 50px;
    z-index: -1;
    left: 0;
    display: none;
    max-width: 1200px;
    min-width: 900px;
    min-height: 200px;
    font-size: 14px;
    background-color: #131313;
    border-bottom: 2px solid #9f0e0e;
    border-left: 2px solid #9f0e0e;
    border-right: 2px solid #9f0e0e;
    color: #fff;
    z-index: 6;
}
.catalogue-menu.burger-active {
    max-width: fit-content;
    border-top: 2px solid #9f0e0e;
    min-width: auto;
    margin-top: 45px;
    height: auto;
}
.catalogue-menu.burger-active .category-content{
    height: auto;
}
.catalogue-menu.burger-active .category-list{
    flex-direction: column;
    margin-bottom: 10px;
}
.catalogue-menu.burger-active .catalogue-divider{
    height: 22vh;
    margin-bottom: 0;
    margin-top: 10px;

}
.catalogue-menu-left ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.catalogue-menu-left ul li {
    padding: 10px;
    cursor: pointer;
}

.catalogue-menu-left ul li:hover {
    background-color: #9f0e0e;
}
.catalogue-menu-left li{
    width: 200px;
    text-indent: 10px;
    display: flex;
    justify-content: space-between;
}
.catalogue-divider{
    width: 1px;
    height: 170px;
    margin-left: 20px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #a3a3a3;
}
.catalogue-menu-right {
    width: 80%;
    min-height: 180px;
    padding: 20px;
}

.category-content {
    display: none; /* Скрываем все категории по умолчанию */
}

.category-content.active {
    display: block; /* Показываем активную категорию */
}

/* Показываем меню при наведении на кнопку "КАТАЛОГ" */
.header-catalogue-button:hover + .catalogue-menu,
.catalogue-menu:hover {
    display: flex;
}
.catalogue-category-title{
    margin-top: 0;
    margin-bottom: 20px;
}
.category-list{
    max-width: 800px;
    height: auto;
    color: #a3a3a3;
    display: flex;
    justify-content: flex-start;
}
.computers-list-titles{
    margin: 0;
    padding: 0;
    margin-right: 20px;
}
.category-list li{
    height: fit-content;
    width: 260px;
    margin-bottom: 15px;
    height: 16px;
    cursor: pointer;
}
.category-list li:hover{
    text-decoration: underline;
}

.slider-wrapper {
    padding-top: 50px;
    position: relative;
    max-width: 1920px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.slider-content {
    position: relative;
    max-height: 700px;
}
.slider-title button{
    width: 50%;
    height: 70px;
    background-color: #9f0e0e;
    outline: none;
    color: #fff;
    font-family: Play;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
}
.slider-title button:hover{
    cursor: pointer;
    background-color: #E08026;
    transition: 0.3s;
}
/* Слайды с изображениями и текстом */
.slider-images {
    max-width: 1920px;
    display: flex;
    transition: transform 0.5s ease-in-out; /* Анимация сдвига */
}

.slide {
    min-width: 100%; /* Каждый слайд занимает 100% ширины */
    height: 100%;
    position: relative; /* Для позиционирования текста внутри слайда */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Изображение как фон */
    right: 0;
}

/* Текстовый блок внутри слайда */
.slider-title {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    width: 40%;
    color: #fff;
    z-index: 2; /* Текст поверх изображения */
}

.slider-title h1 {
    /* font-size: 3vw; */
    font-size:calc(30px + 8 * (100vw - 320px) / 880);
    margin-bottom: 3vh;
}

.slider-title p {
    font-size: 1.5vw;
}

/* Кнопки навигации */
.slider-nav {
    position: absolute;
    top: 50%;
    background-color: transparent;
    border: none;
    color: #9f0e0e;
    font-size: 50px;
    cursor: pointer;
    z-index: 3; /* Кнопки поверх текста и изображения */
}

.slider-nav.prev {
    left: 2.5%;
    padding: 0;
}

.slider-nav.next {
    right: 2.5%;
    padding: 0;
}
.slider-nav img{
    transform: scale(0.7);
}
.slider-nav:hover img {
    transition: 0.3s;
    filter: brightness(150%);
}

/* Индикаторы */
.slider-indicators {
    position: absolute;
    max-width: 100px;
    bottom: 20px;
    left: 50%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    transform: translateX(-50%);
    z-index: 3; /* Индикаторы поверх текста и изображения */
}

.indicator {
    width: 20px;
    height: 20px;
    background-color: #9e9e9e;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.indicator.active {
    background-color: #9f0e0e;
    opacity: 1;
}
.computer-series-title-wrapper{
    max-width: 1600px;
    width: 100%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}
.series-title-wrapper{
    max-width: 752px;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.series-title-caption{
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #9f0e0e;
}
.series-title-caption-upper{
    font-size: 30px;
}
.computer-series-wrapper{
    margin-top: 50px;
    max-width: 1600px;
    display: flex;
    justify-content: center;
    gap: 20px;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.sp-img-container{
    max-width: 360px;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.series-part{
    max-width: 20%;
    /* width: 100%; */
    background-color: #131313;
    padding: 20px;
    height: 600px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.series-part img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.series-part-title{
    max-width: 365px;
    font-size: 20px;
    width: 100%;
    text-align: center;
    margin-top: auto;
}
.series-part p{
    color: #fff;
    font-weight: bold;
}
.series-part-caption{
    color: #9e9e9e;
    font-size: 14px;
    max-width: 365px;
    line-height: 14pt;
    margin-top: auto;
}
.series-part-capt-table{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.series-part-table-row-left{
    font-weight: bold;
}
.series-part-table-row-right{
    text-align: right;
}
.series-part-table-divider{
    height: 1px;
    width: 100%;
    background-color: #9e9e9e;
    margin-top: 5px;
}
.series-part-price{
    font-size: 30px;
    width: fit-content;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
.button-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}
.computer-series-part-button{
    width: 210px;
    height: 30px;
    background-color: #9f0e0e;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;

}
.computer-series-part-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
/* Новый слайдер */
.second-slider-wrapper {
    position: relative;
    width: 100%;
    max-height: 280px;
    overflow: hidden;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
}

.second-slider-wrapper .slider-content {
    position: relative;
    max-height: 280px;
}

/* Слайды с изображениями и текстом */
.second-slider-wrapper .slider-images {
    width: 100%;
    display: flex;
    transition: transform 0.5s ease-in-out; /* Анимация сдвига */
}

.second-slider-wrapper .slide {
    position: relative; /* Для позиционирования текста внутри слайда */
}

.second-slider-wrapper .slide img {
    width: 100%;
    object-fit: cover; /* Изображение как фон */
}

/* Текстовый блок внутри слайда */
.second-slider-wrapper .slider-title {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    width: 30%;
    color: #fff;
    z-index: 2; /* Текст поверх изображения */
}

/* Кнопки навигации */
.second-slider-wrapper .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    color: #9f0e0e;
    font-size: 50px;
    cursor: pointer;
    z-index: 3; /* Кнопки поверх текста и изображения */
}

.second-slider-wrapper .slider-nav.prev {
    left: 2.5%;
    padding: 0;
}

.second-slider-wrapper .slider-nav.next {
    right: 2.5%;
    padding: 0;
}

.second-slider-wrapper .slider-nav:hover img {
    transition: 0.3s;
    filter: brightness(150%);
}

/* Индикаторы */
.second-slider-wrapper .slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 3; /* Индикаторы поверх текста и изображения */
}

.second-slider-wrapper .indicator {
    width: 20px;
    height: 20px;
    background-color: #9e9e9e;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.second-slider-wrapper .indicator.active {
    background-color: #9f0e0e;
    opacity: 1;
}

.configurator-banner-wrapper {
    margin-top: 50px;
    width: 100%;
    max-height: 450px;
    position: relative;
    overflow: hidden;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.configurator-banner-container{
    width: 100%;
    max-height: 500px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}
.configurator-banner-left-part {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 200px;
    margin-top: 45px;
}

.configurator-banner-title {
    height: fit-content;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

.configurator-banner-back {
    position: absolute;
    bottom: 0;
    width: 100%;
    object-fit: cover;
    z-index: -2;
    height: 400px;
}

.configurator-banner-pc {
    margin-left: 3%;
    margin-top: auto;
    width: 30%;
}

.configurator-banner-button {
    padding: 20px;
    box-sizing: border-box;
    margin-top: 25px;
    width: 70%;
    height: auto;
    font-weight: bold;
    color: #fff;
    background-color: #9f0e0e;
    font-size: 30px;
    border: 0;
    cursor: pointer;
    margin-bottom: 10px;
}

.configurator-banner-button:hover {
    background-color: #E08026;
    transition: 0.3s;
}
.configurator-banner-button:hover {
    background-color: #E08026;
    transition: 0.3s;
}
.advantages-banner-wrapper{
    margin-top: 50px;
    width: 100%;
    background-image: url('assets/Images/banners/why-we-banner.png');
    background-position: center;
}
.advantages-banner-image{
    position: absolute;
    z-index: -1;
    width: 100%; /* Изображение занимает всю ширину контейнера */
    object-fit: cover; /* Сохраняем пропорции изображения, не обрезая его */
}
.advantages-container{
    max-width: 1600px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}
.advantages-title{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.advantages-flex {
    max-width: 1600px;
    height: auto;
    display: flex;
    gap: 20px; /* Расстояние между элементами */
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
    justify-content: space-around; /* Элементы выравниваются по левому краю */
}

.advantage-item {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto; /* Элементы растягиваются, чтобы заполнить доступное пространство */
    max-width: 20%; /* Минимальная ширина элемента */
}
.advantage-image {
    width: 100px;
    height: 80px;
}

.advantage-title {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.advantage-caption {
    color: #9e9e9e;
    max-width: 344px;
    text-align: center;
}
.news-list-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.news-order{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.nlw-item{
    max-width: unset;
    width: 100%;
    height: 240px;
    display: flex;
    flex-direction: row;
    align-items: normal;
    box-sizing: border-box;
    padding: 20px;
    gap: 10px; 
    border: 2px solid #212121;
}
.nlw-item-image-container{
    display: flex;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}
.nlw-item-image-container img{
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-wrapper{
    margin-top: 50px;
    max-width: 1600px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.news-title{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.news-container{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    row-gap: 20px;
    gap: 20px;
}
.news-item{
    max-width: 345px;
    height: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: #131313;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.news-item-image-container{
    max-width: 305px;
    max-height: 205px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.news-item-image-container img{
    width: 305px;
    object-fit: cover;
}
.news-caption{
    color: #ffffff;
    max-width: 345px;
}
.news-info{
    max-width: 345px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.news-source, .news-date{
    color: #9e9e9e;
}

.footer-wrapper{
    border-top: 2px solid #9f0e0e;
    margin-top: 50px;
    width: 100%;
    height:auto;
    background-color: #000000;
    font-size: 16px;
    color: #9e9e9e;
}
.footer-content{
    max-width: 1600px;
    height: auto;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
}
.footer-left-part{
    max-width: 230px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-right: 100px;
}
.footer-icons{
    max-width: 221px;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
.footer-logo{
    max-width: 221px;
    width: 100%;
}
.subscribe{
    max-width: 230px;
}
.footer-button svg{
    width: 60px;
    height: 60px;
}
.footer-right-part{
    max-width: 1200px;
    display: flex;
    justify-content: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}
.footer-info{
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    gap: 12px;
}
.info-row{
    font-weight: normal;
}
.info-row:hover{
    text-decoration: underline;
}
.info-3:hover{
    text-decoration: none;
}
.footer-warning{
    font-size: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
}
.yandex-rating-wrapper{
    margin-left: auto;
    width: 140px;
}
.yandex-rating-title{
    cursor: pointer;
    text-decoration: underline;
}
.yandex-rating-stars{
    display: flex;
    gap: 5px;
    margin-top: 10px;
}
.open-chat{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 245px;
    background-color: #9f0e0e;
    box-sizing: border-box;
    padding: 17px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
    transition: 0.3s ease;
}
.open-chat:hover{
    width: 500px;
    transition: 0.3s ease;
}
.chat-window{
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 500px;
    width: 100%;
    background-color: #131313;
    min-height: 203px;
    box-sizing: border-box;
    padding: 20px;
    z-index: 3;
    border: 1px solid #212121;
    box-shadow: 5px 4px 15px 0px #000000a3;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    
}
.chat-window.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.chat-head{
    display: flex;
    gap: 10px;
    align-items: center;
}
.chat-head p{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.chat-head svg{
    margin-left: auto;
    cursor: pointer;
}
.chat-profile-photo{
    border-radius: 50%;
    width: 25px; 
    height: 25px;
    object-fit: cover;
    overflow: hidden;
}
.chat-profile-photo img{
    width: 150%;
}
.chat-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-y: scroll;
    max-height: 400px;
}
.chat-body::-webkit-scrollbar {
    width: 10px;
    height: 20%;
    background: #000000;
}
.chat-body::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.recieved-message-block{
    box-sizing: border-box;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    max-width: 300px;
    background-color: #222;
}
.sent-message{
    align-self: flex-end;
    color: #9e9e9e;
}
.chat-form-container{
    display: flex;
    background-color: #000;
    outline: 1px solid #9f0e0e;
}
.chat-form{
    width: 430px;
    box-sizing: border-box;
    height: 30px;
    outline: none;
    text-indent: 5px;
    color: #9e9e9e;
    font-size: 14px;
}
.chat-form-container img:hover{
    cursor: pointer;
}
.chat-form::placeholder{
    color: #9e9e9e;
    font-size: 14px;
}
.configurator-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.block-title{
    margin-bottom: 20px;
}
.configurator-container{
    padding: 20px;
    background-color: #131313;
}
.your-build-head{
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.help-number{
    color: #9e9e9e;
    text-align: right;
}
.help-number br{
    display: none;
}
.your-build-head h2{
    margin-bottom: 0;
}
.configurator-build-container{
    display: flex;
    gap: 10px;
}
.cbc-image{
    max-width: 356px;
    width: 100%;
    max-height: 356px;
    display: flex;
    justify-content: space-around;
}
.build-case-image{
    flex-shrink: 0;
    height: 100%;
}
.build-parts-flex{
    max-width: 1170px;
    padding-right: 24px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-content: flex-start;
}
.part-counter input{
   outline: none;
}
.build-parts-flex::-webkit-scrollbar {
    width: 10px;
    background: #000000;
}
.build-parts-flex::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.build-part{
    width: 350px;
    height: 100px;
    color: #fff;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.chosen-part{
    padding-left: 10px;
    gap: 10px;
    background-color: #000;
    border: 2px solid #9f0e0e;
}
.ready-to-pick{
    border: 2px solid rgb(255, 255, 255);
    font-size: 14px;
    cursor: pointer;
}
.part-text{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
}
.ready-to-pick .part-text{
    display: none;
}
.ready-to-pick .part-replace-button{
    display:none;
}
.ready-to-pick .part-counter{
    display: none;
}
.pick-text{
    display: flex;
    align-items: center;
    gap: 10px;
}
.add-part-image{
    width: 60px;
}
.unavailable-to-pick{
    cursor:default;
    border: 2px dashed #9e9e9e;
}
.unavailable-to-pick p{
    color: #9e9e9e;
}
.unavailable-to-pick img{
    opacity: 0.5;
}
.build-part-title{
    font-size: 14px;
    font-weight: bold;
}
.build-part-name{
    font-size: 18px;
    color: #fff;
    margin-top: auto;
}
.build-part-name a{
    color: #fff;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.build-part-name:hover{
    text-decoration: underline;
}
.build-part-price{
    font-weight: bold;
    font-size: 18px;
}
.part-replace-button{
    width: 40px;
    height: 40px;
    background-color: #9f0e0e;
    border: 0;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    padding: 8px;
}
.part-replace-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.part-counter{
    width: 25px;
    height: 96px;
}
.part-counter button{
    width: 25px;
    height: 25px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    background-color: #212121;
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.part-counter button:hover{
    transition: 0.3s;
    background-color: #9f0e0e;
}
.part-count{
    width: 25px;
    height: 46px;
    background-color: #808080;
    text-align: center;
    color: #fff;
    line-height: 46px;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    border: 0;
    font-family: Play;
}
.part-count::placeholder{
    color: #fff;
}
.part-count:focus{
    outline: 0;
}
.configurator-bottom{
    color: #fff;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.configurator-bottom-right-part{
    display: flex;
    height: 50px;
    align-items: center;
    gap: 20px;
}
.final-price-label{
    margin-top: auto;
    margin-bottom: auto;
}
.save-information{
    display: flex;
    gap: 10px;
}
.save-by-button{
    width: 70px;
    height: 40px;
    background-color: #9f0e0e;
    color: #fff;
    font-weight: bold;
    border: 0;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}
.save-by-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.build-order-button{
    width: 240px;
    height: 50px;
    background-color: #9e9e9e;
    color: #fff;
    font-weight: bold;
    border: 0;
    font-size: 16px;
    padding: 0;
}

.build-order-active-button{
    cursor: pointer;
    background-color: #9f0e0e;
}
.build-order-active-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.build-cancel-button{
    margin-left: auto;
    height: fit-content;
    width: fit-content;
    box-sizing: border-box;
    padding: 10px;
}
.parts-list-wrapper{
    position: relative;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background-color: #131313;
    box-sizing: border-box;
    padding: 20px;
}
.plw-warnings{
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}
.plww-image-container{
    width: 100%;
    max-width: 300px;
    height: 200px;
    display: flex;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.plww-image-container img{
    width: auto;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.overlay-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    backdrop-filter: blur(5px); /* Размытие фона */
    z-index: 10; /* Убедитесь, что overlay находится над всем контентом */
    display: none; /* Скрыт по умолчанию */
}
.right-popup-wrapper{
    position: fixed;
    top: 0;
    right: -500px; /* Изначально скрыт за пределами экрана */
    width: 500px;
    padding: 30px;
    padding-top: 20px;
    height: 100vh;
    background-color: #000;
    z-index: 11; /* Над overlay */
    transition: right 0.5s ease-in-out; /* Плавное появление */
    overflow-y: scroll;
    box-sizing: border-box;
}
.right-popup-wrapper::-webkit-scrollbar {
    display: none;
}
.right-popup-wrapper.visible {
    right: 0; /* Показываем попап */
    box-shadow: -6px 0px 19px 0px #9f0e0e;
}

/* Класс для показа overlay */
.overlay-blur.visible {
    display: block; /* Показываем размытый фон */
}
.right-popup-img-container{
    width: 440px;
    height: 440px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.right-popup-img-container img{
    width: 100%;
    object-fit: contain;
}
.parts-list-title{
    margin-bottom: 20px;
}
.goods-popup-caption{
    font-size: 16px;
    color: #9e9e9e;
    margin-bottom: 20px;
}
.specs-popup-block{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.specs-popup-block-name{
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}
.specs-popup-table{
    color: #9e9e9e;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin: 0;
    border-bottom: 1px solid #9e9e9e;
    gap: 20px;
}
.popup-add-to-build-button{
    width: 180px;
    height: 50px;
    border: 0;
    background-color: #9f0e0e;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    
}
.popup-add-to-build-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.parts-list-container{
}
.filters-button{
    display: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    width: 92px;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
}
.specs-drop-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.specs-drop-list-main{
    position: relative;
    min-width: 185px;
    width: fit-content;
    position: relative;
    height: 30px;
    background-color: #212121;
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    border-radius: 2px 2px 0px 0px;
    border: 2px solid #212121;
    cursor: pointer;
}
.drop-list-title{
    line-height: 14px;
    margin-left: 8px;
}
.droplist-icon{
    width: 15px;
    margin-right: 8px;
    transition: 0.3s;
    transform: unset;
    transform: rotate(-90deg);
}
.droplist-icon.rotated{
    transform: unset;
    transition: 0.3s;
}
.droplist-list{
    min-width: calc(100% + 4px);
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    margin-top: 30px;
    margin-left: -2px;
    background-color: #000;
    border: 2px solid #9f0e0e;
    border-top: 0px;
    line-height: 14px;
    border-radius: 0px 0px 2px 2px;
    box-sizing: border-box;
    max-height: 300px;
    overflow-y: auto;
    flex-direction: column;
}
.droplist-list::-webkit-scrollbar {
    width: 10px;
    background: #000000;
}
.droplist-list::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.droplist-item{
    /* height: 30px; */
    box-sizing: border-box;
    padding: 7.5px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.droplist-item.active {
    background-color: #9f0e0e;
    color: #fff;
}
.specs-drop-list-main.active .droplist-list
{
    display: flex;
}
.specs-drop-list-main.active .price-drop-list
{
    display: flex;
}
.specs-drop-list-main.active
{
    border-color: #9f0e0e;
}
.specs-drop-list-main.active .droplist-icon
{
    transform: rotate(0deg);
    transition: 0.3s;
}
.droplist-checkbox{
    width: 15px;
    height: 15px;
    accent-color: #9f0e0e;
    margin: 0;
}
.droplist-highest-price{
    margin-top: 5px;
}
.item-search-field{
    border: 0;
    color: #fff;
    background-image: url('assets/icons/search-icon.svg');
    background-position: 95%; 
    background-repeat: no-repeat;
    text-indent: 5px;
    color: #a3a3a3;
    background-color: #000;
    width: 250px;
    height: 30px;
    /* margin-top: 10px; */
}
.item-search-field:focus{
    outline: 2px solid #9f0e0e;
}
.pc-parts-list{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.parts-list-item{
    box-sizing: border-box;
    padding: 10px;
    max-width: 500px;
    width: 100%;
    height: 180px;
    background-color: #000;
    display: flex;
    gap: 10px;
    outline: 1px solid #212121;
    justify-content: space-between;
}
.pli-image-container{
    width: 160px;
    /* height: 160px; */
    display: flex;
}
.list-item-image{
    width: 100%;
    margin-right: 0;
    flex-shrink: 0;
    object-fit: contain;
}
.item-title-and-price{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 280px;
}
.item-name{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: auto;
}
.item-price{
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    width: fit-content;
    margin-left: auto;
}
.item-buttons{
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.item-info, .item-compare, .mobile-item-info{
    height: 30px;
    width: 100px;
    padding-left: 10px;
    padding-right: 10px;
    border: 0;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.item-compare:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.mobile-item-info{
    background-color: #E08026;
    display: none;
}
.mobile-item-info a{
    color: #fff;
}
.item-info{
    width: 50px;
    background-color: #E08026;
}
.item-compare{
    background-color: #9f0e0e;
}
.add-to-build{
    height: 30px;
    width: 80px;
    box-sizing: border-box;
    background-color: #9f0e0e;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}
.add-to-build:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.item-remove-and-count{
    width: 30px;
    display: none;
}
.item-counter{
    width: 30px;
    height: 110px;
}
.item-counter button{
    width: 30px;
    height: 30px;
}
.item-counter input{
    height: 50px;
    width: 30px;
}
.remove-item-button{
    width: 30px;
    height: 70px;
    background-color: #9f0e0e;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.remove-item-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.added-item {
    border: 2px solid #9f0e0e;
}
.added-item .add-to-build{
    display: none;
}
.remove-item-button img{
    width: 22px;
}
.added-item .item-remove-and-count{
    display: block;    
}

.catalogue-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.catalogue-container{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.catalogue-card-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    background-color: #131313;
    cursor: pointer;
    font-size: 30px;
    text-align: center;
    padding: 25px;
    box-sizing: border-box;
    color: #fff;
    aspect-ratio: 1 / 1; /* Соотношение сторон 1:1 (квадрат) */
    width: 100%; /* Ширина будет регулироваться контейнером */
    max-width: 385px; 
    
}
.catalogue-card-wrapper:hover{
    background-color: #222222;
    transition: 0.3s;
}
.cc-image-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.catalogue-card-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* #catalogue-builds, #catalogue-pc-parts, #catalogue-monitors{
    display: none;
} */
.catalogue-back-button{
    position: absolute;
    right: 3%;
    top: 100px;
    width: 100px;
    height: 30px;
    background-color: #9f0e0e;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
.catalogue-back-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.catalogue-builds.visible{
    display: flex;
}
.catalogue-card-title{
}
.search-results-wrapper{
    max-width: 1600px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.search-results-container{

}
.applied-filters-flex{
    /* display: none; */
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 1380px;
    flex-wrap: wrap;
}
.applied-filters-title{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.applied-filter{
    min-width: 100px;
    height: 30px;
    display: flex;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    justify-content: space-between;
    gap: 10px;
    background-color: #131313;
    align-items: center;
}
.applied-filter-name{
    font-size: 14px;
    color: #fff;
}
.applied-filter img{
    cursor: pointer;
}
.search-results-sorting{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.search-results-sorting-right{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}
.found-in-categories-container{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.found-in-categories-container a{
    text-decoration: underline;
}
.found-in-categories{
    color: #fff;
}
.sort-droplist-item:hover{
    background-color: #E08026;
    transition: 0.3s;    
}
.chosen-droplist-item{
    background-color: #9f0e0e;
}
.search-orientation-button{
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #000;
    cursor: pointer;
}
.pressed rect{
    fill: #DE2626;
}
.unpressed rect{
    fill: #a3a3a3;
}
.search-results-container{
    display: flex;
    gap: 20px;
}
.floating-filters{
    width: 200px;
    flex-shrink: 0;
}
.left-filters-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 60px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 90vh;
    min-width: 210px;
}
.left-filters-wrapper::-webkit-scrollbar {
    width: 5px;
    background: #000000;
}
.left-filters-wrapper::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.apply-filters-float-button {
    position: fixed;
    display: none; /* По умолчанию скрыто */
    color: #fff;
    top: 40vh;
    padding: 10px 15px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
}

.apply-filters-float-button:hover div {
    background-color: #E08026;

}

.affb-square-1 {
    width: 21px;
    height: 21px;
    transform: rotate(45deg);
    background-color: #9f0e0e;
    position: absolute;
    margin-top: 4.3px;
}

.affb-square-2 {
    width: 100px;
    height: 30px;
    margin-left: 10.5px;
    background-color: #9f0e0e;
    z-index: 2;
    color: #fff;
    box-sizing: border-box;
    padding: 5px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.left-filters-title{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.filters-block{
    padding: 10px;
    background-color: #131313;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.filter-title{
    font-size: 14px;
    color: #fff;
}
.filter-search-field{
    width: 100%;
    background-image: none;
    height: 30px;
    background-color: #000;
    padding: 0;
}
.filters-table{
    margin: 0;
    padding: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 180px;
    overflow-y: scroll;
}
.filters-table::-webkit-scrollbar {
    width: 5px;
    background: #000000;
}
.filters-table::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.original-checkbox{
    display: none;
}
.checkmark{
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 0;
    accent-color: #9f0e0e;
    width: 20px;
    height: 20px;
    background-color: black;
}
.custom-checkbox:hover .checkmark {
    border-color: #E08026; /* Оранжевая рамка при наведении */
}

/* Стили для состояния "активно" (чекбокс отмечен) */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #9f0e0e; /* Красный фон при активации */
    border-color: #9f0e0e; /* Красная рамка при активации */
}


/* Галочка внутри чекбокса */
.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Показываем галочку, если чекбокс отмечен */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}
.filter-in-table{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.filter-in-table.active{
    background-color: #9f0e0e;
}
.filter-price-inputs{
    display: flex;
    gap: 6px;
}
.filter-price-input{
    width: 87px;
    border: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    height: 30px;
    text-indent: 5px;
}
.apply-all-filters-button{
    width: 100%;
    height: 30px;
    cursor: pointer;
    background-color: #9f0e0e;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    will-change: top; /* Оптимизация анимации */
    pointer-events: auto; /* Гарантируем кликабельность */
}
.clear-all-filters-button{
    background-color: #000;
}
.apply-all-filters-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.clear-all-filters-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.filter-price-input:focus{
    outline: 0;
}
.mobile-filters-wrapper{
    display: none;
}
.price-drop-list{
    gap: 10px;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}
.price-drop-list input{
    height: 30px;
    width: 90%;
    border-radius: 0;
    border: 0;
    background-color: #131313;
}
.price-drop-list input:focus{
    outline: 2px solid #9f0e0e;
}
.search-results-items-flex{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.results-items-horizontal{
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 1380px;
    width: 100%;
    display: none;
}
.item-in-search-wrapper{
    display: flex;
    flex-direction: column;
    width: 330px;
    border: 1px solid #212121;
    box-sizing: border-box;
    padding: 10px;
    gap: 10px;
    position: relative;
    height: 700px;
}
.item-in-search-img{
    align-self: center;
    max-width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.item-in-search-img img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.item-in-search-name{
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.availability-and-price{
    display: flex;
    justify-content: space-between;
}
.is-available{
    display: flex;
    gap: 5px;
    align-items: center;
    color: #9e9e9e;
    font-size: 12px;
}
.is-available-indicator{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #00A322;
}
.not-available{
    background-color: #9f0e0e;
}
.item-in-search-price{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}
.reviews-wrapper{
    display: flex;
    justify-content: space-between;
    color: #9e9e9e;
    font-size: 14px;
    align-items: center;
}

.reviews-count{
    text-decoration: underline;
    cursor: pointer;
    color: #9e9e9e;
}
#addReview{
    margin-left: auto;
}
.stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  font-size: 20px;
  color: #666; /* пустая */
}

.star.full {
  color: #FF9900; /* заполненная */
}

.star.half {
  background: linear-gradient(90deg, #FF9900 50%, #666 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FF9900;
}

.item-in-search-compare-button{
    position: absolute;
    right: 10px;
    width: 80px;
    height: 20px;
    background-color: #000;
    border: 1px solid #212121;
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.item-in-search-compare-button:hover{
    background-color: #9f0e0e;
    transition: 0.3s;
}
.item-in-search-buttons{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.search-add-to-cart-button{
    width: 50%;
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    background-color: #9f0e0e;
    cursor: pointer;
}
.search-add-to-cart-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.search-more-button{
    background-color: #E08026;
}
.item-horizontal{
    display: flex;
    max-width: 1380px;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    height: 290px;
}
.item-horizontal .item-in-search-compare-button{
    right: 20px;
}
.item-horizontal .item-in-search-img{
    min-width: 250px;
}
.search-item-name-reviews-specs{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 838px;
    gap: 10px;
}
.search-item-name-and-reviews{
    display: flex;
    max-width: 838px;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.search-item-name-and-reviews .reviews-wrapper{
    width: 236px;
    margin-top: auto;
}
.search-item-caption-container{
    font-size: 14px;
    min-height: 40px;
    color: #9e9e9e;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.search-item-caption-container p{
    color: #9e9e9e;
}
.search-item-caption p:nth-of-type(n+2), ol{
    display: none;
}
.search-item-specs{
    max-width: 838px;
}
.availability-price-buttons{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: flex-end;

}
.availability-price-buttons .availability-and-price{
    flex-direction: column;
    align-items: end;
    gap: 10px;
}
.availability-price-buttons .item-in-search-buttons{
    flex-direction: column;
    gap: 10px;
}
.availability-price-buttons .item-in-search-buttons button{
    width: 180px;
}
.availability-price-buttons .item-in-search-price{
    font-size: 30px;
}
.show-more-button-container{
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.show-more-button{
    background-color: #9f0e0e;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    width: 160px;
    height: 50px;
    cursor: pointer;
}
.show-more-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.show-more-pages{
    display: flex;
    align-items: center;
    gap: 10px;
}
.show-more-page{
    width: 30px;
    height: 30px;
    color: #fff;
    font-weight: normal;
    font-size: 16px;
    background-color: #131313;
    cursor: pointer;
}
.show-more-page-chosen{
    background-color: #9f0e0e;
}
.show-more-pages-ellipsis{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.show-more-pages-arrow{
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #9f0e0e;
    cursor: pointer;
}
.arrow-right{
    transform: scale(-1, -1);
}
.help-banner-wrapper{
    margin-top: 50px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    height: 313px;
    background: none;
    position: relative;
    box-sizing: border-box;
    padding: 30px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-banner-caption{
    margin-left: 20%;
}
.help-banner-title{
    max-width: 622px;
}
.help-banner-back{
    position: absolute;
    top: 0;
    z-index: -1;
    width: 500px;
    transform: scale(1.5);
    left: -100px;
}
.banner-inner-shadow{
    width: 500px;
    height: 100%;
    top: 0;
    left: 50px;
    position: absolute;  
    height: 313px;
    background: linear-gradient(90deg, #00000000 1%,#000000 100%);
    z-index: -1;
}
.help-banner-bottom-text{
    color: #fff;
    font-size: 16px;
    max-width: 400px;
}
.help-banner-forms{
    max-width: 372px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}
.help-banner-forms input{
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid #9f0e0e;
    background-color: #000;
    color: #fff;
    text-indent: 5px;
}
.help-banner-forms input:focus{
    outline: none;
    border: 2px solid#E08026;
}
.forms-caption{
    color: #fff;
    font-size: 16px;
}
.forms-necessary-field{
    max-width: 164px;
    color: #9e9e9e;
}
.forms-submit-button{
    height: 30px;
    width: 100%;
    background-color: #9f0e0e;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.forms-submit-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.empty-cart-banner{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding-top: 100px;
    padding-bottom: 100px;
}
.empty-compare-banner{
    display: none;
}
.shopping-cart-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.shopping-cart-container{
    max-width: 1600px;
    display: flex;
    gap: 20px;
}
.shopping-cart-left-part{
    display: flex;
    max-width: 860px;
    flex-direction: column;
    gap: 20px;
    min-width: 650px;
}
.choose-all-wrapper{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    max-width: 860px;
    height: 100px;
    align-items: center;
    background-color: #131313;
}
.choose-all-button{
    display: flex;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
}
.remove-all-button{
    width: 105px;
    height: 50px;
    background-color: #E08026;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.item-in-cart-wrapper{
    display: flex;
    max-width: 860px;
    height: 282px;
    gap: 20px;
}
.cart-pick-item-checkbox{
    width: 50px;
    height: 50px;
    background-color: #131313;
    box-sizing: border-box;
    padding: 15px;
}
.cart-item-checkboxes{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    margin-bottom: auto;
}
.cart-remove-item-button{
    width: 50px;
    height: 50px;
    background-color: #9f0e0e;
    cursor: pointer;
}
.cart-remove-item-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.item-in-cart-container{
    max-width: 790px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #212121;
    display: flex;
    gap: 20px;
    padding: 20px;
}
.iic-image-container{
    width: 250px;
    height: 250px;
    display: flex;
    flex-shrink: 0;
}
.iic-image-container img{
    width: 100%;
    object-fit: contain;
}
.item-in-cart-inner-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.item-in-cart-text{
    overflow: hidden;
}
.item-in-cart-name{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}
.item-in-cart-caption{
    color: #9e9e9e;
    font-size: 16px;
    margin-top: 10px;
}
.item-in-cart-counter-and-price{
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}
.cart-item-counter{
    display: flex;
    flex-direction: row;
    width: 90px;
    height: 30px;
}
.cart-item-counter button{
    width: 30px;
    height: 30px;
}
.cart-item-counter input{
    height: 30px;
}
.item-in-cart-price{
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    text-align: right;
}
.shopping-cart-right-part{
    max-width: 720px;
    width: 100%;
}
.checkout-notify-wrapper{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 300px;
    margin-bottom: 300px;
}
.cnw-container{
    max-width: 500px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #131313;
    text-align: center;
    align-items: center;
}
.cnw-container button{
    padding: 10px;
    box-sizing: border-box;
    background-color: #9f0e0e;
    outline: none;
    color: #fff;
    font-family: Play;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
    cursor: pointer;
}
.cnw-container button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.order-info-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    max-width: 720px;
    background-color: #131313;
    margin-bottom: 20px;
    min-width: 460px;
}
.order-info-label{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.order-items-amount{
    color: #9e9e9e;
    font-size: 16px;
}
.go-to-checkout-button{
    width: 220px;
    height: 50px;
    background-color: #9f0e0e;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}
.go-to-checkout-button:hover{
    transition: 0.3s;
    background-color: #E08026;
}
.order-items-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.oip-img-container{
    min-width: 60px;
    max-width: 100px;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.oipic-img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.order-items-count{
    color: #9e9e9e;
    font-size: 16px;
}
.order-price-for-items{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}
.final-price-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.order-price-label{
    margin-bottom: 0;
}
.you-may-also-like-wrapper{
    margin-top: 50px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.ymal-flex{
    display: flex;
    gap: 20px;
    max-width: 1600px;
    overflow-x: scroll;
}
.ymal-flex::-webkit-scrollbar {
    display: none;
}
.ymal-item-wrapper{
    max-width: 385px;
    width: auto;
}
.checkout-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.checkout-container{
    display: flex;
    gap: 20px;
}
.checkout-left-part{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
    width: 100%;
}
.checkout-user-info-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #131313;
    padding: 20px;
    box-sizing: border-box;
}
.co-user-info-head{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.user-info-title{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.user-info-head-necessary{
    color: #9e9e9e;
    font-size: 16px;
}
.user-info-fields{
    display: flex;
    gap: 10px;
}
.user-info-input{
    background-color: #000;
    border: 0;
    height: 30px;
    box-sizing: border-box;
    color: #fff;
    text-indent: 5px;
}
.user-info-name, .user-info-city, .user-info-phone, .user-info-email{
    width: 25%;
}
.user-info-input:focus{
    outline: 2px solid #9f0e0e;;
}
.user-info-comment{
    height: 100px;
    resize: none;
    font-family: Play;
    font-size: 14px;
}
.checkout-types-wrapper{
    display: flex;
    gap: 20px;
    flex-direction: column;
    background-color: #131313;
    padding: 20px;
    box-sizing: border-box;
}
.checkout-types-flex{
    display: flex;
    gap: 10px;
}
.checkout-type-container{
    width: 120px;
    height: 70px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #222222;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 5px;
}
.sbp-payment{
    background-color: #fff;
}
.add-checkout{
    flex-direction: column;
    align-items: center;
    color: #9e9e9e;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #222222;
}
.checkout-type-container:hover img{
    transform: scale(1.1);
    transition: 0.3s;
}
.checkout-type-container p{
    font-size: 14px;
    text-align: center;
}
.checkout-type-container:hover p{
    transform: scale(1.1);
    transition: 0.3s;
}
.chosen-checkout-type{
    outline: 2px solid #9f0e0e;
}
/* .cct-spb{
    background-color: #fff;
} */
.checkout-type-container:hover{
    background-color: #9f0e0e;
    color: #fff;
}
.shipping-types-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #131313;
    padding: 20px;
    box-sizing: border-box;
}
.shipping-types-wrapper input{
    background-color: #000;
    border: 0;
    height: 30px;
    box-sizing: border-box;
    color: #fff;
    text-indent: 5px;
}
.shipping-types-wrapper input:focus{
    outline: 2px solid #9f0e0e;
    border-radius: 0;
}
.shipping-types-flex{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shipping-type-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shipping-type-title{
    display: flex;
    gap: 10px;
}
.choose-shipping-type{
    font-size: 16px;
    color: #fff;
}
.cst-unavailable{
    color: #9e9e9e;
}
.st-divider{
    height: 1px;
    width: 100%;
    background-color: #212121;
}
.change-destination{
    margin-left: auto;
    color: #E08026;
    text-decoration: underline;
    cursor: pointer;
    font-weight: normal;
}
.cd-unavailable{
    display: none;
}
input[type="radio"] {
    display: none;
}
.custom-radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #000000;
    cursor: pointer;
    background-color: #000000;
    box-sizing: border-box;
  }
  input[type="radio"]:checked + .custom-radio {
    background-color: #9f0e0e;
    border-color: #000000;
  }
.address-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background: #131313;
    padding: 20px;
    width: 90%; /* Занимает 90% ширины экрана */
    max-width: 800px; /* Ограничение максимальной ширины */
    position: relative;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}


.address-popup.active .popup-content {
    transform: translateY(0);
    opacity: 1;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}
.map-container {
    width: 100%;
    height: 500px;
    background: #eee; /* Тут можно вставить карту */
}
.popup-adress-title{
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}
.shipping-date-wrapper{
    max-width: 860px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    background-color: #131313;
}
.compare-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.show-only-differencies{
    width: 270px;
    height: 60px;
    background-color: #131313;
    display: flex;
    gap: 10px;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 20px;
}
.sod-title{
    font-size: 16px;
    color: #fff;
}
.compare-container{
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.comparing-item-wrapper{
    max-width: 385px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 2px solid #212121;
}
.ci-image{
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}
.ci-image img{
    width: 100%;
}
.ci-name-price{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ci-title{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.ci-price{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-align: right;
}
.ci-specs-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.ci-spec-name{
    color: #fff;
    font-size: 16px;
}
.ci-spec-value{
    text-align: right;
    color: #9e9e9e;
    font-size: 16px;
}
.ci-divider{
    margin-top: -5px;
}
.ci-buttons{
    display: flex;
    gap: 10px;
}
.reg-login-page-wrapper{
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rlp-left-part{
    max-width: 680px;
}
.rlp-caption{
    font-size: 16px;
    color: #fff;
}
.rlp-right-part{
    max-width: 500px;
    width: 100%;
}
.rlp-forms-wrapper{
    display: flex;
    background-color: #131313;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    align-items: center;
}
 .auth-forms-flex
 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
 }
.rlp-forms-wrapper input::placeholder{
   font-size: 16px;
}
.rlp-forms-title{
    font-weight: normal;
    margin-bottom: 0;
}
.rlpf-input{
    width: 100%;
    height: 50px;
}
.personal-data{
    display: flex;
    gap: 10px;
    color: #fff;
    margin-right: auto;
}
.reg-button{
    background-color: #9f0e0e;
    width: 200px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
.reg-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.already-registered{
    color: #9e9e9e;   
}
.already-registered br{
    display: none;
}
.redirect-to-loginpage{
    color: #E08026;
    cursor: pointer;
    text-decoration: underline;
}
.login-wrapper {
    display: none; /* По умолчанию скрываем блок логина */
    align-items: center;
    height: 620px;
}
.user-profile-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.up-container{
    display: flex;
    gap: 20px;
}
.upc-left-part{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    width: 100%;
}
.upc-main-info{
    display: flex;
    gap: 20px;
    background-color: #131313;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
}
.user-proflle-photo{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
.user-proflle-photo img{
    width: 100%;
}
.up-info{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.up-name{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
.up-status{
    font-size: 16px;
    color: #9e9e9e;
}
.up-change-link{
    text-decoration: underline;
}
.upc-bonuses-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #131313;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
}
.upc-bonuses-container h2{
    margin: 0;
}
.bonuses-amount{
    color: #fff;
    font-size: 30px;
}
.upc-quit-button{
    width: 180px;
    height: 50px;
    color: #fff;
    background-color: #9f0e0e;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
.upc-quit-button:hover{
    background-color: #E08026;
    transition: 0.3s;
}
.upc-right-part{
    display: flex;
    flex-direction: column;
    max-width: 1180px;
    width: 100%;
}
.upc-orders-container{
    background-color: #131313;
    box-sizing: border-box;
    padding: 20px;
}
.upc-orders-flex{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.upcof-order-wrapper{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    border: 2px solid #212121;
    width: 100%;
}
.upcofow-left-part{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.upcofow-container{
    display: flex;
    gap: 10px;
}
.upcofow-image{
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.upcofow-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.upcofow-goods-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upcofow-name{
    color: #fff;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
}
.upcofow-price{
    margin: 0;
}
.upcofow-tracking-number{
    color: #9e9e9e;
    font-size: 16px;
    position: relative;
}
.track-number{
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.copied-notification{
    position: absolute;
    opacity: 0;
    background-color: #00A322;
    color: #fff;
    font-weight: bold;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    transition: opacity 0.3s ease;
    z-index: 2;

}
.copied-notification.show {
    opacity: 1;
}
.accrued-bonuses{
    display: none;
}
.upcofow-right-part{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    gap: 10px;
    text-align: right;
    align-items: flex-end;
}
.upcofow-order-date{
    color: #9e9e9e;
    font-size: 16px;
}
.order-status{
    box-sizing: border-box;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 124px;
    font-size: 16px;
    border-radius: 5px;
    margin-top: auto;
}
.os-ontheway, .os-processing{
    background-color: #E08026;
    /* display: none; */
}
.os-done{
    background-color: #00A322;
    /* display: none; */
}
.os-cancelled{
    background-color: #222222;
    /* display: none; */
}
.os-new{
    background-color: #ffffff;
    color: #000;
    /* display: none; */
}
.user-data-flex{
    gap: 10px;
}
.udf-labels{
    font-size: 16px;
    color: #9e9e9e;
}
.udf-input{
    max-width: 460px;
    width: 100%;
    height: 30px;
    background-color: #000;
    border: none;
    text-indent: 5px;
    color: #fff;
}
.udf-input:focus{
    outline: 2px solid #9f0e0e
}
.up-password-container{
    position: relative;
    max-width: 460px;
    width: 100%;
    height: 30px;
}
.show-password{
    position: absolute;
    right: 10px;
    font-size: 14px;
    margin-top: 7px;
    color: #9e9e9e;
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
}
.payment-data-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.current-payment-method{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.payment-method-choose{
    color: #9e9e9e;
    font-size: 16px;
}
.up-payment-methods-flex{
    background-color: #000;
    box-sizing: border-box;
    padding: 10px;
    max-width: 400px;
}
.up-payment-methods-flex .add-checkout{
    background-color: #131313;
}
.up-payment-methods-flex .add-checkout:hover{
    background-color: #9f0e0e;
}
.up-save-changes{
    max-width: 220px;
    width: 100%;
}

.about-company-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.ac-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}
.acc-text{
    color: #fff;
    font-size: 20px;
    max-width: 790px;
}
.acc-image{
    max-width: 790px;
    width: 100%;
    object-fit: cover;
}
.acc-advantages{
    max-width: 790px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.acca-item{
    background-color: #212121;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    min-height: 107px;
}
.acca-item-title{
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
}
.acca-item-text{
    color: #9e9e9e;
    font-size: 16px;
}
.brands-partners-wrapper {
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    background: #000;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bp-autoscroll {
    display: flex;
    width: max-content;
    gap: 40px;
}

.bpa-left {
    animation: scroll-left 60s linear infinite;
}

.bpa-right {
    animation: scroll-right 60s linear infinite;
}

.bpa-item {
    max-width: 200px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.privacy-policy-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pp-item-title{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.pp-item-text{
    margin-top: 10px;
    color: #9e9e9e;
    font-size: 16px;
    line-height: 20px;
}
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}
.gallery-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    cursor: grab;
    user-select: none;
    scroll-behavior: smooth;
}
.gallery-wrapper:active{
    cursor: grabbing;
}
.gallery-item {
    width: 385px;
    height: 360px;
    flex-shrink: 0;  
    user-select: none;        /* ✅ предотвращает сжатие элементов */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* чтобы изображение красиво вписывалось */
}
.gallery-wrapper::-webkit-scrollbar {
    display: none;
}
.shipping-and-checkout-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.sac-moscow{
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid #212121;
}
.sacm-label{
    color: #fff;
    font-size: 16px;
}
.sacm-table{
    margin-top: 10px;
}
.sacm-table-row{
    box-sizing: border-box;
    padding: 7px;
    padding-left: 20px;
    margin: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.sacm-main-row{
    color: #9e9e9e;
    background-color: #222222;
}
.sacm-child-row{
    color: #fff;
    border-bottom: 1px solid #212121;
}
.sacm-table li{
    width: 500px;
}
.sacm-gray-text{
    color: #9e9e9e;
}
.sac-rf{
    max-width: 1200px;
    margin-top: 50px;
}
.sac-rf .sacm-table-row{
    justify-content: flex-start;
    gap: 30px;
}
.feedback-forms-wrapper{
    max-width: 790px;
    margin-top: 50px;
}
.ffw-inputs{
    display: flex;
    gap: 20px;
}
.ffw-inputs textarea, .ffw-inputs input{
    background-color: #000;
    box-sizing: border-box;
    padding: 10px;
    outline: 2px solid #9f0e0e;
    color: #fff;
    border: 0;
    resize: none;
    font-family: Play;
}
.ffw-inputs textarea::placeholder, input::placeholder{
    color: #9e9e9e;
}
.ffw-inputs textarea{
    width: 500px;
    height: 190px;
}
.ffw-inputs input{
    width: 270px;
    height: 50px;
}
.ffw-inputs-user-data{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.personal-data-agreement{
    width: fit-content;
    margin-top: 0;
    height: 50px;
}
.ffw-bottom{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.guarantee-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.gw-container-flex{
    display: flex;
    gap: 20px;
}
.gwcf-left{
    gap: 50px;
    display: flex;
    flex-direction: column;
    max-width: 790px;
}
.gwcf-right{
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.gwcf-right-img img{
    max-width: 790px;
}
.gwcf-right-img-mobile{
    display: none;
}
.gwcf-left-text{
    color: #9e9e9e;
    font-size: 16px;
}
.gwcf-left-text a{
    color: #E08026;
    font-size: 16px;
    text-decoration: underline;
}
.guarantee-table{
    box-sizing: border-box;
    margin: 0;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #212121;
}
.guarantee-table li{
    color: #fff;
}
.faq-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-question{
    background-color: #212121;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
}
.faq-question p{
    color: #fff;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #212121;
}

.faq-answer p {
    color: #9e9e9e;
    margin: 10px 0;
}

.faq-answer.open {
    max-height: 500px; /* достаточно большое значение для контента */
}

.faq-question img {
    height: 13px;
    transition: transform 0.5s ease;
    transform: rotate(-90deg);
}

.faq-question img.rotated {
    transform: rotate(0deg);
}

.faq-answer p{
    color:#9e9e9e;
}
.contacts-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.cw-container{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.cw-left-part{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.contacts-block{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contacts-block h2{
    margin-bottom: 0;
}
.contacts-items{
    display: flex;
    flex-wrap: wrap;
    width: 450px;
    gap: 50px;
}
.contacts-item{
    width: 200px;
}
.ci-name{
    color: #9e9e9e;
    font-size: 16px;
    margin-bottom: 10px;
}
.ci-caption{
    color: #fff;
    font-size: 16px;
}
.cw-map{
    max-width: 900px;
    width: 100%;
    height: 500px;
    display: flex;
    flex-shrink: 0;
}
.cw-map img{
    width: 100%;
    object-fit: contain;
}
.contacts-buttons{
    flex-direction: column;
    gap: 20px;
}
.contacts-buttons svg{
    width: 50px;
}
.contacts-buttons div{
    display: flex;
    gap: 20px;
    align-items: center;
}
.contacts-buttons p{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    text-decoration: underline;
}
.ie-name{
    font-size: 16px;
    color: #fff;
}
.ie-table{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ie-information{
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.iei-left{
    color: #9e9e9e;
    width: 80px;
}
.iei-right{
    color: #fff;
}
.news-page-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.news-head{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.news-date{
    text-align: right;
}
.news-page-wrapper img{
    max-width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.news-text{
    font-size: 16px;
    color: #9e9e9e;
    max-width: 790px;
}
.popup-notification{
    min-height: 30px;
    max-height: 80px;
    background-color: #000;
    box-sizing: border-box;
    border: 2px solid #9f0e0e;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: fixed;
    bottom: 20px;
    right: -300px; /* изначально скрыто за экраном */
    transition: right 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}
.popup-notification.show {
    right: 20px;
    opacity: 1;
    pointer-events: auto;
}
.atcn-image{
    width: 60px;
    height: 60px;
}
.atcn-image img{
    width: 100%;
    object-fit: contain;
}
.atcn-caption{
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}
.atcn-caption p{
    font-size: 16px;
}
.atcn-caption button{
    width: 178px;
    height: 30px;
}
.product-card-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.pc-container{
    display: flex;
    margin-bottom: 50px;
}
.pcc-left-part{
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    border: 1px solid #212121;
    border-right: 0;
    height: fit-content;
}
.add-to-favorites{
    background: 0;
}
.pcc-main-image {
    width: 100%;
    height: 100%;
    max-width: 580px;
    max-height: 580px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden; /* скрывает всё, что за пределами области */
    position: relative;
    box-sizing: border-box;
}

.main-image-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;

}

.main-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    margin: auto;
    transform: scale(0.8);
}
.pcc-images{
    padding-top: 20px;
    display: flex;
    gap: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    scroll-behavior: smooth;
    transition: transform 0.5s ease;
    margin-left: auto;
    margin-right: auto;
}
.pcc-images::-webkit-scrollbar {
    height: 10px;
    background: #131313;
}
.pcc-images::-webkit-scrollbar-thumb {
    background: #9f0e0e;
}
.pcc-images-item{
    width: 125px;
    height: 125px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: 0.3s;
    border: 1px solid transparent;
    transition: transform 0.3s ease; /* Плавное изменение для сдвига */
}
.pcc-images-item:hover{
    background-color: #212121;
    transition: 0.3s;
    cursor: pointer;
}
.pcc-arrows{
    position: absolute;
    max-width: 560px;
    width: 100%;
    top: 40%;
    display: flex;
    justify-content: space-between;
}
.pcc-arrows button{
    position: static;
    max-width: 560px;
}
.pcc-images-item.selected {
    border: 1px solid #9f0e0e; /* Выделение выбранной миниатюры */
}

.pcc-images-item:hover {
    background-color: #212121;
    transition: 0.3s;
}

.pcc-images-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pcc-arrows {
    position: absolute;
    max-width: 560px;
    width: 100%;
    top: 40%;
    display: flex;
    justify-content: space-between;
}

.pcc-arrows button {
    position: static;
    max-width: 560px;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.image-popup-content {
    position: relative;
    background: #131313;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.popup-images {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-images img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.popup-thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
}

.popup-thumbnails .pcc-images-item {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-thumbnails .pcc-images-item.selected {
    border-color: #9f0e0e;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.popup-nav {
    background: none;
    color: white;
    font-size: 30px;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
}

.popup-nav.prev-slide {
    left: 5%;
}

.popup-nav.next-slide {
    right: 5%;
}
.pcc-right-part{
    max-width: 1000px;
    width: 100%;
    background-color: #131313;
    box-sizing: border-box;
    padding: 20px;
}
.pcc-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    position: relative;
}
.pcc-info h2{
    margin-bottom: 10px;
}
.pcci-head{
    display: flex;
    gap: 20px;
    align-items: center;
}
.article{
    color: #9e9e9e;
    font-size: 16px;
}
.pcci-reviews{
    gap: 10px;
    font-size: 16px;
}
.pcci-compare-button{
    position: static;
    width: 110px;
    height: 30px;
    font-size: 16px;
    margin-left: auto;
}
.pcci-isavailable{
    font-size: 16px;
}
.pcci-table{
    background-color: #000;
    margin-bottom: 10px;
    transition: 0.3s;
}
.pcci-table ul{
    margin: 0;
    border-bottom: 1px solid #212121;
}
.pcci-table-head{
    color: #fff;
    background-color: #222222;
    box-sizing: border-box;
    padding: 7px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
#show-more-btn{
    background-color: #000;
    color: #fff;
    font-size: 14px;
    border: none;
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
}
.pcci-table-row{
    background-color: #000;
    gap: 20px;
    display: none;
}
.pcci-table-row.visible{
    display: flex;
}
.pccit-spec-name{
    width: 400px;
}
.pccit-spec{
    color: #9e9e9e;
}
.pccit-more{
    color: #E08026;
    text-decoration: underline;
    cursor: pointer;
}
.pcci-features{
    display: flex;
    gap: 10px;
    align-items: center;
}
.features-text{
    color: #9e9e9e;
}
.pcci-advantages-flex{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pcci-advantages-flex div{
    box-sizing: border-box;
    padding: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    background-color: #000;
    color: #E08026;
}
.pcci-bottom{
    display: flex;
    gap: 20px;
    margin-top: auto;
}
.pcci-bottom button{
    height: 50px;
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.pcci-price{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 40px;
    font-weight: bold;
}
.reviews-container{
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}
.rc-left-part{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1196px;
    width: 100%;
}
.add-review-container{
    box-sizing: border-box;
    padding: 20px;
    background-color: #131313;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-review-container textarea{
    box-sizing: border-box;
    padding: 5px;
}
.add-review-container textarea::placeholder{
    color: #9e9e9e;
}
.rc-title{
    font-weight: bold;
}
.arc-head{
    display: flex;
    justify-content: space-between;
}
.arc-inputs{
   display: flex;
   align-items: center;
   gap: 10px; 
}
.arc-inputs input{
    height: 30px;
    width: 200px;
}
.rating-stars {
    display: flex;
    gap: 5px;
    font-size: 24px;
    color: #9e9e9e;
    cursor: pointer;
}

.rating-stars .star.active {
    color: #E08026; /* Золотой цвет */
}
.rc-stars-block{
    padding: 20px;
    box-sizing: border-box;
    background-color: #131313;
    max-width: 385px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 230px;
}
.rc-stars img{
    width: 35px;
    height: 35px;
}
.rc-stars div{
    gap: 10px;
}
.rc-stars p{
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.stars-amount{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stars-scale{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stars-scale p{
    color: #9e9e9e;
}
.scale-bar{
    width: 230px;
    height: 10px;
    border-radius: 50px;
    background-color: #c4c4c4;
}
.scale-bar-fill{
    height: 10px;
    width: 30%;
    background-color: #E08026;
    border-radius: 50px;
}
.reviews-list{
    box-sizing: border-box;
    padding: 20px;
    background-color: #131313;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.user-review{
    display: flex;
    gap: 10px;
}
.ur-content{
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.ur-image{
    display: flex;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: space-around;
    overflow: hidden;
    flex-shrink: 0;
}
.ur-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.urc-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.urc-name{
    font-weight: bold;
    font-size: 20px;
}
.urc-date{
    color: #9e9e9e;
}
.urc-head-right{
    display: flex;
    gap: 10px;
    align-items: center;
}
.ur-text{
    color: #9e9e9e;
}
.fps-section {
    background-color: #000;
    color: #fff;
  }
  
  
  .fps-legend {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
  }
  
  .legend-item {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
  }
  
  .legend-item.green { background-color: #00A322; }
  .legend-item.orange { background-color: #E08026; }
  .legend-item.red { background-color: #9f0e0e; }
  
  .fps-game {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  
  .fps-game img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .fps-content {
    flex: 1;
  }
  
  .game-title {
    margin: 0 0 10px;
    font-weight: bold;
  }
  
  .fps-bars {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .fps-bar {
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
  }
  
  .fps-bar.green { background-color: #00A322; }
  .fps-bar.orange { background-color: #E08026; }
  .fps-bar.red { background-color: #9f0e0e; }
  
  .pc-complectation-title {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 30px;
  }
  
  .pc-complectation-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .complectation-item {
    display: flex;
    gap: 50px;
    border-radius: 10px;
  }
  .ci-text{
    width: 100%;
  }
  .ci-text p{
    color: #a3a3a3;
  }
  .ci-text h3{
    margin: 0;
    margin-bottom: 10px;
  }
  .comp-image-placeholder {
    max-width: 1000px;
    width: 100%;
    height: 370px;
    background-color: #ffffff;
    flex-shrink: 0;
  }
  .comp-image{
    min-width: 200px;
    /* max-width: 200px; */
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .comp-image img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .comp-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
  }
  
  .comp-text h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
  }
  
  .ct-description {
    color: #9e9e9e;
    font-size: 16px;
    line-height: 1.5;
    max-width: 747px;
    max-height: 200px;
    transition: max-height 0.4s ease;
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
  }
  .ct-description.expanded{
    max-height: unset;
    display: block;
  }
  .favorites-wrapper{
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
  }
  .favorites-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .remove-from-favorites{
    background-color: #9f0e0e;
    color: #fff;
    font-weight: bold;
    height: 30px;
    }
.remove-from-favorites:hover{
    cursor: pointer;
    background-color: #E08026;
}
    .iicc-fav-and-price{
        display: flex;
        justify-content: space-between;
    }
@media (max-width: 1616px) {
    .news-container{
        max-width: 1450px;
    }
    .news-item{
        max-width: 300px;
    }
    .news-image{
        max-width: 300px;
    }
    .footer-content{
        max-width: 1400px;
        justify-content: space-between;
    }
    
    .catalogue-wrapper{
        max-width: 1200px;
    }
    .search-results-wrapper, .help-banner-wrapper, .shopping-cart-wrapper, 
    .you-may-also-like-wrapper, .checkout-wrapper, .compare-wrapper, 
    .reg-login-page-wrapper, .user-profile-wrapper, .about-company-wrapper, 
    .privacy-policy-wrapper, .shipping-and-checkout-wrapper, .guarantee-wrapper, 
    .contacts-wrapper, .configurator-wrapper, .parts-list-wrapper, .news-page-wrapper,
    .product-card-wrapper, .news-list-wrapper, .favorites-wrapper{
        margin-left: 50px;
        margin-right: 50px;
    }
    .gwcf-left img{
        max-width: 700px;
    }
    
}
@media (max-width: 1436px) {
    .news-container{
        max-width: 1300px;
    }
    .news-item{
        max-width: 250px;
    }
    .news-image{
        max-width: 250px;
    }
    .first-about-button, .first-contacts-button, .first-guarantee-button, .first-news-button{
        display: none;
    }
    .header-more-button{
        display: flex;
    }
    .footer-content{
        max-width: 1200px;
    }
    
    .yandex-rating-wrapper{
        margin-right: auto;
        margin-left: 0;
        margin-top: 20px;
    }
    .pcci-head{
        flex-wrap: wrap;
        width: 400px;
    }
    .pcci-compare-button{
        margin-left: 0;
        order: -1;
    }
    .pcci-price{
        left: 0;
        bottom: 70px;
    }
    .comp-image-placeholder{
        max-width: 400px;
    }
    .pcci-table-row{
        flex-wrap: wrap;
        gap: 10px;
    }
}
@media (max-width: 1300px) {
    .header-nav-wrapper{
        justify-content: flex-start;
        gap: 5px;
    }
    .header-logo{
        margin-right: 20px;
    }
    
    .header-more-button p{
        margin-left: 5px;
        margin-right: 5px;
    }
    .computer-series-wrapper{
        max-width: 1100px;
    }
    .series-part{
        max-width: 30%;
    }
    .configurator-banner-left-part{
        margin-top: 0;
    }
    .advantages-flex{
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    .advantage-image{
        max-width: 90px;
    }
    .news-container{
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    .news-item {
        max-width: 220px;
    }
    .news-image{
        max-width: 220px;
    }
    .footer-content{
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .footer-left-part{
        max-width: 800px;
        flex-direction: row;
        margin-right: 0;
        justify-content: space-around;
    }
    .subscribe{
        max-width: 180px;
        width: 100%;
        padding-top: 15px;
    }
    .footer-icons{
        gap: 10px;
    }
    .configurator-bottom{
        flex-wrap: wrap;
    }
    .catalogue-wrapper{
        max-width: 1180px;
        margin-top: 100px;
    }
    .catalogue-container{
        max-width: 1200px;
        gap: 10px;
    }
    .catalogue-card-wrapper{
        max-width: 280px;
        font-size: 20px;
    }
    .shopping-cart-container{
        flex-wrap: wrap;
    }
    .shopping-cart-right-part{
        max-width: 860px;
    }
    .order-info-wrapper{
        max-width: 860px;
    }
    .ymal-flex{
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        justify-content: space-around;
    }
    .ymal-item-wrapper{
        min-width: 280px;
    }
    .compare-container{
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        justify-content: space-around;
    }
    .yandex-rating-wrapper{
        margin-left: auto;
        margin-right: auto;
    }
    .reg-login-page-wrapper{
        flex-direction: column;
        gap: 20px;
        height: unset;
    }
    .rlp-left-part{
        max-width: 500px;
        text-align: center;
    }
    /* .rlp-left-part h2{
        font-size: 20px;
    } */
    .ac-container{
        flex-direction: column;
    }
    .gw-container-flex{
        flex-direction: column;
    }
    .gwcf-right{
        order: -1;
    }
    .gwcf-right img{
        max-width: 790px;
    }
    .pcci-price{
        position: static;
        text-align: right;
    }
    .pcci-bottom button{
        /* width: 50%; */
        gap: 10px;
        justify-content: center;
    }
}
@media (max-width: 1120px) {
    .burger-menu-button{
        display: flex;
    }
    .header-nav-wrapper{
        display: none;
    }
    .computer-series-wrapper{
        max-width: 800px;
    }
    .series-part{
        max-width: 40%;
    }
    .news-container{
        max-width: 800px;
    }
    .news-item{
        max-width: 345px;
    }
    .news-image{
        max-width: 345px;
    }
    .advantages-flex{
        max-width: 800px;
    }
    .advantage-item{
        max-width: 345px;
    }
    .catalogue-wrapper{
        max-width: 1000px;
        margin-top: 100px;
    }
    .catalogue-container{
        max-width: 830px;
        gap: 10px;
    }
    .catalogue-card-wrapper{
        max-width: 200px;
        font-size: 12px;
    }
    /* .help-banner-title{
        font-size: 20px;
    } */
    .help-banner-caption{
        width: 300px;
    }
    .help-banner-forms{
        max-width: 250px;
    }
    .help-banner-caption{
        margin-left: 50px;
    }
    .help-banner-back{
        left: -300px;
    }
    .banner-inner-shadow{
        left: -170px;
    }
    .checkout-container{
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        max-width: 860px;
    }
    .upc-left-part{
        flex-direction: row;
        max-width: unset;
    }
    .upc-bonuses-container{
        max-width: 25%;
    }
    .upc-main-info{
        max-width: 400px;
    }
    .upc-quit-button{
        margin-left: auto;
    }
    .up-container{
        flex-direction: column;
    }
    .cw-container{
        flex-direction: column;
    }
    .cw-map{
        order: -1;
    }
    .reviews-container{
        flex-direction: column;
    }
    .rc-stars-block{
        order: -1;
    }
    .pcci-table-row{
        flex-direction: column;
    }
    .pccit-spec-name{
        width: unset;
    }
    .pcc-left-part{
        max-width: 400px;
        max-height: 520px;
    }
    .pcc-images-item{
        width: 80px;
        height: 80px;
    }
    .pcc-arrows{
        max-width: 360px;
    }
    .configurator-banner-title, .configurator-banner-button{
        font-size: 20px;
    }
    
}
@media (max-width: 767px) {
    body{
        min-width: 320px;
    }
    .about-company-wrapper, .contacts-wrapper, .shopping-cart-wrapper, .guarantee-wrapper,
    .news-page-wrapper, .privacy-policy-wrapper, .user-profile-wrapper, .shipping-and-checkout-wrapper, .news-list-wrapper{
        margin-top: 20px;
    }
    .header-wrapper{
        height: 110px;
        position: static;
    }
    .header-body{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .header-connect-buttons{
        display: none;
    }
    .header-functional-buttons{
        margin-top: 0;
        justify-content: flex-end;
    }
    .header-functional-buttons button{
        width: 20px;
        height: 20px;
    }
    .header-functional-buttons img{
        width: 20px;
        height: 20px;
        gap: 8px;
        width: auto;
    }
    .header-right-part{
        height: 70px;
        margin-top: 10px;
        margin-left: 0;
    }
    .header-search{
        position: absolute;
        height: 30px;
        width: calc(100% - 20px);
        max-width: 747px;
        margin-top: 40px;
        left: 10px;
        background-position: 98%;
    }
    .burger-menu-button{
        order: -1;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .burger-menu-button img{
        width: 20px;
    }
    .burger-menu-button p{
        display: none;
    }
    .burger-menu-container .header-logo{
        position: static;
        margin-left: 56px;
    }
    .burger-menu-container .header-connect-buttons{
        margin-top: 20px;
        display: flex;
        margin-left: 6px;
    }
    .burger-menu-container .header-nav-button{
        width: 200px;
    }
    .header-logo{
        position: absolute;
        width: 100px;
        height: 24px;
        margin-right: 0;
        margin-top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .slider-wrapper{
        padding-top: 0px;
        height: 325px;
        height: 100%;
    }
    .slider-content{
        max-height: 325px;
        height: 100%;
    }
    .slider-title button{
        height: 30px;
        font-size: 16px;
    }
     .slider-title h1{
        margin-bottom: 10px;
    }
    .slider-images{
        height: 150px;
    }
    .slider-nav{
        display: none;
    }
    .slider-indicators{
        display: none;
    }
    .slider-title{
        box-shadow: 0px 200px 43px -50px rgba(0, 0, 0, 0.5) inset;
        top: 125px;
        text-align: center;
        width: 100%;
        max-width: 767px;
        height: 250px;
        left: 0%;
    }
    .slider-title h1{
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .slider-title p{
        font-size: 10px;
        font-weight: bold;
    }
    .indicator{
        width: 10px;
        height: 10px;
    }
    .computer-series-title-wrapper{
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        width: fit-content;
    }
    .series-title-caption{
        font-size: 14pt;
    }
    .series-title-caption-upper{
        font-size: 20px;
    }
    .computer-series-wrapper{
        margin-top: 20px;
        max-width: 748px;
        flex-direction: column;
    }
    .series-part{
        max-width: 90%;
    }
    .computer-series-part-button{
        font-size: 14px;
        height: 30px;
    }
    .advantages-banner-wrapper{
        background-image: none;
    }
    .configurator-banner-wrapper{
        margin-top: 20px;
        max-width: 768px;
        height: 250px;
    }
    .configurator-banner-pc{
        display: none;
    }
    .configurator-banner-container{
        flex-direction: column;
        align-items: center;
    }
    .configurator-banner-back{
        object-fit: cover;
        height: 100%;
    }
    .configurator-banner-left-part{
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
    }
    .configurator-banner-title{
        text-align: center;
        font-size: 20px;
        max-width: 768px;
        margin-top: 20px;
    }
    .configurator-banner-button{
        width: 300px;
        height: 50px;
        font-size: 14pt;
    }
    .second-slider-wrapper{
        display: none;
    }
    .advantages-banner-wrapper{
        margin-top: 20px;
    }
    .news-wrapper{
        margin-top: 20px;
    }
    .news-container{
        max-width: 748px;
    }
    .footer-wrapper{
        margin-top: 20px;
    }
    .footer-content{
        margin-top: 20px;
    }
    .footer-left-part{
        flex-direction: column;
        max-width: 300px;
        gap: 20px;
    }
    .footer-logo{
        max-width: 300px;
        width: 300px;
    }
    .footer-icons{
        width: 220px;
    }
    .footer-info{
        margin-top: 0;
        margin-bottom: 0;
    }
    .footer-right-part{
        max-width: 300px;
        gap: 20px;
    }
    .configurator-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .configurator-build-container{
        flex-direction: column;
        align-items: center;
    }
    .help-number{
        max-width: 405px;
        margin-left: auto;
    }
    .help-number br{
        display: block;
    }
    .build-parts-flex{
        padding-right: 0;
        align-items: center;
        width: 100%;
        background-color: #000;
        flex-wrap: nowrap;
        flex-direction: column;
        padding: 10px;
    }
    .final-price-label{
        display: none;
    }
    .configurator-bottom-right-part{
        height: auto;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: auto;
        margin-right: auto;
    }
    .mobile-price-label{
        display: block;
    }
    .build-parts-flex::-webkit-scrollbar {
        display: none;
    }
    .build-parts-flex::-webkit-scrollbar-thumb {
        display: none;
    }
    .build-case-image{
        width: 263px;
    }
    .ready-to-pick{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .build-part{
        padding-left: 10px;
        width: 100%;
    }
    .chosen-part{
        gap: 10px;
    }
    .part-replace-button{
        margin-left: auto;
    }
    .build-part-title{
        font-size: 14px;
    }
    .build-part-name{
        font-size: 18px;
    }
    .configurator-bottom-right-part{
        gap: 10px;
    }
    .save-by-button{
        width: 50px;
        font-size: 14px;
        height: 30px;
    }
    .build-order-button{
        width: 220px;
    }
    .parts-list-wrapper{
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        background-color: #000;
    }
    .pc-parts-list{
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        flex-direction: column;
    }
    .filters-button{
        display: flex;
        margin: 0;
    }
    .mobile-filters-wrapper{
        background-color: #000;
        width: 100%;
        height: 100%;
        position: fixed;
        box-sizing: border-box;
        padding: 20px;
        top: 0;
        z-index: 2;
        left: 0;
        transition: left 0.3s ease-in-out;
    }
    
    .exit-filter-popup{
        width: 24px;
        height: 24px;
        padding: 0;
        background-color: #000;
        cursor: pointer;
    }
    .parts-list-item{
        max-width: 747px;
        max-height: 170px;
        width: 100%;
        gap: 10px;
        justify-content: space-between;
    }
    .pli-image-container{
        width: 102px;
    }
    .list-item-image{
        width: 102px;
    }
    .item-name{
        font-size: 14px;
    }
    .item-buttons{
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .item-buttons button{
        font-size: 14px;
    }
    .item-compare{
        width: 100px;
        margin: 0;
    }
    .item-remove-and-count{
        width: 24px;
    }
    .remove-item-button{
        width: 24px;
        height: 54px;
    }
    .item-counter{
        width: 24px;
        height: 88px;
    }
    .item-counter input{
        width: 24px;
        height: 40px;
    }
    .item-counter button{
        width: 24px;
        height: 24px;
    }
    .specs-drop-list{
        display: none;
    }
    .mobile-filters-container{
        display: flex;
        flex-direction: column;
    }
    .mobile-filters-title{
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #fff;
        font-weight: bold;
    }
    .mobile-drop-list-main{
        width: 100%;
    }
    .mobile-filters-bottom{
        width: 100%;
        height: 80px;
        position: fixed;
        bottom: 0;
        background-color: #131313;
        left: 0;
        box-sizing: border-box;
        padding: 10px;
    }
    .mobile-filters-buttons{
        display: flex;
        margin-left: auto;
        margin-right: auto;
        gap: 10px;
        max-width: 707px;
        justify-content: center;
    }
    .apply-filters-button{
        height: 50px;
        background-color: #9f0e0e;
        color: #fff;
        font-weight: bold;
        width: 100%;
    }
    .cancel-filters-button{
        height: 50px;
        background-color: #E08026;
        color: #fff;
        font-weight: bold;
        width: 70%;
    }
    .block-title{
        font-size: 20px;
        width: fit-content;
    }
    .item-search-field{
        background-color: #131313;
        max-width: 700px;
        width: 100%;
        /* margin-top: 10px; */
    }
    .mobile-item-info{
        display: block;
        width: 60px;
        margin: 0;
    }
    .item-info{
        display: none;
    }
    .catalogue-wrapper{
        max-width: 747px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .catalogue-title{
        font-size: 20px;
    }
    .catalogue-container{
        gap: 10px;
        max-width: 747px;
        justify-content: center;
    }
    .catalogue-card-wrapper{
        max-width: 45%;
        font-size: 14px;
        padding: 10px;
        padding-top: 5px;
        gap: 10px;
    }
    .catalogue-back-button{
        height: 30px;
        right: 20px;
        font-size: 14px;
        top: 132px;
        padding: 0;
    }
    .search-results-wrapper{
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .search-results-title{
        font-size: 20px;
    }
    .search-results-sorting{
        flex-wrap: wrap;
        gap: 10px;
    }
    .search-results-items-flex{
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    .floating-filters{
        display: none;
    }
    .left-filters-wrapper{
        display: none;
    }
    .search-results-sorting-right{
        font-size: 14px;
    }
    .found-in-categories-container{
        gap: 10px;
    }
    .help-banner-wrapper{
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        flex-direction: column;
        gap: 10px;
        height: auto;
        padding: 10px;
    }
    .help-banner-back{
        top: 0;
        height: 100%;
        width: auto;
        left: 0;
        opacity: 0.3;
    }
    .banner-inner-shadow{
        display: none;
    }
    .help-banner-caption{
        margin: 0;
        margin-top: 10px;
    }
    .help-banner-bottom-text{
        text-align: center;
        font-size: 14px;
    }
    .help-banner-title{
        text-align: center;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .help-banner-forms p{
        font-size: 14px;
    }
    .help-banner-forms button{
        font-size: 14px;
    }
    .applied-filters-title{
        display: none;
    }
    .shopping-cart-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .shopping-cart-title{
        font-size: 20px;
    }
    .shopping-cart-left-part{
        min-width: 300px;
    }
    .shopping-cart-right-part{
        max-width: 747px;
    }
    .choose-all-wrapper{
        height: 60px;
    }
    .choose-all-title{
        font-size: 14px;
    }
    .remove-all-button{
        width: 100px;
        height: 30px;
    }
    .item-in-cart-wrapper{
        position: relative;
    }
    .cart-item-checkboxes{
        position: absolute;
        flex-direction: row;
        z-index: 1;
        bottom: 22px;
        left: 20px;
    }
    .item-in-cart-container{
        max-width: 747px;
        height: 280px;
    }
    .item-in-cart-caption{
        font-size: 14px;
    }
    .iic-image-container{
        width: 150px;
        height: 150px;
    }
    /* .item-in-cart-container img{
        max-width: 100px;
        max-height: 100px;
    } */
    .item-in-cart-inner-container{
        justify-content: space-between;
        gap: 10px;
    }
    .item-in-cart-counter-and-price{
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .item-in-cart-price{
        font-size: 20px;
    }
    .cart-item-counter{
        width: 90px;
        height: 30px;
    }
    .cart-item-counter button{
        width: 30px;
        height: 30px;
    }
    .cart-item-counter input{
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .order-info-wrapper{
        min-width: unset;
        margin-bottom: 70px;
    }
    .order-info-title p{
        font-size: 14px;
    }
    .order-items-price p{
        font-size: 14px;
    }
    .final-price-container h2{
        font-size: 16px;
    }
    .order-price{
        font-size: 16px;
    }
    .go-to-checkout-button{
        bottom: unset;
        top: 100%;
        margin-top: 20px;
        right: unset;
        padding: 0;
        width: 100%;
        left: 0;
    }
    .you-may-also-like-wrapper{
        margin-top: 70px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .ymal-flex{
        flex-wrap: nowrap;
        overflow-x: scroll;
    }
    .ymal-item-wrapper{
        min-width: 300px;
    }
    .you-may-also-like-wrapper h2{
        font-size: 20px;
    }
    .checkout-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .checkout-title{
        font-size: 20px;
    }
    .checkout-types-flex{
        flex-direction: column;
        align-items: center;
    }
    .checkout-type-container{
        width: 100%;
    }
    
    .user-info-head-necessary{
        font-size: 12px;
        text-align: right;
    }
    .user-info-fields{
        flex-wrap: wrap;
    }
    .user-info-input{
        width: 100%;
    }
    .shipping-types-flex p{
        font-size: 14px;
    }
    .shipping-date-wrapper p{
        font-size: 14px;
    }
    .shipping-type-title{
        flex-direction: column;
    }
    .change-destination{
        margin-left: 0;
    }
    .compare-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
        max-width: 747px;
    }
    .show-only-differencies{
        width: 100%;
    }
    .compare-container{
        justify-content: unset;
        gap: 10px;
        max-width: 747px;
    }
    .comparing-item-wrapper{
        width: 48%;
    }
    .comparing-item-wrapper p{
        font-size: 14px;
    }
    .comparing-item-wrapper li{
        font-size: 12px;
    }
    .ci-buttons{
        flex-wrap: wrap;
    }
    .ci-buttons button{
        width: 100%;
        font-size: 14px;
    }
    .reg-login-page-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .rlp-left-part{
        display: none;
    }
    .rlp-forms-wrapper{
        padding: 10px;
    }
    .rlpft-reg{
        font-size: 20px;
    }
    .rlpf-input{
        height: 30px;
    }
    .rlp-forms-wrapper input::placeholder{
        font-size: 12px;
    }
    .personal-data-text{
        font-size: 12px;
    }
    .reg-button{
        height: 30px;
        width: 100%;
        font-size: 14px;
    }
    .already-registered{
        text-align: center;
    }
    .already-registered br{
        display: block;
    }
    .empty-cart-banner img{
        width: 200px;
    }
    .user-profile-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .user-profile-wrapper h2{
        font-size: 20px;
    }
    .upc-left-part{
        flex-direction: column;
    }
    .upc-main-info{
        max-width: unset;
        width: 100%;
    }
    .upc-bonuses-container{
        flex-direction: row;
        width: 100%;
        max-width: unset;
        align-items: center;
    }
    .bonuses-amount{
        margin-left: auto;
    }
    .upc-orders-container{
        padding: 10px;
    }
    .upcof-order-wrapper{
        flex-direction: column;
        height: unset;
        align-items: center;
        gap: 20px;
        padding: 10px;
    }
    .upcof-order-wrapper p{
        font-size: 14px;
    }
    .upcofow-image{
        width: 100px;
        height: 100px;
    }
    .upcofow-left-part{
        margin-right: auto;
    }
    .upcofow-right-part{
        text-align: left;
        margin-left: 0;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
    }
    .copied-notification{
        display: none;
    }
    .udf-input{
        width: 100%;
        max-width: unset;
    }
    .up-password-container{
        max-width: unset;
        width: 100%;
    }
    .payment-data-container p{
        font-size: 14px;
    }
    .up-payment-methods-flex{
        width: 100%;
        max-width: unset;
    }
    .up-save-changes{
        margin-left: 0;
        max-width: unset;
        width: 100%;
    }
    .about-company-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .acc-text{
        font-size: 14px;
    }
    .acca-item-title, .acca-item-text{
        font-size: 14px;
    }
    .about-company-wrapper h2{
        font-size: 20px;
    }
    .ac-container{
        margin-bottom: 20px;
    }
    .gallery-item{
        width: 200px;
        height: 200px;
    }
    .bpa-item{
        max-width: 100px;
    }
    .privacy-policy-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .privacy-policy-wrapper h2{
        font-size: 20px;
    }
    .shipping-and-checkout-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .shipping-and-checkout-wrapper h2{
        font-size: 20px;
    }
    .shipping-and-checkout-wrapper p{
        font-size: 14px;
    }
    .sacm-table{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sac-moscow{
        padding: 0px;
        border: 0;
    }
    .sacm-table li{
        width: 100%;
    }
    .sacm-table-row li{
       font-size: 14px;
    }
    .sacm-main-row{
        display: none;
    }
    .sacm-table-row{
        flex-direction: column;
        padding-left: 7px;
    }
    .sacm-li-mobile{
        color: #9e9e9e;
        background-color: #222222;
        box-sizing: border-box;
        padding: 7px;
    }
    .sacm-child-row{
        padding: 0;
        border: 0;
    }
    .sac-rf .sacm-table-row{
        gap: 10px;
    }
    .ffw-inputs{
        flex-direction: column;
    }
    .ffw-inputs input{
        width: 100%;
        height: 30px;
    }
    .ffw-inputs textarea{
        width: 100%;
        min-height: 100px;
    }
    .ffw-bottom{
        flex-direction: column;
    }
    .sac-rf{
        margin-top: 20px;
    }
    .feedback-forms-wrapper{
        margin-top: 20px;
    }
    .personal-data-agreement{
        padding: 10px;
        font-size: 14px;
        align-items: center;
    }
    .guarantee-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .guarantee-wrapper h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .gwcf-left{
        gap: 20px;
    }
    .gwcf-left p, li{
        font-size: 14px;
    }
    .gwcf-left-text a {
        font-size: 14px;
    }
    .guarantee-table{
        flex-direction: column;
    }
    .contacts-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .contacts-wrapper h2{
        font-size: 20px;
    }
    .cw-left-part{
        gap: 20px;
    }
    .contacts-items{
        max-width: 300px;
        gap: 20px;
    }
    .contacts-items p{
        font-size: 14px;
    }
    .cw-map{
        max-width: 747px;
        width: auto;
        height: 300px;
    }
    .contacts-buttons svg{
        width: 40px;
    }
    .contacts-buttons div{
        gap: 10px;
    }
    .news-page-wrapper{
        margin-left: 10px;
        margin-right: 10px;
    }
    .news-page-wrapper img{
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .news-head{
        flex-direction: column;
        justify-content: flex-start;
    }
    .news-page-wrapper h2{
        font-size: 20px;
    }
    .news-date{
        text-align: left;
    }
    .product-card-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .product-card-wrapper h2{
        font-size: 20px;
    }
    .product-card-wrapper p{
        font-size: 14px;
    }

    .pc-container{
        flex-direction: column;
        gap: 20px;
    }
    .pcc-left-part{
        border: 0;
        max-width: 747px;
        max-height: unset;
        padding: 0;
    }
    .pcc-main-image{
        margin-left: auto;
        margin-right: auto;
    }
    .pcc-images{
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        gap: 10px;
        width: 100%;
    }
    .pcc-right-part{
        background-color: #000;
        padding: 0;
    }
    .pcci-head{
        width: unset;
        gap: 10px;
    }
    .pcci-head p{
        font-size: 14px;
    }
    .pcci-compare-button{
        width: 100%;
    }
    .pcci-isavailable {
        font-size: 14px;
    }
    .pcci-advantages-flex div{
        background-color: #131313;
    }
    .pcci-reviews{
        order: -1;
    }
    .pcci-price{
        order: -1;
        text-align: left;
        font-size: 30px !important; 
    }
    .pcc-info h2{
        order: -1;
        font-size: 30px;
        margin-bottom: 0;
    }
    .pcc-images-item{
        width: 70px;
        height: 70px;
    }
    .pcc-images::-webkit-scrollbar{
        display: none;
    }
    .pcci-bottom{
        padding: 10px;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        z-index: 3;
        bottom: 0;
        background-color: #131313;
        width: 100%;
    }
    .pcci-bottom button{
        /* width: 50%; */
        font-size: 14px;
    }
    .pcci-advantages-flex div{
        font-size: 14px;
    }
    .pc-container{
        margin-bottom: 20px;
    }
    .rc-stars-block{
        width: 100%;
        max-width: unset;
    }
    .rc-stars div{
        gap: 5px;
    }
    .rc-stars img{
        width: 30px;
        height: 30px;
    }
    .rc-stars p{
        font-size: 30px !important;
    }
    .scale-bar{
        width: 60%;
    }
    .arc-inputs{
        flex-direction: column;
        align-items: start;
       
    }
    .arc-inputs input{
        width: 100%;
    }
    .legend-item{
        font-size: 14px;
    }
    .fps-bars{
        max-width: 70%;
    }
    .complectation-item{
       gap: 10px;
       flex-direction: column;
       flex-wrap: wrap;
    }
    .complectation-item .comp-image{
        order: -1;
        margin-left: auto;
        margin-right: auto;
    }
    .comp-image-placeholder{
        order: -1;
        max-width: unset;
        width: 100%;
    }
    .urc-head{
        flex-wrap: wrap;
    }
    .urc-head-right{
        flex-wrap: wrap;
    }
    .urc-head-right img{
        width: 20px;
        height: 20px;
    }
    .rating-stars span{
        line-height: 10px;
    }
    .reviews-count{
        font-size: 14px;
    }
    #addReview{
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .open-chat:hover{
        width: 300px;
        transition: 0.3s ease;
    }
    .news-list-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .news-list-wrapper h2{
        font-size: 20px;
    }
    .nlw-item{
        flex-direction: column;
        padding: 10px;
        height: auto;
        gap: 10px;
    }
    .nlw-item-image-container{
        max-width: unset;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .cnw-container{
        max-width: 747px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .build-cancel-button{
    margin-left: auto;
    margin-right: auto;
}
.favorites-wrapper{
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.favorites-wrapper h2{
    font-size: 20px;
}
.iicc-fav-and-price{
    flex-direction: column;
    gap: 10px;
}
.favorites-wrapper .iic-image-container{
    width: 100px;
    height: 100px;
}
.item-in-cart-wrapper{
    height: unset;
}
.item-in-cart-container{
    height: unset;
    min-height: 260px;
}
}
@media (max-width: 600px) {
    .gwcf-right-img{
        display: none;
    }
    .gwcf-right-img-mobile{
        display: block;
    }
}
@media (max-width: 420px) {
    .comparing-item-wrapper{
        width: 100%;
    }
    .comparing-item-wrapper li{
        font-size: 14px;
    }
}