/* ===== СТИЛИ ХЕДЕРА И МЕНЮ (НЕ МЕНЯТЬ) ===== */
:root {
   --header-offset: 130px;
   --admin-bar-offset: 0px;
}

body {
   padding-top: calc(var(--header-offset) + var(--admin-bar-offset)) !important;
}

body.admin-bar {
   --admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
   body.admin-bar {
      --admin-bar-offset: 46px;
   }
}

header {
   background-color: var(--white);
   box-shadow: var(--shadow);
   position: fixed;
   top: var(--admin-bar-offset);
   left: 0;
   width: 100%;
   z-index: 1000;
   padding: 12px 0;
}

.header-content {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding-bottom: 12px;
   border-bottom: 1px solid #eee;
}

/* Логотип и название компании */
.logo-section {
   display: flex;
   align-items: center;
   gap: 15px;
   flex: 1;
   min-width: 350px;
   text-decoration: none;
   color: inherit;
}

.logo {
   flex-shrink: 0;
}

.site-logo-image {
   display: block;
   width: auto;
   height: 60px;
   max-width: 220px;
   object-fit: contain;
}

.logo-placeholder {
   background-color: var(--primary);
   color: white;
   height: 60px;
   width: 60px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 20px;
}

.company-info h2 {
   font-size: 22px;
   color: var(--primary-dark);
   margin-bottom: 5px;
   line-height: 1.2;
   margin-top: 0px;
}

.company-info .tagline {
   font-size: 14px;
   color: var(--gray);
   line-height: 1.4;
   max-width: 280px;
}

/* Контактная информация */
.contact-section-shell.is-empty {
   display: none;
}

.contact-section-shell {
   display: grid;
   grid-template-columns: minmax(220px, auto) minmax(220px, auto);
   column-gap: 40px;
   align-items: flex-start;
}

.contact-section {
   display: flex;
   gap: 8px;
   align-items: flex-end;
}

/* Первый столбец: режим работы и телефон */
.contact-column {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
   min-width: 200px;
}

.work-hours-row {
   font-size: 13px;
   color: var(--gray);
   white-space: nowrap;
   text-align: right;
   width: 100%;
}

.phone-dropdown {
   position: relative;
   width: 100%;
   display: flex;
   justify-content: flex-end;
}

.phone-main {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   background-color: var(--light-gray);
   border-radius: 6px;
   transition: var(--transition);
   white-space: nowrap;
   justify-content: flex-end;
   width: fit-content;
}

.phone-main:hover {
   background-color: #e9e9e9;
}

.phone {
   font-size: 18px;
   font-weight: 700;
   color: var(--dark);
   text-decoration: none;
}

.phone-dropdown-toggle {
   border: none;
   background: transparent;
   padding: 2px 4px;
   border-radius: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--transition);
}

.phone-dropdown-toggle:hover {
   background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-arrow {
   font-size: 12px;
   color: var(--gray);
   transition: var(--transition);
}

.phone-main:hover .dropdown-arrow {
   color: var(--primary);
}

/* Выпадающее меню телефонов */
.phone-dropdown-content {
   display: none;
   position: absolute;
   top: 100%;
   right: 0;
   background-color: var(--white);
   min-width: 240px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   z-index: 1001;
   padding: 15px;
   margin-top: 2px;
   border: 1px solid #eee;
}

.phone-dropdown:hover .phone-dropdown-content {
   display: block;
}

.phone-dropdown.open .phone-dropdown-content {
   display: block;
}

.phone-dropdown.open .dropdown-arrow {
   color: var(--primary);
   transform: rotate(180deg);
}

.phone-dropdown-title {
   font-weight: 600;
   margin-bottom: 10px;
   color: var(--dark);
   font-size: 14px;
}
.slider-controls {
   display: none !important;
}
.phone-list {
   list-style: none;
   margin-bottom: 15px;
}
.unhidder {
   display: none !important;
}

.phone-list li {
   margin-bottom: 8px;
   font-size: 15px;
}

.phone-list li a {
   color: var(--dark);
   text-decoration: none;
   transition: var(--transition);
}
.messengers {
   display: flex;
   gap: 12px;
   justify-content: flex-start;
}

.messenger-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   color: white;
   text-decoration: none;
   transition: var(--transition);
}

