/* Exact shared header shell based on the approved news.servis-parket.ru service-page design. */
#sp-reference-header,
#sp-reference-header *{box-sizing:border-box}
#sp-reference-header{
  --sp-ink:#2d241e;
  --sp-muted:#756c65;
  --sp-line:#e7dfd6;
  --sp-accent:#d77f16;
  --sp-accent-dark:#b7650a;
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  width:100%!important;
  margin:0!important;
  background:rgba(255,255,255,.97)!important;
  border:0!important;
  border-bottom:1px solid rgba(0,0,0,.06)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px);
  color:var(--sp-ink)!important;
  font-family:Inter,Arial,sans-serif!important;
}
#sp-reference-header .header-inner{
  width:min(1280px,calc(100% - 44px))!important;
  min-height:78px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  position:relative!important;
}
#sp-reference-header a{text-decoration:none!important}
#sp-reference-header .brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:220px!important;
  color:var(--sp-ink)!important;
}
#sp-reference-header .brand-mark{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid var(--sp-accent)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--sp-accent)!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
}
#sp-reference-header .brand-copy{display:flex!important;flex-direction:column!important;line-height:1.15!important}
#sp-reference-header .brand-copy strong{font-size:15px!important;color:var(--sp-ink)!important;font-weight:850!important}
#sp-reference-header .brand-copy small{margin-top:4px!important;font-size:10px!important;line-height:1.25!important;color:var(--sp-muted)!important}
#sp-reference-header .main-nav{
  display:flex!important;
  align-items:center!important;
  gap:19px!important;
  margin-left:auto!important;
  padding:0!important;
  position:static!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
#sp-reference-header .main-nav>a,
#sp-reference-header .nav-item>a{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:0!important;
  color:var(--sp-ink)!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#sp-reference-header .main-nav>a:hover,
#sp-reference-header .nav-item>a:hover,
#sp-reference-header .main-nav>a.is-current,
#sp-reference-header .nav-item>a.is-current{color:var(--sp-accent)!important}
#sp-reference-header .header-contact{display:flex!important;flex-direction:column!important;align-items:flex-end!important;min-width:150px!important}
#sp-reference-header .phone{color:var(--sp-ink)!important;font-size:14px!important;line-height:1.15!important;font-weight:850!important;white-space:nowrap!important}
#sp-reference-header .header-contact small{margin-top:2px!important;font-size:10px!important;line-height:1.2!important;color:var(--sp-muted)!important;white-space:nowrap!important}
#sp-reference-header .header-socials{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;padding:0!important}
#sp-reference-header .social{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
}
#sp-reference-header .social img{
  display:block!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
}
#sp-reference-header .btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:12px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#sp-reference-header .btn-accent{
  color:#fff!important;
  background:linear-gradient(135deg,#df8d2a,#bd690b)!important;
  box-shadow:0 8px 20px rgba(190,108,17,.20)!important;
}
#sp-reference-header .mobile-phone,
#sp-reference-header .menu-toggle{display:none!important}

/* Hide the old Bitrix header/menu only when the approved shared header is present. */
body.sp-reference-menu-active .wrapper>.header,
body.sp-reference-menu-active .wrapper>.topmenu_new,
body.sp-reference-menu-active .wrapper>.topmenu,
body.sp-reference-menu-active .wrapper>.topmenu_new+br{display:none!important}

@media(max-width:1180px){
  #sp-reference-header .header-inner{gap:13px!important}
  #sp-reference-header .main-nav{gap:11px!important}
  #sp-reference-header .main-nav>a,
  #sp-reference-header .nav-item>a{font-size:11px!important}
  #sp-reference-header .header-socials{display:none!important}
}
@media(max-width:1050px){
  #sp-reference-header .header-contact{display:none!important}
}
@media(max-width:980px){
  #sp-reference-header .header-inner{width:min(100% - 24px,1280px)!important;min-height:70px!important}
  #sp-reference-header .brand{min-width:0!important}
  #sp-reference-header .brand-copy{display:none!important}
  #sp-reference-header .mobile-phone{display:flex!important;align-items:center!important;gap:5px!important;margin-left:auto!important;color:var(--sp-accent-dark)!important;font-size:12px!important;white-space:nowrap!important}
  #sp-reference-header .menu-toggle{display:block!important;width:42px!important;height:42px!important;margin:0!important;border:0!important;border-radius:10px!important;background:#f7efe7!important;color:var(--sp-accent-dark)!important;font-size:23px!important}
  #sp-reference-header .main-nav{
    display:none!important;
    position:absolute!important;
    z-index:10002!important;
    top:70px!important;
    left:0!important;
    right:0!important;
    max-height:calc(100vh - 82px)!important;
    overflow:auto!important;
    padding:12px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    background:#fff!important;
    border:1px solid var(--sp-line)!important;
    border-radius:15px!important;
    box-shadow:0 22px 55px rgba(42,27,16,.16)!important;
  }
  #sp-reference-header .main-nav.open{display:flex!important}
  #sp-reference-header .main-nav>a,
  #sp-reference-header .nav-item>a{min-height:40px!important;width:100%!important;padding:0 10px!important;font-size:13px!important}
  #sp-reference-header .header-photo{display:none!important}
}
@media(max-width:480px){
  #sp-reference-header .mobile-phone strong{font-size:11px!important}
}
