/* ==========================================================================
   EDITOR POPISKŮ — exportní CSS pro téma „REPROOBCHOD“ (rp)
   Verze: 1.0.0

   Téma typu „kůže“: bloky, značkování i všechna nastavení jsou stejné jako ve
   výchozím systému — mění se jen vzhled. Soubor má tři vrstvy:

     [1] výchozí popis.css beze změny (všechny bloky, tokeny, responzivita)
     [2] výchozí hodnoty design tokenů podle www.reproobchod.cz
     [3] podpisové prvky webu (pruh parametrů, nadpis s linkou, pilulky,
         karty se stínem, FAQ se šipkou, modrá + žlutá CTA)

   Soubor je psaný ve třídách tf- — editor je při exportu přejmenuje na prefix
   nastavený u projektu (např. repro-), stejně jako u výchozího stylopisu.
   Na e-shop se vkládá jen jednou.
   ========================================================================== */

/* ==========================================================================
   [1] ZÁKLAD — kopie assets/popis.css (výchozí systém)
   Při změně popis.css je potřeba tuhle část zaktualizovat.
   ========================================================================== */
/* ==========================================================================
   EDITOR POPISKŮ 2.0 — exportní CSS
   Verze: 3.9.0 (vkládá se na e-shop pouze JEDNOU; existující třídy se nemění,
   nové verze pouze přidávají)
   v2.3.0: design tokeny přes inline proměnné na blocích —
     --tf-mt (vnější odsazení nahoře), --tf-mb (dole),
     --tf-px / --tf-py (vnitřní odsazení), --tf-fs (velikost textu sekce).
     Všechny mají fallback na původní hodnoty, takže starší popisky se nemění.
   v2.4.0: viditelnost bloků podle zařízení — třídy .tf-hide-m / .tf-hide-t / .tf-hide-d.
   Všechny třídy mají prefix .tf- (lze změnit v nastavení aplikace — pak je
   nutné vložit CSS s novým prefixem znovu).
   Vzhled lze ladit bez zásahu do CSS přes proměnné inline na wrapperu:
   style="--tf-accent:#e91e63; --tf-link:#0066cc; --tf-radius:8px; --tf-size:16px"
   ========================================================================== */

.tf-popis {
    --tf-accent: #385d79;
    --tf-primary: #385d79;
    --tf-secondary: #6b7280;
    --tf-link: var(--tf-accent);
    --tf-accent-text: #ffffff;
    --tf-text: #333333;
    --tf-heading: #14181d;
    --tf-muted: #6b7280;
    --tf-bg-soft: #f6f7f9;
    --tf-bg-dark: #1f2937;
    --tf-border: #e5e7eb;
    --tf-radius: 16px;
    --tf-radius-sm: 8px;
    --tf-radius-lg: 24px;
    --tf-radius-img: 12px;
    --tf-radius-btn: 999px;
    --tf-border-w: 1px;
    --tf-shadow: 0 6px 18px rgba(15,30,45,.08);
    --tf-size: 15px;
    --tf-small: 13px;
    --tf-h1: 34px;
    --tf-h2: 28px;
    --tf-h3: 20px;
    --tf-h4: 17px;
    --tf-lh: 1.65;
    --tf-lh-head: 1.3;
    --tf-fw-head: 700;
    --tf-fw-text: 400;
    --tf-ls: normal;
    --tf-tt: none;
    --tf-green: #2e9e54;
    --tf-green-bg: #f0f9f2;
    --tf-red: #d95f4e;
    --tf-red-bg: #fdf5f3;
    --tf-warning: #f59e0b;
    --tf-stars: #f5a623;
    --tf-icon: var(--tf-accent);
    --tf-block-gap: 28px;
    --tf-pad: 24px;
    --tf-gap: 20px;
    --tf-head-gap: 12px;
    --tf-btn-bg: var(--tf-accent);
    --tf-btn-text: #ffffff;
    --tf-btn-px: 28px;
    --tf-btn-py: 13px;
    --tf-btn-fs: 14px;
    --tf-btn-fw: 700;
    --tf-badge-bg: var(--tf-bg-soft);
    --tf-badge-text: var(--tf-heading);
    --tf-badge-border: var(--tf-border);
    --tf-badge-radius: 999px;
    --tf-badge-fs: 13px;
    --tf-badge-fw: 600;
    --tf-badge-tt: none;
    --tf-nav-bg: #ffffff;
    --tf-nav-text: var(--tf-heading);
    --tf-nav-border: #cfd4da;
    --tf-nav-active: var(--tf-accent);
    --tf-nav-radius: 999px;
    --tf-nav-fs: 13.5px;
    --tf-nav-fw: 600;

    box-sizing: border-box;
    margin: 16px auto;
    max-width: 100%;
    color: var(--tf-text);
    background: var(--tf-bg, transparent);
    font-family: var(--tf-font, inherit);
    font-size: var(--tf-size);
    line-height: var(--tf-lh, 1.65);
    text-align: left;
}
.tf-popis *, .tf-popis *::before, .tf-popis *::after { box-sizing: border-box; }

.tf-popis img { max-width: 100%; height: auto; border: 0; }
.tf-popis p { margin: 0 0 14px; }
.tf-popis p:last-child { margin-bottom: 0; }
.tf-popis h1, .tf-popis h2, .tf-popis h3, .tf-popis h4 {
    color: var(--tf-heading);
    line-height: var(--tf-lh-head, 1.3);
    font-family: var(--tf-font-head, var(--tf-font, inherit));
    letter-spacing: var(--tf-ls, normal);
    text-transform: var(--tf-tt, none);
}
.tf-popis h1 { font-size: var(--tf-h1, 34px); font-weight: var(--tf-fw-head, 700); margin: 0 0 18px; }
.tf-popis h2 { font-size: var(--tf-h2, 28px); font-weight: var(--tf-fw-head, 700); margin: 0 0 18px; }
.tf-popis h3 { font-size: var(--tf-h3, 20px); font-weight: var(--tf-fw-head, 600); margin: 0 0 12px; }
.tf-popis h4 { font-size: var(--tf-h4, 17px); font-weight: var(--tf-fw-head, 600); margin: 0 0 10px; }
.tf-popis a { color: var(--tf-link); }

.tf-popis ul, .tf-popis ol {
    margin: 0 0 14px 4px !important;
    padding-left: 22px !important;
}
.tf-popis ul { list-style-type: disc !important; }
.tf-popis ol { list-style-type: decimal !important; }
.tf-popis li { display: list-item !important; margin-bottom: 6px !important; }

/* --------------------------------------------------------------------------
   Nadpis sekce
   -------------------------------------------------------------------------- */
.tf-head { margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, 20px); font-size: var(--tf-fs, var(--tf-size)); }
.tf-head h2 { margin-bottom: 6px; }
.tf-head .tf-sub { color: var(--tf-muted); font-size: 16px; margin: 0; }
.tf-head--center { text-align: center; }
.tf-head--line h2 {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--tf-accent);
}
.tf-head--badge h2 {
    display: inline-block;
    background: var(--tf-bg-soft);
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 22px;
}

/* --------------------------------------------------------------------------
   Textový blok
   -------------------------------------------------------------------------- */
.tf-text { margin: var(--tf-mt, 16px) 0 var(--tf-mb, 16px); font-size: var(--tf-fs, var(--tf-size)); }

/* --------------------------------------------------------------------------
   Text + obrázek
   -------------------------------------------------------------------------- */