.messenger-link:hover {
   transform: translateY(-2px);
}

.telegram {
   background-color: #2aabee;
}

.vk {
   background-color: #4c75a3;
}

.viber {
   background-color: #8f5db7;
}

/* Второй столбец: кнопки */
.buttons-column {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
   min-width: 220px;
}

.callback-btn,
.calc-btn {
   border: none;
   padding: 8px 20px 8px 16px;
   border-radius: 6px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
   height: 36px;
   width: 200px;
   justify-content: flex-start;
}

.callback-btn {
   background-color: var(--accent);
   color: white;
}

.callback-btn:hover {
   background-color: var(--accent-hover);
}

.calc-btn {
   background-color: var(--primary);
   color: white;
}

.calc-btn:hover {
   background-color: var(--primary-dark);
}

/* Нижняя часть хедера с навигацией */
.header-bottom {
   padding-top: 12px;
   position: relative;
}

/* Кнопка бургер-меню (моб.) */
.nav-toggle {
   display: none;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border: 1px solid #eee;
   border-radius: 8px;
   background-color: var(--light-gray);
   color: var(--dark);
   font-weight: 700;
   cursor: pointer;
   transition: var(--transition);
}

.nav-toggle:hover {
   background-color: #e9e9e9;
}

.nav-toggle-lines {
   width: 20px;
   height: 2px;
   background-color: var(--dark);
   position: relative;
   display: block;
   transition: var(--transition);
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
   content: "";
   position: absolute;
   left: 0;
   width: 20px;
   height: 2px;
   background-color: var(--dark);
   transition: var(--transition);
}

.nav-toggle-lines::before {
   top: -6px;
}

.nav-toggle-lines::after {
   top: 6px;
}

.nav-toggle-text {
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

html.nav-open .nav-toggle-lines {
   background-color: transparent;
}

html.nav-open .nav-toggle-lines::before {
   top: 0;
   transform: rotate(45deg);
}

html.nav-open .nav-toggle-lines::after {
   top: 0;
   transform: rotate(-45deg);
}

.nav-backdrop {
   display: none;
}

.mobile-nav-toolbar,
.mobile-nav-close {
   display: none;
}

/* Навигационное меню */
.primary-nav ul {
   display: flex;
   list-style: none;
   gap: 4px;
   flex-wrap: nowrap;
   padding: 0;
   margin: 0;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.primary-nav li {
   flex: 0 0 auto;
   min-width: 0;
   text-align: center;
   position: static;
}

.primary-nav > ul > li.commercial-offer {
   flex: 0 0 auto;
   margin-left: 6px;
}

.primary-nav > ul > li > a {
   text-decoration: none;
   color: var(--dark);
   font-weight: 600;
   font-size: clamp(11px, 0.3vw + 8px, 12px);
   transition: var(--transition);
   padding: 9px 10px;
   text-transform: uppercase;
   letter-spacing: 0.22px;
   white-space: nowrap;
   line-height: 1.1;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 0;
   width: auto;
   max-width: 100%;
   border-radius: 6px;
   border: 1px solid transparent;
   box-shadow: inset 0 -2px 0 transparent;
   position: relative;
}

/* Активный пункт меню */
.primary-nav > ul > li > a.active {
   color: var(--primary);
   background-color: rgba(42, 109, 57, 0.06);
   border-color: rgba(42, 109, 57, 0.12);
   box-shadow: inset 0 -2px 0 var(--primary);
}

.primary-nav > ul > li > a:hover {
   color: var(--primary);
   background-color: rgba(42, 109, 57, 0.04);
   border-color: rgba(42, 109, 57, 0.1);
}

/* ===== ВЫПАДАЮЩИЕ МЕНЮ ===== */

/* Общий стиль для всех выпадающих меню */
.dropdown-menu {
   display: none;
   position: absolute;
   background-color: var(--white);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   z-index: 1000;
   padding: 15px;
   border: 1px solid #eee;
   min-width: 280px;
   top: 100%;
   left: 0;
   margin-top: 2px;
}

/* Специальный стиль для выпадающего меню БЫТОВКИ (5 колонок) */
.dropdown-menu-bytovki {
   left: 0;
   width: 100%;
   padding: 25px 20px 15px 20px;
   transform: none;
}

/* Меню бытовок показываем при наведении */
.has-dropdown-bytovki:hover .dropdown-menu-bytovki,
.has-dropdown-bytovki.is-hovered .dropdown-menu-bytovki {
   display: block;
}

/* Выпадающие меню для обычных пунктов - позиционируем по центру кнопки */
.has-dropdown:not(.has-dropdown-bytovki) {
   position: relative;
}

.has-dropdown:not(.has-dropdown-bytovki) .dropdown-menu {
   left: 50%;
   transform: translateX(-50%);
}

.has-dropdown:not(.has-dropdown-bytovki):hover > .dropdown-menu,
.has-dropdown:not(.has-dropdown-bytovki).is-hovered > .dropdown-menu {
   display: block;
}

/* Подложка для меню бытовок */
.menu-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.05);
   z-index: 999;
   display: none;
   pointer-events: none;
}

