/* =============================================================
   product-detail-style.css
   Vlastni styly produktoveho detailu (PDP) — dle Figma designu

   Rozsah: prestylovani existujicich sekci PDP.
   Sekce (postupne doplnovane):
     - Fonty a velikosti textu
     - Banner propojenych produktu
     - Kratky popis (styl)
     - Priznaky (flags) — styl
     - Taby layout + sticky menu
     - Tabulka parametru
     - Diskuze a hodnoceni

   Prefix trid pro novy kod: .roi-pd-*  (product detail)
   Breakpoint mobil: @media (max-width: 767px)

   Scoping: vsechna pravidla zde MUSI byt omezena na body.type-detail
   ============================================================= */


/* -------------------------------------------------------------
   GLOBALNI PDP BODY — overflow fix
   -------------------------------------------------------------
   Sticky TOC lista (.roi-pd-tocbar) ma ::before s width: 100vw pro full-bleed
   pozadi. Na Windows browserech 100vw zahrnuje i scrollbar → mirny horizontalni
   scroll. Resime overflow-x na body.

   Pouzivame hidden jako fallback + clip pro moderni browsery.
   POZOR: overflow-x: hidden by mohl rozbit position: sticky (vytvari scroll
   container). overflow-x: clip nevytvari scroll container — sticky zustava
   funkcni. Browser support clip: Chrome 90+, Safari 16+, Firefox 81+. */
body.type-detail {
    overflow-x: hidden;
    overflow-x: clip;
}


/* -------------------------------------------------------------
   FONTY A VELIKOSTI TEXTU
   ------------------------------------------------------------- */

/* .p-detail-inner-header (Doppler brand + h1) — bez margin-bottom (tesnejsi vazba na popis). */
body.type-detail .p-detail-inner-header {
    margin-bottom: 0 !important;
}

/* H1 nazev produktu — dle Figmy: Poppins 700 20px / 38.4px, bez letter-spacing,
   bez margin-bottom (tesnejsi vazba na <p> short description pod nim).
   Prebiji puvodni 32px/500/-1.6px z doppler-all.css. */
body.type-detail .p-detail-inner h1 {
    font-family: Poppins, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 38.4px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
    margin-bottom: 0 !important;
}

/* <p> v .p-short-description (kratky popis) — dle Figmy: Poppins 400 16px / 26.88px. */
body.type-detail .p-data-wrapper .p-short-description > p {
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 26.88px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}

/* H2 nadpisy v PDP — Popis produktu, Parametry, Manualy, Hodnoceni produktu.
   Prebiji doppler-all.css:664-665 (h2.popis-nadpis Poppins, ostatni Roboto 24px). */
body.type-detail h2.popis-nadpis,
body.type-detail #tab-content h2,
body.type-detail #ratingWrapper > h2 {
    font-family: Poppins, sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #383838 !important;
    margin: 32px 0 !important;
}

/* Vyjimka: h2 uvnitr #ratingWrapper je prvni potomek (presunut JS) — bez margin-top,
   jen 10px mezera pred rate-wrap boxem. */
.type-detail #ratingWrapper > h2 {
    margin: 0 0 10px 0 !important;
}

/* .detail-info (Kod zbozi + Znacka) — presunuto JS na konec .p-data-wrapper.
   Dle Figmy: Poppins 400 14px / 19.5px, sedy text. */
.type-detail .p-data-wrapper > .detail-info,
.type-detail .p-data-wrapper > .detail-info .p-code-label,
.type-detail .p-data-wrapper > .detail-info .brand-wrapper,
.type-detail .p-data-wrapper > .detail-info .p-code th,
.type-detail .p-data-wrapper > .detail-info .p-code td,
.type-detail .p-data-wrapper > .detail-info .p-code td a {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 19.5px !important;
    letter-spacing: 0 !important;
    color: #A2A2A2 !important;
}


