/*
Rozmer gridu na ruzne velkych breakpointech 360, 1280, 1366, 1536 a 1920
*/

.ceny,
.akce {
  margin: 0.5em;
}

.fotogalerie,
.kestazeni,
.prirazeno,
.objednavka {
  margin: 0em;
}

.popis,
.sleva,
.parametry,
.specifikace {
  margin: 0.5em;
}

.obrazek {
  margin: 0.5em auto;
}

.ceny {
  max-width: 400px;
  text-align: center;
}

.specifikace ul,
.popis ul {
  margin-bottom: 1em;
}

.parametry-grid,
.ceny-grid {
  display: grid;
  grid-template-columns: auto auto;
  border-top: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  max-width: 600px;
}

.parametry-grid > span,
.ceny-grid > span {
  border-left: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  text-align: right;
  padding: 0.3em;
}

.parametry-grid > span:nth-child(odd),
.ceny-grid > span:nth-child(odd) {
  background-color: #f8f8f8;
}

.parametry-grid > span:nth-child(even) {
  text-align: left;
}

.ceny-sdph {
  color: #cc0000;
  font-size: 1.4em;
  font-weight: bold;
}

.ceny-bezna {
  text-decoration: line-through;
}

.dostupnost {
  font-weight: bold;
}

.button-akce {
  background-color: #C7E506;
  color: #000000;
}

.button:hover {
  color: #003e00;
  text-decoration: underline;
}

.button:hover {
  background-color: #c2e001;
}

.specifikace > div > ul {
  margin-left: 1em;
}

.specifikace li {
  margin-left: 0.5em;
  list-style-type: square;
}

.specifikace >ul > li {
  margin-top: 0.5em;
}

.fotogalerie-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.fotografie {
  text-align: center;
  margin: 5px;
}

.fotografie a { display: block; }

.polozka-obal {
  max-width: 1200px;
  margin: 0 auto 2em auto;
}

.polozka-nadpiszbozi {
  background-color: #f0f0f0;
  padding: 0.5em;
  margin-top: 0.5em;
  border-radius: 8px 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 170px;
}

.polozka-nadpiszbozi > span {
  padding: 0.3em;
}

.polozka-nadpiszbozi > span.polozka-nadpiszbozi-text {
  font-weight: bold;
  margin: auto 0;
}

.polozka-nadpiszbozi > span.polozka-nadpiszbozi-bezdph {
  display: none;
  text-align: right;
}

.polozka-nadpiszbozi > span.polozka-nadpiszbozi-cena {
  text-align: right;
  font-weight: bold;
}

.polozka-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
}

.polozka-grid:hover {
  background-color: #C7E506;
}

.polozka-grid > span {
  padding: 0.3em;
}

.polozka-grid > span.polozka_obrazek {
  display: none;
}

.polozka-grid > span.polozka_input {
  order: 1;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  border-top: 1px solid #f0f0f0;
}

.polozka-grid > span.polozka_text {
  order: 2;
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  border-top: 1px solid #f0f0f0;
}

.polozka-grid > span.polozka_sklad {
  order: 3;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  text-align: center;
  color: #555555;
}

.polozka-grid > span.polozka_mnozstvi {
  order: 4;
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  text-align: right;
  color: #555555;
}

.polozka-grid > span.polozka_bezdph {
  text-align: right;
  display: none;
}

.polozka-grid > span.polozka_cena {
  order: 5;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  text-align: right;
  font-weight: bold;
}

.polozka-grid > span.polozka_bezceny {
  order: 2;
  grid-column: 2 / 5;
  grid-row: 1 / 3;
  border-bottom: 1px solid #f0f0f0;
}

.polozka-grid > span.polozka_input > input {
  width: 44px;
  height: 44px;
}

.polozka-nadpis {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 0.5em;
  margin-top: 0.5em;
  border-radius: 8px 8px 0 0;
}

.polozka-nadpis > a > .informace {
  float: right;
  font-size: 1.5em;
  cursor: pointer;
  margin-left: 1em;
}