.has-dropdown-bytovki:hover .menu-backdrop,
.has-dropdown-bytovki.is-hovered .menu-backdrop {
   display: block;
}

/* Сетка 5 колонок для БЫТОВКИ */
.dropdown-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 1px minmax(0, 4fr);
   gap: 20px;
   align-items: start;
   max-width: 1200px;
   margin: 0 auto 15px auto;
}

/* Вертикальная линия-разделитель */
.vertical-divider {
   background-color: #eee;
   width: 1px;
   height: 100%;
   align-self: stretch;
}

/* Колонки меню БЫТОВКИ */
.dropdown-column {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
}

.dropdown-column-title {
   font-weight: 700;
   font-size: 16px;
   color: var(--primary);
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #eee;
}

.dropdown-catalog {
   display: flex;
   flex-direction: column;
   gap: 18px;
   min-width: 0;
}

.dropdown-catalog .dropdown-column-title {
   margin-bottom: 0;
}

.dropdown-catalog-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
   align-items: start;
}

.dropdown-column a {
   text-decoration: none;
   color: var(--dark);
   font-size: 14px;
   padding: 6px 0;
   transition: var(--transition);
   line-height: 1.4;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   white-space: normal;
   text-transform: none;
   letter-spacing: 0;
   overflow-wrap: break-word;
   word-break: normal;
   hyphens: auto;
}

.dropdown-column a span {
   display: block;
   min-width: 0;
   flex: 1;
}

.dropdown-column a:hover {
   color: var(--primary);
}

/* Уменьшенный шрифт для каталожных колонок */
.dropdown-catalog-column a {
   font-size: 13px;
}

/* Иконки в меню БЫТОВКИ */
.menu-icon {
   color: var(--primary);
   font-size: 13px;
   min-width: 16px;
   margin-top: 2px;
}

/* Особый стиль для первой колонки (по назначению) */
.dropdown-column-purpose a {
   font-weight: 500;
   color: var(--gray);
}

.dropdown-column-purpose a:hover {
   color: var(--primary);
}

.dropdown-column-purpose .dropdown-column-title {
   color: var(--accent);
}

.dropdown-column-purpose .menu-icon {
   color: var(--accent);
}

/* Описание под колонками БЫТОВКИ - ТОЛЬКО под профильными колонками */
.dropdown-description-container {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 1px minmax(0, 4fr);
   gap: 20px;
}

.dropdown-description-placeholder {
   /* Пустое пространство для первой колонки и разделителя */
}

.dropdown-description {
   grid-column: 3;
   padding: 15px;
   background-color: rgba(42, 109, 57, 0.05);
   border-radius: 6px;
   border-left: 3px solid var(--primary);
   font-size: 14px;
   color: var(--dark);
   line-height: 1.5;
   margin-top: 5px;
}

/* ===== НОВЫЕ ВЕРТИКАЛЬНЫЕ ВЫПАДАЮЩИЕ МЕНЮ ===== */

/* Стиль для обычных вертикальных меню */
.simple-dropdown {
   padding: 12px 0;
   min-width: 280px;
}

.simple-dropdown ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.simple-dropdown li {
   text-align: left;
   width: 100%;
}

