/* =========================================================
   JOSPORT.CZ — MOBILNÍ HLAVIČKA / MENU V12
   Stabilní zarovnání a funkční nativní vyhledávání Shoptetu.
   ========================================================= */

@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:60!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{
    position:relative!important;
    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.jmh12-header-ready{
    position:relative!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-start!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.jmh12-header-ready > .navigation-buttons{
    display:none!important;
  }

  /* Logo musí být ve stejné řadě a nesmí zabrat celou šířku. */
  #header .header-top.jmh12-header-ready > .site-name-wrapper{
    display:flex!important;
    align-items:center!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 160px)!important;
    margin:0!important;
    padding:0!important;
  }

  #header .site-name,
  #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;
  }

  /* Ikony přesně vpravo, bez druhého řádku. */
  #header .responsive-tools.jmh12-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 0 0 auto!important;
    padding:0!important;
  }

  #header .responsive-tools.jmh12-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.jmh12-tools-ready > a:hover,
  #header .responsive-tools.jmh12-tools-ready > a:focus-visible{
    background:#eef6fd!important;
    outline:none!important;
  }

  #header .responsive-tools.jmh12-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 .jmh12-cart-link::before,
  #header .jmh12-cart-link::after{
    content:none!important;
    display:none!important;
  }

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

  /* Vyhledávací panel je absolutně pod lištou a neovlivňuje její rozložení. */
  #header .header-top.jmh12-header-ready > .search{
    position:absolute!important;
    top:76px!important;
    left:-12px!important;
    right:-12px!important;
    z-index:180!important;
    width:auto!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;
  }

  /* Výchozí zavřený stav. */
  body:not(.search-window-visible) #header .header-top.jmh12-header-ready > .search{
    display:none!important;
  }

  /* Shoptet po kliknutí přidává body.search-window-visible. */
  body.search-window-visible #header .header-top.jmh12-header-ready > .search{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

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

  #header .header-top.jmh12-header-ready > .search input[type="search"],
  #header .header-top.jmh12-header-ready > .search 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 .header-top.jmh12-header-ready > .search button,
  #header .header-top.jmh12-header-ready > .search .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;
  }
}

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

  #header .header-top.jmh12-header-ready > .site-name-wrapper{
    max-width:calc(100% - 145px)!important;
  }

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

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

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

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

  #header .header-top.jmh12-header-ready > .search{
    left:-8px!important;
    right:-8px!important;
  }
}


/* =========================================================
   V8 — STABILIZACE HLAVIČKY NA STRÁNCE KOŠÍKU
   Logo je vždy viditelné a celá lišta zůstává v jedné řadě.
   ========================================================= */
@media (max-width: 767px){

  body.mobile #header,
  body.mobile.in-kosik #header,
  body.mobile.ordering-process #header{
    min-height:84px!important;
    overflow:visible!important;
  }

  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper{
    min-height:84px!important;
    padding:0 12px!important;
    overflow:visible!important;
  }

  body.mobile #header .header-top.jmh12-header-ready,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    min-height:84px!important;
    padding:8px 0 4px!important;
    overflow:visible!important;
  }

  /* Logo musí být vždy uvnitř stejné lišty a nesmí být posunuté mimo viewport. */
  body.mobile #header .header-top.jmh12-header-ready > .site-name-wrapper,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready > .site-name-wrapper,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready > .site-name-wrapper{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    order:1!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 160px)!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    overflow:visible!important;
  }

  body.mobile #header .site-name,
  body.mobile #header .site-name a,
  body.mobile.in-kosik #header .site-name,
  body.mobile.in-kosik #header .site-name a,
  body.mobile.ordering-process #header .site-name,
  body.mobile.ordering-process #header .site-name a{
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    height:58px!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    overflow:visible!important;
  }

  body.mobile #header .site-name img,
  body.mobile.in-kosik #header .site-name img,
  body.mobile.ordering-process #header .site-name img{
    position:static!important;
    display:block!important;
    width:auto!important;
    max-width:168px!important;
    height:auto!important;
    max-height:50px!important;
    margin:4px 0 0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    object-fit:contain!important;
  }

  /* Ikony vždy vpravo ve stejné řadě. */
  body.mobile #header .responsive-tools.jmh12-tools-ready,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready{
    position:static!important;
    order:2!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    width:auto!important;
    height:42px!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    transform:none!important;
  }

  /* Vyhledávací panel se posune pod vyšší lištu. */
  body.mobile #header .header-top.jmh12-header-ready > .search,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready > .search,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready > .search{
    top:84px!important;
  }
}

