/*section {display: none;}*/
.product-card {overflow: hidden;}
section.catalog {display: block;}

.popular .section-title{padding-left: 20px;}

/* === Адаптивность === */
.call-button svg {display: none;}

@media (max-width: 1520px) {
    .call-button button {padding: 13px;}
.call-button svg {display: block;}
.call-button span {display: none;}
.image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px;
}
.header-left {gap: 25px;}

.header-right {
 
    gap: 25px;
  
}
.whatsapp-button span{ display: none;

}

.header-top .whatsapp-button a {padding: 10px;} 


}

@media (max-width: 1200px) {

    .marker-container {display: none;}

    .main-slider img{ height: 100%; width: auto; min-height: 271px;  }
    .main-slider  .slide {overflow: hidden; display: flex; justify-content: center}
    .calculation-system-button {display: none;}
    .logo {
        overflow: hidden;
        width: 40px;
        align-items: center;
    }

    .logo img {
        width: 295px;
        }
}


@media (max-width: 992px) {
	.categories-container { gap: 10px;}
	.category-card-25 {
    flex-basis: calc(33% - 10px);
}

.category-card-30 {
    flex-basis: calc(33% - 10px);
}
.category-card-45 {
flex-basis: calc(33% - 10px);}
	.calculation-system .container .img {
   overflow:hidden;
    right: 0px;
	width: 400px;
    
}
	.calculation-system .container .img img{}

.calculation-system .container {
   
    padding-right: 400px;
  
}
    .main-slider {
        
        padding: 20px 15px;
       
    }

   .header-section h1 {font-size: 32px;}
    .header-bottom {gap: 15px;}
    .header .location-selector {display: none;}
    .header .main-menu {display: none;}

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  
    .catalog-columns {
      grid-template-columns: 1fr 1fr;
    }
  
    .footer-catalog h3,
    .menu-column h3 {
      font-size: 12px;
    }
    
    .footer-bottom {
    margin-top: 20px;
         flex-direction: column-reverse;
  
     
  }
  
  
    .catalog-columns a,
    .menu-column a {
      font-size: 10px;
    }
  
    .footer-bottom p {
      font-size: 10px;
    }
  }

