/* =============================================================
   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.
   POZN 2026-05-15: selektor zkracen z `.p-data-wrapper .p-short-description
   .availability-label` na `.availability-label.skladem` (bez parent
   pozadavku) — doppler2507.js na mobilu (<768px) presouva
   .availability-label do <td> v <tr>, NE do .p-short-description, takze
   stary scoped selektor na mobilu nematchoval. Nove pokryje obe varianty. */
.type-detail .availability-label.skladem {
    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: 10px !important;
}

/* Mobile only: "Skladem" <tr> ABOVE .p-final-price-wrapper.
   Default Shoptet poradi na mobilu: cena -> Skladem. Klient chce: Skladem -> cena.
   doppler2507.js presouva Skladem-tr do <form#product-detail-form> ktery je
   spolecny parent s .p-final-price-wrapper. Form je display:flex, takze CSS
   `order: -1` posune tr na zacatek mezi flex sourozenci. */
@media (max-width: 767px) {
    .type-detail #product-detail-form > tr:has(.availability-label.skladem) {
        order: -1;
    }

    /* Buttons-wrapper (Porovnat / Záruka / Mate dotaz?) — vertikalne pod sebou,
       zarovnano vlevo. Default Shoptet ma .link-icons jako flex-direction: row
       (horizontal). Dle Figmy na mobilu maji byt items kazdy na vlastnim radku. */
    .type-detail .buttons-wrapper.social-buttons-wrapper .link-icons {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
}

/* Cena 1 248 Kc — Poppins 700 25px / 160% (=40px), color #A72C3A (brand red).
   flex-direction: column (override legacy css/doppler-all.css:1210
   `flex-flow: column-reverse` ktere obracelo DOM order -> price-standard
   (preskrtnuta puvodni cena) skoncila VIZUALNE DOLE pod price-final.
   Klient chce price-standard NAHORE = normal column order.

   POZN 2026-05-15: selektor zkracen z `.p-short-description
   .p-final-price-wrapper` na jen `.p-final-price-wrapper` — doppler2507.js
   na mobilu (<768px) presouva wrapper do <form.pr-action>, NE do
   .p-short-description, takze stary scoped selektor na mobilu nematchoval. */
.type-detail .p-final-price-wrapper {
    margin-bottom: 10px;
    flex-direction: column !important;
}

/* Default: bez slevy = dark gray #383838 (Figma).
   Sleva (= existuje .price-standard sourozenec v wrapperu) prepne na
   brand red #A72C3A pres :has() selector niz. */
.type-detail .p-final-price-wrapper .price-final,
.type-detail .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;
}

/* Sleva — wrapper obsahuje .price-standard (preskrtnuta puvodni cena).
   :has() je supported v Chrome 105+, Safari 15.4+, Firefox 121+. */
.type-detail .p-final-price-wrapper:has(.price-standard) .price-final,
.type-detail .p-final-price-wrapper:has(.price-standard) .price-final-holder {
    color: #A72C3A !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-final-price-wrapper .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;
}

/* Puvodni cena pred slevou (skrtnuta "478 Kc") dle Figmy:
   Poppins 500 16px / 160% line-height / color #383838 / strikethrough.
   Override legacy css/doppler-all.css:1213 (color: #000) + default Shoptet
   (12px / Roboto). */
.type-detail .p-final-price-wrapper .price-standard,
.type-detail .p-final-price-wrapper .price-standard > span {
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 160% !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
    text-decoration: line-through !important;
}


/* -------------------------------------------------------------
   PRICE-SAVE BADGE (sleva % vedle preskrtnute ceny)
   -------------------------------------------------------------
   2026-05-16: Default Shoptet ma .price-save display:none. Dle Figmy ma byt
   videt jako cervena pill kapsule s "-X %" vpravo od preskrtnute ceny.

   2026-05-16 v1.82: ZMENA Z GRID -> FLEX WRAP + width:fit-content.
   Duvod: prihlaseny zakaznik ma uvnitr <strong.price-final> dodatecny
   <span.roi-pd-klub-member-info> ("Aktualne cerpate vsech vyhod" + logo).
   S grid spanning, klub-info text natahoval column 2 a badge -X% byl daleko
   od preskrtnute ceny.

   Reseni:
     - display: flex; flex-wrap: wrap; flex-direction: row
     - width: fit-content -> wrapper se zmensi na sirku nejsirsiho prvku
       (typicky .price-final s klub-info nebo bez)
     - .price-final + .price-measure maji flex-basis: 100% -> zalomi se
       na vlastni radek pod .price-standard + .price-save
     - .price-save zustane VEDLE .price-standard na row 1 (oba shrink-wrap)

   DOM:
     row 1: [.price-standard]  [.price-save]
     row 2: [.price-final ......................]
     row 3: [.price-measure (zridka)]

   Pro non-discount produkt (chybi .price-standard i .price-save):
     row 1: prazdny (flex-wrap to zvladne)
     row 2: .price-final (sole) */
