/* ============================================================
   Ski & Cyklo centrum — Doplňkové parametry na detailu produktu
   Restyl standardní šoptetí tabulky table.detail-parameters
   do stejného designu jako boxy Předpokládané doručení,
   Dárky a tlačítko Přidat do košíku (zaoblená karta, jemné
   modré linky, modrá #1c5a99).

   v5:
   - Oprava šířky: Shoptet mezi ~1200–1400px přesouvá tento box
     do záložky Popis a dává mu jen 1/3 šířky vedle popisného
     textu (.description-inner je flex row, .extended-description
     má flex-basis 33%), což zbytečně zalamovalo delší hodnoty.
     Box se teď v této situaci zalomí na vlastní řádek přes
     celou šířku.
   - Víceřádkové hodnoty (např. Pláště s předním a zadním
     pláštěm): každá hodnota na vlastním řádku, oddělené jemnou
     šedou čárou. Vyžaduje doprovodný JS (detail-parametry.js),
     protože Shoptet tyto hodnoty vykresluje jako čistý text bez
     oddělovacích elementů.
   ============================================================ */
/* Nadpis „Doplňkové parametry" — malý modrý titulek
   ve stylu ZDARMA OD NÁS DOSTANETE */
#product-detail .detail-parameters-wrapper > h4,
#product-detail .extended-description + h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1c5a99;
    margin-bottom: 12px;
}
/* NOVÉ v5 — mezi ~1200-1400px šířky okna Shoptet vykresluje
   parametry uvnitř záložky Popis, vedle popisného textu, jen
   na 1/3 šířky (viz komentář výše). Necháme box zalomit na
   vlastní řádek přes celou šířku místo mačkání vedle textu. */
.description-inner {
    flex-wrap: wrap;
}
.description-inner .extended-description {
    flex: 1 1 100%;
    max-width: 100%;
}
/* Tabulka jako zaoblená karta */
table.detail-parameters {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #d7e6f8;
    border-radius: 14px;
    overflow: hidden;
}
/* Oddělení řádků jemnou linkou (kromě prvního) */
table.detail-parameters tr + tr th,
table.detail-parameters tr + tr td {
    border-top: 1px solid #e9f2fc;
}
/* Prázdný "reset" řádek hned pod výběrem varianty (obsahuje jen
   skrytý <div class="no-display"><a>Reset</a></div>). Dokud je
   prázdný, padding i horní linku vynulujeme, aby nevytvářel
   bílý proužek. Jakmile Shoptet třídu "no-display" odstraní
   (varianta je nedostupná a řádek se má ukázat), selektor
   přestane sedět a řádek se vrátí do normálu. */
table.detail-parameters tr.variant-list + tr:has(.no-display) td,
table.detail-parameters tr.variant-list + tr:has(.no-display) th {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
}
/* Levý sloupec — popisky: světle modrý podklad,
   normální řez, klidná šedomodrá */
table.detail-parameters th {
    background: #f5f9fe;
    font-weight: 400;
    color: #4a5b6e;
    text-align: left;
    padding: 10px 16px;
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
/* Skutečná struktura Shoptetu: uvnitř th je jeden
   <span class="row-header-label"> a v něm tři sourozenci —
   ikona nápovědy (.show-tooltip.question-tooltip, PRVNÍ),
   text popisku, a samostatný <span class="row-header-label-colon">
   s dvojtečkou (POSLEDNÍ). Flex + order přeuspořádá pořadí
   beze zásahu do samotného textu/dvojtečky. */
table.detail-parameters th .row-header-label {
    display: flex;
    align-items: center;
}
table.detail-parameters th .row-header-label-colon {
    order: 1;
}
/* Pravý sloupec — hodnoty: tučně, tmavě */
table.detail-parameters td {
    padding: 10px 16px;
    font-weight: 700;
    color: #17324d;
    vertical-align: middle;
}
/* Odkazy v hodnotách (kategorie, barva, průměr kol…) */
table.detail-parameters td a {
    color: #1c5a99;
    font-weight: 700;
    text-decoration: none;
}
table.detail-parameters td a:hover {
    text-decoration: underline;
}
/* NOVÉ v5 — víceřádkové hodnoty (rozdělené JS souborem
   detail-parametry.js na jednotlivé .param-value-item).
   Každá hodnota na vlastním řádku, oddělené jemnou šedou čárou. */
table.detail-parameters td .param-value-item {
    display: block;
}
table.detail-parameters td .param-value-item + .param-value-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e4e9;
}
/* Víc vzduchu u prvního a hlavně posledního řádku,
   aby obsah nelepil na zaoblené hrany karty */
table.detail-parameters tr:first-child th,
table.detail-parameters tr:first-child td {
    padding-top: 15px;
}
table.detail-parameters tr:last-child th,
table.detail-parameters tr:last-child td {
    padding-bottom: 18px;
}
/* Odsazení celé karty od dalšího obsahu */
table.detail-parameters {
    margin-bottom: 24px;
}
/* Jemné zvýraznění řádku pod kurzorem — :not(.variant-list)
   vylučuje řádek výběru varianty (S/M/L pilulky), kde
   podbarvení nechceme; normální parametry (Kategorie, Záruka…)
   si hover drží dál. */
table.detail-parameters tr:not(.variant-list):hover th,
table.detail-parameters tr:not(.variant-list):hover td {
    background-color: #eef6ff;
}
table.detail-parameters tr:not(.variant-list):hover th {
    background-color: #e8f2fd;
}
/* Otazníky s nápovědou — místo plného modrého kolečka
   decentní světlý kroužek s modrým otazníkem, menší
   a opticky sladěný s popiskem.
   order: 2 posune ikonu AŽ ZA text i za dvojtečku
   (výsledné pořadí: "Popisek" → order 0 (výchozí) →
   ":" → order 1 → " ?" → order 2). */
table.detail-parameters th .show-tooltip.question-tooltip,
table.detail-parameters th .tooltip,
table.detail-parameters th [data-toggle="tooltip"],
table.detail-parameters th .question-tooltip,
table.detail-parameters th .tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    margin-left: 7px;
    margin-right: 0;
    order: 2;
    flex-shrink: 0;
    background: #e5f0fc !important;
    color: #1c5a99 !important;
    border: none;
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    opacity: 0.9;
    cursor: help;
}
table.detail-parameters th .show-tooltip.question-tooltip:hover,
table.detail-parameters th .tooltip:hover,
table.detail-parameters th [data-toggle="tooltip"]:hover,
table.detail-parameters th .question-tooltip:hover,
table.detail-parameters th .tooltip-icon:hover {
    background: #1c5a99 !important;
    color: #fff !important;
    opacity: 1;
}
/* Mobil — menší odsazení, popisky se smí zalamovat */
@media (max-width: 767px) {
    table.detail-parameters th,
    table.detail-parameters td {
        padding: 8px 12px;
    }
    table.detail-parameters th {
        white-space: normal;
    }
}