/*
Rozmer hlavicky na ruzne velkych breakpointech
*/

.hlavicka-hledat {
  margin-left:0.5em;
  border-radius: 8px;
  box-shadow: 1px 1px 3px #888888;
}

.hlavicka-kosik {
  box-shadow: 1px 1px 3px #888888;
}

.hlavicka-projetky {
  box-shadow: 1px 1px 3px #888888;
}

.hlavicka-hledattext {
  width:100%;
  height: 42px;
  border-left: 1px solid rgba(56,56,56,1);
  border-top: 1px solid rgba(72,72,72,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  text-align: center;
}

.hlavicka-hledatsubmit {
  width:120px;
  height:44px;
  border: 1px solid #282828;
  border-radius: 0 8px 8px 0;
}

.hlavicka-hledatsubmit2 {
  width:60px;
  height:44px;
  border: 0px;
  border-radius: 0 8px 8px 0;
}

.hlavicka-kosik {
  min-height: 44px;
  text-align: center;
  border-radius: 8px 0 0 8px;
  display: inline-block;
  white-space: nowrap;
  font-size: 1.1em;
}

.hlavicka-kosik a {
  display: block;
  min-height: 44px;
  padding: 0;
}

.hlavicka-kosik-cena {
  white-space: nowrap;
  margin-right:10px;
}

.hlavicka-kosik .iw-svg-basket {
  margin:8px 0.5em 0 10px;
  vertical-align: bottom;
}

.hlavicka-hledat form {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.hlavicka-hledattext:focus{
  color: #000000;
}


.hlavicka-hledat { display: inline-block; }
.hlavicka-projetky { display: none; }
.hlavicka-hledatsubmit { display: none; }
.hlavicka-hledatsubmit2 { display: block; }


.hlavicka-projetky ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hlavicka-projetky ul::-webkit-scrollbar { display: none; }

.hlavicka-projetky li {
  flex: 0 0 auto;
}

.hlavicka-hledat    { grid-area: Hledat; }
.hlavicka-kosik     { grid-area: Kosik; }
.hlavicka-projetky  { grid-area: Navigace; }

.hlavicka {
  display: grid;
  gap: 0 0.5em;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "Hledat    Kosik"
    "Navigace  Navigace";
}

@media only screen and ( min-width: 420px) {
  .hlavicka-hledatsubmit { display: block; }
  .hlavicka-hledatsubmit2 { display: none; }
}

@media only screen and (min-width: 600px) {
  .hlavicka-projetky ul {
    justify-content: center;
  }
}

@media only screen and (min-width: 900px) {
  .hlavicka {
    grid-template-columns: 300px 1fr 170px;
    grid-template-areas:
      "Hledat    Navigace  Kosik";
  }
  .hlavicka-projetky {
    display: block;
    border-radius: 8px;
  }
  .navwxl { display: none; }
}



@media only screen and (min-width: 1000px) {
  .navwxl10 { display: block; }
}

@media only screen and (min-width: 1100px) {
  .hlavicka-hledat {
    text-align: center;
  }
  .hlavicka-kosik .iw-svg-basket {
    margin-left: 0;
  }
  .navwxl11 { display: block; }
}

@media only screen and (min-width: 1200px) {
  .navwxl12 { display: block; }
}

@media only screen and (min-width: 1300px) {
  .navwxl13 { display: block; }
}

@media only screen and (min-width: 1400px) {
  .navwxl14 { display: block; }
}

@media only screen and (min-width: 1640px) {
  .hlavicka-kosik {
    border-radius: 8px 8px 8px 8px;
  }
  .hlavicka-hledat {
    margin-left: 0;
  }
  .navwxl15 { display: block; }
}