/* ===== HEADER 2.0 ===== */
.site-topbar{background:var(--color-muted); border-bottom:1px solid var(--color-border); font-size:14px; color:var(--color-text);}
.site-topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0;}
.site-topbar__bullets{display:flex; gap:16px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.site-topbar__bullets li{display:inline-flex; align-items:center; gap:8px; color:var(--color-text-muted)}
.site-topbar__contact{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.site-topbar__contact a{color:var(--color-text); text-decoration:none}
.site-topbar__contact a:hover{text-decoration:underline; color:var(--color-primary)}

.site-header{position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--color-border)}
.site-header__main{display:grid; grid-template-columns: 220px 1fr auto; align-items:center; gap:16px; padding:12px 0;}
.site-header__logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:24px; color:var(--color-text); text-decoration:none}
.site-header__actions{display:flex; align-items:center; gap:8px;}

.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-md); border:1px solid var(--color-border); background:#fff; position:relative;}
.icon-btn:hover{background:var(--color-muted)}
.icon-btn .badge{position:absolute; top:-6px; right:-6px; font-size:12px; padding:1px 6px}

.header-search{display:flex; align-items:stretch; gap:0; border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.header-search__cats{border:none; background:#fff; padding:0 12px; border-right:1px solid var(--color-border); font-weight:600; min-width:170px}
.header-search__input{flex:1; border:none; padding:12px 14px; font-size:16px}
.header-search__input:focus{outline:none}
.header-search__submit{border:none; padding:0 18px; background:var(--color-primary); color:#fff; font-weight:700; cursor:pointer}
.header-search__submit:hover{background:var(--color-primary-700)}

.site-navbar{border-top:1px solid var(--color-border);}
.site-navbar__inner{display:flex; align-items:center; gap:12px; padding:10px 0}
.cat-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--color-border); background:var(--color-primary); color:#fff; border-radius:var(--radius-md); font-weight:700; cursor:pointer}
.cat-toggle:hover{background:var(--color-primary-700); color:#fff;}

.menu--primary{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.menu--primary a{display:inline-flex; padding:8px 10px; border-radius:8px; color:var(--color-text); text-decoration:none}
.menu--primary a:hover{background:var(--color-muted); color:var(--color-primary)}

/* Categories dropdown (mega) */
.cat-panel{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--color-border); box-shadow:0 8px 24px rgba(16,24,40,.12); display:none;}
.cat-panel__inner{display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:16px; padding:16px 0}
.cat-panel a{display:block; padding:10px 12px; border-radius:8px; color:var(--color-text); text-decoration:none; border:1px solid transparent;}
.cat-panel a:hover{background:var(--color-muted); border-color:var(--color-border)}
.site-navbar--open .cat-panel{display:block}

/* Hotline block */
.hotline{display:flex; align-items:center; gap:10px}
.hotline__label{font-size:12px; color:var(--color-text-muted)}
.hotline__phone{font-weight:800; font-size:18px; color:var(--color-text); text-decoration:none}
.hotline__phone:hover{color:var(--color-primary)}

/* Mobile */
.burger{display:none}
@media (max-width: 1024px){
  .site-header__main{grid-template-columns: 48px 1fr auto}
  .site-header__logo{display:none}
  .burger{display:inline-flex}
  .site-navbar__inner{display:none}
  .site-navbar.site-navbar--open .site-navbar__inner{display:block}
}

/* Offcanvas menu */
.offcanvas{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:200}
.offcanvas__panel{position:absolute; top:0; left:0; height:100%; width:320px; background:#fff; box-shadow:var(--shadow-md); padding:16px; overflow:auto}
.offcanvas--open{display:block}
.offcanvas .menu{list-style:none; padding:0; margin:0}
.offcanvas .menu a{display:block; padding:12px 10px; border-radius:8px; text-decoration:none; color:var(--color-text)}
.offcanvas .menu a:hover{background:var(--color-muted)}


/* === Open Catalog only when hovering .cat-toggle (desktop) === */
@supports selector(.site-navbar:has(.cat-toggle:hover)){
  @media (hover:hover) and (pointer:fine){
    .site-navbar:has(.cat-toggle:hover) .cat-panel,
    .site-navbar:has(.cat-toggle:focus-visible) .cat-panel{
      display:block;
    }
  }
}

/* === Fix: keep mega menu open while moving from link to panel === */
.site-navbar{ position:relative; } /* ensure positioning context */

.cat-panel{ top:100%; margin-top:0; pointer-events:auto; } /* avoid hover gap */

/* Open only when hovering the 'Каталог' link or the panel itself (desktop) */
@media (hover:hover) and (pointer:fine){
  .site-navbar:has(.cat-toggle:hover) .cat-panel,
  .site-navbar:has(.cat-toggle:focus-visible) .cat-panel,
  .site-navbar:has(.cat-panel:hover) .cat-panel{
    display:block;
  }
}

/* Optional: gentle appear */
.cat-panel{ opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease; }
.site-navbar--open .cat-panel{ display:block; opacity:1; transform:translateY(0); }
@media (hover:hover) and (pointer:fine){
  .site-navbar:has(.cat-toggle:hover) .cat-panel,
  .site-navbar:has(.cat-toggle:focus-visible) .cat-panel,
  .site-navbar:has(.cat-panel:hover) .cat-panel{
    opacity:1; transform:translateY(0);
  }
}



.site-header__logo,
.custom-logo-link.site-header__logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:24px; color:var(--color-text); text-decoration:none;
}
.custom-logo{height:auto; max-height:48px; width:auto}

/* --- Mobile header layout --- */
@media (max-width: 768px){
  /* 1) Общие боковые отступы у шапки */
  .site-header .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 2) Лого + иконки в первой строке, поиск — на всю ширину ниже */
  .site-header__main{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* переносим поиск на новую строку */
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-header__logo{
    order: 1;
    flex: 0 0 auto;
  }
  .site-header__logo img{
    max-height: 42px; /* чтобы лого не занимало пол-экрана */
    height: auto;
    width: auto;
  }

  .site-header__actions{
    order: 2;
    margin-left: auto;            /* уводим иконки вправо в той же строке */
    display: flex;
    gap: 8px;
  }

  .header-search{
    order: 3;
    width: 100%;
    display: flex;
    gap: 8px;
  }
  /* чтобы инпут реально был "на всю ширину" */
  .header-search__input{ flex: 1 1 auto; min-width: 0; }
  .header-search__submit{ flex: 0 0 auto; }

  /* опционально: на мобилке убираем выпадайку категорий,
     чтобы строка поиска была действительно full-width */
  /* .header-search__cats{ display: none; } */
}

/* 3) Кнопка бургера видна только в моб */
.icon-btn.burger{ display: none; }
@media (max-width: 1025px){
  .icon-btn.burger{ display: inline-flex; }
}


/* ===== Topbar — mobile polish ===== */
.site-topbar{
  background: linear-gradient(90deg, rgba(24,181,196,.05), #fff);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

/* одинаковые боковые отступы, как просил */
@media (max-width: 768px){
  .site-topbar .container{ padding-left: 16px; padding-right: 16px; }
}

/* общая сетка и внешний вид */
.site-topbar__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 0;
}
.site-topbar__bullets{
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none; color: var(--color-text-muted);
}
.site-topbar__bullets li{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-topbar__bullets svg{ color: var(--color-primary); }

/* контакты справа */
.site-topbar__contact{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hotline__label{ color: var(--color-text-muted); font-size: 12px; }
.hotline__phone{
  font-weight: 800; font-size: 16px; color: #0f172a;
  white-space: nowrap; /* НЕ переносим номер */
  letter-spacing: .2px;
}
/* Viber/Telegram как «чипы» */
.site-topbar__contact a:not(.hotline__phone){
  border: 1px solid var(--color-border);
  padding: 4px 10px; border-radius: 10px; text-decoration: none;
  color: var(--color-primary); font-weight: 700;
}

/* — мобильная компоновка — */
@media (max-width: 768px){
  /* 1) делаем две строки: 1 — контакты, 2 — буллеты со скроллом */
  .site-topbar__inner{
    display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: center;
  }

  /* контакты на всю ширину первой строки */
  .site-topbar__contact{
    grid-column: 1 / -1;
    gap: 10px;
  }
  .hotline__label{ display: none; }            /* компактнее на мобиле */
  .hotline__phone{ font-size: 18px; }          /* читаемый размер */

  /* 2) буллеты — во второй строке, горизонтальная прокрутка без полосы */
  .site-topbar__bullets{
    grid-column: 1 / -1;
    overflow-x: auto; flex-wrap: nowrap; gap: 14px; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .site-topbar__bullets::-webkit-scrollbar{ display: none; }
  .site-topbar__bullets li{ flex: 0 0 auto; }
}


.cat-panel a {
 border: 1px solid #eeeeee;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}