@media (max-width: 420px){
  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper{
    padding:0 8px!important;
  }

  body.mobile #header .header-top.jmh12-header-ready > .site-name-wrapper,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready > .site-name-wrapper,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready > .site-name-wrapper{
    max-width:calc(100% - 145px)!important;
  }

  body.mobile #header .site-name img,
  body.mobile.in-kosik #header .site-name img,
  body.mobile.ordering-process #header .site-name img{
    max-width:140px!important;
    max-height:44px!important;
    margin-top:6px!important;
  }
}


/* =========================================================
   V9 — FINÁLNÍ DOLADĚNÍ IKON PODLE SCHVÁLENÉHO NÁVRHU
   Stejná velikost, optická váha a pravidelné rozestupy.
   ========================================================= */
@media (max-width: 767px){

  body.mobile #header .responsive-tools.jmh12-tools-ready,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready{
    gap:8px!important;
    height:44px!important;
  }

  body.mobile #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready > a{
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    border-radius:10px!important;
  }

  /* Sjednocení optické velikosti nativních ikon Shoptetu. */
  body.mobile #header .responsive-tools.jmh12-tools-ready > a::before,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready > a::before,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready > a::before{
    font-size:25px!important;
    line-height:1!important;
  }

  /* Košík má stejnou vizuální velikost jako ostatní ikony. */
  body.mobile #header .jmh12-cart-link svg,
  body.mobile.in-kosik #header .jmh12-cart-link svg,
  body.mobile.ordering-process #header .jmh12-cart-link svg{
    width:27px!important;
    height:27px!important;
    stroke-width:1.7!important;
  }

  /* Větší odstup mezi košíkem a hamburgerem. */
  body.mobile #header .jmh12-cart-link,
  body.mobile.in-kosik #header .jmh12-cart-link,
  body.mobile.ordering-process #header .jmh12-cart-link{
    margin-right:3px!important;
  }

  /* Hamburger má čistou stejnou plochu bez posunu. */
  body.mobile #header .responsive-tools.jmh12-tools-ready
  > a[data-target="navigation"],
  body.mobile #header .responsive-tools.jmh12-tools-ready
  > a[data-testid="hamburgerMenu"],
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready
  > a[data-target="navigation"],
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready
  > a[data-target="navigation"]{
    margin-left:1px!important;
  }
}

@media (max-width: 420px){
  body.mobile #header .responsive-tools.jmh12-tools-ready,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready{
    gap:5px!important;
  }

  body.mobile #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready > a{
    flex-basis:37px!important;
    width:37px!important;
    min-width:37px!important;
    max-width:37px!important;
    height:38px!important;
  }

  body.mobile #header .responsive-tools.jmh12-tools-ready > a::before,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready > a::before,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready > a::before{
    font-size:23px!important;
  }

  body.mobile #header .jmh12-cart-link svg,
  body.mobile.in-kosik #header .jmh12-cart-link svg,
  body.mobile.ordering-process #header .jmh12-cart-link svg{
    width:25px!important;
    height:25px!important;
  }
}

@media (max-width: 360px){
  body.mobile #header .responsive-tools.jmh12-tools-ready,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready{
    gap:2px!important;
  }

  body.mobile #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready > a,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready > a{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
  }
}


/* =========================================================
   V10 — KOMPAKTNÍ MOBILNÍ HLAVIČKA
   Odstranění zbytečné horní mezery a snížení výšky lišty.
   ========================================================= */