/* -------------------------------------------------------------
   BANNER PROPOJENYCH PRODUKTU
   ------------------------------------------------------------- */

/* .type-detail ... { ... } */


/* -------------------------------------------------------------
   KRATKY POPIS
   ------------------------------------------------------------- */

/* Seznam featur za '||' v kratkem popisu (parsovany product-detail-script.js).
   Editor pise '<text pred> || <feat1>. <feat2>. <feat3>.' — JS rozdeli po
   teckach a vyrenderuje <ul class="roi-pd-features"> uvnitr .p-short-decs-new. */
.type-detail .p-short-decs-new .roi-pd-features {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.type-detail .p-short-decs-new .roi-pd-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    color: #383838;
    font-size: 16px;
    line-height: 1.5;
}

.type-detail .p-short-decs-new .roi-pd-features li:last-child {
    margin-bottom: 0;
}

/* Neutralizovat stary :before check icon z doppler-all.css:929 */
.type-detail .p-short-decs-new .roi-pd-features li:before {
    content: none !important;
}

/* .roi_podobne (banner barevnych variant) — presunuto JS do .p-short-description.
   Puvodni CSS:
     - css/doppler3.css:3-4: flex row wrap, .p/img sirka 90px max-width calc(25% - 10px)
     - css/doppler25.css:4: max-width calc(20% - 10px), width 120px (5 sloupcu)
   Dle Figmy: na desktopu 6 polozek na radek, vyska polozky max 96px.
   Aspect-ratio:1 zustava z doppler3.css — drzi ctverec pri zuzeni rodice. */
@media (min-width: 768px) {
    .type-detail .p-data-wrapper .p-short-description > .roi_podobne .p,
    .type-detail .p-data-wrapper .p-short-description > .roi_podobne > img {
        width: 96px;
        max-width: calc(100% / 6 - 10px);
    }

    /* .product-bottom — zmensit margin-top z legacy 120px (doppler-all.css:667) na 60px.
       Tablet+ (mobil necha legacy hodnotu, jinak by bylo prilis tesno). */
    .type-detail .product-bottom {
        margin-top: 60px;
    }
}

.type-detail .p-short-decs-new .roi-pd-features__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}


/* -------------------------------------------------------------
   CENA + SKLADEM (uvnitr .p-short-description)
   -------------------------------------------------------------
   DOM ma DVE varianty (zalezi na typu produktu / .shipping-options-layout):

   Varianta A — orphan <tr> z .shipping-options-layout (presun doppler2507.js:15):
     .p-short-description
       <p>...</p>
       <tr>
         <th><span class="row-header-label">Dostupnost</span></th>
         <td><span class="availability-label skladem">Skladem</span></td>
       <div class="p-final-price-wrapper">
       <div class="ratings-and-brand">

   Varianta B — primo Shoptet markup bez <tr> (kdyz nejsou shipping options):
     .p-short-description
       <p>...</p>
       <span class="row-header-label">Dostupnost</span>
       <span class="availability-label skladem">Skladem</span>
       <div class="p-final-price-wrapper">
       <div class="ratings-and-brand">

   Dle Figmy: <p> > .ratings-and-brand > Skladem > Cena > "s DPH" (::after pod cenou).
   Orphan <tr> ma defaultni display:table-row a chova se nepredvidatelne — proto rodice
   prepneme na flex column a explicitne nastavime order pro obe varianty. */

.type-detail .p-data-wrapper .p-short-description {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0 !important;
}

.type-detail .p-data-wrapper .p-short-description > p { order: 1; }
.type-detail .p-data-wrapper .p-short-description > .ratings-and-brand {
    order: 2;
    margin-top: 10px;
}
.type-detail .p-data-wrapper .p-short-description > .roi_podobne { order: 3; }
.type-detail .p-data-wrapper .p-short-description > tr,
.type-detail .p-data-wrapper .p-short-description > .availability-label,
.type-detail .p-data-wrapper .p-short-description > .row-header-label { order: 4; }
.type-detail .p-data-wrapper .p-short-description > .p-final-price-wrapper { order: 5; }

