/* =========================================================
   JOSPORT.CZ — MOBILNÍ HLAVIČKA / MENU V6
   Jedna lišta na všech stránkách:
   logo + hledání + účet + košík + hamburger.
   ========================================================= */

@media (max-width: 767px){

  .top-navigation-bar{
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
  }

  .top-navigation-bar > .container{
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  .top-navigation-contacts,
  .top-navigation-menu,
  .top-navigation-tools > .languagesMenu,
  .top-navigation-tools > .top-nav-button-login{
    display:none!important;
  }

  #header{
    position:relative!important;
    z-index:50!important;
    width:100%!important;
    min-height:76px!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    border-bottom:1px solid #dce6ef!important;
    box-shadow:0 4px 16px rgba(14,58,103,.06)!important;
    overflow:visible!important;
  }

  #header > .container.navigation-wrapper{
    width:100%!important;
    max-width:none!important;
    min-height:76px!important;
    margin:0!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
  }

  #header .header-top.jmh6-header-ready{
    position:relative!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    min-height:76px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  #header .header-top.jmh6-header-ready > .navigation-buttons{
    display:none!important;
  }

  /* Logo je přímo v téže liště jako menu. */
  #header .site-name-wrapper,
  #header .site-name{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  #header .site-name a{
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    height:58px!important;
    margin:0!important;
    padding:0!important;
  }

  #header .site-name img{
    display:block!important;
    width:auto!important;
    max-width:168px!important;
    height:auto!important;
    max-height:52px!important;
    margin:0!important;
    object-fit:contain!important;
  }

  #header .responsive-tools.jmh6-tools-ready{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    gap:2px!important;
    width:auto!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    color:#0e3a67!important;
    background:transparent!important;
    border:0!important;
    border-radius:10px!important;
    text-decoration:none!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a:hover,
  #header .responsive-tools.jmh6-tools-ready > a:focus-visible,
  #header .responsive-tools.jmh6-tools-ready > a.jmh6-active{
    background:#eef6fd!important;
    outline:none!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a::before{
    position:static!important;
    display:block!important;
    margin:0!important;
    color:#0e3a67!important;
    background:transparent!important;
    font-size:24px!important;
    line-height:1!important;
    transform:none!important;
  }

  #header .jmh6-cart-link::before,
  #header .jmh6-cart-link::after{
    content:none!important;
    display:none!important;
  }

  #header .jmh6-cart-link svg{
    display:block!important;
    width:24px!important;
    height:24px!important;
    fill:none!important;
    stroke:#0e3a67!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  /* Funkční vyhledávací panel pod lištou. */
  #header .jmh6-search-panel{
    position:absolute!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    z-index:150!important;
    display:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:14px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border-top:1px solid #dce6ef!important;
    border-bottom:1px solid #dce6ef!important;
    box-shadow:0 14px 26px rgba(14,58,103,.15)!important;
  }

  #header .jmh6-search-panel.jmh6-search-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #header .jmh6-search-panel form{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    margin:0!important;
  }

  #header .jmh6-search-panel input[type="search"],
  #header .jmh6-search-panel input[type="text"]{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    margin:0!important;
    padding:0 15px!important;
    border:1px solid #cad9e7!important;
    border-right:0!important;
    border-radius:13px 0 0 13px!important;
    background:#fff!important;
    font-size:16px!important;
    box-shadow:none!important;
  }

  #header .jmh6-search-panel button,
  #header .jmh6-search-panel .btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-width:58px!important;
    height:48px!important;
    margin:0!important;
    padding:0 16px!important;
    color:#fff!important;
    background:#199ce6!important;
    border:1px solid #199ce6!important;
    border-radius:0 13px 13px 0!important;
  }

  #header #navigation,
  #header .menu-helper{
    margin-top:0!important;
  }
}

@media (max-width: 420px){
  #header > .container.navigation-wrapper{
    padding:0 8px!important;
  }

  #header .site-name img{
    max-width:138px!important;
    max-height:45px!important;
  }

  #header .responsive-tools.jmh6-tools-ready{
    gap:0!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a{
    flex-basis:35px!important;
    width:35px!important;
    min-width:35px!important;
    max-width:35px!important;
    height:36px!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a::before{
    font-size:22px!important;
  }

  #header .jmh6-cart-link svg{
    width:22px!important;
    height:22px!important;
  }
}

@media (max-width: 360px){
  #header .site-name img{
    max-width:122px!important;
  }

  #header .responsive-tools.jmh6-tools-ready > a{
    flex-basis:33px!important;
    width:33px!important;
    min-width:33px!important;
    max-width:33px!important;
  }
}