/*
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: 400px;
}

.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: 10px;
}

.fotografie a { display: block; }

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

.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;
  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 2em 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; }

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

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

.obrazek { max-width: 700px; }

.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;
}

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

.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; }

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

.zbozi {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "Obrazek"
    "Ceny"
    "Akce"
    "Sleva"
    "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      Ceny"
      "Akce         Akce"
      "Sleva        Sleva"
      "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; }
}

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

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

@media only screen and (min-width: 1250px) {
  .objednavka { margin-left: 1em; }
  .kalkulace-grid { grid-template-columns: 1fr 90px 100px; }
  .kalkulace-cenazakus { display: none; }
  .kalkulace-sazbadph { display: none; }
  .kalkulace-celkembezdph { display: none; }
  .kalkulace-sumabezdph { display: none; }
  .zbozi {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "Obrazek      Ceny"
      "Obrazek      Akce"
      "Obrazek      ."
      "Sleva        Parametry"
      "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; }
}

@media only screen and (min-width: 1500px) {
  .kalkulace-grid { grid-template-columns: 1fr 90px 100px 100px 100px 100px; }
  .kalkulace-celkembezdph { display: block; }
  .kalkulace-sumabezdph { display: block; }
  .kalkulace-cenazakus { display: block; }
  .kalkulace-sazbadph { display: block; }
}

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