/* Varianta A: orphan <tr><td> — prepnout na block, aby se choval normalne ve flexu. */
.type-detail .p-data-wrapper .p-short-description > tr,
.type-detail .p-data-wrapper .p-short-description > tr > td {
    display: block;
    padding: 0;
    margin: 0;
}

/* Skryt "Dostupnost" — obe varianty:
   A) <th> uvnitr orphan <tr>
   B) <span class="row-header-label"> primo v shortdesc */
.type-detail .p-data-wrapper .p-short-description > tr > th,
.type-detail .p-data-wrapper .p-short-description > .row-header-label {
    display: none !important;
}

/* "Skladem" — Poppins 400 14px / 21px, vlastni radek nad cenou.
   Selektor bez '>' aby pokryl obe varianty (nested v <td> i primy potomek). */
.type-detail .p-data-wrapper .p-short-description .availability-label {
    display: block;
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* Cena 1 248 Kc — Poppins 700 25px / 160% (=40px). */
.type-detail .p-short-description .p-final-price-wrapper {
    margin-bottom: 10px;
}

.type-detail .p-short-description .p-final-price-wrapper .price-final,
.type-detail .p-short-description .p-final-price-wrapper .price-final-holder {
    display: block;
    font-family: Poppins, sans-serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 160% !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}

/* "s DPH" — pseudo ::after pod cenou na vlastnim radku.
   Puvodni inline ::after (color #383838, 14px, weight 300) prebijeme na block + Poppins 400. */
.type-detail .p-short-description .price-final-holder::after {
    display: block !important;
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 160% !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
    margin-top: 0;
}


/* -------------------------------------------------------------
   DODACI DOBA (.delivery-time-row + .delivery-time)
   -------------------------------------------------------------
   DOM:
     <tr class="delivery-time-row">
       <th>...</th>
       <td>
         <div class="delivery-time">
           <span>::before " 30.4.2026 "</span>
         </div>
       </td>
     </tr>

   Puvodni styl (cizi CSS):
     .delivery-time span::before { content: "Zbozi muze mit uz "; color: #383838; font-size: 13px }
     .delivery-time-row td:before { content: "Kdy zbozi obdrzim?"; ... margin: 0 10px 0 15px }

   Dle Figmy:
     - Text "Kdy zbozi obdrzim?" pred td uplne pryc.
     - Pseudo pred datem upravit na "Zbozi muze mit uz: " (s dvojteckou + mezerou).
     - "Zbozi muze mit uz:" — Poppins 400 14px / 20px / #383838 (vc. underline barvy).
     - Datum (text node ve span) — stejna typografie, ale barva #20B284 (zelena).

   Pozn.: doppler-all.css:122 ma .delivery-time { text-decoration: underline } — z rodice
   ho rusime (text-decoration: none) a nahradime ho dvema oddelenymi underline:
     - span (datum) — zelena #20B284
     - span::before (label "Zbozi muze mit uz:") — seda #383838
   ::before ma display: inline-block — bez toho by span svym underline kreslil JEDNU
   souvislou linku pres ::before i datum (text decorations rodice se nepropaguji
   do atomic inline boxu, ale do inline obsahu ano). */

.type-detail .delivery-time-row td:before {
    content: none !important;
    margin: 0 !important;
}

/* Skryt th s labelem "Muzeme dorucit do:" — ikona je z tr:before, text z span::before. */
.type-detail .delivery-time-row > th {
    display: none !important;
}

/* Mensi mezera mezi ikonou (tr:before s pack.svg z doppler-all.css) a textem.
   Td mel default padding-left ze table layoutu — vynulujeme. Ikona ma vlastni
   margin-right pro tesnou mezeru. */
.type-detail .delivery-time-row > td {
    padding-left: 0 !important;
}

.type-detail .delivery-time-row:before {
    margin-right: 0px;
}

/* Parent kill — vypnout legacy underline z doppler-all.css:122,
   aby nepretekal pres oba child underlines. */
.type-detail .delivery-time {
    text-decoration: none !important;
}

.type-detail .delivery-time span::before {
    content: "Zboží může mít už: " !important;
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
    display: inline-block !important;
    text-decoration: underline !important;
    text-decoration-color: #383838 !important;
    text-underline-offset: 1px !important;
}

.type-detail .delivery-time span {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #20B284 !important;
    text-decoration: underline !important;
    text-decoration-color: #20B284 !important;
    text-underline-offset: 1px !important;
    /* magic number — priblizit text k ikone (pack.svg z tr:before).
       Gap je z kombinace tr::before anonymniho boxu, skryteho th
       a inline whitespace v td. */
    margin-left: -20px;
}


/* -------------------------------------------------------------
   AKCNI IKONY (Porovnat / Zaruka / Mate dotaz)
   -------------------------------------------------------------
   .link-icons direct children (viditelne):
     - div.dkLabComparerDiv (Porovnat)
     - a.link-icon.print (Tisk — skryty puvodnim CSS)
     - tr (orphan, obsahuje th "Zaruka:" + td "3 roky")
     - a.link-icon.chat (Mate dotaz?)

   Dle Figmy:
     - 3 viditelne polozky rozprostrit od leveho okraje pres stred po pravy okraj
       (justify-content: space-between).
     - Pred tr (Zaruka) pridat shield ikonu pres :before s content: url(security-v1-ico.svg).

   Orphan <tr> bez parent <table> defaultne rendrue jako display:table-row a
   chova se nepredvidatelne. Prepneme ho na inline-flex aby fungoval jako
   jedna flex polozka, a th/td uvnitr na inline. */

.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr > th,
.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr > td {
    display: inline;
    padding: 0;
    font-weight: 400;
    text-align: left;
}

.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr:before {
    content: url(/user/documents/upload/webotvurci/icons/security-v1-ico.svg);
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    top: 3px;
}

/* Hodnota zaruky ("5 let" plain text NEBO "3 roky" v <a>) — underline na td primo,
   aby fungovalo pro oba pripady. Position relative + top:1px srovna text vertikalne
   s ikonou shieldu vlevo (text byl opticky vys). */
.type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr > td {
    text-decoration: underline !important;
    text-underline-offset: 1px !important;
    position: relative;
    top: 1px;
}


/* -------------------------------------------------------------
   MOZNOSTI MONTAZE (.up-container)
   -------------------------------------------------------------
   Sekce pribuzne polozky / prislusenstvi pod tlacitkem Pridat do kosiku.
   Dle Figmy:
     - h2 nadpis "Moznosti montaze" — Poppins 700 / 14px / 21px
     - Cena polozky (.up-price-value) — Poppins 700 / 14px / 23.52px
     - Nazev polozky (a.up-product-url) — Poppins 400 / 14px / 20px
   Barva pro vsechny: #383838 (uzivatel uvedl explicitne jen u nazvu, ostatni
   sjednoceny na stejnou tmavou — pokud ma byt jina, doladime). */

.type-detail .up-container .up-products-header {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}

.type-detail .up-container .up-price-value {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 23.52px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}

.type-detail .up-container .up-product-url {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}


/* -------------------------------------------------------------
   PRIZNAKY (FLAGS)
   ------------------------------------------------------------- */

/* .type-detail .flags ... { ... } */


/* -------------------------------------------------------------
   VLASTNOSTI PRODUKTU (.roi_parametry:before "Vlastnosti produktu")
   -------------------------------------------------------------
   Override typografie nadpisu nad parametry/flagy v p-data-wrapperu.
   Puvodni doppler-all.css:1057 — Poppins 500 14px, letter-spacing -0.7px,
   bez line-height. Dle Figmy: 700 / 14px / 21px / #383838 / letter-spacing 0. */

.type-detail .roi_parametry:before {
    font-family: Poppins, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}


/* -------------------------------------------------------------
   TABY — LAYOUT + STICKY MENU
   ------------------------------------------------------------- */

/* Akordeon a tab nav vyrazeny primo v puvodnich souborech:
   - doppler-all.css:197 — .shp-tabs-row.responsive-nav (tab nav)
   - doppler-all.css:199 — display:none na akordeonovy obsah (vyrazeno)
   - doppler-all.css:382-384 — caret sipka v h2 (vyrazeno)
   - doppler2507.js:48,50,51 — slideToggle handlers (vyrazeny, zachovan insertBefore h2)
   Sekce dale stylovat zde dle Figmy. */


/* -------------------------------------------------------------
   STICKY TOC LISTA (.roi-pd-tocbar)
   -------------------------------------------------------------
   Vlozena JS (initToCBar) nad .shp-tabs-wrapper.p-detail-tabs-wrapper.
   6 polozek (kotvy):
     1. Popis produktu          → #description
     2. Parametry, rozmery a... → .extended-description
     3. Ke stazeni              → #relatedFiles
     4. Hodnoceni produktu (X)  → #ratingTab (count dynamicky)
     5. Znacka Doppler          → .roi-pd-brand        (jen kdyz existuje)
     6. Souvisejici produkty    → .products-related-... (jen kdyz existuje)

   Sticky top: 0 — eshop nema jinou sticky listu nahore.
   Mobil ≤767px: skryto (klient resi mobilni nav samostatne s tlacitkem + cenou). */

.type-detail .roi-pd-tocbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 70px;
    background: #F7F7F7;
    display: flex;
    align-items: center;
    margin: 64px 0 0;
}