.type-detail .p-final-price-wrapper {
    display: flex !important;
    flex-direction: row !important;  /* override `flex-direction: column !important` vyse */
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: fit-content;
}

.type-detail .p-final-price-wrapper .price-save {
    display: inline-flex !important;  /* override Shoptet display: none */
    align-items: center;
    justify-content: center;
    background: #A72C3A;
    color: #fff !important;
    /* 2026-05-16 v1.81 typo dle Figmy:
       Poppins 500 13px / 160% / letter-spacing -6% (-0.06em) */
    font-family: Poppins, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 160% !important;
    letter-spacing: -0.06em !important;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    text-align: center;
}

/* Force .price-final + .price-measure na vlastni radek pod row 1 */
.type-detail .p-final-price-wrapper .price-final,
.type-detail .p-final-price-wrapper .price-measure {
    flex-basis: 100%;
}


/* -------------------------------------------------------------
   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: "Tovar môže mať už: " !important; /* SK MUTACE: prelozeno z "Zbozi muze mit uz: " */
    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;
}

/* 2026-05-16: mobile-only padding-left 8px pro zaruku <tr> a chat link.
   Uzivatel chce na uzkem displeji odsadit obe polozky od leveho okraje
   .social-buttons-wrapper at neprilna k obsahu vlevo. */
@media (max-width: 767px) {
    .type-detail .buttons-wrapper.social-buttons-wrapper > .link-icons > tr {
        padding-left: 8px;
    }
    .type-detail .buttons-wrapper.social-buttons-wrapper .link-icons .link-icon.chat {
        padding-left: 8px;
    }
}


/* -------------------------------------------------------------
   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;
}

/* .import-brand (banner z /brand-2/ Shoptet stranky, AJAX nactly legacy JS) —
   pokud admin stranka pouziva refactor s <table> wrapperem + .roi-pd-brand
   uvnitr, neutralizujeme tabulkovy layout pres display: contents. Tim se table/
   tbody/tr/td "ztraceji" z layoutu a .roi-pd-brand je primy potomek .import-brand. */
.type-detail .import-brand:has(.roi-pd-brand) table,
.type-detail .import-brand:has(.roi-pd-brand) tbody,
.type-detail .import-brand:has(.roi-pd-brand) tr,
.type-detail .import-brand:has(.roi-pd-brand) td {
    display: contents;
}

/* 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%;
}

/* Nadpis — pokryva nas .roi-pd-brand__heading (z brand-banner.html) i bezne
   tagy h2/h3/h4 z admin obsahu (.import-brand transformace pouziva <h3>). */
.type-detail .roi-pd-brand__heading,
.type-detail .roi-pd-brand__text > h2,
.type-detail .roi-pd-brand__text > h3,
.type-detail .roi-pd-brand__text > h4 {
    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;
}

/* Bezny text (p i li) — sjednocena typografie. */
.type-detail .roi-pd-brand__text p,
.type-detail .roi-pd-brand__text li {
    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;
}

.type-detail .roi-pd-brand__text p {
    margin: 0 0 16px 0 !important;
}

.type-detail .roi-pd-brand__text ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 16px 0;
}

.type-detail .roi-pd-brand__text li {
    margin-bottom: 8px;
}

.type-detail .roi-pd-brand__text li:last-child {
    margin-bottom: 0;
}

.type-detail .roi-pd-brand__text strong {
    font-weight: 600;
    color: #252729;
}

.type-detail .roi-pd-brand__text a {
    color: #A72C3A;
    text-decoration: underline;
}

/* Posledni blok bez bottom marginu (aby vertikalni centering byl symetricky). */
.type-detail .roi-pd-brand__text > *:last-child {
    margin-bottom: 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;
}


/* =============================================================
   POBO custom content bloky (HTML widgety v dlouhem popisu)
   Sablona: product-detail/pobo-content-blocks.html
   ============================================================= */

/* Override legacy padding-right:140px na .basic-description — jen kdyz uvnitr je POBO obsah.
   Produkty bez POBO si nechavaji puvodni padding. */
.type-detail .basic-description:has(.roi-pd-pobo) {
    padding-right: 0;
}

