@media (max-width: 1200px) {
  .nav-toggle {display:block;}
  /*.header-actions {display:none;}
  header nav {display: none;}*/
  .top-menu {
    display:flex; flex-direction:column; gap:30px; position:fixed; 
    top:56px; bottom:0; background:#242424; align-items:left; justify-content:left;
    min-width:220px; overflow-y:auto; padding:20px 40px 40px 40px; right:-380px;
     transition: all 0.3s;
  }
   .mobile .top-menu {visibility:visible; right:0; display:flex; transition: all 0.3s;}
  .top-menu nav {margin:0;}
  .top-menu nav ul {flex-direction:column; gap:20px;}
  .top-menu nav ul li > a {padding:0; gap:14px;}
  .top-menu nav ul ul {display:flex; position:relative; margin:0; margin-top:20px; margin-left:-20px;}
  nav ul li a i:first-child {background:#4d4d4d; width:30px; height:30px; font-size:16px;
              display:flex !important; align-items:center; justify-content:center; border:1px solid #6a6a6a; border-radius:8px;
              transition:all 0.3s;}
  .header-actions {flex-direction:column; position:relative; align-items:start;  right:auto; top:auto; left:-20px; gap:20px;}
  .header-content {gap:20px;}
  .catalog-item {flex-basis:40%;}
  .delivery-wrapper {flex-direction:column;}
}

@media (max-width: 1000px) {

}
@media (max-width: 800px) {
.header-content {flex-direction:column; align-items:center; justify-content:center; gap:50px;}
.header-content-item {width:auto;}
.lid-block-wrapper {flex-direction:column;}
}

@media (max-width: 640px) {
.container-item, .header-home .container-item {padding:60px 20px;}
  header .logo {left:20px;}
  .nav-toggle {right: 2px;}
 
header .container-item {padding:0px 20px;}
.header-content h1 {line-height:1.2; font-size:40px;}

.breadcrumbs-wrapper .container-item {
      padding:0px 20px 20px 20px; 
}  
.container-title h2 {font-size: 32px;}
footer .container-item {padding:50px 20px 20px 20px; flex-direction:column;}
  .pluses-wrapper {margin-top:-140px;}
  .pluses-item {padding:20px;}
   .pluses-item-one {flex-direction:row; margin-bottom:0px; padding:20px; gap:10px;}
  .pluses-item-one span {font-size:18px; text-align:left;}
  .pluses-item-one i {width:40px; height:40px; font-size:24px; flex-basis:40px;}

  .price-wrapper {flex-direction:column; }
.price-image {display:none;}
.price-item {display:flex; flex-direction:column; gap:20px; align-items:center;}
.price-element { gap:10px; flex-direction:column; flex-basis:100%; flex:1; width:100%; 
               align-items:stretch; text-align:center;}

.tabs-header {gap:6px;}
.tab-btn {padding: 14px 20px;font-size: 16px;}  
.tab-btn span {display:none;}
.catalog-wrapper {gap:20px;}
.delivery-content {text-align:center;}
.delivery-content h2 {font-size:28px; line-height:1}
.delivery-content h3 {font-size:28px; line-height:1}  
.header-lid-block h2 {text-align:center; font-size:36px;}
.header-lid-block h3 {font-size:32px; font-weight:900; text-align:center; line-height:1}
.lid-block-item h4 {font-size:24px; line-height:1}  
}

@media (max-width: 431px){
  .top-menu { min-width:calc(100% - 80px); overflow-y:auto; padding:20px 40px 40px 40px; right:-520px;}
  .table-item { gap:10px; padding:20px; border-radius:20px; flex-direction:column;}
  .table-item .td h3 {width:100%;line-height:1.0; display:flex; flex-wrap:wrap; gap:10px;}
  .catalog-item {flex-basis:50%;}
  .header-lid-block {padding:20px; align-items:stretch; }
  
}