/* Pozadi roztazeno pres celou sirku viewportu (rodic .col-sm-12 / container
   omezuje sirku, my chceme full-bleed). z-index: -1 zustane v stacking contextu
   .roi-pd-tocbar (z-index 100 + sticky vytvari kontext) — pod items, ale nad
   prvky stranky pod listou. */
.type-detail .roi-pd-tocbar::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100vw;
    height: 100%;
    background: #F7F7F7;
    z-index: -1;
}

.type-detail .roi-pd-tocbar__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.type-detail .roi-pd-tocbar__item {
    display: flex;
    margin: 0;
    padding: 0;
}

.type-detail .roi-pd-tocbar__item:before {
    content: none !important;
}

.type-detail .roi-pd-tocbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    color: #383838;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 20.8px;
    letter-spacing: 0;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.type-detail .roi-pd-tocbar__link:hover,
.type-detail .roi-pd-tocbar__link:focus {
    border-color: #F5F5F5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    color: #A72C3A;
    text-decoration: none !important;
}

/* Ikona arrow-down — resena pres CSS mask aby sla prebarvovat na hover.
   SVG je nactene jako mask-image, vlastni "barva" je background-color. */
.type-detail .roi-pd-tocbar__icon {
    width: 7px;
    height: 7px;
    display: block;
    flex-shrink: 0;
    background-color: #383838;
    -webkit-mask: url(/user/documents/upload/webotvurci/icons/arrow-down-v1-ico.svg) center / contain no-repeat;
            mask: url(/user/documents/upload/webotvurci/icons/arrow-down-v1-ico.svg) center / contain no-repeat;
    transition: background-color 0.2s ease;
}

