/**
 * Sablona 2026-008 Depo - detail produktu (sekce/detail.latte + js/detail.js, navrh 04-Detail-desktop / -mobil).
 * Mrizka 520 | zbytek (galerie 400 + nahledy 56 | nakupni box), nakupni tabulka jednotky x hladiny, stepper 44 + zivy soucet,
 * sticky radek 56, kotvy, parametry 2 sloupce, technicke listy, popis + FAQ, prislusenstvi (B2B tabulka), dotaz.
 */
.dp-detail { display: flex; flex-direction: column; }
#detail_zbozi > h1 { margin: 0 0 12px; }
#detail_zbozi .detail_flex { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 40px; align-items: start; }
#detail_zbozi .detail_flex > * { float: none; width: auto; max-width: none; margin: 0; }
#detail_zbozi .detail_right h1,
#prostredek #detail_zbozi .detail_right h1 { margin: 4px 0 8px; font-size: 28px; line-height: 1.2; }

/* galerie: foto 1:1 400 na surface-2, nahledy 56 */
#detail_zbozi .zbozi_prilohy_2 { position: relative; }
#detail_zbozi .zbozi_prilohy_2 img { border-radius: var(--tpl-detail-photo-radius); }
#detail_zbozi .zbozi_prilohy_2 > a img,
#detail_zbozi .zbozi_prilohy_2 .zbozi_prilohy_hlavni img { display: block; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; margin: 0 auto; object-fit: contain; background: var(--tpl-surface-2); }
#detail_zbozi .zbozi_prilohy_nahledy { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
#detail_zbozi .zbozi_prilohy_nahledy img.img_zbozi { width: 56px; height: 56px; padding: 2px; border: 1px solid var(--tpl-line); border-radius: var(--tpl-thumb-radius); background: var(--tpl-surface-2); object-fit: contain; }

