/* =========================================================
   JOSPORT.CZ — MOBILNÍ HLAVIČKA / MENU V5
   Finální univerzální mobilní hlavička.
   ========================================================= */

@media (max-width: 767px){

  /* Horní desktopová lišta na mobilu nesmí zabírat prostor. */
  .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;
  }

  /* Hlavní mobilní hlavička. */
  #header{
    position:relative!important;
    z-index:50!important;
    width:100%!important;
    min-height:74px!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:74px!important;
    margin:0!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
  }

  #header .header-top.jmh5-header-ready{
    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:74px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  /* Schovat původní prvky, které způsobovaly zalomení do druhého řádku. */
  #header .header-top.jmh5-header-ready > .navigation-buttons{
    display:none!important;
  }

  /* Logo vlevo. */
  #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:56px!important;
    margin:0!important;
    padding:0!important;
  }

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

  /* Čtyři ikony vpravo. */
  #header .responsive-tools.jmh5-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:1px!important;
    width:auto!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
  }

  #header .responsive-tools.jmh5-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;
    overflow:visible!important;
  }

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

  #header .responsive-tools.jmh5-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;
  }

  /* Košík: zrušit zděděný pseudo-element ze Shoptetu. */
  #header .responsive-tools.jmh5-tools-ready > .jmh5-cart-link::before,
  #header .responsive-tools.jmh5-tools-ready > .jmh5-cart-link::after{
    content:none!important;
    display:none!important;
  }

  #header .jmh5-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;
  }

  /* Hamburger bez barevného oválu či duplicitního pozadí. */
  #header .responsive-tools.jmh5-tools-ready
  > a[data-target="navigation"]::after,
  #header .responsive-tools.jmh5-tools-ready
  > a[data-testid="hamburgerMenu"]::after{
    content:none!important;
    display:none!important;
  }

  /* Navigace pod hlavičkou nesmí vytvářet prázdnou mezeru. */
  #header #navigation,
  #header .menu-helper{
    margin-top:0!important;
  }
}

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

  #header .header-top.jmh5-header-ready{
    gap:4px!important;
  }

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

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

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

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

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

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


/* =========================================================
   V5 — FUNKČNÍ MOBILNÍ VYHLEDÁVÁNÍ
   Původní vyhledávací panel Shoptetu zůstává funkční.
   ========================================================= */
@media (max-width: 767px){

  /* Vyhledávání musí zůstat v DOM a nesmí být trvale skryté. */
  #header .header-top.jmh5-header-ready > .search{
    position:absolute!important;
    top:74px!important;
    left:0!important;
    right:0!important;
    z-index:120!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 12px 24px rgba(14,58,103,.12)!important;
  }

  /* Zavřený stav — respektuje standardní Shoptet atributy/třídy. */
  #header .header-top.jmh5-header-ready > .search:not(.visible):not(.active):not(.open):not([style*="display: block"]){
    display:none!important;
  }

  /* Otevřený stav. */
  #header .header-top.jmh5-header-ready > .search.visible,
  #header .header-top.jmh5-header-ready > .search.active,
  #header .header-top.jmh5-header-ready > .search.open,
  #header .header-top.jmh5-header-ready > .search[style*="display: block"]{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #header .header-top.jmh5-header-ready > .search form{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }

  #header .header-top.jmh5-header-ready > .search input[type="search"],
  #header .header-top.jmh5-header-ready > .search input[type="text"]{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:46px!important;
    margin:0!important;
    padding:0 14px!important;
    border:1px solid #cfddea!important;
    border-radius:12px 0 0 12px!important;
    background:#fff!important;
    font-size:16px!important;
  }

  #header .header-top.jmh5-header-ready > .search button,
  #header .header-top.jmh5-header-ready > .search .btn{
    flex:0 0 auto!important;
    min-width:52px!important;
    height:46px!important;
    margin:0!important;
    padding:0 16px!important;
    border-radius:0 12px 12px 0!important;
  }
}