.type-detail .roi-pd-tocbar__link:hover .roi-pd-tocbar__icon,
.type-detail .roi-pd-tocbar__link:focus .roi-pd-tocbar__icon {
    background-color: #A72C3A;
}

.type-detail .roi-pd-tocbar__label {
    line-height: inherit;
    white-space: nowrap;
}


/* -------------------------------------------------------------
   TABULKA PARAMETRU
   ------------------------------------------------------------- */

/* Label (Znacka, Kategorie, Hmotnost, ...) */
.type-detail .detail-parameters th .row-header-label,
.type-detail .detail-parameters th {
    color: #555658;
    font-weight: 400;
    font-size: 16px;
}

/* Hodnoty (Doppler, 0.254 kg, ...) — vyssi specificita aby prebila Shoptet right-align. */
.type-detail .extended-description table.detail-parameters tbody tr td,
.type-detail .extended-description table.detail-parameters tbody tr td a {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

/* Odstranit borderlines u radku (Shoptet default border-bottom/top). */
.type-detail .extended-description table.detail-parameters tbody tr {
    border-top: none !important;
    border-bottom: none !important;
}

/* Delici cary mezi sekcemi (Popis / Parametry / Manualy / Hodnoceni) —
   doppler-all.css:201 generuje pres ::before/::after pseudo elementy
   ('.tab-content>.tab-pane:not(#description)::before', '.extended-description:before',
   '.basic-description:after'). Skryt vsechny. */
.type-detail .tab-content > .tab-pane:not(#description)::before,
.type-detail .extended-description::before,
.type-detail .basic-description::after {
    display: none !important;
}

/* Border-bottom pod popisem produktu — doppler-all.css:318 generuje globalni
   border na .description-inner. Na PDP redesignu nechceme. */
.type-detail .description-inner {
    border-bottom: none !important;
}

/* Tlacitko "Vsechny parametry" — zarovnat doleva (Shoptet default je center). */
.type-detail .extended-description .all-param {
    text-align: left;
    padding: 28px 0 28px 28px;
}


/* -------------------------------------------------------------
   DISKUZE A HODNOCENI
   ------------------------------------------------------------- */

/* Diskuze — dle Figmy se sekce nezobrazuje (desktop tab-pane i mobil akordeon). */
.type-detail #productDiscussion,
.type-detail .shp-accordion[data-testid="tabDiscussion"] { display: none !important; }

/* Hodnoceni — dle Figmy:
   - Vlevo (uzsi sloupec): #ratingWrapper (h2 nadpis nahore + 5,0 box + tlacitko Pridat)
   - Vpravo (sirsi sloupec): #ratingsList (jednotlive recenze)
   H2 "Hodnoceni produktu (X)" presunuty JS (product-detail-script.js: moveRatingHeading)
   dovnitr #ratingWrapper jako prvni potomek.
   Shoptet rule '#ratingTab > h2 { display:none !important }' (style.css:6885) se h2
   uvnitr ratingWrapper netyka — uz neni direct child #ratingTab. */
.type-detail #ratingTab {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: 48px;
    row-gap: 32px;
    align-items: start;
}

.type-detail #ratingTab > #ratingWrapper {
    grid-column: 1;
    grid-row: 1;
    width: 520px;
    padding-right: 60px;
}

