@media (max-width: 1234px) {
    .headerTop, .headerBottom {
        width: 100%;
        padding: 0 20px;
        margin: 0;
    }
    .main, .footer{
        width: 100%;
        padding: 0 20px;
    }
    .slider{
        display: block;
        height: 22vw;
    }
    .sliderSize, .sliderArea{
        padding: 20px 0;
    }
    
    .footerArea{
        width: 100%;    
    }
}

@media (max-width: 1120px){
    .workTime, .headerSocialLinks{
        display: none;
    }
    .catalogBlock {
        flex: 1 1 calc(33% - 20px); /* 3 элемента в строке */
        width: 45%;
    }
    /* Скрываем лишние элементы */
    .catalogBlock:nth-child(n+4) {
        display: none;
    }
    .catalogArea{
        padding-bottom: 230px;
    }
    
    .catalogArea img{
        width: 200px;
        height: 200px;
        top: 20px;
    }
    .catalogContentArea{
        /*height: 400px;*/
    }
    .catalogContentButton p{
        font-size: 12px;
    }
    .catalogInfo{
        width: 30%;
    }
}

@media (max-width: 960px){
    .newsLink{
        display: none;
    }
    .mainCertificates{
        gap: 72px;
    }
    .service-inner{
        background-size: 100vw !important;
    }
    .text-right{
        bottom: 60px;
    }
    .text-left{
        top: 50px;   
    }
    .catalogArea img{
        width: 180px;
        height: 180px;
    }
    .catalogList{
        width: 45%;
        max-width: 50%;
    }
    .catalogListArea{
        height: auto;
    }
    .mainCertificates {
        gap: 70px;
    }
    .catalogContentArea {
        height: auto;
        flex-direction: column;
    }
    .catalogContentImages, .catalogContentInformation{
        width: 100%;
    }
}