.simple-dropdown a {
   text-decoration: none;
   color: var(--dark);
   font-size: 13px;
   padding: 10px 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   transition: var(--transition);
   text-transform: uppercase; /* Делаем заглавными */
   font-weight: 600;
   letter-spacing: 0.5px;
   white-space: normal;
   line-height: 1.4;
   border-left: 3px solid transparent;
}

.simple-dropdown a:hover {
   background-color: rgba(42, 109, 57, 0.05);
   color: var(--primary);
   border-left-color: var(--primary);
}

.simple-dropdown .menu-icon {
   color: var(--primary);
   font-size: 12px;
   min-width: 16px;
}

/* Стрелка для пунктов с выпадающим меню */
.has-dropdown > a::after {
   content: "▼";
   font-size: 9px;
   color: var(--gray);
   transition: var(--transition);
   position: absolute;
   right: 8px;
   top: 50%;
   margin-left: 0;
   transform: translateY(-50%);
   pointer-events: none;
}

.primary-nav > ul > li.has-dropdown > a {
   padding-right: 18px;
}

.primary-nav > ul > li.commercial-offer > a {
   white-space: nowrap;
   font-size: 12px;
   font-weight: 700;
   padding-left: 14px;
   padding-right: 24px;
}

.has-dropdown.active > a::after,
.has-dropdown.is-hovered > a::after {
   color: var(--primary);
   transform: translateY(-50%) rotate(180deg);
}

/* ===== КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ ===== */
.commercial-offer {
   position: relative;
}

.commercial-offer > a {
   color: var(--accent) !important;
   font-weight: 700 !important;
   cursor: pointer;
   background-color: rgba(230, 126, 34, 0.08);
   border-color: rgba(230, 126, 34, 0.22);
   box-shadow: none;
}

.commercial-offer > a:hover,
.commercial-offer > a.active {
   color: var(--accent-hover) !important;
   background-color: rgba(230, 126, 34, 0.14) !important;
   border-color: rgba(230, 126, 34, 0.32);
}

/* Выпадающее меню коммерческого предложения */
.commercial-dropdown {
   display: none;
   position: absolute;
   top: 100%;
   right: 0;
   background-color: var(--white);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
   z-index: 1002;
   padding: 20px;
   border: 1px solid #eee;
   min-width: 320px;
   margin-top: 2px;
}

.commercial-offer:hover .commercial-dropdown,
.commercial-offer.is-hovered .commercial-dropdown {
   display: block;
}

.commercial-dropdown-title {
   font-weight: 700;
   font-size: 16px;
   color: var(--dark);
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--accent);
   text-align: center;
}

.commercial-checkbox-group {
   margin-bottom: 20px;
}

.commercial-checkbox-item {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
   padding: 8px 10px;
   border-radius: 4px;
   transition: var(--transition);
   cursor: pointer;
}

.commercial-checkbox-item:hover {
   background-color: rgba(42, 109, 57, 0.05);
}

.commercial-checkbox {
   margin-right: 12px;
   width: 18px;
   height: 18px;
   cursor: pointer;
   accent-color: var(--primary);
}

.commercial-checkbox-label {
   font-size: 14px;
   font-weight: 500;
   color: var(--dark);
   cursor: pointer;
   flex-grow: 1;
}