/* Skryt legacy h2 "Popis produktu" kdyz je na strance POBO obsah — POBO sekce maji vlastni nadpisy. */
.type-detail .basic-description:has(.roi-pd-pobo) .popis-nadpis {
    display: none;
}

/* POBO defaultne aplikuje max-width: var(--pobo-global-widget-max-width) (~1200px) na widget child div.
   Pro nas POBO obsah chceme 100% (zejmena kvuli full-width band sekce 3 + spravne zarovnani vseho).
   :has() omezuje override jen na divy obsahujici nas .roi-pd-pobo — jine POBO widgety nedotcene. */
body.type-detail #pobo-standard-widget .widget-container > div:has(.roi-pd-pobo),
body.type-detail #pobo-share-widget .widget-container > div:has(.roi-pd-pobo) {
    max-width: 100% !important;
}

.type-detail .roi-pd-pobo {
    margin: 40px 0;
    color: #1a1a1a;
}

/* Layout: split (text + media 2-col) */
.type-detail .roi-pd-pobo--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Smer: media vpravo (default) */
.type-detail .roi-pd-pobo--media-right .roi-pd-pobo__text  { order: 1; }
.type-detail .roi-pd-pobo--media-right .roi-pd-pobo__media { order: 2; }

/* Smer: media vlevo */
.type-detail .roi-pd-pobo--media-left  .roi-pd-pobo__text  { order: 2; }
.type-detail .roi-pd-pobo--media-left  .roi-pd-pobo__media { order: 1; }

/* Heading H2 sekce */
.type-detail .roi-pd-pobo__heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px;
    color: #1a1a1a;
}

/* Hlavni paragraf */
.type-detail .roi-pd-pobo__lead {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 24px;
    color: #454545;
}

/* Posledni element v text-sloupci nema spodni margin (cisty zaver bloku) */
.type-detail .roi-pd-pobo__text > *:last-child {
    margin-bottom: 0;
}

/* Sedy info-box (Rozmery vyrobku apod.) */
.type-detail .roi-pd-pobo__info {
    background: #f3f3f3;
    padding: 20px 24px;
    border-radius: 4px;
}

.type-detail .roi-pd-pobo__info-title {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 6px;
    color: #454545;
}

.type-detail .roi-pd-pobo__info-text {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
    color: #454545;
}

/* Media (img/video) — figma vyska 404px */
.type-detail .roi-pd-pobo__img {
    display: block;
    width: 100%;
    height: 404px;
    object-fit: cover;
}

/* Media wrapper — relative kvuli absolutnimu play tlacitku */
.type-detail .roi-pd-pobo__media {
    position: relative;
}

/* Video — stejny rozmer jako img (404px), object-fit cover */
.type-detail .roi-pd-pobo__video {
    display: block;
    width: 100%;
    height: 404px;
    object-fit: cover;
    background: #000;
}

/* Play tlacitko — SVG ikona uz obsahuje bily kruh + play sipku (stejne jako brand banner).
   Button je transparentni wrapper, SVG fills 100%. */
.type-detail .roi-pd-pobo__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
}

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

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

/* Po kliknuti JS prida .is-playing — schova play tlacitko */
.type-detail .roi-pd-pobo__media.is-playing .roi-pd-pobo__play {
    display: none;
}

/* Features list */
.type-detail .roi-pd-pobo__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.type-detail .roi-pd-pobo__feat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Cerveny ctverec s ikonou */
.type-detail .roi-pd-pobo__feat-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: #A72C3A;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-detail .roi-pd-pobo__feat-icon img {
    width: 24px;
    height: auto;
    display: block;
}

.type-detail .roi-pd-pobo__feat-body {
    flex: 1 1 auto;
    min-width: 0;
}

.type-detail .roi-pd-pobo__feat-title {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 4px;
    color: #454545;
}

.type-detail .roi-pd-pobo__feat-desc {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
    color: #454545;
}

/* -------- BAND (full-width cerny pruh) -------- */

.type-detail .roi-pd-pobo--band {
    position: relative;
    isolation: isolate;
    color: #fff;
    padding: 64px 0;
    text-align: center;
}

/* Pseudo-elem rozsiri pozadi mimo .basic-description (body ma overflow-x: clip z legacy) */
.type-detail .roi-pd-pobo--band::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: #010101;
    z-index: -1;
}

/* Kicker (uppercase pretitle) */
.type-detail .roi-pd-pobo__kicker {
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 38.4px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: #FFFFFF;
}