@media (max-width: 830px){
    .headerTopBtn{
        background-color: var(--em-color-silver);
        border-radius: 100px;
        width: 40px;
        height: 40px;
        margin: 0 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .headerPhone{
        margin: 0 0 0 10px;
    }
    .headerTopBtn span, .workTime, .servicesLink{
        display: none !important;
    }
    .headerPhone svg, .headerTopBtn svg, .headerProfile svg{
        aspect-ratio: 1; /* Принудительно делаем квадрат */
        flex-shrink: 0; /* Запрещаем уменьшение */
    }
    .headerPhone svg {
        margin: 0;
        width: 22px;
        height: 22px;
    }
    .headerTopBtn svg{
        margin: 0;
        width: 24px;
        height: 24px;
    }
    .headerProfile svg{
        width: 24px;
        height: 24px;
    }
    .catalogArea img{
        width: 150px;
        height: 150px;
    }
    .vkPostBlock, .newsBlock{
        flex: 1 1 calc(50% - 20px); /* 2 элемента в строке */
    }
    .vkPostBlock:nth-child(n+3), .newsBlock:nth-child(n+3) {
        display: none;
    }
    .catalogContentArea{
        height: auto;
        flex-direction: column;
    }
    .catalogContentImages{
        width: 100%;
    }
    .catalogContentInformation{
        width: 100%;
    }
    .catalogContentButtons{
        position: static;
    }
    .catalogContactInfo p{
        font-size: 14px;
    }
    /*Контакты*/
    .contactsMap iframe{
        height: 400px;
    }
}

@media (max-width: 768px) {
    .empty-catalog{
        padding: 0;
    }
    .empty-catalog h1 {
        font-size: 20px;
    }
    .carInfo {
        flex-direction: column;
    }
    .certificate {
        width: 45%;
    }
    .certificateMain {
        grid-template-columns: auto !important;
    }
    .block{
        height: 100%;
    }
    .service-inner{
        border-radius: none;
        background-size: 123vw !important;
        height: 50%;
    }
    .service-decoration{
        height: 50%;
    }
    .mainCertificates {
        gap: 65px;
    }
    .certificateFrame {
        display: flex;
        justify-content: center;
    }
    .catalogBlock {
        flex: 1 1 calc(50% - 20px);
    }
    .catalogBlock:nth-child(n+3) {
        display: none;
    }
    .sliderBlock{
        height: 70vw; 
    }
    .slider, .sliderArea{
        height: auto;
    }
    .sliderOriginal {
        display: none;
    }
    .sliderMobile {
        display: block;
    }
    .headerTop {
        z-index: 31;
    }
    .headerBotBtnShop{
        background-color: var(--em-color-silver);
        border-radius: 100px;
        width: 40px;
        height: 40px;
        margin: 0 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .headerBotBtn, .headerBotContainer, .headerSocialLinks{
        display: none !important;
    }
    .headerBottomArea{
        justify-content: space-between;
    }
    .burgerMenu {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 12px;
        color: #333;
        transition: color 0.3s ease;
        position: relative;
        width: 40px;
        height: 40px;
    }
    
    .burger-svg,
    .close-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    
    /* Изначальное состояние: бургер виден, крестик скрыт */
    .burger-svg.active {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg);
        visibility: visible;
    }
    
    .burger-svg.noactive {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-180deg);
        visibility: hidden;
    }
    
    .close-svg.active {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg);
        visibility: visible;
    }
    
    .close-svg.noactive {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(180deg);
        visibility: hidden;
    }
    
    /* Анимации для линий бургера */
    .burger-svg .line {
        transition: all 0.4s ease;
    }
    
    .burger-svg.active .line1 {
        transform: translateY(0) rotate(0);
    }
    
    .burger-svg.active .line2 {
        opacity: 1;
    }
    
    .burger-svg.active .line3 {
        transform: translateY(0) rotate(0);
    }
    
    .burger-svg.noactive .line1 {
        transform: translateY(21px) rotate(45deg);
    }
    
    .burger-svg.noactive .line2 {
        opacity: 0;
    }
    
    .burger-svg.noactive .line3 {
        transform: translateY(-21px) rotate(-45deg);
    }
    
    /* Анимации для крестика */
    .close-svg .close-line {
        transition: all 0.4s ease;
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
    }
    
    .close-svg.active .close-line {
        stroke-dashoffset: 0;
    }
    
    .close-svg.noactive .close-line {
        stroke-dashoffset: 60;
    }
    
    /* Анимация пульсации */
    .burgerMenu:hover .burger-svg.active,
    .burgerMenu:hover .close-svg.active {
        animation: pulse 0.6s ease-in-out;
    }
    
    @keyframes pulse {
        0% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, -50%) scale(1.1); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }
    .dropMenu{
        width: 100%;
        height: 100%;
        position: fixed;
        /*background: rgba(255, 255, 255, 0.85);*/
        backdrop-filter: blur(10px);
        left: 0;
        top: 0;
        padding: 140px 20px;
        z-index: 100;
        font-size: 18px;
        font-family: var(--em-font);
        /* для темной темы */
        background: rgba(0, 0, 0, 0.85);
    }
    .socialsDropMenu{
        display: flex;
        gap: 20px;
        margin-top: 10px;
    }
    .socialMediaDropMenu{
        display: flex;
    }
    .socialMediaDropMenu svg{
        width: 30px;
        height: 30px;
    }
    .dropMenuContent{
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow-x: auto;
        height: 100vh;
        -webkit-overflow-scrolling: touch;
        position: absolute;
        padding-bottom: 180px;
        width: 100%;
    }
    .dropMenuContent p{
        font-weight: 600;
    }
    .catalogArea img{
        width: 150px;
        height: 150px;
    }
    .footerBlock{
        width: 50%;
    }
    .catalogContactInfo p{
        font-size: 12px;
    }
    .catalogContent{
        width: 100%;
    }
    .catalogContentArea{
        padding: 10px;
        width: 100%;
    }
    .catalogInfoBlock{
        padding: 20px;
    }
    .catalogInfo{
        width: 100%;
    }
    .catalogInfoBlock {
        display: flex;
        flex-wrap: wrap;
    }
    .nav-button{
        width: 50px;
        height: 50px;
    }
    .headerPhone span {
        display: none;
    }
    .headerPhone {
        border-radius: 100px;
        width: 40px;
        height: 40px;
        margin: 0 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .catalogContactInfo {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .catalogInfoValue {
        width: 50%;
    }
    .catalogTechParams p {
        width: 100%;
    }
    .catalogInfoAvailable {
        display: flex;
        justify-content: flex-end;
        width: 50%;
    }
    /*Контакты*/
    .mainHead{
        padding: 30px 10px 10px 10px;
    }
    .contactsBlock, .contactsMap{
        width: 100%;
    }
    /*Логин*/
    .authBlock{
        margin: 50px auto;
    }
    /*Личный кабинет*/
    .profile{
        flex-direction: column;
    }
    .profileBlock{
        width: 100%;
    }
    .profileArea{
        padding-top: 200px;
    }
}

@media (max-width: 580px){
    .cart-item {
        padding: 20px 0 !important;
    } 
    
    .cart-item-image {
        width: 80px !important;
        height: 80px !important;
    }
    
    .cart-item-controls, .quantity-controls {
        gap: 0 !important;
    }
    
    .quantity-input {
        width: 25px !important;
        font-size: 14px !important;
    }
    
    .quantity-controls {
        flex-direction: column-reverse !important;
    }
    
    
    .inner-left{
        background-position: left bottom !important;
    }
    .inner-right{
        background-position: right bottom !important;
    }
    .text-left {
        top: 65px;
    }
    .text-right{
        bottom: 65px;
    }
    .submit-btn{
        width: 100%;
    }
    .service-decoration{
        z-index: auto;
    }
    .personInfo{
        padding: 30px !important;
    }
    .brand{
        width: 45%;
    }
    .brandMain{
        grid-template-columns: auto;
    }
    .logoFrame{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .logoFrame img{
        width: 200px;
        height: auto;
    }
    .person{
        flex-direction: column;
    }
    .personImageContainer{
        width: auto !important;
    }
    .mainCertificates {
        gap: 8vw;
    }
    .headerPhone{
        border-radius: 100px;
        width: 40px;
        height: 40px;
        margin: 0 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .headerPhone span{
        display: none;
    }
    .mainHead{
        padding: 10px 0 10px 0;
    }
    .catalog{
        display: flex;
        justify-content: flex-start;
        gap: 30px;
        flex-wrap: nowrap;
        align-items: start;
        flex-direction: row;
        overflow: scroll;
    }
    .catalogArea img{
        top: 10px;
        right: -10px;

    }
    .catalogBlock{
        flex: none;
        width: 50%;
    }
    .catalogBlock p{
        font-size: 14px;
        padding: 0 13px 30px
    }
    .catalogBlock:nth-child(n+4) {
        display: flex;
    }
    .salesBlock{
        width: 100%;
    }
    .vkPostBlock:nth-child(n+2), .newsBlock:nth-child(n+2), .salesBlock:nth-child(n+2) {
        display: none;
    }
    .catalogList{
        width: 100%;
        max-width: 100%;
    }
    .catalogListArea{
        height: auto;
    }
    .footerInfo, .footerCopyright{
        width: 100%;
    }
    .catalogContactInfo{
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .catalogContactInfo p{
        font-size: 16px;
    }
    .catalogContactInfo p:last-child svg{
        margin-left: 2px;
        height: 26px;
    }
    .carInfo{
        flex-direction: column;
    }
    .catalogInfo{
        width: 100%;
    }
    .catalogInfoValue{
        width: 50%;
    }
    .catalogInfoAvailable{
        display: flex;
        justify-content: flex-end;
        width: 50%;
    }
    .catalogInfoBlock{
        display: flex;
        flex-wrap: wrap;
    }
    .catalogInfoBtn{
        margin-top: 10px;
    }
    .catalogTechParams p{
        width: 100%;
    }
    .carInfo>.catalogContent{
        padding: 10px 0;
        width: auto;
    }
    .formInput, .formTextArea, .formButton, .form p{
        width: 100%;
        padding: 10px 0;
    }
    .catalogTechBlock{
        padding: 40px 0 0 0;
    }
    .catalogInfo{
        padding: 10px 0;
    }
}

@media (max-width: 500px){
    .catalogBlock p{
        font-size: 18px;                
    }
    .catalogBlock {
        width: 100%;

    }
    .headerProfile{
        border-radius: 100px;
        width: 40px;
        height: 40px;
        margin: 0 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .headerProfile svg{
        margin: 0;
    }
    .headerProfile p{
        display: none;
    }
    .catalogArea img{
        width: 250px;
        height: 250px;
    }
    .catalogArea{
        padding-bottom: 200px;
    }
    .serviceTitle{
        line-height: 7vw;
    }
}

@media (max-width: 414px){
    .headerTopBtn.location {
        display: none;    
    }
    
    .nav-button{
        width: 40px;
        height: 40px;
    }
    .mainHead {
        padding: 30px 0 10px 0;
    }
    .catalogBlock {
        width: 100%;
    }
    .comparison{
        display: none;
    }
    .catalogArea img{
        width: 120px;
        height: 120px;
    }
    .brand {
        width: 100%;
    }
    .service-inner{
        opacity: .15;
    }
    .service-inner {
        background-size: 200vw !important;
        width: 100%;
    }
    .personInfo {
        padding: 0 30px 30px 30px !important;
    }
    .certificate {
        width: 100%;
    }
    .footerBlock{
        width: 100%;
    }    
    .catalogArea{
        padding-bottom: 130px;
    }
    .catalogBlock p {
        padding: 0 30px 40px;
    }
    .certificateText, .certificateVisual{
        width: 92%;
    }
}