.tf-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-media__img {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tf-media__img img { border-radius: var(--tf-radius-img, var(--tf-radius)); max-height: 460px; object-fit: contain; }
.tf-media__text { flex: 1 1 320px; min-width: 260px; }
.tf-media--right .tf-media__img { order: 2; }
.tf-media--right .tf-media__text { order: 1; }
.tf-media--shadow .tf-media__img img { box-shadow: 0 14px 34px rgba(10, 25, 40, .18); }
.tf-media--plain .tf-media__img img { border-radius: 0; }

/* --------------------------------------------------------------------------
   Hero banner
   -------------------------------------------------------------------------- */
.tf-hero {
    position: relative;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    border-radius: var(--tf-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
}
.tf-hero--compact { min-height: 220px; }
.tf-hero--tall { min-height: 460px; }
.tf-hero__overlay {
    width: 100%;
    padding: 90px var(--tf-px, 36px) var(--tf-py, 32px);
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    color: #fff;
}
.tf-hero__overlay h2 { color: #fff; margin-bottom: 8px; font-size: 32px; }
.tf-hero__overlay p { color: rgba(255,255,255,.9); margin: 0; font-size: 16px; max-width: 640px; }

/* --------------------------------------------------------------------------
   Ikony / USP
   -------------------------------------------------------------------------- */
.tf-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    padding: var(--tf-py, 22px) var(--tf-px, 16px);
    background: var(--tf-bg-soft);
    border-radius: var(--tf-radius);
    text-align: center;
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-icons__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 130px;
    min-width: 100px;
    padding: 8px;
}
.tf-icons__item img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 10px; }
.tf-icons__item span { font-size: 13px; font-weight: 600; line-height: 1.4; }
.tf-icons--plain { background: transparent; padding: 8px 0; border-radius: 0; }
.tf-icons--cards { background: transparent; padding: 0; }
.tf-icons--cards .tf-icons__item {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    padding: 16px 12px;
}
.tf-icons--sm .tf-icons__item img { width: 40px; height: 40px; }
.tf-icons--lg .tf-icons__item img { width: 76px; height: 76px; }

/* --------------------------------------------------------------------------
   Výhody / nevýhody
   -------------------------------------------------------------------------- */
.tf-pm {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-pm__col {
    flex: 1 1 300px;
    padding: var(--tf-py, 28px) var(--tf-px, 28px);
    border-radius: var(--tf-radius);
}
.tf-pm__col--plus { background: var(--tf-green-bg); }
.tf-pm__col--minus { background: var(--tf-red-bg); }
.tf-pm--flat .tf-pm__col { background: #fff; border: 1px solid var(--tf-border); }
.tf-pm--flat .tf-pm__col--plus { border-top: 3px solid var(--tf-green); }
.tf-pm--flat .tf-pm__col--minus { border-top: 3px solid var(--tf-red); }
.tf-pm__col h3 { margin-bottom: 18px; }
.tf-pm__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.tf-pm__item:last-child { margin-bottom: 0; }
.tf-pm__badge {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.tf-pm__badge--plus { background: var(--tf-green); }
.tf-pm__badge--minus { background: var(--tf-red); }

/* --------------------------------------------------------------------------
   Tabulka parametrů
   -------------------------------------------------------------------------- */
.tf-specs {
    width: 100%;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    border-collapse: collapse;
    font-size: var(--tf-fs, 14px);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    overflow: hidden;
}
.tf-specs caption {
    caption-side: top;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    color: var(--tf-heading);
    padding: 0 0 12px;
}
.tf-specs th, .tf-specs td {
    padding: var(--tf-py, 11px) var(--tf-px, 16px);
    text-align: left;
    border-bottom: 1px solid var(--tf-border);
}
.tf-specs tr:last-child th, .tf-specs tr:last-child td { border-bottom: 0; }
.tf-specs th {
    width: 38%;
    font-weight: 600;
    color: var(--tf-heading);
    background: var(--tf-bg-soft);
}
.tf-specs tr:nth-child(even) td { background: #fbfbfc; }
.tf-specs--clean { border: 0; border-radius: 0; }
.tf-specs--clean th { background: transparent; }
.tf-specs--clean tr:nth-child(even) td { background: transparent; }
.tf-specs--clean tr:last-child th, .tf-specs--clean tr:last-child td { border-bottom: 1px solid var(--tf-border); }
.tf-specs--bordered th, .tf-specs--bordered td { border: 1px solid var(--tf-border); }
.tf-specs--bordered tr:nth-child(even) td { background: transparent; }

/* --------------------------------------------------------------------------
   FAQ (čistě CSS accordion přes <details>)
   -------------------------------------------------------------------------- */
.tf-faq { margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px)); font-size: var(--tf-fs, var(--tf-size)); }
.tf-faq__item {
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}
.tf-faq__item summary {
    cursor: pointer;
    padding: var(--tf-py, 15px) 44px var(--tf-py, 15px) var(--tf-px, 18px);
    font-weight: 600;
    color: var(--tf-heading);
    list-style: none;
    position: relative;
    user-select: none;
}
.tf-faq__item summary::-webkit-details-marker { display: none; }
.tf-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tf-bg-soft);
    color: var(--tf-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    transition: transform .2s;
}
.tf-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tf-faq__item[open] summary { border-bottom: 1px solid var(--tf-border); }
.tf-faq__a { padding: 14px var(--tf-px, 18px); font-size: 14px; }
.tf-faq--line .tf-faq__item {
    border: 0;
    border-bottom: 1px solid var(--tf-border);
    border-radius: 0;
    margin-bottom: 0;
}
.tf-faq--line .tf-faq__item summary { padding-left: 0; }
.tf-faq--line .tf-faq__item[open] summary { border-bottom: 0; }
.tf-faq--line .tf-faq__a { padding-left: 0; padding-top: 0; }
.tf-faq--soft .tf-faq__item { border: 0; background: var(--tf-bg-soft); }
.tf-faq--soft .tf-faq__item summary::after { background: #fff; }
.tf-faq--soft .tf-faq__item[open] summary { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Kroky / postup
   -------------------------------------------------------------------------- */
.tf-steps { margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px)); font-size: var(--tf-fs, var(--tf-size)); }
.tf-steps__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 26px;
}
.tf-steps__item:last-child { padding-bottom: 0; }
.tf-steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 2px;
    width: 2px;
    background: var(--tf-border);
}
.tf-steps__num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tf-accent);
    color: var(--tf-accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
.tf-steps__body h3 { margin-bottom: 4px; font-size: 17px; }
.tf-steps__body p { margin: 0; font-size: 14px; color: var(--tf-text); }
.tf-steps--cards .tf-steps__item {
    background: var(--tf-bg-soft);
    border-radius: var(--tf-radius);
    padding: 18px 20px;
    margin-bottom: 12px;
}
.tf-steps--cards .tf-steps__item:last-child { margin-bottom: 0; padding-bottom: 18px; }
.tf-steps--cards .tf-steps__item::before { display: none; }
.tf-steps--plain .tf-steps__num { background: transparent; color: var(--tf-accent); border: 2px solid var(--tf-accent); }
.tf-steps--plain .tf-steps__item::before { display: none; }

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.tf-gallery {
    display: grid;
    gap: 14px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
}
.tf-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.tf-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.tf-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.tf-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--tf-radius-img, 12px);
    display: block;
}
.tf-gallery--square img { aspect-ratio: 1 / 1; }
.tf-gallery--natural img { aspect-ratio: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   Video (responzivní 16:9)
   -------------------------------------------------------------------------- */
.tf-video {
    position: relative;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    padding-top: 56.25%;
    border-radius: var(--tf-radius);
    overflow: hidden;
    background: #000;
}
.tf-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Recenze / citace
   -------------------------------------------------------------------------- */
.tf-review {
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    padding: var(--tf-py, 28px) var(--tf-px, 32px);
    background: var(--tf-bg-soft);
    border-left: 4px solid var(--tf-accent);
    border-radius: 0 var(--tf-radius) var(--tf-radius) 0;
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-review__stars { color: var(--tf-stars, #f5a623); font-size: 18px; letter-spacing: 3px; margin-bottom: 10px; }
.tf-review__text { font-size: 16px; font-style: italic; margin-bottom: 10px; }
.tf-review__author { font-size: 13px; font-weight: 600; color: var(--tf-muted); }
.tf-review--card {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-left: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    text-align: center;
}
.tf-review--minimal {
    background: transparent;
    border-left: 4px solid var(--tf-accent);
    padding: 6px 0 6px 24px;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.tf-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    padding: var(--tf-py, 30px) var(--tf-px, 34px);
    border-radius: var(--tf-radius);
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-cta--accent { background: var(--tf-accent); color: var(--tf-accent-text); }
.tf-cta--accent h3, .tf-cta--accent p { color: var(--tf-accent-text); }
.tf-cta--dark { background: #1f2937; color: #fff; }
.tf-cta--dark h3, .tf-cta--dark p { color: #fff; }
.tf-cta--light { background: var(--tf-bg-soft); border: 1px solid var(--tf-border); }
.tf-cta--outline { background: #fff; border: 2px solid var(--tf-accent); }
.tf-cta__content { flex: 1 1 300px; }
.tf-cta__content h3 { margin-bottom: 6px; font-size: 21px; }
.tf-cta__content p { margin: 0; opacity: .9; font-size: 14px; }
.tf-cta__btn {
    display: inline-block;
    padding: var(--tf-btn-py, 13px) var(--tf-btn-px, 28px);
    border-radius: var(--tf-radius-btn, 999px);
    font-weight: var(--tf-btn-fw, 700);
    font-size: var(--tf-btn-fs, 14px);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
}
.tf-cta__btn:hover { opacity: .88; transform: translateY(-1px); }
.tf-cta--accent .tf-cta__btn, .tf-cta--dark .tf-cta__btn { background: #fff; color: var(--tf-heading); }
.tf-cta--light .tf-cta__btn, .tf-cta--outline .tf-cta__btn { background: var(--tf-accent); color: var(--tf-accent-text); }

/* --------------------------------------------------------------------------
   Štítky / badges
   -------------------------------------------------------------------------- */
.tf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--tf-mt, 20px) 0 var(--tf-mb, 20px);
}
.tf-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--tf-badge-radius, 999px);
    font-size: var(--tf-badge-fs, 13px);
    font-weight: var(--tf-badge-fw, 600);
    text-transform: var(--tf-badge-tt, none);
    background: var(--tf-badge-bg, var(--tf-bg-soft));
    border: 1px solid var(--tf-badge-border, var(--tf-border));
    color: var(--tf-badge-text, var(--tf-heading));
}
.tf-badge--accent { background: var(--tf-accent); border-color: var(--tf-accent); color: var(--tf-accent-text); }
.tf-badge--outline { background: transparent; border-color: var(--tf-accent); color: var(--tf-accent); }

/* --------------------------------------------------------------------------
   Sloupce
   -------------------------------------------------------------------------- */
.tf-cols {
    display: grid;
    gap: 20px;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-cols--2 { grid-template-columns: repeat(2, 1fr); }
.tf-cols--3 { grid-template-columns: repeat(3, 1fr); }
.tf-cols__item {
    padding: var(--tf-py, 26px) var(--tf-px, 26px);
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
}
.tf-cols__item img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 14px; }
.tf-cols__item h3 { font-size: 17px; margin-bottom: 8px; }
.tf-cols__item p { margin: 0; font-size: 14px; }
.tf-cols--soft .tf-cols__item { background: var(--tf-bg-soft); border: 0; }
.tf-cols--plain .tf-cols__item { background: transparent; border: 0; padding: 10px 0; }

/* --------------------------------------------------------------------------
   Zvýrazněný box
   -------------------------------------------------------------------------- */
.tf-box {
    margin: var(--tf-mt, 24px) 0 var(--tf-mb, 24px);
    padding: var(--tf-py, 20px) var(--tf-px, 24px);
    border-radius: 12px;
    border-left: 4px solid;
    font-size: var(--tf-fs, 14px);
}
.tf-box--info { background: #eff6ff; border-color: #3b82f6; }
.tf-box--success { background: var(--tf-green-bg); border-color: var(--tf-green); }
.tf-box--warning { background: #fffbeb; border-color: #f59e0b; }
.tf-box--accent { background: var(--tf-bg-soft); border-color: var(--tf-accent); }

/* --------------------------------------------------------------------------
   Oddělovač
   -------------------------------------------------------------------------- */
.tf-divider {
    border: 0;
    border-top: 1px solid var(--tf-border);
    margin: var(--tf-mt, 36px) 0 var(--tf-mb, 36px);
}
.tf-divider--dotted { border-top-style: dotted; border-top-color: #b8bec7; }
.tf-divider--space { border: 0; margin: 28px 0; }
.tf-divider--accent { border-top: 2px solid var(--tf-accent); width: 80px; margin-left: 0; }

/* --------------------------------------------------------------------------
   Responzivita
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
    .tf-cols--3 { grid-template-columns: repeat(2, 1fr); }
    .tf-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tf-popis h2 { font-size: 24px; }
    .tf-hero { min-height: 240px; }
    .tf-hero--compact { min-height: 180px; }
    .tf-hero--tall { min-height: 320px; }
    .tf-hero__overlay { padding: 70px 20px 22px; }
    .tf-hero__overlay h2 { font-size: 24px; }
    .tf-media { gap: 16px; }
    .tf-cols--2, .tf-cols--3 { grid-template-columns: 1fr; }
    .tf-gallery--2, .tf-gallery--3 { grid-template-columns: repeat(2, 1fr); }
    .tf-cta { padding: 24px 22px; }
    .tf-pm__col { padding: 22px; }
    .tf-specs th { width: 44%; }
}

/* --------------------------------------------------------------------------
   Navigace popisku (štítky kotev) — v2.2.0
   -------------------------------------------------------------------------- */
.tf-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 30px;
}
.tf-nav__item {
    display: inline-block;
    padding: 9px 22px;
    border: 1px solid var(--tf-nav-border, #cfd4da);
    border-radius: var(--tf-nav-radius, 999px);
    font-size: var(--tf-nav-fs, 13.5px);
    font-weight: var(--tf-nav-fw, 600);
    color: var(--tf-nav-text, var(--tf-heading));
    background: var(--tf-nav-bg, #fff);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.tf-nav__item:hover {
    border-color: var(--tf-nav-active, var(--tf-accent));
    color: var(--tf-nav-active, var(--tf-accent));
    text-decoration: none;
}
.tf-popis [id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   Viditelnost bloků podle zařízení — v2.4.0
   Mobil ≤ 640 px, tablet 641–1024 px, desktop ≥ 1025 px.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tf-popis .tf-hide-m { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .tf-popis .tf-hide-t { display: none !important; }
}
@media (min-width: 1025px) {
    .tf-popis .tf-hide-d { display: none !important; }
}

/* --------------------------------------------------------------------------
   v2.5.0 — barevné / typografické tokeny sekcí (20 stylů)
   Přepisy se aktivují JEN u bloků s markerem .tf-styled (nastavená barva/typografie).
   Bloky bez markeru zůstávají naprosto beze změny.
   -------------------------------------------------------------------------- */
/* Parametry */
.tf-popis .tf-styled.tf-specs:not(.tf-specs--clean) th { background: var(--tf-c-bg, var(--tf-bg-soft)); }
.tf-popis .tf-styled.tf-specs th { color: var(--tf-c-k-color, var(--tf-heading)); font-size: var(--tf-c-k-size, 14px); font-weight: var(--tf-c-k-weight, 600); }
.tf-popis .tf-styled.tf-specs td { color: var(--tf-c-v-color, var(--tf-text)); font-size: var(--tf-c-v-size, 14px); font-weight: var(--tf-c-v-weight, 400); }
.tf-popis .tf-styled.tf-specs, .tf-popis .tf-styled.tf-specs th, .tf-popis .tf-styled.tf-specs td { border-color: var(--tf-c-border, var(--tf-border)); }

/* Výhody / nevýhody */
.tf-popis .tf-styled.tf-pm .tf-pm__col--plus { background: var(--tf-c-bg, var(--tf-green-bg)); }
.tf-popis .tf-styled.tf-pm .tf-pm__col--minus { background: var(--tf-c-bg, var(--tf-red-bg)); }
.tf-popis .tf-styled.tf-pm .tf-pm__col h3 { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-pm .tf-pm__item { color: var(--tf-c-text, var(--tf-text)); }
.tf-popis .tf-styled.tf-pm.tf-pm--flat .tf-pm__col { border-color: var(--tf-c-border, var(--tf-border)); }

/* FAQ */
.tf-popis .tf-styled.tf-faq .tf-faq__item { background: var(--tf-c-bg, #fff); border-color: var(--tf-c-border, var(--tf-border)); }
.tf-popis .tf-styled.tf-faq .tf-faq__item summary { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-faq .tf-faq__a { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-faq .tf-faq__item summary::after { color: var(--tf-c-accent, var(--tf-accent)); }

/* Kroky / postup */
.tf-popis .tf-styled.tf-steps:not(.tf-steps--plain) .tf-steps__num { background: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-steps--plain .tf-steps__num { color: var(--tf-c-accent, var(--tf-accent)); border-color: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-steps .tf-steps__body h3 { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-steps .tf-steps__body p { color: var(--tf-c-text, var(--tf-text)); }
.tf-popis .tf-styled.tf-steps--cards .tf-steps__item { background: var(--tf-c-bg, var(--tf-bg-soft)); }

/* Kroky — vodorovné uspořádání */
.tf-popis .tf-steps--horizontal { display: flex; flex-wrap: wrap; gap: 18px; }
.tf-popis .tf-steps--horizontal .tf-steps__item { flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 0; }
.tf-popis .tf-steps--horizontal .tf-steps__item::before { display: none; }
.tf-popis .tf-steps--horizontal .tf-steps__num { margin-bottom: 10px; }

/* Recenze */
.tf-popis .tf-styled.tf-review { background: var(--tf-c-bg, var(--tf-bg-soft)); border-left-color: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-review .tf-review__text { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-review .tf-review__stars { color: var(--tf-c-accent, #f5a623); }
.tf-popis .tf-styled.tf-review--card { border-color: var(--tf-c-border, var(--tf-border)); }

/* CTA banner */
.tf-popis .tf-styled.tf-cta { background: var(--tf-c-bg, var(--tf-accent)); }
.tf-popis .tf-styled.tf-cta h3, .tf-popis .tf-styled.tf-cta p { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-cta .tf-cta__btn { background: var(--tf-c-accent, #fff); }

/* Štítky */
.tf-popis .tf-styled.tf-badges .tf-badge { background: var(--tf-c-bg, var(--tf-bg-soft)); color: var(--tf-c-text, var(--tf-heading)); border-color: var(--tf-c-border, var(--tf-border)); }

/* Sloupce */
.tf-popis .tf-styled.tf-cols .tf-cols__item { background: var(--tf-c-bg, #fff); border-color: var(--tf-c-border, var(--tf-border)); }
.tf-popis .tf-styled.tf-cols .tf-cols__item h3 { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-cols .tf-cols__item p { color: var(--tf-c-text, var(--tf-text)); }

/* Zvýrazněný box */
.tf-popis .tf-styled.tf-box { background: var(--tf-c-bg, #eff6ff); border-left-color: var(--tf-c-accent, #3b82f6); }
.tf-popis .tf-styled.tf-box, .tf-popis .tf-styled.tf-box p { color: var(--tf-c-text, inherit); }

/* Oddělovač */
.tf-popis .tf-styled.tf-divider { border-top-color: var(--tf-c-line, var(--tf-border)); border-top-width: var(--tf-c-thick, 1px); }
.tf-popis .tf-styled.tf-divider--accent { border-top-color: var(--tf-c-line, var(--tf-accent)); border-top-width: var(--tf-c-thick, 2px); }
.tf-popis .tf-styled.tf-divider--dotted { border-top-color: var(--tf-c-line, #b8bec7); }

/* --------------------------------------------------------------------------
   v3.0.0 — responsivní per-blok přepisy velikosti textu a vnějšího odsazení
   (bloky s tabletovým/mobilním přepisem mají marker .tf-rt / .tf-rm)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tf-popis .tf-rt { font-size: var(--tf-fs-t, var(--tf-fs, var(--tf-size))); }
    .tf-popis .tf-rt { margin-top: var(--tf-mt-t, var(--tf-mt, var(--tf-block-gap, 28px))); margin-bottom: var(--tf-mb-t, var(--tf-mb, var(--tf-block-gap, 28px))); }
}
@media (max-width: 640px) {
    .tf-popis .tf-rm { font-size: var(--tf-fs-m, var(--tf-fs-t, var(--tf-fs, var(--tf-size)))); }
    .tf-popis .tf-rm { margin-top: var(--tf-mt-m, var(--tf-mt-t, var(--tf-mt, var(--tf-block-gap, 28px)))); margin-bottom: var(--tf-mb-m, var(--tf-mb-t, var(--tf-mb, var(--tf-block-gap, 28px)))); }
}

/* v3.2.0 — responsivní vnitřní odsazení hlavních bloků (root-padded) */
@media (max-width: 1024px) {
    .tf-popis .tf-rt.tf-icons, .tf-popis .tf-rt.tf-cta, .tf-popis .tf-rt.tf-review, .tf-popis .tf-rt.tf-box {
        padding: var(--tf-py-t, var(--tf-py)) var(--tf-px-t, var(--tf-px));
    }
}
@media (max-width: 640px) {
    .tf-popis .tf-rm.tf-icons, .tf-popis .tf-rm.tf-cta, .tf-popis .tf-rm.tf-review, .tf-popis .tf-rm.tf-box {
        padding: var(--tf-py-m, var(--tf-py-t, var(--tf-py))) var(--tf-px-m, var(--tf-px-t, var(--tf-px)));
    }
}


/* --------------------------------------------------------------------------
   v3.3.0 — Blok TIP / doporučení
   -------------------------------------------------------------------------- */
.tf-tip {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
    margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px));
    padding: var(--tf-py, 28px) var(--tf-px, 28px);
    background: var(--tf-bg-soft);
    border-radius: var(--tf-radius);
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-tip__media { position: relative; flex: 0 0 200px; max-width: 220px; }
.tf-tip__media img { width: 100%; border-radius: var(--tf-radius-img, var(--tf-radius)); display: block; object-fit: cover; }
.tf-tip__sign { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(0,0,0,.62); color: #fff; padding: 7px 10px; border-radius: 10px; font-size: 12px; line-height: 1.25; }
.tf-tip__sign strong { display: block; }
.tf-tip__sign span { opacity: .85; }
.tf-tip__body { flex: 1 1 300px; min-width: 260px; }
.tf-tip__label { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: var(--tf-badge-radius, 999px); background: var(--tf-accent); color: var(--tf-accent-text, #fff); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.tf-tip__body h3 { margin-bottom: 8px; }
.tf-tip__btn { margin-top: 14px; background: var(--tf-btn-bg, var(--tf-accent)); color: var(--tf-btn-text, #fff); }
@media (max-width: 640px) { .tf-tip__media { flex-basis: 100%; max-width: 100%; } }

/* TIP — barevné přepisy (marker .tf-styled) */
.tf-popis .tf-styled.tf-tip { background: var(--tf-c-bg, var(--tf-bg-soft)); }
.tf-popis .tf-styled.tf-tip, .tf-popis .tf-styled.tf-tip .tf-tip__text { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-tip h3 { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-tip .tf-tip__label { background: var(--tf-c-accent, var(--tf-accent)); }

/* ==========================================================================
   v3.5.0 — detailní mikro-volby bloků
   ========================================================================== */
/* Nadpis */
.tf-head__badge { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: var(--tf-badge-radius, 999px); background: var(--tf-badge-bg, var(--tf-bg-soft)); color: var(--tf-badge-text, var(--tf-heading)); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: var(--tf-badge-tt, none); }
.tf-head--grad h1, .tf-head--grad h2, .tf-head--grad h3, .tf-head--grad h4 { background: linear-gradient(90deg, var(--tf-accent), var(--tf-secondary, var(--tf-link, var(--tf-accent)))); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Text — sloupce + drop cap */
.tf-text--cols2 { column-count: 2; column-gap: var(--tf-gap, 28px); }
.tf-text--cols3 { column-count: 3; column-gap: var(--tf-gap, 28px); }
@media (max-width: 640px) { .tf-text--cols2, .tf-text--cols3 { column-count: 1; } }
.tf-text--drop p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: .8; font-weight: 700; padding: 4px 10px 0 0; color: var(--tf-accent); }

/* Text + obrázek — poměry, badge, cover, tlačítko */
.tf-media__img { position: relative; }
.tf-media--cover .tf-media__img img { object-fit: cover; width: 100%; max-height: 460px; }
.tf-media__badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 12px; border-radius: var(--tf-badge-radius, 999px); background: var(--tf-accent); color: var(--tf-accent-text, #fff); font-size: 12px; font-weight: 700; }
.tf-media__btn { margin-top: 16px; }
.tf-media--r4060 .tf-media__img { flex: 4 1 200px; } .tf-media--r4060 .tf-media__text { flex: 6 1 260px; }
.tf-media--r6040 .tf-media__img { flex: 6 1 260px; } .tf-media--r6040 .tf-media__text { flex: 4 1 200px; }
.tf-media--r3367 .tf-media__img { flex: 33 1 180px; } .tf-media--r3367 .tf-media__text { flex: 67 1 260px; }
.tf-media--r6733 .tf-media__img { flex: 67 1 260px; } .tf-media--r6733 .tf-media__text { flex: 33 1 180px; }

/* Hero — badge, podnadpis, zarovnání, overlay, tlačítka */
.tf-hero--center { text-align: center; }
.tf-hero--center .tf-hero__btns { justify-content: center; }
.tf-hero--ov-light .tf-hero__overlay { background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.tf-hero--ov-dark .tf-hero__overlay { background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.3)); }
.tf-hero__badge { display: inline-block; margin-bottom: 10px; padding: 5px 14px; border-radius: 999px; background: var(--tf-accent); color: var(--tf-accent-text, #fff); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.tf-hero__sub { color: #fff !important; font-size: 18px !important; opacity: .95; margin: 0 0 6px !important; }
.tf-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.tf-cta__btn--ghost { background: transparent; border: 2px solid currentColor; color: inherit; }

/* CTA — dvě tlačítka + poznámka */
.tf-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.tf-cta__note { font-size: 12.5px; opacity: .8; margin: 8px 0 0 !important; }

/* USP ikony — grid + tvary */
.tf-icons--grid { display: grid; }
.tf-icons--grid .tf-icons__item { flex: none; }
.tf-icons--c2 { grid-template-columns: repeat(2, 1fr); }
.tf-icons--c3 { grid-template-columns: repeat(3, 1fr); }
.tf-icons--c4 { grid-template-columns: repeat(4, 1fr); }
.tf-icons--c5 { grid-template-columns: repeat(5, 1fr); }
.tf-icons--c6 { grid-template-columns: repeat(6, 1fr); }
.tf-icons--c7 { grid-template-columns: repeat(7, 1fr); }
.tf-icons--c8 { grid-template-columns: repeat(8, 1fr); }
.tf-icons--shape-circle .tf-icons__item img, .tf-icons--shape-square .tf-icons__item img, .tf-icons--shape-rounded .tf-icons__item img { padding: 14px; background: var(--tf-bg-soft); box-sizing: content-box; }
.tf-icons--shape-circle .tf-icons__item img { border-radius: 50%; }
.tf-icons--shape-rounded .tf-icons__item img { border-radius: 12px; }
@media (max-width: 640px) { .tf-icons--grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Galerie — 5–8 sloupců + popisky */
.tf-gallery--5 { grid-template-columns: repeat(5, 1fr); }
.tf-gallery--6 { grid-template-columns: repeat(6, 1fr); }
.tf-gallery--7 { grid-template-columns: repeat(7, 1fr); }
.tf-gallery--8 { grid-template-columns: repeat(8, 1fr); }
.tf-gallery__fig { margin: 0; }
.tf-gallery__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tf-radius-img, 12px); display: block; }
.tf-gallery--square .tf-gallery__fig img { aspect-ratio: 1 / 1; }
.tf-gallery--natural .tf-gallery__fig img { aspect-ratio: auto; object-fit: contain; }
.tf-gallery__fig figcaption { font-size: 13px; color: var(--tf-muted); margin-top: 6px; }
@media (max-width: 880px) { .tf-gallery--5, .tf-gallery--6, .tf-gallery--7, .tf-gallery--8 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tf-gallery--4, .tf-gallery--5, .tf-gallery--6, .tf-gallery--7, .tf-gallery--8 { grid-template-columns: repeat(2, 1fr); } }

/* Video — poměry + MP4 */
.tf-video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tf-video--43 { padding-top: 75%; }
.tf-video--11 { padding-top: 100%; }
.tf-video--916 { padding-top: 177.78%; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Sloupce — 4 a 5 */
.tf-cols--4 { grid-template-columns: repeat(4, 1fr); }
.tf-cols--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 880px) { .tf-cols--4, .tf-cols--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tf-cols--4, .tf-cols--5 { grid-template-columns: 1fr; } }

/* Oddělovač — další typy */
.tf-divider--dashed { border-top-style: dashed; border-top-color: #b8bec7; }
.tf-divider--double { border-top: 4px double var(--tf-border); }
.tf-divider--gradient { border: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--tf-accent), transparent); }

/* ==========================================================================
   v3.6.0 — mikro-volby (FAQ karty, kroky, štítky, parametry karty, box, recenze)
   ========================================================================== */
/* FAQ karty + první otevřená */
.tf-faq--cards .tf-faq__item { border: 1px solid var(--tf-border); border-radius: 14px; margin-bottom: 12px; box-shadow: var(--tf-shadow); }

/* Kroky — tvar čísla */
.tf-steps--num-square .tf-steps__num { border-radius: 6px; }
.tf-steps--num-plain .tf-steps__num { background: transparent; color: var(--tf-accent); border: 2px solid var(--tf-accent); }

/* Štítky — zarovnání a velikost */
.tf-badges--center { justify-content: center; }
.tf-badges--right { justify-content: flex-end; }
.tf-badges--sm .tf-badge { padding: 4px 11px; font-size: 12px; }
.tf-badges--lg .tf-badge { padding: 9px 20px; font-size: 15px; }

/* Parametry — zobrazení jako karty */
.tf-specs--cards { border: 0; display: block; }
.tf-specs--cards tr { display: flex; flex-direction: column; border: 1px solid var(--tf-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.tf-specs--cards th, .tf-specs--cards td { width: auto; border: 0; }
.tf-specs--cards th { background: var(--tf-bg-soft); }

/* Zvýrazněný box — další typy */
.tf-box--error { background: var(--tf-red-bg); border-color: var(--tf-red); }
.tf-box--note { background: var(--tf-bg-soft); border-color: var(--tf-muted); }

/* Recenze — více vedle sebe */
.tf-reviews { display: grid; gap: var(--tf-gap, 20px); margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px)); }
.tf-reviews--2 { grid-template-columns: repeat(2, 1fr); }
.tf-reviews--3 { grid-template-columns: repeat(3, 1fr); }
.tf-reviews .tf-review { margin: 0; }
@media (max-width: 640px) { .tf-reviews--2, .tf-reviews--3 { grid-template-columns: 1fr; } }
.tf-popis .tf-styled.tf-reviews .tf-review { background: var(--tf-c-bg, var(--tf-bg-soft)); border-left-color: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-reviews .tf-review__text { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-reviews .tf-review__stars { color: var(--tf-c-accent, #f5a623); }

/* ==========================================================================
   v3.7.0 — barevné přepisy pro Nadpis/Text/Text+obr./Hero/Ikony/Galerie/Video
   (aktivní jen u bloku s nastavenou barvou — marker .tf-styled)
   ========================================================================== */
.tf-popis .tf-styled.tf-head h1, .tf-popis .tf-styled.tf-head h2, .tf-popis .tf-styled.tf-head h3, .tf-popis .tf-styled.tf-head h4 { color: var(--tf-c-head, var(--tf-heading)); }
.tf-popis .tf-styled.tf-head .tf-sub { color: var(--tf-c-text, var(--tf-muted)); }
.tf-popis .tf-styled.tf-head--line h2 { border-bottom-color: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-head__badge, .tf-popis .tf-styled.tf-head .tf-head__badge { background: var(--tf-c-accent, var(--tf-badge-bg)); }

.tf-popis .tf-styled.tf-text { background: var(--tf-c-bg, transparent); color: var(--tf-c-text, inherit); }

.tf-popis .tf-styled.tf-media .tf-media__text { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-media .tf-media__btn { background: var(--tf-c-accent, var(--tf-btn-bg, var(--tf-accent))); }
.tf-popis .tf-styled.tf-media .tf-media__img img { border: 1px solid var(--tf-c-border, transparent); }

.tf-popis .tf-styled.tf-hero .tf-hero__overlay, .tf-popis .tf-styled.tf-hero .tf-hero__overlay h2, .tf-popis .tf-styled.tf-hero .tf-hero__overlay p { color: var(--tf-c-text, #fff); }
.tf-popis .tf-styled.tf-hero .tf-hero__badge { background: var(--tf-c-accent, var(--tf-accent)); }
.tf-popis .tf-styled.tf-hero .tf-cta__btn { background: var(--tf-c-accent, var(--tf-btn-bg, var(--tf-accent))); }

.tf-popis .tf-styled.tf-icons { background: var(--tf-c-bg, var(--tf-bg-soft)); }
.tf-popis .tf-styled.tf-icons .tf-icons__item span { color: var(--tf-c-text, inherit); }
.tf-popis .tf-styled.tf-icons[class*="tf-icons--shape"] .tf-icons__item img { background: var(--tf-c-accent, var(--tf-bg-soft)); }

.tf-popis .tf-styled.tf-gallery img, .tf-popis .tf-styled.tf-gallery .tf-gallery__fig img { border: 1px solid var(--tf-c-border, transparent); }
.tf-popis .tf-styled.tf-gallery figcaption { color: var(--tf-c-text, var(--tf-muted)); }

.tf-popis .tf-styled.tf-video { background: var(--tf-c-bg, #000); border: 1px solid var(--tf-c-border, transparent); }

/* ==========================================================================
   v3.9.0 — štítek nad videem, hover barvy navigace, TIP dle předlohy
   (pouze přidané třídy — starší popisky se nemění)
   ========================================================================== */

/* štítek (badge) nad videem — NÁVOD / PRODUKTOVÉ VIDEO apod. */
.tf-videowrap { margin: var(--tf-mt, var(--tf-block-gap, 28px)) 0 var(--tf-mb, var(--tf-block-gap, 28px)); }
.tf-videowrap .tf-video { margin: 0; }
.tf-vbadge-row { text-align: center; margin: 0 0 12px; }
.tf-vbadge {
    display: inline-block;
    padding: 7px 20px;
    background: var(--tf-vb-bg, #14304a);
    color: var(--tf-vb-text, #ffffff);
    border: 1px solid var(--tf-vb-border, var(--tf-vb-bg, #14304a));
    border-radius: var(--tf-vb-radius, 999px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* navigace — samostatné hover barvy (pozadí + text) */
.tf-nav__item:hover {
    background: var(--tf-nav-hbg, var(--tf-nav-bg, #ffffff));
    color: var(--tf-nav-htext, var(--tf-nav-active, var(--tf-accent)));
}

/* TIP / doporučení — varianta „expert" dle předlohy: bílá karta, foto vpravo,
   štítek s ikonou, jmenovka překrývající levý okraj fotky */
.tf-tip--expert {
    background: var(--tf-c-bg, #ffffff);
    border: var(--tf-border-w, 1px) solid var(--tf-border);
    box-shadow: var(--tf-shadow);
}
.tf-tip--expert .tf-tip__body { order: 1; }
.tf-tip--expert .tf-tip__media { order: 2; flex: 0 0 230px; max-width: 250px; margin-left: auto; }
.tf-tip--expert .tf-tip__media img { border-radius: var(--tf-radius, 16px); }
.tf-tip--expert .tf-tip__label {
    background: var(--tf-c-accent, #14304a);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 16px;
    margin-bottom: 12px;
}
.tf-tip--expert .tf-tip__sign {
    left: -22px;
    right: auto;
    bottom: 18px;
    min-width: 65%;
    background: var(--tf-c-accent, #14304a);
    border-radius: 14px;
    padding: 9px 18px;
    text-align: center;
    font-size: 12.5px;
}
.tf-tip--expert .tf-tip__sign strong { font-size: 14.5px; }
@media (max-width: 640px) {
    .tf-tip--expert .tf-tip__media { margin-left: 0; max-width: 100%; }
    .tf-tip--expert .tf-tip__sign { left: 10px; right: 10px; min-width: 0; }
}


/* ==========================================================================
   [2] REPROOBCHOD — výchozí hodnoty design tokenů
   Stejný selektor jako základ výše, takže tyhle hodnoty vyhrají. Nastavení
   z editoru (inline proměnné na obalu i na blocích) má pořád přednost —
   všechno se dá dál ladit v „Vzhledu“ i u jednotlivých bloků.
   Zdroj: www.reproobchod.cz (šablona Rubin, říjen 2026).
   ========================================================================== */
.tf-popis {
    /* barvy webu */
    --tf-accent: #0087c7;          /* značková modrá — ceny, nadpisy popisu, tlačítka */
    --tf-primary: #0087c7;
    --tf-secondary: #468c98;       /* sekundární tyrkys šablony */
    --tf-link: #0087c7;
    --tf-accent-text: #ffffff;
    --tf-text: #222222;
    --tf-heading: #222222;         /* H3/H4; H2 je modrý — viz níže */
    --tf-muted: #666666;
    --tf-bg-soft: #f7f7f7;
    --tf-bg-dark: #292b32;
    --tf-border: #dadada;
    --tf-green: #3da253;           /* zelená ze štítku „ZDARMA“ */
    --tf-green-bg: #f0f8f2;
    --tf-red: #d9534f;
    --tf-red-bg: #fcf1f1;
    --tf-warning: #ffbb00;         /* značková žlutá */
    --tf-stars: #ffbb00;
    --tf-icon: #0087c7;

    /* typografie — celý web jede na Exo 2 */
    --tf-font: "Exo 2", "RP Exo 2", Arial, sans-serif;
    --tf-size: 14px;
    --tf-small: 12.5px;
    --tf-h1: 24px;
    --tf-h2: 21px;
    --tf-h3: 18px;
    --tf-h4: 16px;
    --tf-lh: 1.6;
    --tf-lh-head: 1.25;
    --tf-fw-head: 700;
    /* nadpisy verzálkami s lehkým prostrkáním — jako H1 a nadpisy popisů na webu.
       Vypíná se v editoru: Vzhled → Typografie → Velikost písmen nadpisů. */
    --tf-tt: uppercase;
    --tf-ls: .5px;

    /* tvary — web je spíš hranatý: karty 5 px, tlačítka 4 px, pilulky 8 px */
    --tf-radius: 5px;
    --tf-radius-sm: 4px;
    --tf-radius-lg: 8px;
    --tf-radius-img: 5px;
    --tf-radius-btn: 4px;
    --tf-shadow: 0 0 10px rgba(0, 0, 0, .08);

    /* tlačítka */
    --tf-btn-bg: #0087c7;
    --tf-btn-text: #ffffff;
    --tf-btn-px: 26px;
    --tf-btn-py: 12px;
    --tf-btn-fs: 15px;
    --tf-btn-fw: 600;

    /* štítky — jako pilulka „NABÍZENÉ ZNAČKY“ */
    --tf-badge-bg: #ffffff;
    --tf-badge-text: #222222;
    --tf-badge-border: #dadada;
    --tf-badge-radius: 8px;
    --tf-badge-fs: 13px;
    --tf-badge-fw: 600;
    --tf-badge-tt: uppercase;

    /* kotvová navigace */
    --tf-nav-bg: #ffffff;
    --tf-nav-text: #222222;
    --tf-nav-border: #dadada;
    --tf-nav-active: #0096d6;
    --tf-nav-hbg: #0096d6;
    --tf-nav-htext: #ffffff;
    --tf-nav-radius: 8px;
    --tf-nav-fs: 13px;
    --tf-nav-fw: 600;
}

/* ==========================================================================
   [3] REPROOBCHOD — podpisové prvky webu
   ========================================================================== */

/* Písmo: na e-shopu se použije jejich „Exo 2“ (načítá ho Shoptet). Kopie pod
   jiným jménem slouží jen pro náhled v editoru, kde Exo 2 není — na e-shopu
   se nikdy nestáhne, protože „Exo 2“ je v seznamu dřív. */
@font-face {
    font-family: "RP Exo 2";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/exo2/v26/7cHmv4okm5zmbtYmK-4E4Q.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "RP Exo 2";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/exo2/v26/7cHmv4okm5zmbtYoK-4.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- nadpisy ---
   H2 v popisech je na webu modrý („STŘEDOBASOVÝ REPRODUKTOR…“), H3 tmavý.
   Barva nadpisu nastavená u bloku má dál přednost. */
.tf-popis h2 { color: var(--tf-h2-color, var(--tf-accent)); }
/* blok s nastavenou barvou dostane .tf-styled — i tam musí H2 zůstat modrý,
   pokud barvu nadpisu výslovně nezměníte (základ by spadl na --tf-heading) */
.tf-popis .tf-styled.tf-head h2 { color: var(--tf-c-head, var(--tf-h2-color, var(--tf-accent))); }
.tf-popis h3 { font-weight: var(--tf-fw-head, 600); }

/* Styl nadpisu „S barevnou linkou“ = podpis jejich H1: krátká modrá linka
   100 × 2 px pod textem místo podtržení přes celou šířku. */
.tf-popis .tf-head.tf-head--line h2 {
    display: block;
    border-bottom-width: 0;
    padding-bottom: 0;
}
.tf-popis .tf-head.tf-head--line h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    margin-top: 14px;
    background: var(--tf-c-accent, var(--tf-accent));
}
.tf-popis .tf-head.tf-head--center.tf-head--line h2::after { margin-left: auto; margin-right: auto; }
.tf-popis .tf-head .tf-sub { font-size: 15px; }

/* --- tlačítka --- */
.tf-popis .tf-cta__btn { letter-spacing: .02em; }
.tf-popis .tf-cta__btn:hover { opacity: 1; filter: brightness(1.08); }

/* --- štítky ---
   Neutrální = bílá pilulka s šedým rámečkem, akcentová = modrá pilulka
   („NABÍZENÉ ZNAČKY“), obrysová = modrý rámeček. */
.tf-popis .tf-badge { letter-spacing: .05em; padding: 8px 16px; }
.tf-popis .tf-badge--accent { background: #0096d6; border-color: #0096d6; color: #fff; }
.tf-popis .tf-badge--outline { color: var(--tf-accent); border-color: var(--tf-accent); }

/* Pruh parametrů — podpisový prvek jejich popisů reproduktorů:
   modrý pás s parametry oddělenými svislými čarami
   („Dvoupásmové | 8 Ω | 60 W RMS | 85 dB | 43–20000 Hz“).
   Varianta štítků „Pruh parametrů“. Každá položka má modré pozadí i sama,
   takže i v prohlížeči bez :has() zůstane čitelná (jen s mezerami). */
.tf-popis .tf-badge.tf-badge--strip {
    position: relative;
    background: var(--tf-c-bg, var(--tf-accent));
    border: 0;
    border-radius: 0;
    color: var(--tf-c-text, #ffffff);
    font-size: var(--tf-fs, 16px);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    padding: 15px 20px;
}
.tf-popis .tf-badges:has(> .tf-badge--strip) {
    gap: 0;
    justify-content: center;
    background: var(--tf-c-bg, var(--tf-accent));
    border-radius: var(--tf-radius-sm, 4px);
    overflow: hidden;
    margin: var(--tf-mt, 15px) 0 var(--tf-mb, 40px);
}
.tf-popis .tf-badge--strip + .tf-badge--strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30%;
    bottom: 30%;
    width: 1px;
    background: rgba(255, 255, 255, .45);
}
@media (max-width: 640px) {
    .tf-popis .tf-badge.tf-badge--strip { padding: 10px 14px; font-size: 14px; }
}

/* --- kotvová navigace: pilulky ve stylu webu --- */
.tf-popis .tf-nav__item { text-transform: uppercase; letter-spacing: .04em; }

/* --- karty: bílé, 5 px, jemný stín jako filtry a boxy na webu --- */
.tf-popis .tf-cols__item,
.tf-popis .tf-review--card,
.tf-popis .tf-icons--cards .tf-icons__item {
    border-color: var(--tf-c-border, var(--tf-border));
    box-shadow: var(--tf-shadow);
    transition: box-shadow .2s;
}
.tf-popis .tf-cols__item:hover,
.tf-popis .tf-icons--cards .tf-icons__item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.tf-popis .tf-cols--soft .tf-cols__item,
.tf-popis .tf-cols--plain .tf-cols__item { box-shadow: none; }
.tf-popis .tf-cols__item h3 { color: var(--tf-heading); }

/* --- ikony / USP --- */
.tf-popis .tf-icons__item span { text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; }
.tf-popis .tf-icons--cards .tf-icons__item { border-radius: var(--tf-radius); }

/* --- FAQ: jako jejich rozbalovací otázky — šedý rámeček, hover stín, šipka --- */
.tf-popis .tf-faq__item {
    border-radius: var(--tf-radius);
    transition: box-shadow .2s;
}
.tf-popis .tf-faq__item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.tf-popis .tf-faq__item summary {
    padding: var(--tf-py, 16px) 52px var(--tf-py, 16px) var(--tf-px, 20px);
    font-size: 16.5px;
    font-weight: 600;
}
.tf-popis .tf-faq__item summary::after {
    content: "";
    width: 9px;
    height: 9px;
    right: 22px;
    border-radius: 0;
    background: none;
    border-right: 2px solid var(--tf-c-accent, var(--tf-accent));
    border-bottom: 2px solid var(--tf-c-accent, var(--tf-accent));
    transform: translateY(-70%) rotate(45deg);
}
.tf-popis .tf-faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.tf-popis .tf-faq__item[open] summary { border-bottom-color: var(--tf-c-border, var(--tf-border)); }
.tf-popis .tf-faq__a { padding: 16px var(--tf-px, 20px); }

/* --- tabulka parametrů: jako parametry produktu na webu --- */
/* nadpis tabulky je <caption>, ne nadpis — bez tohohle by jako jediný nebyl verzálkami */
.tf-popis .tf-specs caption {
    font-family: var(--tf-font-head, var(--tf-font, inherit));
    text-transform: var(--tf-tt, none);
    letter-spacing: var(--tf-ls, normal);
    font-size: 18px;
}
.tf-popis .tf-specs th { color: #222222; }
.tf-popis .tf-specs tr:nth-child(even) td { background: #fcfcfc; }

/* --- výhody / nevýhody --- */
.tf-popis .tf-pm__col { border-radius: var(--tf-radius); }
.tf-popis .tf-pm__col h3 { font-size: 16px; }

/* --- kroky --- */
.tf-popis .tf-steps--cards .tf-steps__item {
    background: #ffffff;
    border: 1px solid var(--tf-border);
    box-shadow: var(--tf-shadow);
}
.tf-popis .tf-styled.tf-steps.tf-steps--cards .tf-steps__item { background: var(--tf-c-bg, #ffffff); }

/* --- recenze: žluté hvězdičky webu, modrá linka --- */
.tf-popis .tf-review { border-radius: 0 var(--tf-radius) var(--tf-radius) 0; }
.tf-popis .tf-review--card { border-radius: var(--tf-radius); }

/* --- CTA: modrý pás se žlutým tlačítkem (značkové barvy modrá + žlutá) --- */
.tf-popis .tf-cta.tf-cta--accent .tf-cta__btn,
.tf-popis .tf-styled.tf-cta.tf-cta--accent .tf-cta__btn {
    background: var(--tf-c-accent, #ffbb00);
    color: #222222;
}

/* --- zvýrazněný box ---
   „Informace“ = světle modrý s modrou linkou; „Poznámka“ = box značky,
   tak jak ho mají u výrobců (bílý, šedý rámeček kolem dokola). */
.tf-popis .tf-box { border-radius: var(--tf-radius); }
.tf-popis .tf-box--info { background: #eef7fc; border-color: var(--tf-accent); }
.tf-popis .tf-box--note {
    background: #ffffff;
    border: 1px solid #c9c9c9;
    padding: var(--tf-py, 20px) var(--tf-px, 24px);
}
.tf-popis .tf-styled.tf-box.tf-box--note { background: var(--tf-c-bg, #ffffff); border-color: var(--tf-c-accent, #c9c9c9); }

/* --- TIP odborníka --- */
.tf-popis .tf-tip__label { text-transform: uppercase; letter-spacing: .05em; border-radius: 8px; }

/* --- hero --- */
.tf-popis .tf-hero__overlay h2 { color: #ffffff; }
.tf-popis .tf-hero__badge { background: #0096d6; border-radius: 8px; }

/* --- oddělovač --- */
.tf-popis .tf-divider { border-top-color: var(--tf-border); }

/* --- obrázky a galerie --- */
.tf-popis .tf-media__badge { background: #0096d6; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase; }

/* --- „Otestováno REPROOBCHODEM“ (blok tested) ---
   Převzatý prvek z webu (.rating-section, např. /monacor-dt-25n/): modrý
   rámeček 2 px, vlevo šedý sloupec 30 % s nadpisem a hvězdičkami, vpravo text.
   Velikosti v em jako v originále (2em / 1.5em / 2.1em ze 14 px), takže se
   box úměrně zvětší s „Velikostí textu“ bloku. */
.tf-popis .tf-tested {
    display: flex;
    align-items: stretch;
    margin: var(--tf-mt, 30px) 0 var(--tf-mb, 30px);
    border: 2px solid var(--tf-c-accent, var(--tf-accent));
    background: #ffffff;
    color: var(--tf-c-text, var(--tf-text));
    font-size: var(--tf-fs, var(--tf-size));
}
.tf-popis .tf-tested__head {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--tf-py, 20px) var(--tf-px, 20px);
    background: var(--tf-c-bg, #f2f2f2);
}
.tf-popis .tf-tested__title {
    margin: 0;
    font-size: 2em;
    line-height: 1.15;
    color: var(--tf-c-head, var(--tf-h2-color, var(--tf-accent)));
}
.tf-popis .tf-tested__sub {
    margin: 2px 0 0;
    font-size: 1.5em;
    line-height: 1.2;
    color: #555555;
    text-transform: var(--tf-tt, none);
    letter-spacing: var(--tf-ls, normal);
}
.tf-popis .tf-tested__stars {
    margin-top: 4px;
    font-size: 2.1em;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--tf-c-accent, var(--tf-accent));
}
.tf-popis .tf-tested__body {
    flex: 1 1 70%;
    min-width: 0;
    padding: var(--tf-py, 20px) var(--tf-px, 20px);
}
.tf-popis .tf-tested__body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    .tf-popis .tf-tested { flex-direction: column; }
    .tf-popis .tf-tested__head { flex-basis: auto; max-width: none; }
}