/* ==========================================================================
   Header — СМК Бани
   Вёрстка и стили перенесены из header-preview.html
   ========================================================================== */

/* ===== HEADER SHELL ===== */
header.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background:var(--white);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* ===== ROW 1: service bar ===== */
.service-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:44px;
  padding:0 32px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.service-bar .left, .service-bar .right{
  display:flex;
  align-items:center;
  gap:22px;
}
.service-bar .left a{color:var(--ink-soft); white-space:nowrap;}
.service-bar .left a:hover{color:var(--green-dark);}
.promo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--badge-bg);
  color:var(--badge);
  border:1px solid rgba(184,114,46,0.35);
  padding:4px 12px;
  border-radius:999px;
  font-weight:600;
}
.promo-badge svg{width:13px; height:13px;}
.service-bar .right a{
  display:flex; align-items:center; gap:6px; color:var(--ink-soft);
}
.service-bar .right a:hover{color:var(--green-dark);}
.service-bar .right svg{width:16px; height:16px; flex:none;}
.msg-btn{
  display:inline-flex;
  align-items:center;
  background:var(--green-dark);
  color:var(--white) !important;
  padding:6px 14px;
  border-radius:999px;
  font-weight:600;
}
.msg-btn:hover{background:var(--green-mid);}

/* ===== ROW 2: main bar ===== */
.main-bar{
  display:flex;
  align-items:center;
  gap:28px;
  height:92px;
  padding:0 32px;
}
.logo{
  flex:none;
  font-size:22px;
  font-weight:800;
  line-height:1.05;
  color:var(--green-dark);
  letter-spacing:-0.01em;
}
.logo img{max-height:52px; width:auto;}
.logo span{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}
.search-pill{
  flex:1;
  max-width:640px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel-bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:14px 20px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.search-pill:hover, .search-pill:focus-within{background:#EAEDE6; border-color:#D8DCD1;}
.search-pill svg{width:19px; height:19px; flex:none; color:var(--green-dark);}
.search-pill span{font-size:15px;}
.search-pill-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  padding:0;
}
.search-pill-input::placeholder{color:var(--ink-soft); opacity:1;}

.contact-block{
  flex:none;
  display:flex;
  align-items:center;
  gap:18px;
}
.phone-block{text-align:right;}
.phone-block a{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  display:block;
}
.phone-block small{
  display:block;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:2px;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green-dark);
  color:var(--white);
  font-weight:700;
  font-size:14.5px;
  padding:13px 22px;
  border-radius:999px;
  white-space:nowrap;
  border:none;
  cursor:pointer;
  transition:background .15s ease;
}
.cta-btn:hover{background:var(--green-mid); color:var(--white);}

/* ===== ROW 3: category panel ===== */
.category-panel{
  background:var(--panel-bg);
  border-radius:var(--radius-lg);
  margin:0 32px 20px;
}
.category-list{
  display:flex;
  align-items:stretch;
  height:98px;
}
.category-list a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:16.5px;
  font-weight:700;
  color:var(--ink);
  position:relative;
  transition:background .15s ease;
  border-radius:var(--radius-lg);
}
.category-list a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:22px;
  bottom:22px;
  width:1px;
  background:#DDE1D7;
}
.category-list a:hover{background:#E5E9DF;}
.category-list a:first-child:hover{border-top-left-radius:var(--radius-lg); border-bottom-left-radius:var(--radius-lg);}
.category-list a:last-child:hover{border-top-right-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg);}
.category-list svg{width:38px; height:38px; color:var(--green-dark); flex:none;}

/* ===== MOBILE ===== */
.burger{display:none; flex:none; background:none; border:none; cursor:pointer; padding:8px;}
.burger svg{width:26px; height:26px; color:var(--ink);}
.mobile-phone-icon{display:none;}

/* Mobile off-canvas menu (burger target) — раскрывает сервисные ссылки,
   скрытые на мобильном в .service-bar .left */
.mobile-menu{display:none;}

@media (max-width: 900px){
  .service-bar{padding:0 16px; height:40px;}
  .service-bar .left{display:none;}
  .service-bar .right{width:100%; justify-content:flex-end; gap:14px;}
  .service-bar .right a span.label{display:none;}

  .main-bar{padding:0 16px; height:72px; gap:14px;}
  .logo{font-size:18px;}
  .logo span{display:none;}
  .search-pill{display:none;}
  .contact-block .phone-block small{display:none;}
  .phone-block a{font-size:0;}
  .mobile-phone-icon{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:var(--panel-bg); color:var(--green-dark); flex:none;
  }
  .mobile-phone-icon svg{width:19px;height:19px;}
  .contact-block .cta-btn{display:none;}
  .burger{display:flex;}

  .mobile-menu.is-open{
    display:flex;
    flex-direction:column;
    gap:2px;
    background:var(--white);
    border-top:1px solid var(--line);
    padding:8px 16px 16px;
  }
  .mobile-menu a{
    padding:12px 4px;
    font-size:15px;
    color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .mobile-menu .promo-badge{align-self:flex-start; margin:8px 0;}
  .mobile-menu .msg-btn{align-self:flex-start; margin-top:8px;}

  .category-panel{margin:0 0 14px; border-radius:0; background:var(--panel-bg);}
  .category-list{
    height:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:14px 16px;
    gap:22px;
    scrollbar-width:none;
  }
  .category-list::-webkit-scrollbar{display:none;}
  .category-list a{
    flex:none;
    flex-direction:column;
    gap:8px;
    font-size:13px;
    width:78px;
  }
  .category-list a::after{display:none;}
  .category-list svg{width:32px; height:32px;}
}