@media (max-width: 768px) {
	
	.calculators .container {
 
    gap: 5px;

}




.calculator-card {
  background-repeat: no-repeat;
    background-position: bottom;
    background-size: 250px;
    min-height: 161px;
}
	
.calculator-card button {display: none;}
	
	.calculator-card h3 {font-size: 12px; font-weight: 500;
    margin-bottom: 20px;
}
.calculator-card h3 span {font-size: 18px; font-weight: 700;
   
}
	
	
	
	
		.calculation-system .container .img {
   overflow:hidden;
    right: 0px;
	width: 210px;
    
}
	.calculation-system {padding: 0 20px;    }
	    .calculation-system .container { padding: 30px 10px;
        padding-right: 170px;   margin-top: 20px;
    }
	
	
	.calculation-system button {
    font-size: 10px; padding: 9px 16px;
}
	
	
	    .calculation-system .container .img {
       
    }
	.calculation-system .container .img img
	{width: 250px;}
	
.calculation-system h2 {
    font-size: 18px;
	font-weight: 500;
	    margin-bottom: 10px;
}

.calculation-system p {
   font-size: 8px;
   line-height: 11px;
   margin-bottom: 10px;
}	
	
.popular .section-title {font-size: 16px; margin-bottom: 0px;}
.popular .slider-control {position: relative;     justify-content: flex-end; margin-bottom: 0px; }
	.slider-wrapper {padding: 5px;}
.custom-slider-controls svg {width: 25px; height: 25px;} 
    .header {
      
        padding-bottom: 0px;
    }
	
	.product-card {
  margin: 4px;
    min-width: 180px; 
	padding: 10px;
  
}

.tags { font-size: 8px;
     gap: 5px;
    top: 10px;
left: 10px;}

.tag { font-size: 8px;  padding: 3px 7px;}
	
	.product-card h3 {
          margin-right: 40px;
    font-size: 10px;
  
}
.product-card a.cart  { width: 30px;
bottom: 10px;
right: 10px;}

   .product-card  .cart svg {
        height: 30px;
    }

.product-card p {
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

.product-card .heart svg,.product-card .list svg,.product-card .view svg {height: 30px;     width: 30px;}

.controls {

    top: 10px;
right: 10px;}
	
	
	.image-container {height: 156px; }
	
.custom-slider-controls	.slider-btn {
    width: 25px;
    height: 25px;
    
}


.custom-slider-controls { position: absolute; 
            top: -30px;
        right: 10px;
    gap: 10px;
}
	
	.filters {display: none;}

    .header-bottom {margin-bottom: 0px;}
    .main-slider {
        
        padding: 0px 10px;
       
    }
    .header-section p {font-size: 10px; margin: 0px 10px;}

   .header-section h1 {font-size: 18px;}
   .primary-button {font-size: 10px; padding: 8px 24px;}
   .secondary-button {font-size: 10px; padding: 8px 24px;}
    .header-right {
        gap: 15px;
    }

    .header-left {
        gap: 15px;
    }

    .promotions-slider .slick-next, .image-slider .slick-next {
        right: -15px;
        background: #fff url(../images/next-mobile.png) center no-repeat;
    }

    .promotions-slider .slick-prev, .image-slider .slick-prev {
        left: -15px;
        background: #fff url(../images/prev-mobile.png) center no-repeat;
    }

    .promotions-slider .slick-arrow, .image-slider .slick-arrow {
        position: absolute;
        top: calc(50% - 15px);
        z-index: 10;
        width: 30px;
        height: 30px;
        border: none;
        text-indent: -9999px;
        border-radius: 50%;
        -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
    }

    .profile-link a {
            background: none;
            padding: 3px;
        }
    
        .profile-link {
            display: flex;
            width: 80px;
            text-align: right;
            justify-content: flex-end;
        }
        .favorites {
            right: 35px;
            top: 19px;
            position: absolute;}
.search-bar {margin-right: 0px;}
            .badge {width: 10px; height: 10px; font-size: 6px; top: 0px;} 
.phone-number a {font-size: 12px; font-weight: 400; } 
.phone-number p {font-size: 9px; }
            .cart svg {height: 16px;}

            .cart { font-size: 10px;}
            .search-input {
                padding: 10px 40px 10px 20px;
                color: #333;
                font-size: 10px;
                border: none;
                background: #F5F5F5;
            }
            .city-selector {
          
                font-size: 10px;
             
            }

            .catalog-button svg  {    height: 11px;}

            .catalog-button {font-size: 10px; padding: 10px 20px;}  
.notifications { right: 70px;
    top: 19px;
    position: absolute;}

    .notifications svg, .favorites svg {height: 19px;}

        .call-button button {
            padding: 7px;
        }
    
        .header-top .whatsapp-button a {
            padding: 7px;
            line-height: 13px;
        }
    
        .header-top .whatsapp-button svg,
        .call-button svg {
            width: 13px;
            height: 13px;
        }
    
    
        .profile-link svg {
            display: block
        }
    
        .profile-link span {
            display: none
        }
    
        .social-links {
            flex-direction: row-reverse;
        }
    
        .city-selector>svg {
            display: none;
        }
    
    
        .social-links .vk-icon,
        .social-links .tg-icon {display: none;}
  

    .logo span {
        display: none;
    }

   

    .social-links {
        justify-content: flex-end;
    }


    .header-bottom {
        margin-top: 5px; }

        .search-icon {
            
            right: 9px;}

     .header-section     { top: 30px;}

     .main-slider img {
       
        width: 380px;
        
    }
    .image-slider {margin-top: 10px;}  

}


@media (max-width: 396px) { 

.calculators {

padding: 10px;}



.header {padding: 10px;   padding-bottom: 0px;}
.popular .section-title {
    padding-left: 10px;
}

	.product-card {
  margin: 4px;
    min-width: auto; 
	padding: 10px;
  
}
    .city-selector {
        white-space: nowrap; }

    .header-bottom {
        gap: 10px;
    }

    .notifications {
        right: 60px;
       
    }
    .favorites { 
        right: 25px;
       
    }

    .header-right {
        gap: 10px;
    }

    .header-left {
        gap: 10px;
    }

    .social-links {
   
        gap: 8px;
    }


 }