/* =====================================================================
 * NemeckyEshop.cz – 2sloupcový design tabulky parametrů (Shoptet)
 * ---------------------------------------------------------------------
 * Cíl: zmenšit výšku rozsáhlé tabulky "Doplňkové parametry" (20-30 řádků)
 *      a rozdělit ji na dva sloupce vedle sebe.
 *
 * Co dělá:
 *  - Desktop: celý seznam parametrů se rozdělí do DVOU vyvážených sloupců.
 *    Každý řádek = tučný popisek vlevo + hodnota vpravo. Dlouhé texty
 *    (Složení, Výživové údaje…) se zalomí v rámci svého sloupce.
 *  - Tablet: jeden sloupec (popisek vedle hodnoty).
 *  - Mobil: jeden sloupec, popisek nad hodnotou.
 *
 * DŮLEŽITÉ – proč tolik !important a dlouhé selektory:
 *  Šablona "yanabel" dává tabulce tmavé pozadí a buňkám velký padding
 *  pravidlem se 3 třídami (.type-detail .tab-content .detail-parameters).
 *  Aby naše úprava vyhrála, musí mít VYŠŠÍ specificitu – proto je každý
 *  selektor prefixovaný `.type-detail .tab-content .extended-description
 *  .detail-parameters` (4 třídy) a používá !important.
 *
 * Cílí POUZE na tabulku v záložce popisu, ne na malou info-tabulku u koše.
 *
 * Použití: Shoptet -> Vzhled a obsah -> Editor vlastního vzhledu
 *          -> Uživatelské CSS.
 * ===================================================================== */

/* ---- karta (přebíjí tmavé pozadí šablony) -------------------------- */
.type-detail .tab-content .extended-description .detail-parameters {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: #f6f4f4 !important;
  background-image: none !important;
  padding: 18px 30px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* ---- tělo = dva vyvážené sloupce ----------------------------------- */
.type-detail .tab-content .extended-description .detail-parameters tbody {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  -webkit-column-count: 2 !important;
  -moz-column-count: 2 !important;
  column-count: 2 !important;
  -webkit-column-gap: 56px !important;
  -moz-column-gap: 56px !important;
  column-gap: 56px !important;
  column-fill: balance !important;
}

/* ---- jeden parametr = řádek (popisek | hodnota) -------------------- */
.type-detail .tab-content .extended-description .detail-parameters tr {
  display: flex !important;
  align-items: baseline !important;
  gap: 18px !important;
  padding: 11px 0 !important;
  margin: 0 !important;
  border: 0 0 1px !important;
  border-bottom: 1px dashed #ddd7d7 !important;
  background: transparent !important;
  min-height: 0 !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
}

.type-detail .tab-content .extended-description .detail-parameters tr:hover {
  background: #efebeb !important;
}

/* první/poslední řádek: zruš velký padding z šablony (tr:first/last-child) */
.type-detail .tab-content .extended-description .detail-parameters tr:first-child td,
.type-detail .tab-content .extended-description .detail-parameters tr:first-child th {
  padding-top: 2px !important;
}
.type-detail .tab-content .extended-description .detail-parameters tr:last-child td,
.type-detail .tab-content .extended-description .detail-parameters tr:last-child th {
  padding-bottom: 2px !important;
}

/* ---- popisek (tučný, vlevo) ---------------------------------------- */
.type-detail .tab-content .extended-description .detail-parameters th {
  display: block !important;
  flex: 0 0 205px !important;
  width: 205px !important;
  max-width: 205px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  vertical-align: top !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2b2727 !important;
  text-transform: none !important;
}

.type-detail .tab-content .extended-description .detail-parameters th .row-header-label {
  display: inline !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
}

/* dvojtečka za popiskem se v tomto layoutu nehodí */
.type-detail .tab-content .extended-description .detail-parameters .row-header-label-colon {
  display: none !important;
}

/* ---- hodnota (vpravo) ---------------------------------------------- */
.type-detail .tab-content .extended-description .detail-parameters td {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  vertical-align: top !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4a4646 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.type-detail .tab-content .extended-description .detail-parameters td a {
  color: #3b3636 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.type-detail .tab-content .extended-description .detail-parameters td a:hover {
  text-decoration: none !important;
}

/* ===================================================================
 * TABLET (do 880 px) – jeden sloupec, popisek stále vedle hodnoty
 * =================================================================== */
@media (max-width: 880px) {
  .type-detail .tab-content .extended-description .detail-parameters tbody {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }
}

/* ===================================================================
 * MOBIL (do 560 px) – jeden sloupec, popisek NAD hodnotou
 * =================================================================== */
@media (max-width: 560px) {
  .type-detail .tab-content .extended-description .detail-parameters {
    padding: 12px 18px !important;
  }
  .type-detail .tab-content .extended-description .detail-parameters tr {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 9px 0 !important;
  }
  .type-detail .tab-content .extended-description .detail-parameters th {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    color: #6b6565 !important;
  }
  .type-detail .tab-content .extended-description .detail-parameters td {
    font-size: 14px !important;
    color: #333333 !important;
  }
}