.commercial-submit-btn {
   width: 100%;
   padding: 12px;
   background-color: var(--gray);
   color: white;
   border: none;
   border-radius: 6px;
   font-weight: 600;
   font-size: 14px;
   cursor: not-allowed;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.commercial-submit-btn.active {
   background-color: var(--accent);
   cursor: pointer;
}

.commercial-submit-btn.active:hover {
   background-color: var(--accent-hover);
}

/* ===== АДАПТИВНОСТЬ ДЛЯ ХЕДЕРА ===== */
@media (max-width: 1100px) {
   .header-content {
      flex-direction: column;
      gap: 20px;
   }

   .logo-section {
      min-width: 100%;
      justify-content: center;
      text-align: center;
   }

   .contact-section-shell {
      width: 100%;
      grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
   }
   .contact-section {
      align-self: center;
   }
   .company-info .tagline {
      max-width: 100%;
      text-align: center;
   }

   html.nav-open {
      overflow: hidden;
   }

   .header-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: static;
   }

   .nav-toggle {
      display: inline-flex;
      position: relative;
      z-index: 1003;
   }

   html.nav-open .nav-toggle-lines {
      background-color: var(--dark);
   }

   html.nav-open .nav-toggle-lines::before {
      top: -6px;
      transform: none;
   }

   html.nav-open .nav-toggle-lines::after {
      top: 6px;
      transform: none;
   }

   .primary-nav {
      display: block;
      position: fixed;
      top: var(--admin-bar-offset);
      right: 0;
      bottom: 0;
      left: auto;
      width: 100vw;
      max-width: 100vw;
      margin-top: 0;
      background-color: var(--white);
      border: none;
      border-radius: 0;
      box-shadow: -20px 0 50px rgba(15, 23, 42, 0.18);
      padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px));
      max-height: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 1004;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(100%);
      transition:
         transform 0.32s ease,
         opacity 0.24s ease,
         visibility 0.24s ease;
   }

   html.nav-open .primary-nav {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
   }

   .mobile-nav-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 2;
      margin: 0 -20px 20px;
      padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 16px;
      background-color: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #e6ebf0;
   }

   .mobile-nav-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary-dark);
   }

   .mobile-nav-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid #d9e1ea;
      border-radius: 50%;
      background-color: #f6f7f9;
      color: var(--dark);
      cursor: pointer;
      transition: var(--transition);
      font-size: 28px;
      line-height: 1;
      padding: 0;
   }

   .mobile-nav-close:hover {
      background-color: #edf1f5;
      border-color: #ccd6e0;
   }

   .nav-backdrop {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(4px);
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
         opacity 0.24s ease,
         visibility 0.24s ease;
   }

   html.nav-open .nav-backdrop {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }

   .primary-nav ul {
      flex-direction: column;
      gap: 10px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
   }

   .primary-nav > ul {
      padding-bottom: 8px;
   }

   .primary-nav li {
      flex: none;
      min-width: 100%;
      text-align: left;
      position: relative !important;
      display: block;
   }

   .primary-nav > ul > li > a {
      font-size: 15px;
      padding: 14px 18px;
      min-height: 0;
      justify-content: flex-start;
      text-align: left;
      text-wrap: wrap;
      border-radius: 14px;
      background-color: #f6f7f9;
   }

   .primary-nav > ul > li.commercial-offer {
      margin-left: 0;
   }

   .primary-nav > ul > li.commercial-offer > a {
      white-space: normal;
      padding-left: 12px;
      padding-right: 34px;
   }

   .dropdown-menu {
      position: static !important;
      box-shadow: none;
      border: 1px solid #e6ebf0;
      background-color: var(--white);
      border-radius: 18px;
      width: 100% !important;
      margin-top: 8px !important;
      display: none;
      padding: 16px;
      left: 0 !important;
      transform: none !important;
   }

   .dropdown-grid {
      grid-template-columns: 1fr;
      gap: 15px;
      margin-bottom: 15px;
   }

   .dropdown-catalog {
      gap: 15px;
   }

   .dropdown-catalog-grid {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .vertical-divider {
      display: none;
   }

   .dropdown-description-container {
      grid-template-columns: 1fr;
      gap: 0;
   }

   .dropdown-description-placeholder {
      display: none;
   }

   .dropdown-description {
      grid-column: 1;
      margin-top: 10px;
      padding: 12px;
      font-size: 13px;
   }

   .has-dropdown:hover .dropdown-menu {
      display: none;
   }

   .has-dropdown.active .dropdown-menu {
      display: block;
   }

   /* На мобильных используем общий backdrop для бургера */
   .menu-backdrop {
      display: none !important;
   }

   .simple-dropdown {
      padding: 12px;
   }

   .simple-dropdown a {
      padding: 10px 12px;
      font-size: 13px;
   }

   .commercial-dropdown {
      position: static;
      width: 100%;
      min-width: auto;
      margin-top: 8px;
      border: 1px solid #e6ebf0;
      border-radius: 18px;
      box-shadow: none;
      padding: 18px;
   }

   .commercial-offer:hover .commercial-dropdown {
      display: none;
   }

   .commercial-offer.active .commercial-dropdown {
      display: block;
   }

   .primary-nav .contact-section,
   .primary-nav .buttons-column {
      width: 100%;
   }

   .primary-nav .contact-section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #e6ebf0;
      gap: 16px;
      align-items: stretch;
   }

   .primary-nav .contact-column,
   .primary-nav .buttons-column {
      align-items: stretch;
      min-width: 0;
   }

   .primary-nav .work-hours-row {
      text-align: left;
      white-space: normal;
   }

   .primary-nav .phone-dropdown {
      justify-content: stretch;
   }

   .primary-nav .phone-main {
      width: 100%;
      justify-content: space-between;
      padding: 12px 14px;
      border-radius: 14px;
   }

   .primary-nav .phone {
      font-size: 20px;
   }

   .primary-nav .phone-dropdown:hover .phone-dropdown-content {
      display: none;
   }

   .primary-nav .phone-dropdown.open .phone-dropdown-content {
      display: block;
   }

   .primary-nav .phone-dropdown-content {
      position: static;
      min-width: 0;
      width: 100%;
      margin-top: 10px;
      box-shadow: none;
      border: 1px solid #e6ebf0;
      border-radius: 14px;
      padding: 16px;
   }

   .primary-nav .buttons-column {
      margin-top: 16px;
      gap: 12px;
   }

   .primary-nav .callback-btn,
   .primary-nav .calc-btn {
      width: 100%;
      height: 44px;
      justify-content: center;
   }
}