/* Heading uvnitr bandu — bily, centrovany.
   Legacy: body.type-detail #tab-content h2 { ... !important } ma specificitu (1,1,2),
   takze nas selektor musi mit alespon (1,2,2) — pridavam #tab-content + h2 + nasi class. */
.type-detail #tab-content h2.roi-pd-pobo__band-heading {
    font-family: Poppins, sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 38.4px !important;
    letter-spacing: 0 !important;
    margin: 0 0 56px !important;
    color: #FFFFFF !important;
    text-align: center;
}

/* 2-col text pod nadpisem */
.type-detail .roi-pd-pobo__band-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    text-align: left;
    margin-bottom: 68px;
}

.type-detail .roi-pd-pobo__band-col p {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 16px;
    color: #FFFFFF;
}

.type-detail .roi-pd-pobo__band-col p:last-child {
    margin-bottom: 0;
}

/* Lead paragraf — semibold, bily. Cervena cara vlevo je decorativni ::before,
   nezavisla na vysce textu (presahuje nahoru i dolu). Padding-left je jen na lead,
   spodni paragraf zustava na urovni cary (bez paddingu). */
.type-detail .roi-pd-pobo__band-col p.roi-pd-pobo__band-lead {
    position: relative;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: #FFFFFF;
    padding-left: 21px;
    margin-bottom: 32px;
}

.type-detail .roi-pd-pobo__band-col p.roi-pd-pobo__band-lead::before {
    content: '';
    position: absolute;
    left: 0;
    top: -10px;
    bottom: -10px;
    width: 1px;
    background: #A72C3A;
}

/* -------- STATS grid (4-col na desktopu) -------- */

.type-detail .roi-pd-pobo__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.type-detail .roi-pd-pobo__stat {
    text-align: center;
}

.type-detail .roi-pd-pobo__stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #FFFFFF;
}

.type-detail .roi-pd-pobo__stat-label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    color: #FFFFFF;
}


/* =============================================================
   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: 10px;
    }

    /* 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;
    }

    /* POBO sekce — stack na mobilu, media nahore */
    .type-detail .roi-pd-pobo--split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .type-detail .roi-pd-pobo--split .roi-pd-pobo__media {
        order: -1;
    }
    .type-detail .roi-pd-pobo--split .roi-pd-pobo__text {
        order: 0;
    }

    .type-detail .roi-pd-pobo__heading {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .type-detail .roi-pd-pobo__img {
        height: auto;
        aspect-ratio: 674 / 404;
    }

    .type-detail .roi-pd-pobo__video {
        height: auto;
        aspect-ratio: 674 / 404;
    }

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

    .type-detail .roi-pd-pobo__features {
        gap: 14px;
    }

    /* BAND mobile — vertical stack textu, stats 2x2 */
    .type-detail .roi-pd-pobo--band {
        padding: 40px 16px;
    }

    .type-detail .roi-pd-pobo__band-heading {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .type-detail .roi-pd-pobo__band-cols {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }

    .type-detail .roi-pd-pobo__stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

}


/* =============================================================
   PRODUKT KARTY V GRIDU (kategorie, search, akce — vsude kde je #products)
   Sdilena typografie z Figmy:
     - Title: Poppins SemiBold 16px / 1.3 / #1a1a1a
     - Popis: Poppins 400 14px / 1.4 / #6b6b6b
     - Cena hlavni: Poppins SemiBold 20px / 20px / #383838 (bez slevy)
                                                  / #A72C3A (se slevou — produkt ma .price-standard)
     - Cena preskrtnuta: Poppins 500 16px / 1.6 / #383838 line-through
     - .prices kontejner: column-reverse, left-align, flex-wrap (preskrtnuta nahore, hlavni dole)

   Scope: #products .product (sdilene napric vsemi grid layouty: type-category,
   search results, akce. NEzasahuje do PDP cenoveho bloku v .p-data-wrapper).
   ============================================================= */

#products .product [data-micro="name"],
#products .product a.name {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: #1a1a1a !important;
}

#products .product .p-desc,
#products .product .p-desc.modified {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: #6b6b6b !important;
}


/* Hlavni cena — bez slevy default #383838 */
#products .product .price-final,
#products .product .price-final strong {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
}

/* Hlavni cena — se slevou (produkt ma .price-standard) -> brand red */
#products .product:has(.price-standard) .price-final,
#products .product:has(.price-standard) .price-final strong {
    color: #A72C3A !important;
}

/* Preskrtnuta cena */
#products .product .price-standard {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    color: #383838 !important;
    text-decoration: line-through !important;
}