/* Cislo 5,0 — firemni cervena. */
.type-detail #ratingWrapper .rate-average {
    color: #A72C3A;
}

/* Box "5,0 + ★★★★★ + X hodnoceni" — zmensit horni odsazeni od h2. */
.type-detail #ratingWrapper .rate-average-inner {
    margin-top: 10px;
}

/* Shoptet defaultne dava #ratingsList vlastni sirku/float — prebit na full width sloupce */
.type-detail #ratingTab > #ratingsList {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}

/* Mezera mezi jednotlivymi recenzemi */
.type-detail #ratingsList > .vote-wrap + .vote-wrap {
    margin-top: 24px;
}


/* -------------------------------------------------------------
   BANNER ZNACKY DOPPLER (#manufacturerDescription)
   -------------------------------------------------------------
   Shoptet auto-generuje wrapper #manufacturerDescription a uvnitr <h2>Znacka
   Doppler</h2> pres celou sirku — tu schovavame, vlastni h2 si delame uvnitr
   leveho divu (pro vertikalni zarovnani s videem vpravo).

   Obsah popisu znacky se pise v Shoptet adminu (Vzhled a obsah → Znacky →
   Doppler → Popis znacky) — viz product-detail/brand-banner.html.

   Layout:
     - Desktop / tablet (>=768px): 50/50 split (text vlevo, video vpravo),
       text vertikalne centered vuci videu, video fix 458px vyska.
     - Mobil (<=767px): stack column, video full width s aspect-ratio
       zachovavajicim desktop pomer (~580/458 = 1.27:1). */