/* nakupni box: jadrove tabulky (kod, ceny, dostupnost, mnozstevni slevy, jednotky jako radio) nahrazuje Depo vlastnimi bloky */
#detail_zbozi .detail_right > form table.zbozi_tabulka,
#detail_zbozi .detail_right table.zbozi_tabulka:not(.tpl-varianty-mnozstvi-tabulka),
#detail_zbozi .detail_right table.mnozstevnislevy,
#detail_zbozi .vyber_jednotky,
#detail_zbozi #zbozi_detail_porovnavac,
#detail_zbozi #prepocet,
#detail_zbozi .tpl-detail-znacka,
.dp-skryte { display: none; }
.dp-det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; color: var(--tpl-text-light); font-size: 13px; }
.dp-det-meta b { color: var(--tpl-text); font-weight: 600; }
.dp-det-meta a b { color: var(--tpl-link); }
.dp-det-meta .tpl-b2b-kopirovat { opacity: 1; }
.dp-det-b2b { display: flex; flex-direction: column; gap: 14px; margin: 0 0 14px; }
.dp-det-perex { margin: 0; color: var(--tpl-text); font-size: 15px; }
.dp-det-label { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.dp-det-sklady ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--tpl-line); border-radius: var(--tpl-area-radius); }
.dp-det-sklady li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 13px; color: var(--tpl-text-light); }
.dp-det-sklady li + li { border-left: 1px solid var(--tpl-line); }
.dp-det-sklady b { display: inline-flex; align-items: center; gap: 6px; color: var(--tpl-text); font-size: 15px; }
.dp-det-sklady b.dp-stav--skladem { color: var(--tpl-stav-skladem); }
.dp-det-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dp-det-cena-hlavni { color: var(--tpl-primary); font-size: var(--tpl-detail-price-size); font-weight: 700; line-height: 1.1; }
.dp-det-cena-dph { margin-left: -6px; font-size: 15px; font-weight: 600; }
.dp-det-cena-vedl { font-size: 15px; }
.dp-det-cena-pozn { color: var(--tpl-text-light); font-size: 13px; }
.dp-det-zamek { padding: 16px; border: 1px solid var(--tpl-line); border-radius: var(--tpl-area-radius); background: var(--tpl-surface-2); }
.dp-det-zamek-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.dp-det-zamek-akce { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* nakupni tabulka: jednotky x hladiny x usetrite, zvyraznena hladina podle mnozstvi */
.dp-nt-obal { overflow-x: auto; }
.dp-nt { width: 100%; border: 1px solid var(--tpl-line); border-collapse: separate; border-spacing: 0; border-radius: var(--tpl-area-radius); font-size: 14px; }
#prostredek .dp-nt th,
#prostredek .dp-nt td { padding: 8px 10px; border: 0; border-top: 1px solid var(--tpl-line); text-align: right; vertical-align: middle; }
#prostredek .dp-nt thead th { border-top: 0; background: var(--tpl-surface-2); font-size: 13px; font-weight: 600; }
#prostredek .dp-nt th:first-child { text-align: left; font-weight: 600; }
.dp-nt tbody th small,
.dp-nt td small { display: block; color: var(--tpl-text-light); font-size: 12px; font-weight: 400; }
.dp-nt td b { display: block; font-weight: 700; }
#prostredek .dp-nt .dp-nt--on { background: var(--tpl-row-sel); box-shadow: inset 2px 0 0 var(--tpl-primary), inset -2px 0 0 var(--tpl-primary); }
#prostredek .dp-nt thead .dp-nt--on { box-shadow: inset 2px 0 0 var(--tpl-primary), inset -2px 0 0 var(--tpl-primary), inset 0 2px 0 var(--tpl-primary); }
#prostredek .dp-nt tbody tr:last-child .dp-nt--on { box-shadow: inset 2px 0 0 var(--tpl-primary), inset -2px 0 0 var(--tpl-primary), inset 0 -2px 0 var(--tpl-primary); }
#prostredek .dp-nt .dp-nt-us { color: var(--tpl-stav-skladem); font-weight: 700; }
.dp-det-mnozstvi { margin: 0; font-size: 14px; }

/* formular jadra: stepper 44 x 140 + zivy soucet na surface-2, CTA "Do kosiku" 44 */
#detail_zbozi .detail_right > form.form_polozka { margin: 0; }
#detail_zbozi .tlacitka-pocet.dp-det-koupit {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 12px; border-radius: var(--tpl-area-radius); background: var(--tpl-surface-2);
}
#prostredek #detail_zbozi .tlacitka-pocet input.zmenit_pocet {
    width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--tpl-border); background: var(--tpl-surface); color: var(--tpl-text);
    font: 600 20px/1 var(--tpl-font); box-shadow: none;
}
#prostredek #detail_zbozi .tlacitka-pocet input.zmenit_pocet_minus { border-radius: var(--tpl-radius) 0 0 var(--tpl-radius); }
#prostredek #detail_zbozi .tlacitka-pocet input.zmenit_pocet_plus { border-radius: 0 var(--tpl-radius) var(--tpl-radius) 0; }
#prostredek #detail_zbozi .tlacitka-pocet input#pocet,
#prostredek #detail_zbozi .tlacitka-pocet input[name="pocet"] {
    width: 56px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--tpl-border); border-left: 0; border-right: 0; border-radius: 0;
    text-align: center; font: 600 16px/1 var(--tpl-font);
}
#detail_zbozi .tlacitka-pocet .jednotka { margin: 0 12px 0 8px; color: var(--tpl-text-light); font-size: 14px; }
.dp-det-soucet { flex: 1 1 220px; display: flex; flex-direction: column; margin-left: 16px; line-height: 1.35; }
.dp-det-soucet b { font-size: 15px; font-weight: 700; }
.dp-det-soucet small { color: var(--tpl-text-light); font-size: 13px; }
#prostredek #detail_zbozi .tlacitka-pocet input[type="submit"],
#prostredek #detail_zbozi .tlacitka-pocet button[type="submit"] {
    flex: 0 0 auto; min-width: 220px; min-height: 44px; margin: 12px 0 0; padding: 0 24px; border: 1px solid var(--tpl-cta); border-radius: var(--tpl-radius);
    background: var(--tpl-cta); color: var(--tpl-cta-text); font: 600 16px/1 var(--tpl-font);
}
#prostredek #detail_zbozi .tlacitka-pocet.dp-det-koupit input[type="submit"] { order: 5; }
.dp-det-koupit::after { content: ""; order: 4; flex-basis: 100%; }
#prostredek #detail_zbozi .tlacitka-pocet input[type="submit"]:hover { background: var(--tpl-cta-hover); border-color: var(--tpl-cta-hover); color: var(--tpl-cta-text-hover); }
.dp-det-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; }
.dp-jistoty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; }
.dp-jistoty li { display: flex; align-items: flex-start; gap: 8px; }
.dp-jistoty .dp-ico { margin-top: 2px; color: var(--tpl-text-light); }
/* varianty s mnozstvim (J-B8) v nakupnim boxu */
#detail_zbozi .tpl-varianty-mnozstvi { margin: 0 0 12px; }
#detail_zbozi .tpl-varianty-mnozstvi-tabulka { border: 1px solid var(--tpl-line); border-collapse: separate; border-spacing: 0; border-radius: var(--tpl-area-radius); }
#prostredek #detail_zbozi .tpl-varianty-mnozstvi-tabulka th,
#prostredek #detail_zbozi .tpl-varianty-mnozstvi-tabulka td { border: 0; border-top: 1px solid var(--tpl-line); }
#prostredek #detail_zbozi .tpl-varianty-mnozstvi-tabulka thead th { border-top: 0; background: var(--tpl-surface-2); }