.objednavka-popis {
  color: #555555;
  padding: 0.5em 0 1.5em 0;
  background-color: #ffffff;
  font-size: 0.9em;
}

 .kalkulace-grid {
  display: grid;
  grid-template-columns: 1fr 100px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
 .kalkulace-grid > span {
  padding: 0.5em;
}
.kalkulace-mnozstvi,
.kalkulace-cenazakus,
.kalkulace-sazbadph,
.kalkulace-celkembezdph {
  display: none;
  text-align: right;
}
.kalkulace-celkemsdph {
  text-align: right;
}
.kalkulace-nazev {
  text-align: left;
}
.kalkulace-nadpis {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
  border-radius: 8px 8px 0 0;
}
.kalkulace-sumabezdph {
  background-color: #f0f0f0;
  font-weight: bold;
  display: none;
}
.kalkulace-suma {
  background-color: #f0f0f0;
  font-weight: bold;
}
.kalkulace-akce { margin-top: 2em; }


.video-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}
.video-polozka { margin: 0.5em; }

.kategoriez li,
.varianty li,
.specifikace li,
.popis li {
  margin-left: 1.5em;
}

.akce {
  text-align: center;  /* zmena */
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
}

.teloidz .obrazek {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  max-width: 700px;
}

.teloidz .obrazek .idf1 {
  grid-column: 1 / span 2;
}


.obrazek img {
  width: 100%;
  height: auto;
}

.dotaz {
  margin: 0.5em;
}

.dotaz .dotaz-grid {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 100px 1fr;
  max-width: 700px;
}

.dotaz .dotaz-grid .ftext {
  width: 90%;
  height: 33px;
  padding-left: 0.5em;
  max-width: 700px;
}

.dotaz .dotaz-grid .ftextarea  {
  width: 90%;
  max-width: 700px;
  padding: 0.5em;
  height: 80px;
}

.dotaz .dotaz-grid .fcheckbox  {
  height: 33px;
  width: 33px;
  margin-right: 0.5em;
}

.ftext170 {
  width: 155px;
  height: 33px;
  padding-left: 0.5em;
}

.dotaz .dotaz-grid .item12 { grid-column: 1 / 2; text-align: right; }
.dotaz .dotaz-grid .item23 { grid-column: 2 / 3; }
.dotaz .dotaz-grid .item13 { grid-column: 1 / 3; text-align: center; }

.dotaz .alert {
  padding: 0.5em;
  margin: 0.5em 0.5em 1.5em 0.5em;
  background-color: #ffcc00;
  border: 1px solid #eebb00;
  border-radius: 8px;
  text-align: center;
  max-width: 700px;
}

.dotaz .alert-ok {
  padding: 0.5em;
  margin: 0.5em 0.5em 1.5em 0.5em;
  background-color: #ccff00;
  border: 1px solid #000000;
  border-radius: 8px;
  text-align: center;
  max-width: 700px;
}

.zalozky { margin: 0.5em; }

.zalozky input.zalozka { display: none; }                /* hide radio buttons */
.zalozky input.zalozka + label { display: none; } /* show labels in line */
/* show contents only for selected tab */
.zalozky #tab1:checked ~ .tab.content1,
.zalozky #tab2:checked ~ .tab.content2,
.zalozky #tab3:checked ~ .tab.content3,
.zalozky #tab4:checked ~ .tab.content4,
.zalozky #tab5:checked ~ .tab.content5,
.zalozky #tab6:checked ~ .tab.content6,
.zalozky #tab7:checked ~ .tab.content7 { display: block; }

.zalozky input.zalozka + label {             /* box with rounded corner */
  border: 1px solid #999;
  background: #EEE;
  padding: 0.5em;
  margin-right: 0.5em;
  border-radius: 8px 8px 0 0;
  position: relative;
  top: 1px;
  cursor: pointer;
}
.zalozky input.zalozka + label:hover {
  color: #cc0000;
}
.zalozky input.zalozka:checked + label {     /* white background for selected tab */
  background: #ffffff;
  border-bottom: 1px solid transparent;
}

.zalozky #tab1 + label { background: #C7E506; }
.zalozky #tab1:checked + label { background: #ffffff; }


.zalozky .prirazeno li,
.zalozky .popis li {
  margin-left: 1.5em;
}

.zalozky input.zalozka ~ .tab { display: block; }

.zalozky > .tab > div { margin-top: 1em; }

.slevovykod {
  margin-top: 1em;
  padding: 0.5em;
  background-color: #ffcc00;
  border: 1px solid #eebb00;
  border-radius: 8px;
}