@media (max-width: 768px) {
   :root {
      --header-offset: 180px;
   }
   .hidder {
      display: none !important;
   }
   .unhidder {
      display: block !important;
   }
   .contact-section-shell {
      grid-template-columns: 1fr;
      gap: 20px;
   }
   .work-hours-row {
      text-align: center !important;
   }
   .phone-dropdown-content {
      display: block !important;
   }
   .primary-nav li {
      text-align: center;
   }
   .messengers {
      justify-content: center;
   }
   .contact-section,
   .contact-column,
   .buttons-column {
      align-items: center;
      min-width: 100%;
   }

   .work-hours-row,
   .phone-dropdown {
      text-align: center;
      justify-content: center;
   }

   .phone-main {
      justify-content: center;
   }

   .callback-btn,
   .calc-btn {
      width: 250px;
      justify-content: center;
   }

   .header-bottom {
      justify-content: center;
   }

   .nav-toggle {
      width: 100%;
      justify-content: center;
   }
}

@media (max-width: 600px) {
   :root {
      --header-offset: 220px;
   }

   .company-info h2 {
      font-size: 20px;
   }

   .company-info .tagline {
      font-size: 13px;
   }
   #calcBtn2,
   #callbackBtn2 {
      max-width: 100% !important;
      width: 100% !important;
   }
   #calcBtn2 {
      margin-top: 12px;
   }
   .buttons-column.unhidder{
      margin-top: 0 !important;
   }
   .callback-btn,
   .calc-btn {
      width: 100%;
      max-width: 300px;
   }

   .dropdown-menu {
      padding: 10px;
   }

   .dropdown-column {
      gap: 8px;
   }

   .dropdown-column-title {
      font-size: 15px;
      margin-bottom: 6px;
   }

   .dropdown-column a {
      font-size: 12px;
      padding: 5px 0;
   }

   .dropdown-catalog-column a {
      font-size: 12px;
   }

   .menu-icon {
      font-size: 11px;
      min-width: 14px;
   }

   .dropdown-description {
      padding: 10px;
      font-size: 12px;
      margin-top: 8px;
   }

   .simple-dropdown a {
      padding: 6px 12px;
      font-size: 11px;
   }

   .commercial-dropdown {
      padding: 15px;
      min-width: auto;
   }

   .commercial-checkbox-item {
      padding: 6px 8px;
      margin-bottom: 10px;
   }
}

@media (max-width: 480px) {
   .primary-nav > ul > li > a {
      font-size: 11px;
      letter-spacing: 0.3px;
   }

   .nav-toggle-text {
      display: none;
   }

   .simple-dropdown a {
      font-size: 10px;
      padding: 5px 10px;
   }

   .commercial-dropdown-title {
      font-size: 15px;
   }

   .commercial-checkbox-label {
      font-size: 13px;
   }
   .header-content{
      gap:0;
   }
}

.btn.btn-accent.btn-large.mobile-only{
       gap: 12px;
    justify-content: center;
    align-items: center;
    
}