/* sticky radek 56 pod hlavickou */
.dp-det-sticky { position: fixed; top: 56px; left: 0; right: 0; z-index: 70; background: var(--tpl-surface); border-bottom: 1px solid var(--tpl-line); box-shadow: var(--tpl-shadow-drop); }
.dp-det-sticky[hidden] { display: none; }
body:not(.tpl-hd-sticky) .dp-det-sticky { top: 0; }
.dp-det-sticky-in { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.dp-det-sticky-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-det-sticky-c,
.dp-det-sticky-m { white-space: nowrap; font-size: 14px; }
.dp-det-sticky-s { white-space: nowrap; }

/* kotvy */
.dp-kotvy { margin: 32px 0 0; border-top: 1px solid var(--tpl-line); border-bottom: 1px solid var(--tpl-line); }
.dp-kotvy ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.dp-kotvy a { display: inline-flex; align-items: center; min-height: 48px; color: var(--tpl-text); font-size: 15px; font-weight: 600; text-decoration: none; }
.dp-kotvy a:hover { color: var(--tpl-link); box-shadow: inset 0 -2px 0 var(--tpl-primary); }
.dp-det-sekce { margin-top: var(--tpl-section-gap); scroll-margin-top: 72px; }
/* parametry 2 sloupce x 32 */
.dp-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; }
.dp-par > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--tpl-line); font-size: 14px; }
.dp-par dt { color: var(--tpl-text-light); }
.dp-par dd { margin: 0; color: var(--tpl-text); }
.dp-velke { display: inline-block; }
.dp-velke::first-letter { text-transform: uppercase; }
/* popis + FAQ */
#dp-popis .tpl-detail-popis { max-width: 880px; font-size: 15px; line-height: 1.6; }
.dp-faq { max-width: 900px; margin-top: 16px; }
.dp-faq details { border: 1px solid var(--tpl-line); border-radius: var(--tpl-area-radius); }
.dp-faq details + details { margin-top: -1px; }
.dp-faq summary { min-height: 44px; padding: 10px 12px; font-weight: 600; cursor: pointer; }
/* dotaz */
.dp-det-zastupce { color: var(--tpl-text-light); font-size: 14px; }
#dp-dotaz .tpl-detail-komunikace { max-width: 1100px; }