@media (max-width: 767px){

  /* Horní lišta nesmí rezervovat žádnou výšku. */
  body.mobile .top-navigation-bar,
  body.mobile .top-navigation-bar > .container,
  body.mobile .top-navigation-tools.top-navigation-tools--language{
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:visible!important;
  }

  /* Hlavní hlavička kompaktnější. */
  body.mobile #header,
  body.mobile.in-kosik #header,
  body.mobile.ordering-process #header{
    min-height:64px!important;
  }

  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper{
    min-height:64px!important;
    padding:0 12px!important;
  }

  body.mobile #header .header-top.jmh12-header-ready,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready{
    min-height:64px!important;
    padding:0!important;
    align-items:center!important;
  }

  /* Logo opticky vycentrované v nižší liště. */
  body.mobile #header .site-name,
  body.mobile #header .site-name a,
  body.mobile.in-kosik #header .site-name,
  body.mobile.in-kosik #header .site-name a,
  body.mobile.ordering-process #header .site-name,
  body.mobile.ordering-process #header .site-name a{
    height:50px!important;
  }

  body.mobile #header .site-name img,
  body.mobile.in-kosik #header .site-name img,
  body.mobile.ordering-process #header .site-name img{
    max-height:44px!important;
    margin:0!important;
  }

  /* Ikony vertikálně přesně na střed. */
  body.mobile #header .responsive-tools.jmh12-tools-ready,
  body.mobile.in-kosik #header .responsive-tools.jmh12-tools-ready,
  body.mobile.ordering-process #header .responsive-tools.jmh12-tools-ready{
    height:40px!important;
    align-items:center!important;
  }

  /* Vyhledávání se otevře hned pod kompaktní lištou. */
  body.mobile #header .header-top.jmh12-header-ready > .search,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready > .search,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready > .search{
    top:64px!important;
  }
}

@media (max-width: 420px){
  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper{
    padding:0 8px!important;
  }

  body.mobile #header .site-name img,
  body.mobile.in-kosik #header .site-name img,
  body.mobile.ordering-process #header .site-name img{
    max-height:40px!important;
  }
}


/* =========================================================
   V11 — ODSTRANĚNÍ PRÁZDNÉHO PROSTORU NAD MOBILNÍ LIŠTOU
   ========================================================= */
@media (max-width: 767px){

  /* Shoptet vytváří nad header-top pomocný pseudo-element.
     Na mobilu ho zcela odstraníme. */
  body.mobile #header > .container.navigation-wrapper::before,
  body.mobile.in-kosik #header > .container.navigation-wrapper::before,
  body.mobile.ordering-process #header > .container.navigation-wrapper::before{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper{
    padding-top:0!important;
    margin-top:0!important;
  }

  body.mobile #header .header-top.jmh12-header-ready,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready{
    margin-top:0!important;
    top:0!important;
  }

  /* Zrušení případné rezervované výšky starého top menu. */
  body.mobile .top-navigation-tools.top-navigation-tools--language{
    position:static!important;
    top:auto!important;
    bottom:auto!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
  }
}


/* =========================================================
   V12 — ÚPLNÉ ODSTRANĚNÍ MEZERY NAD MOBILNÍ HLAVIČKOU
   Mezery vytvářel obal stránky / původní horní navigace,
   nikoliv samotný header.
   ========================================================= */
@media (max-width: 767px){

  html,
  body.mobile{
    margin-top:0!important;
    padding-top:0!important;
  }

  body.mobile .overall-wrapper{
    margin-top:0!important;
    padding-top:0!important;
    top:0!important;
  }

  body.mobile .top-navigation-bar,
  body.mobile .top-navigation-bar > .container,
  body.mobile .top-navigation-tools,
  body.mobile .top-navigation-tools.top-navigation-tools--language{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    line-height:0!important;
    overflow:visible!important;
  }

  body.mobile .top-navigation-bar::before,
  body.mobile .top-navigation-bar::after,
  body.mobile .top-navigation-bar > .container::before,
  body.mobile .top-navigation-bar > .container::after,
  body.mobile .top-navigation-tools::before,
  body.mobile .top-navigation-tools::after{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.mobile #header,
  body.mobile.in-kosik #header,
  body.mobile.ordering-process #header{
    margin-top:0!important;
    top:0!important;
  }

  body.mobile #header > .container.navigation-wrapper,
  body.mobile.in-kosik #header > .container.navigation-wrapper,
  body.mobile.ordering-process #header > .container.navigation-wrapper,
  body.mobile #header .header-top.jmh12-header-ready,
  body.mobile.in-kosik #header .header-top.jmh12-header-ready,
  body.mobile.ordering-process #header .header-top.jmh12-header-ready{
    margin-top:0!important;
    top:0!important;
  }
}