/* Skryt auto-generovane Shoptet h2 ("Znacka Doppler" pres celou sirku) */
.type-detail #manufacturerDescription > h2 {
    display: none !important;
}

/* Reset puvodni table layoutu — pro pripad ze popis znacky nebyl jeste
   prepsany na .roi-pd-brand strukturu, schovame fallback. */
.type-detail #manufacturerDescription:has(.roi-pd-brand) > table {
    display: none !important;
}

/* Wrapper banneru — flex 50/50 desktop, vertikalni zarovnani na stred */
.type-detail .roi-pd-brand {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 32px 0;
}

/* Levy sloupec: text — padding-right v % aby skaloval s sirkou kontejneru */
.type-detail .roi-pd-brand__text {
    flex: 1 1 50%;
    min-width: 0;
    padding-right: 8%;
}

.type-detail .roi-pd-brand__heading {
    font-family: Poppins, sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 38.4px !important;
    letter-spacing: 0.5px !important;
    color: #252729 !important;
    margin: 0 0 30px 0 !important;
}

.type-detail .roi-pd-brand__text p {
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.5px !important;
    color: #555658 !important;
    margin: 0 !important;
}

/* Pravy sloupec: video container — bez borderu, 45% basis (text ma 50% → vetsi prostor) */
.type-detail .roi-pd-brand__media {
    flex: 1 1 45%;
    min-width: 0;
    position: relative;
    height: 458px;
    overflow: hidden;
    background: #000;
}

.type-detail .roi-pd-brand__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Custom play button — kruhovy SVG, centrovany absolute */
.type-detail .roi-pd-brand__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 2;
}

.type-detail .roi-pd-brand__play:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.type-detail .roi-pd-brand__play img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Po kliknuti JS prida .is-playing na .roi-pd-brand__media — schova play button */
.type-detail .roi-pd-brand__media.is-playing .roi-pd-brand__play {
    display: none;
}


/* =============================================================
   TABLET (768-1024px)
   ============================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Dodaci doba — mensi nudge k ikone (gap je optical jiny pri tablet sirce). */
    .type-detail .delivery-time span {
        margin-left: -10px;
    }

}


/* =============================================================
   MOBIL (<=767px)
   ============================================================= */

@media (max-width: 767px) {

    /* Hodnoceni — na mobilu vsechno pod sebou (zrusit 2-col grid). */
    .type-detail #ratingTab {
        display: block !important;
    }

    .type-detail #ratingTab > #ratingsList {
        margin-top: 24px !important;
    }

    /* Dodaci doba — bez negativniho marginu, na mobilu se text nepretahuje pres ikonu. */
    .type-detail .delivery-time span {
        margin-left: 0;
    }

    /* Banner znacky — stack column, text nahore, video dole */
    .type-detail .roi-pd-brand {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .type-detail .roi-pd-brand__text {
        flex: 1 1 auto;
        padding-right: 0;
    }

    .type-detail .roi-pd-brand__heading {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    /* Video full width, vyska proporcni dle desktop poměru (580x458 ≈ 1.27:1) */
    .type-detail .roi-pd-brand__media {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 580 / 458;
    }

    .type-detail .roi-pd-brand__play {
        width: 56px;
        height: 56px;
    }

    /* Sticky TOC lista — schovana na mobilu (klient resi vlastni mobile nav) */
    .type-detail .roi-pd-tocbar {
        display: none !important;
    }

}