.kategoriez,
.varianty {
  margin: 0.5em;
}

.varianty-flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap:1em;
  min-height: 40px;
}

.varianty-flex span:nth-child(2)  {
  flex-grow: 1;
}

.varianty-flex span:nth-child(3)  {
  min-width: 80px;
  text-align: center;
}

.varianty-flex span:nth-child(4)  {
  min-width: 80px;
  text-align: right;
}

.priznak {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.5em;
}

.teloidz .priznak { font-size:0.8em; }
.teloidc .priznak { font-size:0.7em; }
.teloidk .priznak { font-size:0.7em; }
.uvod .priznak { font-size:0.7em; }

.priznak span {
  padding: 0.2em 0.5em;
  margin-left: 1px;
  height: 18px;
}

.priznak1 {
  color: #FFFFFF;
  background-color: #0c99ca;
}

.priznak2 {
  color: #FFFFFF;
  background-color: #289307;
}

.priznak3 {
  color: #FFFFFF;
  background-color: #cc0000;
}

.priznak4,
.priznak7 {
  color: #FFFFFF;
  background-color: #cc6400;
}

.priznak5 {
  color: #FFFFFF;
  background-color: #f08b34;
}

.priznak6 {
  color: #FFFFFF;
  background-color: #808080;
}



/* ************************************************************** */

.zbozi { grid-area: Zbozi; }
.obrazek { grid-area: Obrazek; }
.ceny { grid-area: Ceny; }
.popis { grid-area: Popis; }
.sleva { grid-area: Sleva; }
.specifikace { grid-area: Specifikace; }
.parametry { grid-area: Parametry; }
.fotogalerie { grid-area: Fotogalerie; }
.video { grid-area: Video; }
.kestazeni { grid-area: Kestazeni; }
.prirazeno { grid-area: Prirazeno; }
.dotaz { grid-area: Dotaz; }
.akce { grid-area: Akce; }
.objednavka { grid-area: Objednavka; }
.zalozky { grid-area: Zalozky; }
.varianty { grid-area: Varianty; }
.kategoriez { grid-area: Kategoriez; }
.priznak { grid-area: Priznak; }

.teloidz {
  display: grid;
  gap: 0.5em 0;
  grid-template-columns: 1fr;
  grid-template-areas:
    "Drobecky"
    "Nadpis"
    "Zbozi"
    "Menu";
}

.zbozi {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "Obrazek"
    "Priznak"
    "Ceny"
    "Akce"
    "Sleva"
    "Kategoriez"
    "Varianty"
    "Popis"
    "Specifikace"
    "Parametry"
    "Zalozky";
}


/* ************************************************************** */

@media only screen and (min-width: 500px) {
  .kalkulace-grid { grid-template-columns: 1fr 90px 100px; }
  .kalkulace-mnozstvi { display: block; }
  .fotogalerie-flex { justify-content: start; }
}