@media (max-width: 1240px) {
    #detail_zbozi .detail_flex { grid-template-columns: 420px minmax(0, 1fr); gap: 32px; }
    .dp-jistoty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
    #detail_zbozi .detail_flex { grid-template-columns: minmax(0, 1fr); }
    .dp-par { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    #detail_zbozi .detail_right h1,
    #prostredek #detail_zbozi .detail_right h1 { font-size: 24px; }
    .dp-det-cena-hlavni { font-size: 24px; }
    .dp-det-sklady li + li { border-left: 0; border-top: 1px solid var(--tpl-line); }
    .dp-det-sklady ul { grid-template-columns: minmax(0, 1fr); }
    .dp-det-soucet { flex-basis: 100%; margin: 8px 0 0; }
    #prostredek #detail_zbozi .tlacitka-pocet input[type="submit"] { width: 100%; }
    #detail_zbozi .tlacitka-pocet input#pocet { flex: 1 1 auto; }
    .dp-par > div { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
    /* sticky radek = spodni lista 64 nad cookie listou (mnozstvi + soucet + CTA) */
    .dp-det-sticky { top: auto; bottom: var(--tpl-cookie-h, 0px); border-top: 1px solid var(--tpl-line); border-bottom: 0; }
    body:not(.tpl-hd-sticky) .dp-det-sticky { top: auto; }
    .dp-det-sticky-in { min-height: 64px; gap: 12px; }
    .dp-det-sticky-kod,
    .dp-det-sticky-n,
    .dp-det-sticky-c { display: none; }
    .dp-det-sticky-m { margin-right: auto; }
    .dp-det-sticky .dp-btn { min-height: 44px; }
    .dp-kotvy ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dp-kotvy a { min-height: 44px; white-space: nowrap; }
}
/* popis: jadrova tabulka parametru (je v sekci Parametry vyse) pryc, kratky popis je v nakupnim boxu; tabulky v textu */
#dp-popis .tpl-detail-popis table.zbozi_parametry,
#dp-popis .tpl-detail-popis .zbozi_popis { display: none; }
#prostredek #dp-popis .zbozi_text table { margin: 8px 0 12px; border: 1px solid var(--tpl-line); border-collapse: collapse; font-size: 14px; }
#prostredek #dp-popis .zbozi_text table th,
#prostredek #dp-popis .zbozi_text table td { padding: 6px 12px; border: 0; border-bottom: 1px solid var(--tpl-line); text-align: left; }
#prostredek #dp-popis .zbozi_text table tr:first-child > * { background: var(--tpl-surface-2); font-weight: 600; }
#prostredek #dp-popis h3 { margin: 16px 0 8px; color: var(--tpl-text); font-size: 16px; }
.dp-faq .shop5-faq-item { border: 1px solid var(--tpl-line); border-radius: var(--tpl-area-radius); }
.dp-faq .shop5-faq-item + .shop5-faq-item { margin-top: -1px; }
.dp-faq .shop5-faq-question { min-height: 44px; padding: 10px 12px; font-weight: 600; }
.dp-faq .shop5-faq-answer { padding: 0 12px 12px; }
.tpl-detail-cesty { margin-top: 16px; color: var(--tpl-text-light); font-size: 14px; }
@media (max-width: 768px) {
    .dp-nt { min-width: 440px; }
    .dp-nt td b { white-space: nowrap; }
    .dp-nt-obal { margin: 0 calc(-1 * var(--tpl-gutter)); padding: 0 var(--tpl-gutter); }
}
/* jadrove "ke stazeni" (renderDetailSystem) - prilohy jsou v sekci Technicke listy (J-T10 soubory) */
.tpl-detail-system #zbozi_prilohy_ke_stazeni { display: none; }