/* Základní styly pro celý kontejner popisu */
.basic-description {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* max-width: 900px; Odstraněno pro plnou šířku */
  margin: 20px 0; /* Upraveno pro plnou šířku, zachovány vertikální okraje */
  padding: 20px;
  color: #333; /* Výchozí barva textu */
  border: 0px solid #e0e0e0; /* Jemný okraj kolem celého popisu */
  border-radius: 8px; /* Zaoblené rohy */
  background-color: #fff; /* Bílé pozadí */
  box-sizing: border-box; /* Zahrne padding a border do celkové šířky/výšky */
}

/* Hlavní nadpis "Detailní popis produktu" */
.basic-description > h3:first-of-type {
  text-align: center;
  font-size: 2em; /* Větší velikost písma */
  font-weight: bold;
  margin-bottom: 30px;
  color: #2c3e50; /* Tmavší barva pro hlavní nadpis */
}

/* Kontejner pro mřížku s textem a obrázky */
.r1 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dva sloupce stejné šířky */
  gap: 25px; /* Mezera mezi buňkami mřížky */
  align-items: start; /* Zarovnání obsahu buněk nahoru */
}

/* Styly pro levý a pravý sloupec v mřížce */
.r1left, .r1right {
  padding: 10px; /* Vnitřní odsazení */
}

/* Styly pro obrázky uvnitř .r1left nebo .r1right */
.r1left img, .r1right img {
  max-width: 100%; /* Obrázek se přizpůsobí šířce kontejneru */
  height: auto; /* Zachování poměru stran */
  display: block; /* Odstranění případného spodního okraje */
  margin: 10px auto; /* Centrování obrázku a malý vertikální okraj */
  border-radius: 6px; /* Zaoblené rohy pro obrázky */
  //box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Jemný stín pro obrázky */
}

/* Nadpisy H3 uvnitř .r1left a .r1right */
.r1left h3, .r1right h3 {
  font-size: 1.4em;
  font-weight: bold;
  color: #34495e; /* Barva nadpisů v sekcích */
  margin-top: 0; /* Odstranění horního okraje, pokud je první */
  margin-bottom: 10px;
}

/* Odstavce uvnitř .r1left a .r1right */
.r1left p, .r1right p {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #555; /* Barva textu odstavců */
}

/* Prázdný div .r1right (pokud obsahuje jen &nbsp;) */
.r1right:empty,
.r1right:contains('&nbsp;') {
    /* Bez specifických stylů, bude to prázdná buňka mřížky */
}

/* Nadpis sekce "Nejčastější dotazy" */
.r1faqnadpis {
  grid-column: 1 / -1; /* Roztažení přes oba sloupce */
  text-align: center;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #2c3e50;
}

/* Jednotlivé položky FAQ */
.r1faq {
  grid-column: 1 / -1; /* Roztažení přes oba sloupce */
  background-color: #01A04C;
  color: #ffffff;
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 8px;
  //box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.r1faq h3 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #ffffff;
}

.r1faq p {
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0;
  color: #f0f0f0;
}

/* Styly pro sekci Doplňkové parametry */
.extended-description {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 30px 0 20px 0; /* Upraveno pro plnou šířku, zachovány vertikální okraje */
  /* max-width: 900px; Odstraněno pro plnou šířku */
  padding: 20px;
  color: #333;
  background-color: #fff;
  border: 0px solid #e0e0e0;
  border-radius: 8px;
  box-sizing: border-box; /* Zahrne padding a border do celkové šířky/výšky */
}

.extended-description h3 {
  text-align: center;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 25px;
  color: #2c3e50;
}

table.detail-parameters {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 1em;
}

table.detail-parameters th,
table.detail-parameters td {
  border: 0px solid #e0e0e0;
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}

table.detail-parameters th {
  background-color: #f8f9fa;
  font-weight: bold;
  width: 30%;
  color: #495057;
}

table.detail-parameters td {
  color: #333;
}

table.detail-parameters td a {
  color: #01A04C;
  text-decoration: none;
}

table.detail-parameters td a:hover {
  text-decoration: underline;
}


/* Responzivní úpravy pro menší obrazovky */
@media (max-width: 768px) {
  .basic-description,
  .extended-description {
    margin-left: 10px; /* Ponecháno pro odsazení na malých obrazovkách */
    margin-right: 10px; /* Ponecháno pro odsazení na malých obrazovkách */
    padding: 15px;
    /* Pokud chcete i na mobilu úplně od kraje ke kraji, nastavte margin-left a margin-right na 0 */
    /* Např.: margin-left: 0; margin-right: 0; */
  }

  .r1 {
    grid-template-columns: 1fr; /* Jeden sloupec */
    gap: 20px;
  }

  .basic-description > h3:first-of-type {
    font-size: 1.8em;
  }

  .r1left h3, .r1right h3 {
    font-size: 1.3em;
  }

  .r1faqnadpis {
    font-size: 1.6em;
    margin-top: 30px;
  }

  .r1faq h3 {
    font-size: 1.1em;
  }

  .extended-description {
    margin-top: 20px;
  }

  .extended-description h3 {
    font-size: 1.6em;
    margin-bottom: 20px;
  }

  table.detail-parameters {
    font-size: 0.9em;
  }

  table.detail-parameters tr {
      display: block;
      margin-bottom: 15px;
      border: 0px solid #e0e0e0;
      border-radius: 6px;
      padding: 0;
  }
  table.detail-parameters tr:last-child {
      margin-bottom: 0;
  }

  table.detail-parameters th,
  table.detail-parameters td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 10px 12px;
    text-align: left !important;
  }

  table.detail-parameters th {
    background-color: #f8f9fa;
    font-weight: bold;
    border-bottom: 0px solid #e9ecef;
    border-radius: 6px 6px 0 0;
  }

  table.detail-parameters td {
     /* Žádné speciální ohraničení, navazuje na TH */
  }

  table.detail-parameters tr td:last-child {
      border-radius: 0 0 6px 6px;
  }

  table.detail-parameters tr th + td:last-child {
     border-radius: 0 0 6px 6px;
  }
}

.type-detail .description-inner {display:block !important;}

.extended-description {border-left:0px !important;}