@media only screen and (min-width: 600px) {
  .polozka-grid { grid-template-columns: auto 50px 1fr minmax(80px, auto) minmax(80px, auto) minmax(90px, auto); }
  .polozka-grid > span.polozka_input {
    order: 1;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .polozka-grid > span.polozka_obrazek {
    order: 2;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
    display: block;
  }
  .polozka-grid > span.polozka_text {
    order: 3;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .polozka-grid > span.polozka_sklad {
    order: 4;
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_mnozstvi {
    order: 5;
    grid-column: 5 / 6;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_cena {
    order: 6;
    grid-column: 6 / 7;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_nadpis { grid-column: 1 / 7; }
  .polozka-grid > span.polozka_popis { grid-column: 1 / 7; }
  .polozka-grid > span.polozka_bezceny { grid-column: 3 / 7; }
  .polozka-grid > span.polozka_input > input {
    width: 24px;
    height: 24px;
  }
  .obrazek { margin:0.5em; }

  .zalozky input.zalozka ~ .tab { display: none }          /* hide contents */
  .zalozky input.zalozka + label { display: inline-block } /* show labels in line */
  .zalozky h2 { display: none; }
  .zalozky input.zalozka ~ .tab {          /* grey line between tab and contents */
    border-top: 1px solid #999999;
    padding: 12px;
  }

}

@media only screen and (min-width: 700px) {
  .zbozi {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "Obrazek     Priznak"
      "Obrazek     Ceny"
      "Obrazek     Akce"
      ".           Akce"
      "Sleva       Sleva"
      "Kategoriez  Kategoriez"
      "Varianty    Varianty"
      "Popis       Popis"
      "Specifikace Specifikace"
      "Parametry   Parametry"
      "Zalozky     Zalozky";
  }
  .kalkulace-grid { grid-template-columns: 1fr 90px 100px 100px; }
  .kalkulace-sumabezdph { display: block; }
  .kalkulace-celkembezdph { display: block; }
  .priznak { justify-content: right; }
}

@media only screen and (min-width: 900px) {
  .teloidz {
    gap: 0.5em;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "Menu   Drobecky"
      "Nadpis Nadpis"
      "Zbozi  Zbozi"
  }
  .zbozi {
    grid-template-areas:
      "Obrazek      Priznak"
      "Obrazek      Ceny"
      "Obrazek      Akce"
      "Obrazek      ."
      "Sleva        Sleva"
      "Kategoriez   Varianty"
      "Popis        Popis"
      "Specifikace  Specifikace"
      "Parametry    Parametry"
      "Zalozky      Zalozky";
  }
  .drobecky { border-radius: 8px 0 0 8px;}
  .zalozky input.zalozka ~ .tab { border-left: 1px solid #999999; }
  .priznak { justify-content: center; }
}

@media only screen and (min-width: 1000px) {
  .zbozi {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "Obrazek      Priznak"
      "Obrazek      Ceny"
      "Obrazek      Akce"
      "Obrazek      ."
      "Sleva        Sleva"
      "Kategoriez   Varianty"
      "Popis        Popis"
      "Specifikace  Specifikace"
      "Parametry    Parametry"
      "Zalozky      Zalozky";
  }
  .kalkulace-grid { grid-template-columns: 1fr 100px 100px 100px 100px 100px; }
  .kalkulace-cenazakus { display: block; }
  .kalkulace-sazbadph { display: block; }
  .kalkulace-celkembezdph { display: block; }
  .priznak { justify-content: right; }
}

@media only screen and (min-width: 1250px) {
  .objednavka { margin-left: 1em; }
  .zbozi {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "Obrazek      Priznak"
      "Obrazek      Ceny"
      "Obrazek      Akce"
      "Obrazek      Kategoriez"
      "Obrazek      Varianty"
      ".            Varianty"
      "Sleva        Sleva"
      "Popis        Parametry"
      "Specifikace  Parametry"
      ".            Parametry"
      "Zalozky      Zalozky";
  }
  .zalozky > .tab > div { margin-left: 1em; }
  .zbozi { grid-template-columns: 3fr 2fr; }

  .polozka-grid { grid-template-columns: auto 50px 1fr minmax(80px, auto)  minmax(90px, auto) minmax(80px, auto) minmax(90px, auto); }
  .polozka-grid > span.polozka_input {
    order: 1;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .polozka-grid > span.polozka_obrazek {
    order: 2;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
    display: block;
  }
  .polozka-grid > span.polozka_text {
    order: 3;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .polozka-grid > span.polozka_sklad {
    order: 4;
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_bezdph {
    order: 5;
    grid-column: 5 / 6;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
    display: block;
  }
  .polozka-grid > span.polozka_mnozstvi {
    order: 6;
    grid-column: 6 / 7;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_cena {
    order: 7;
    grid-column: 7 / 8;
    grid-row: 1 / 2;
    border-top: 1px solid #f0f0f0;
  }
  .polozka-grid > span.polozka_nadpis { grid-column: 1 / 8; }
  .polozka-grid > span.polozka_popis { grid-column: 1 / 8; }
  .polozka-grid > span.polozka_bezceny { grid-column: 3 / 8; }

  .obrazek { margin:auto; }

  .polozka-nadpiszbozi { grid-template-columns: auto 170px 170px; }
  .polozka-nadpiszbozi > span.polozka-nadpiszbozi-bezdph { display: block; }
}

@media only screen and (min-width: 1640px) {
  .drobecky { border-radius: 8px; }
  #teloidz_kategorie {  border-radius: 0 0 8px 8px; }
}