/* =============================================================================
   TOPNÝŽEBŘÍK.CZ — KONSOLIDOVANÝ STYLESHEET
   Soubor:  styly-v1.02.css
   Verze:   1.02
   Datum:   2026-08
   -----------------------------------------------------------------------------
   Nahrazuje původní soubory:
     main.css (v2.0), kategorie.css, homepage-v7.css, produkt-v2.css,
     ostatni.css, blog.css, oprava-menu.css (v2)

   Načítat jako JEDINÝ vlastní CSS soubor, vždy AŽ ZA systémovým CSS Shoptetu.

   -----------------------------------------------------------------------------
   CHANGELOG

   1.02 (2026-08)
     + Bublina (tooltip) s názvem barvy u barevných variant produktu —
       sekce 16f. Text se bere z atributu data-nazev na .prod-barva.
       V HTML nahraď title="…" za data-nazev="…", jinak se vedle bubliny
       zobrazí i nativní tooltip prohlížeče.
     + Nové proměnné --prod-barva-tip-bg a --prod-barva-tip-text (sekce 1).

   1.01 (2026-08) — konsolidace
     + Zapracována oprava megamenu (původní oprava-menu.css v2) přímo do
       sekce 5; odstraněna pravidla z main.css, která si s ní odporovala.
     ~ Sloučeny všechny :root bloky do jedné sekce (1).
     ~ Sloučeny identické komponenty: .kat-stitek + .prod-stitek,
       pill tagy .kat-parametricka-link + .prod-varianta-link +
       .prod-kategorie__link (sekce 14). Názvy tříd zachovány — HTML
       se měnit nemusí.
     ! Opraven překryv breakpointů u .seo-subcategories
       (max-width: 768px → 767px; na přesně 768px platila obě pravidla).
     ~ Vyčištěny nánosy overridů v .srv-hero (hodnota/popisek/kontakty
       byly definovány dvakrát, podruhé s !important).
     ~ Sloučeny dvojité deklarace .srv-dp-tabulka img a
       .hp-rozcestnik__ikona svg.
     ~ Přečíslovány sekce (v původních souborech chyběla čísla 3 a byla
       zdvojena 3 a 5).

   -----------------------------------------------------------------------------
   OBSAH
     1.  CSS proměnné
     2.  Písma (Poppins)
     3.  Typografie & globální prvky
     4.  Hlavička & top-bar
     5.  Hlavní navigace & megamenu
     6.  Systémové příznaky (štítky / flags)
     7.  Produktový výpis — název produktu
     8.  Podkategorie (seo-subcategories + subcategories)
     9.  Filtrační panel
    10.  Pořadí filtrů (parametry)
    11.  Produktový detail — systémové úpravy
    12.  Propojení produktů (interconnection)
    13.  Slevový kód (dm-coupon)
    14.  Sdílené komponenty (štítek, pill tag)
    15.  Kategorie (.kat-*)
    16.  Produktová karta (.prod-*)
    17.  Homepage (.tz-*, .pk-*, .hp-*)
    18.  Blog (.blog-*)
    19.  Servisní stránky (.srv-*)

   -----------------------------------------------------------------------------
   POZNÁMKA K PROMĚNNÝM
     --color-primary (#00a8ee), --color-text (#24242e) a --font-primary
     nejsou v tomto souboru definovány záměrně — dodává je šablona Shoptetu.
     Všude jsou použity s fallbackem, takže styly fungují i bez nich.
     Pokud by je šablona přestala dodávat, odkomentuj blok v sekci 1.
   ============================================================================= */


/* =============================================================================
   1. CSS PROMĚNNÉ
   ============================================================================= */

:root {
    /* --- Fallback globálních proměnných šablony (viz poznámka výše) ---
    --color-primary: #00a8ee;
    --color-text:    #24242e;
    --font-primary:  'Poppins', sans-serif;
    */

    /* Značka */
    --tz-brand:                  #da2935;
    --tz-brand-dark:             #aa1721;

    /* Kategorie — karta hlavní kategorie */
    --kat-hlavni-bg:             #f7f7f8;
    --kat-hlavni-bg-hover:       #edeeef;
    --kat-hlavni-bg-blog:        #fdd8db;
    --kat-hlavni-bg-blog-hover:  #fcc4c8;
    --kat-hlavni-radius:         10px;
    --kat-hlavni-w:              112px;
    --kat-hlavni-h:              145px;
    --kat-hlavni-img-h:          65px;
    --kat-hlavni-gap:            10px;
    --kat-hlavni-label-size:     12px;
    --kat-hlavni-label-color:    var(--color-text, #1a1a1a);
    --kat-hlavni-h-mobile:       120px;
    --kat-hlavni-img-h-mobile:   50px;
    --kat-hlavni-gap-mobile:     6px;
    --kat-hlavni-label-size-mob: 10px;

    /* Produkt — rozměrové varianty */
    --prod-rozmery-bg:           #f0f0f1;
    --prod-rozmery-bg-hover:     #e2e2e4;
    --prod-rozmery-text:         var(--color-text, #24242e);
    --prod-rozmery-current:      #2e9e44;
    --prod-rozmery-current-bg:   #ffffff;
    --prod-rozmery-radius:       10px;

    /* Produkt — barevné varianty */
    --prod-barva-size:           44px;
    --prod-barva-size-mob:       40px;
    --prod-barva-border:         #e0e0e0;
    --prod-barva-current:        #1aa01a;
    --prod-barva-tip-bg:         #24242e;
    --prod-barva-tip-text:       #ffffff;

    /* Homepage — rozcestník */
    --hp-roz-bg:                 #f1f2f4;
    --hp-roz-bg-hover:           #e6e8ec;
    --hp-roz-ikona:              #2d3a5e;
    --hp-roz-label:              #2d3a5e;
    --hp-roz-radius:             14px;
    --hp-roz-gap:                12px;
    --hp-roz-ikona-size:         58px;
    --hp-roz-min-h:              128px;
    --hp-roz-znacky-bg:          #fdeef0;
    --hp-roz-znacky-bg-hover:    #fbdde1;
    --hp-roz-znacky-border:      #da2935;

    /* Homepage — trust panel
       Pozn.: --tz-trust-brand a --tz-trust-ink-900 nejsou v CSS nikde použity
       (gradient panelu má barvy natvrdo). Ponechány pro případné inline styly
       v HTML — pokud je nikde nepoužíváš, můžeš je smazat. */
    --tz-trust-brand:            #da2935;
    --tz-trust-brand-dark:       #aa1721;
    --tz-trust-ink-900:          #2a0c0e;
    --tz-trust-radius:           24px;

    /* Servisní stránky */
    --srv-primary:               #da2935;
    --srv-primary-dark:          #aa1721;
    --srv-text:                  #24242e;
    --srv-muted:                 #6b6b7a;
    --srv-border:                #e4e4e4;
    --srv-bg:                    #f7f7f8;
    --srv-white:                 #ffffff;
    --srv-radius:                12px;
    --srv-radius-sm:             8px;
    --srv-font:                  'Poppins', sans-serif;
}


/* =============================================================================
   2. PÍSMA — Poppins pro celý projekt
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navigation-in a,
.price strong,
.products-block.products .p .price span,
.btn:not(.cart-count),
a.btn:not(.cart-count),
.fav-cat li a,
.user-action-tabs li a,
.cart-widget .popup-widget-inner::before,
.cart-widget-product-name a,
.quantity .increase::before,
.quantity .decrease::before,
.cart-widget-product > span,
.search-whisperer ul::before,
.search-whisperer .p-info span,
.search-whisperer .price,
.search-box::before,
.search-whisperer-documents a,
.box-bg-variant .categories a,
.box-filters::before,
.param-filter-top::before,
.subcategories.with-image li a .text,
.name,
.category-header label,
.pagination > a,
.pagination > strong,
.search-results-groups #search-group-categories .search-results-group-list ul li a,
.availability-value,
.price-final,
.p-gifts-heading,
.p-gift-name,
.shp-tabs-holder ul.shp-tabs li a,
.all-param span,
#productsAlternative::before,
.rate-average,
.vote-form::before,
#variants::before,
.var-dostupnost,
.variant-name,
.vote-title,
ol.cart-header li a,
ol.cart-header li strong,
.cart-table tr td.p-name a,
.price-wrapper,
a.cart-related-name,
.empty-cart-boxes ul li a,
.payment-info,
.payment-shipping-price,
.cart-item-name,
.cart-item-price,
.order-summary-item.helper,
.recapitulation-single,
.reca-number,
.id--15 .cart-table .p-name,
.id--15 .cart-table .p-price,
#register-form > fieldset .form-group:not(.consents) label,
a.login-btn.facebook,
a.login-btn.google,
a.login-btn.seznam,
ul.manufacturers ul li,
.search-whisperer-empty,
.menu-helper > ul > li a,
.filtrovat,
.tab-mobil,
.free-gift-name,
.id--9 .free-product-gifts-wrapper::before,
.vote-form > form::before,
#footer .contact-box::before,
.external-fonts-loaded,
.blank-mode,
body,
html,
.external-fonts-loaded body,
body.blank-mode,
.category-appendix,
.empty-content-404 h1,
.dropdown-menu > li > a,
.header-top .btn.cart-count .cart-price,
.news-item-widget h5,
.header-top .oblibeneBtn em,
.navigation-buttons > a[data-target="cart"] i {
    font-family: 'Poppins', sans-serif !important;
}


/* =============================================================================
   3. TYPOGRAFIE & GLOBÁLNÍ PRVKY
   ============================================================================= */

h1, .h1 {
    font-size: 2.3em;
}

@media only screen and (max-width: 800px) {
    h2, .h2 {
        font-size: 35px !important;
    }
}

/* Zaoblené rohy tlačítek a prvků */
.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a,
.pagination > strong,
a.login-btn {
    border-radius: 30px;
}

/* Checkbox — ikona zaškrtnutí u poznámky k objednávce */
input[type="checkbox"] + label[for="add-note"]::after {
    width:            22px;
    height:           22px;
    content:          "\e919";
    font-family:      ikony;
    color:            #fff;
    left:             0;
    font-size:        10px;
    text-align:       center;
    line-height:      22px;
    background-color: var(--color-primary, #00a8ee);
}


/* =============================================================================
   4. HLAVIČKA & TOP-BAR
   ============================================================================= */

@media screen and (min-width: 768px) {
    .project-email,
    .project-phone {
        font-weight: 400 !important;
        font-size:   14px !important;
    }

    /* POZOR: provozní doba je natvrdo v CSS. Web na jiném místě uvádí
       Po–Ne 8:00–17:00 — před dalšími úpravami sjednotit. */
    .top-navigation-bar .project-phone::after {
        content: " (Po - Pá 8:00 - 17:00)" !important;
    }
}

@media screen and (min-width: 992px) {
    .top-navigation-bar .project-phone::after {
        color:       #A3A3A3;
        font-size:   13px;
        font-weight: 400;
        margin-left: 5px;
        display:     inline-block;
    }
}

/* E-mail v hlavičce — desktop */
@media screen and (min-width: 1200px) {
    .top-navigation-bar .project-email {
        display:     inline-block;
        font-size:   16px;
        font-weight: bold;
        margin-left: 24px;
        color:       var(--color-primary, #00a8ee);
    }

    a.project-email::before {
        content:   '\e910';
        font-size: 16px;
    }
}

/* E-mail v hlavičce — mobil (jen ikona) */
@media screen and (min-width: 360px) and (max-width: 767px) {
    .top-navigation-contacts {
        display: block !important;
    }

    .top-navigation-contacts .project-phone {
        display: none !important;
    }

    .top-navigation-contacts .project-email {
        display:  block !important;
        position: absolute;
        right:    164px;
        top:      15px;
        color:    #A3A3AF;
    }

    a.project-email::before {
        content: '\e910';
    }

    .top-navigation-contacts .project-email span {
        display: none;
    }
}


/* =============================================================================
   5. HLAVNÍ NAVIGACE & MEGAMENU
   -----------------------------------------------------------------------------
   Zapracována oprava z původního oprava-menu.css (v2). Řešila:
     1. Drobečková navigace a nadpis stránky se vykreslovaly NAD rozbaleným
        megamenu a zakrývaly jeho horní část; průjezd myší menu zavíral.
        → řeší z-index na #header a .menu-level-2.
     2. max-height: 160px z main.css ořezával delší třetí úroveň a rozbíjel
        logiku .has-more-items (span.more-items-trigger).
        → původní pravidlo je zde ODSTRANĚNO, ne přepsáno.
     3. min-height na .has-third-level nebyl omezen na druhou úroveň a
        zbytečně nafukoval výšku dropdownu.
        → min-height zůstává jen na položkách druhé úrovně.
   ============================================================================= */

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

    /* --- Barevnost lišty --- */
    #header::after {
        background-color: var(--tz-brand, #da2935);
    }

    .navigation-in {
        background-color: transparent;
    }

    .navigation-in > ul > li > a,
    .submenu-arrow::after,
    .menu-helper::after {
        color: #fff;
    }

    .navigation-in a:hover {
        background-color: var(--tz-brand-dark, #aa1721) !important;
    }

    .menu-level-2 a:hover {
        background-color: #ffffff !important;
    }

    /* --- Stacking: hlavička nad obsahem stránky --- */
    #header {
        position: relative;
        z-index:  500;
    }

    .navigation-in > ul > li.ext > ul.menu-level-2 {
        z-index: 501;
    }

    /* --- Výšky sloupců megamenu ---
       min-height jen na druhé úrovni (dorovnává sloupce),
       .has-third-level se nenafukuje. */
    .navigation-in > ul > li.ext > ul > li {
        min-height: 130px;
    }

    .navigation-in li.has-third-level {
        min-height: 0;
    }

    /* --- Třetí úroveň: bez ořezu (kvůli .has-more-items) ---
       !important ponecháno záměrně — systémové CSS Shoptetu může
       max-height nastavovat vlastním pravidlem. */
    .navigation-in > ul > li.ext > ul > li > div > ul,
    .navigation-in > ul > li.ext > ul > li > div > ul.menu-level-3 {
        max-height: none !important;
        min-height: 0;
    }
}

/* Větší padding položek menu na širokých desktopech */
@media screen and (min-width: 1200px) {
    .navigation-in > ul > li > a {
        padding: 25px 30px;
    }
}


/* =============================================================================
   6. SYSTÉMOVÉ PŘÍZNAKY (ŠTÍTKY / FLAGS)
   ============================================================================= */

.flag.flag-action,
.flag.flag-tip,
.flag.flag-new,
.flag.flag-gift,
.flag.flag-discount,
.flag.flag-freeshipping {
    background-color: #ff7925;
}


/* =============================================================================
   7. PRODUKTOVÝ VÝPIS — název produktu
   ============================================================================= */

.products-block.products .p .name {
    height: 80px;
}


/* =============================================================================
   8. PODKATEGORIE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   8a. seo-subcategories — SEO sekce v textu kategorie
   -------------------------------------------------------------------------- */

.seo-subcategories {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    margin:     0 -6px 36px -6px;
    padding:    26px 0;
    position:   relative;
}

.seo-subcategories li {
    list-style: none;
    flex:       0 0 auto;
    padding:    6px;
}

.seo-subcategories li a {
    box-shadow:      none;
    position:        relative;
    display:         flex;
    align-items:     center;
    height:          88px;
    padding:         12px;
    font-weight:     500;
    color:           #24242E;
    border:          1px solid #e4e4e4;
    text-decoration: none !important;
}

.seo-subcategories li a:hover {
    border-color: var(--color-primary, #00a8ee) !important;
}

.seo-subcategories li a .text {
    max-height:  62px;
    overflow:    hidden;
    line-height: 20px;
    font-size:   14px;
    font-weight: bold;
}

.seo-subcategories.with-image li a .image {
    text-align: center;
}

.seo-subcategories.with-image li a .text {
    padding-left:  5px;
    flex-grow:     0;
    text-align:    left;
    display:       inline-block;
    overflow:      hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .seo-subcategories li a {
        height: 70px !important;
    }

    .seo-subcategories.with-image li a .image {
        width: 55px !important;
    }

    .seo-subcategories.with-image li a .text {
        width: auto !important;
    }
}

/* OPRAVENO ve v1.01: bylo max-width: 768px → překrývalo se s pravidlem výše */
@media (max-width: 767px) {
    .seo-subcategories.with-image li a .image {
        width: 30% !important;
    }

    .seo-subcategories li {
        padding: 4px;
    }

    .seo-subcategories li a {
        height: 73px;
    }
}

/* Menší text v SEO podkategoriích na stránkách kategorií */
html .type-category .seo-subcategories li a .text {
    font-size:   11.9px;
    line-height: 1.3em;
    font-weight: 500 !important;
}


/* -----------------------------------------------------------------------------
   8b. subcategories — systémový widget Shoptetu
   -------------------------------------------------------------------------- */

.subcategories::before,
.subcategories::after {
    height: 0px !important;
}

@media (min-width: 768px) {
    .subcategories li a {
        height: 70px !important;
    }

    .subcategories.with-image li a .image {
        width: 55px !important;
    }

    .subcategories.with-image li a .image img {
        max-height: 45px !important;
    }

    .subcategories.with-image li a .text {
        width: auto !important;
    }
}

/* Mobil — dvě položky vedle sebe */
@media (max-width: 767px) {
    .subcategories li {
        width: 50% !important;
    }

    .subcategories.with-image li a {
        width: 100%;
    }

    .subcategories.with-image li a .image {
        width: 30% !important;
    }

    .subcategories.with-image li a .text {
        width: 70% !important;
    }
}

/* Zvýrazněná podkategorie (custom třída .highlitedsub) */
.highlitedsub a {
    background: #ffe9eb;
}

.highlitedsub a:hover {
    background: #ffd8db;
}

/* Logo značky nad podkategorií */
.imageznacka {
    width:      100%;
    text-align: center;
}

.imageznacka img {
    max-height: 30px !important;
}

/* Výpis podkategorií v příspěvcích (blog / post) */
.type-post .subcategories.with-image li a {
    box-shadow:    0 0 15px rgba(0, 0, 0, 0.05);
    border:        1px solid rgba(0, 0, 0, 0.07);
    padding-right: 0;
}

.type-post .subcategories.with-image li a .text {
    font-size:   85%;
    line-height: 1.3em;
    color:       #000 !important;
    padding-top: 30px;
    width:       100% !important;
}

.type-post .subcategories .text {
    padding-top: 25px;
}

.type-post .subcategories li a::after,
.type-post .subcategories li a::before {
    display: none;
}


/* =============================================================================
   9. FILTRAČNÍ PANEL
   ============================================================================= */

/* Zrušení výchozích pozadí a rámečků obálky */
html .box-filters {
    background-color: transparent !important;
    border:           0 solid #E4E4E4 !important;
}

.filter-sections {
    background-color: unset !important;
}

/* Každá filtrační sekce jako "karta" */
.type-category #filters .param-filter-top form,
.type-category .filter-section form {
    padding:        15px;
    margin-bottom:  20px !important;
    background:     #F6F6F6;
    border-radius:  5px;
    border:         1px solid #E4E4E4 !important;
    padding-bottom: 0px !important;
}

.filter-section {
    padding:    0px !important;
    border-top: 0px !important;
}

/* Hover na položce filtru — bez přebarvení pozadí */
.filter-section form > fieldset > div:not(.advanced-filters-wrapper):hover {
    background-color: transparent !important;
}

/* Stockový filtr — bez rámečku */
.type-category #filters .param-filter-top form[action="/action/ProductsListing/setStockFilter/"] {
    border-width: 0px !important;
    background:   transparent !important;
    margin:       0px !important;
}

/* Doubledot filtr — opravy odsazení labelů */
.filter-section form[action="/action/ProductsListing/setStockFilter/"] fieldset div label,
.filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] fieldset div:first-of-type label {
    margin: 0 !important;
}

.filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] {
    padding-top: 0px !important;
}

/* První sekce bez horního paddingu */
.filter-section form:first-of-type {
    padding-top: 0px !important;
}

/* Prázdné formuláře bez rámečku */
.type-category .filter-section form:not(:has(div)) {
    border: none !important;
}

/* Formuláře s disabled vstupy — průhledné.
   POZOR: .param-filter-top form je zde uveden podruhé a přebíjí
   pozadí i rámeček nastavené výše. Ponecháno beze změny, aby se
   nezměnil vzhled — pokud to není záměr, odeber ho z tohoto selektoru. */
.type-category #filters .param-filter-top form,
.type-category .filter-section form:has(input[disabled]) {
    border-color: transparent !important;
    background:   transparent !important;
}

/* Odsazení labelů uvnitř sekce */
.filter-section fieldset div:first-of-type label {
    margin-top: 15px;
}

.filter-section fieldset div:last-of-type label {
    margin-bottom: 15px;
}

/* Skrytí nedostupných (disabled) možností filtru */
.filter-section input[type="checkbox"]:disabled + label,
.filter-section input[type="radio"]:disabled + label {
    display: none;
}

/* Hover widget filtrů — sloupcový layout, skrytý výrobce */
#category-filter-hover #manufacturer-filter {
    display: none;
}

#category-filter-hover {
    display:        flex !important;
    flex-direction: column !important;
}

/* Slider pro parametry */
.slider-wrapper.dkLab__slider-parameter {
    margin: unset !important;
}

.filters-wrapper > .filters > .slider-wrapper {
    display: none;
}

/* Zobrazení „Více / Méně" u filtračních hodnot */
.more-param:not(.rozbaleno) form fieldset div:nth-child(n+6) {
    display: none;
}

.more-param-link::after {
    content: " více";
}

.rozbaleno .more-param-link::after {
    content: " méně";
}

.more-param-link {
    font-size:       13px;
    color:           var(--color-primary, #00a8ee);
    margin-top:      12px;
    display:         inline-block;
    text-decoration: underline;
    cursor:          pointer;
    margin-bottom:   15px;
}

.more-param-link:hover {
    text-decoration: none;
}


/* =============================================================================
   10. POŘADÍ FILTRŮ
   ============================================================================= */

/* -----------------------------------------------------------------------------
   10a. Globální pořadí
   -------------------------------------------------------------------------- */

.filter-section-parametric-id-221 { order: -101; }  /* Cena s DPH */
.filter-section-parametric-id-65  { order: -100; }  /* Značka */
.filter-section-parametric-id-20  { order:  -99; }  /* Šířka */
.filter-section-parametric-id-104 { order:  -99; }  /* Příslušenství */
.filter-section-parametric-id-17  { order:  -98; }  /* Výška */
.filter-section-parametric-id-41  { order:  -97; }  /* Výkon */
.filter-section-parametric-id-38  { order:  -96; }  /* Barva */
.filter-section-parametric-id-62  { order:  -95; }  /* Série */
.filter-section-parametric-id-56  { order:  -94; }  /* Možnost vytápění */
.filter-section-parametric-id-293 { order:  -93; }  /* Typ připojení */
.filter-section-parametric-id-200 { order:  -92; }  /* Typ středového připojení */
.filter-section-parametric-id-23  { order:  -91; }  /* Tvar */
.filter-section-parametric-id-194 { order:  -90; }  /* Styl */
.filter-section-parametric-id-68  { order:  -89; }  /* Výbava */
.filter-section-parametric-id-35  { order:  -88; }  /* Materiál */
.filter-section-parametric-id-53  { order:  -87; }  /* Místo určení */
.filter-section-parametric-id-287 { order:  -86; }  /* Instalace */
.filter-section-parametric-id-95  { order:  -85; }  /* Produkt */
.filter-section-parametric-id-359 { order:  -84; }  /* Rozměr */

/* -----------------------------------------------------------------------------
   10b. Topné tyče — přepis pro kategorii
   -------------------------------------------------------------------------- */

body[class*="in-topne-tyce"] .filter-section-parametric-id-485 { order: -96; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-68  { order: -95; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-23  { order: -94; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-62  { order: -93; }

/* -----------------------------------------------------------------------------
   10c. Topné žebříky + koupelnové radiátory
   -------------------------------------------------------------------------- */

:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-221 { order: -101; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-65  { order: -100; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-20  { order:  -99; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-17  { order:  -98; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-41  { order:  -97; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-59  { order:  -96; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-38  { order:  -95; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-62  { order:  -94; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-56  { order:  -93; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-293 { order:  -92; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-200 { order:  -91; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-23  { order:  -90; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-194 { order:  -89; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-68  { order:  -88; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-35  { order:  -87; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-53  { order:  -86; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-287 { order:  -85; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-95  { order:  -84; }
:is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-359 { order:  -83; }


/* =============================================================================
   11. PRODUKTOVÝ DETAIL — systémové úpravy
   ============================================================================= */

/* Pořadí bloků v detailu */
#content .p-detail {
    display:        flex;
    flex-direction: column;
}

#content .p-detail #related               { order: 31 !important; }
#content .p-detail .p-detail-tabs-wrapper { order: 32 !important; }
#content .p-detail #productsAlternative   { order: 33 !important; }

/* Tabulka v rozšířeném popisu — zebra řádky */
.type-detail .extended-description table tr:nth-child(odd) {
    background: #fbf9f9;
}

/* Zobrazení všech řádků tabulky i ve sbalené verzi */
.type-detail .extended-description:not(.otevreno) table tr:nth-child(n+9) {
    display: table-row !important;
}

/* Skrytí bloku „Všechny parametry" (duplikát záložky) */
.type-detail .all-param {
    display: none !important;
}


/* =============================================================================
   12. PROPOJENÍ PRODUKTŮ (interconnection)
   ============================================================================= */

.c-product-interconnection-detail-params {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    flex-start;
}

.c-product-interconnection-detail-params.is-template--Classic
.c-product-interconnection-detail-params__type {
    max-width:   100%;
    line-height: 1;
    color:       #000;
    font-weight: 700;
    font-size:   14px;
}

.c-product-interconnection-detail-params__products {
    gap: 20px;
}

/* Výběrová čísla — šedé pozadí, bez podtržení */
.c-product-interconnection-detail-params__products.is-type--numbers.is-display--box
span[class^=item-type] {
    background-color: #F1F1F1 !important;
    text-decoration:  none !important;
}

.c-product-interconnection-detail-params__products a {
    text-decoration: none !important;
}

/* Hover — černý rámeček */
.c-product-interconnection-detail-params__products a:hover span[class^=item-type] {
    border-color: #000;
}

/* Aktivní varianta — zelený rámeček */
.c-product-interconnection-detail-params__products.is-type--numbers.is-display--box
a.is-current span[class^=item-type] {
    box-shadow:   none;
    border-color: #008F1B;
}

/* Oddělení skupin interconnection */
.c-product-interconnection-detail-params + .c-product-interconnection-detail-params {
    margin-top: 20px;
}

/* Obrázková varianta */
.c-product-interconnection-detail-params__products.is-type--photos {
    gap: 8px;
}

.c-product-interconnection-detail-params__products.is-type--photos .item-type-img {
    box-sizing:          content-box;
    background-size:     contain;
    background-position: center;
    border-color:        #a3a3a3;
    border-radius:       15px;
    margin:              0;
    width:               84px;
    height:              84px;
}


/* =============================================================================
   13. SLEVOVÝ KÓD (dm-coupon)
   ============================================================================= */

.dm-coupon-div {
    border:           dashed 1px #d53546 !important;
    border-radius:    0px !important;
    background-color: #fff5ee !important;
    color:            #000000 !important;
    padding:          12px !important;
    font-size:        16px !important;
}

.dm-coupon-div span {
    color: #d53546 !important;
}

.dm-coupon-div::before {
    background-color: #f3782b !important;
    color:            #ffffff !important;
    font-size:        16px !important;
}


/* =============================================================================
   14. SDÍLENÉ KOMPONENTY
   -----------------------------------------------------------------------------
   Ve v1.01 sloučeno: .kat-stitek a .prod-stitek byly identické,
   stejně jako tři pill komponenty. Názvy tříd zůstávají zachovány,
   HTML se nemění.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   14a. Štítek (inline label)
   HTML: <span class="kat-stitek">Hlavní kategorie</span>
         <span class="prod-stitek">Klíčové vlastnosti</span>
   -------------------------------------------------------------------------- */

.kat-stitek,
.prod-stitek {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          5px 12px;
    font-family:      var(--font-primary, 'Poppins', sans-serif);
    font-size:        9px;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.5px;
    line-height:      1;
    color:            #1a1d23;
    background-color: #ffffff;
    border:           1px dashed #b0b0b0;
    border-radius:    50px;
}

/* Odstraní výchozí mezery odstavce, pokud obsahuje pouze štítek */
p:has(> .kat-stitek),
p:has(> .prod-stitek) {
    margin-bottom: 0 !important;
    margin-top:    0 !important;
}

/* -----------------------------------------------------------------------------
   14b. Pill tag — rozcestníkové odkazy
   Použití: .kat-parametricka-link (kategorie), .prod-varianta-link
            (varianty produktu), .prod-kategorie__link (kategorie produktu)
   -------------------------------------------------------------------------- */

.kat-parametricka-grid,
.prod-varianta-grid,
.prod-kategorie__grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    padding:    10px 0;
    list-style: none;
    margin:     0;
}

.prod-kategorie__grid {
    padding: 0;
}

.kat-parametricka-link,
.prod-varianta-link,
.prod-kategorie__link {
    display:          inline-flex;
    align-items:      center;
    padding:          6px 13px;
    background-color: #f0f0f1;
    border-radius:    50px;
    font-family:      var(--font-primary, 'Poppins', sans-serif);
    font-size:        11px;
    font-weight:      500;
    color:            var(--color-text, #24242e);
    text-decoration:  none !important;
    white-space:      nowrap;
    border:           1px solid transparent;
    transition:       background-color 0.2s ease-in-out,
                      border-color     0.2s ease-in-out,
                      color            0.2s ease-in-out;
}

.kat-parametricka-link:hover,
.prod-varianta-link:hover,
.prod-kategorie__link:hover {
    background-color: #e2e2e4;
}

.kat-parametricka-link:focus-visible,
.prod-varianta-link:focus-visible,
.prod-kategorie__link:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
}

/* Varianta — blog (odkaz na informativní článek) */
.kat-parametricka-link-blog {
    background-color: #fdd8db;
}

.kat-parametricka-link-blog:hover {
    background-color: #fcc4c8;
}

@media (max-width: 767px) {
    .kat-parametricka-link,
    .prod-varianta-link,
    .prod-kategorie__link {
        font-size: 10px;
        padding:   5px 11px;
    }
}


/* =============================================================================
   15. KATEGORIE (.kat-*)
   -----------------------------------------------------------------------------
   Komponenty:
     15a. Hlavní kategorie — grid karet s obrázkem
     15b. Tip — zvýrazněný blok s radou
     15c. FAQ — accordion
     15d. Průvodce výběrem — accordion
     15e. Identita — autoritativní blok (nesbalovat)
     15f. Skrytí sekce „Nejprodávanější"
   ============================================================================= */

/* -----------------------------------------------------------------------------
   15a. HLAVNÍ KATEGORIE
   HTML:
     <ul class="kat-hlavni-grid">
       <li class="kat-hlavni-item">
         <a class="kat-hlavni-link" href="...">
           <span class="kat-hlavni-img-wrapper"><img ... /></span>
           <span class="kat-hlavni-label">Název</span>
         </a>
       </li>
     </ul>
   Varianta blog: <a class="kat-hlavni-link kat-hlavni-link-blog" href="/blog/...">
   Breakpointy: desktop 112×145 px, mobil ≤767px tři karty v řadě, výška 120 px
   -------------------------------------------------------------------------- */

.kat-hlavni-grid {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--kat-hlavni-gap);
    padding:         15px 0;
    list-style:      none;
    margin:          0;
    justify-content: flex-start;
}

.kat-hlavni-item {
    flex:          0 0 var(--kat-hlavni-w);
    margin-bottom: 5px !important;
}

.kat-hlavni-link {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    background-color: var(--kat-hlavni-bg);
    border-radius:    var(--kat-hlavni-radius);
    padding:          12px 8px;
    height:           var(--kat-hlavni-h);
    text-decoration:  none !important;
    box-sizing:       border-box;
    border:           1px solid transparent;
    transition:       background-color 0.2s ease-in-out,
                      transform        0.2s ease-in-out,
                      border-color     0.2s ease-in-out;
}

.kat-hlavni-link:hover {
    background-color: var(--kat-hlavni-bg-hover);
    transform:        translateY(-2px);
}

.kat-hlavni-link:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
    border-radius:  var(--kat-hlavni-radius);
}

.kat-hlavni-img-wrapper {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          var(--kat-hlavni-img-h);
    width:           100%;
    margin-bottom:   8px;
}

.kat-hlavni-img-wrapper img {
    max-height: 100%;
    max-width:  100%;
    object-fit: contain;
    display:    block;
}

.kat-hlavni-label {
    color:         var(--kat-hlavni-label-color);
    font-size:     var(--kat-hlavni-label-size);
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-weight:   700;
    text-align:    center;
    line-height:   1.2;
    margin:        0;
    word-wrap:     break-word;
    overflow-wrap: break-word;
}

/* Varianta — blog */
.kat-hlavni-link-blog {
    background-color: var(--kat-hlavni-bg-blog);
}

.kat-hlavni-link-blog:hover {
    background-color: var(--kat-hlavni-bg-blog-hover);
}

@media (max-width: 767px) {
    .kat-hlavni-grid {
        gap:             var(--kat-hlavni-gap-mobile);
        justify-content: flex-start;
    }

    .kat-hlavni-item {
        flex:      0 0 calc(33.333% - 4px);
        min-width: 0;
    }

    .kat-hlavni-link {
        height:        var(--kat-hlavni-h-mobile);
        padding:       8px 4px;
        border-radius: 8px;
    }

    .kat-hlavni-img-wrapper {
        height: var(--kat-hlavni-img-h-mobile);
    }

    .kat-hlavni-label {
        font-size: var(--kat-hlavni-label-size-mob);
    }
}


/* -----------------------------------------------------------------------------
   15b. TIP
   HTML: <p class="kat-tip">Text tipu…</p>
   -------------------------------------------------------------------------- */

.kat-tip {
    position:         relative;
    background-color: #f0faf3;
    border-radius:    8px;
    padding:          12px 16px 12px 44px;
    font-size:        14px;
    line-height:      1.6;
    color:            var(--color-text, #24242e);
    margin:           16px 0;
}

.kat-tip::before {
    content:     '💡';
    position:    absolute;
    left:        14px;
    top:         12px;
    font-size:   16px;
    line-height: 1.6;
}


/* -----------------------------------------------------------------------------
   15c. FAQ — accordion
   Každá položka v samostatném rámečku, šipka vlevo, otázka vpravo od ní.

   HTML:
     <section class="kat-faq">
       <h2 class="kat-faq__nadpis">Časté otázky o topných žebřících</h2>
       <div class="kat-faq__seznam">
         <div class="kat-faq__polozka je-zabaleno">
           <button class="kat-faq__otazka" aria-expanded="false">
             <span class="kat-faq__ikona" aria-hidden="true"></span>
             Text otázky
           </button>
           <div class="kat-faq__odpoved"><p>Text odpovědi…</p></div>
         </div>
       </div>
     </section>

   Skrývání: třídou .je-zabaleno na .kat-faq__polozka (atribut hidden
   Shoptet v popisu kategorie ignoruje). Toggle řeší inline <script>.
   Schema.org FAQPage markup patří do <head> přes Shoptet snippet.
   -------------------------------------------------------------------------- */

.kat-faq {
    margin:  40px 0 20px;
    padding: 0;
}

.kat-faq__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   20px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 12px;
    padding:     0;
}

.kat-faq__seznam {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        0;
}

.kat-faq__polozka {
    border:        1px solid #e4e4e4;
    border-radius: 10px;
    background:    #f7f7f8;
    overflow:      hidden;
    transition:    border-color 0.15s ease-in-out,
                   background   0.15s ease-in-out;
}

.kat-faq__polozka:has(.kat-faq__otazka[aria-expanded="true"]) {
    border-color: #d0d0d2;
    background:   #ffffff;
}

.kat-faq__otazka {
    display:       flex;
    align-items:   center;
    gap:           12px;
    width:         100%;
    box-sizing:    border-box;
    padding:       14px 18px;
    background:    none;
    border:        none;
    cursor:        pointer;
    text-align:    left;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     15px;
    font-weight:   600;
    line-height:   1.4;
    color:         var(--color-text, #24242e);
    transition:    color 0.15s ease-in-out;
    min-width:     0;
    overflow-wrap: break-word;
    word-break:    break-word;
}

.kat-faq__otazka:hover {
    color: var(--color-primary, #00a8ee);
}

.kat-faq__otazka:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: -2px;
    border-radius:  10px;
}

/* Ikona šipky — čistě CSS, bez ikonového fontu */
.kat-faq__ikona {
    flex-shrink:   0;
    display:       inline-block;
    width:         28px;
    height:        28px;
    border:        1px solid #d0d0d2;
    border-radius: 50%;
    background:    #ffffff;
    position:      relative;
    transition:    transform    0.25s ease-in-out,
                   border-color 0.15s ease-in-out,
                   background   0.15s ease-in-out;
}

.kat-faq__ikona::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         7px;
    height:        7px;
    border-right:  2px solid var(--color-text, #24242e);
    border-bottom: 2px solid var(--color-text, #24242e);
    transform:     translate(-50%, -65%) rotate(45deg);
    transition:    border-color 0.15s ease-in-out,
                   transform    0.25s ease-in-out;
}

/* Stav: rozbaleno */
.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona {
    border-color: var(--color-primary, #00a8ee);
    background:   #e8f6fd;
}

.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona::after {
    border-color: var(--color-primary, #00a8ee);
    transform:    translate(-50%, -30%) rotate(225deg);
}

.kat-faq__otazka:hover .kat-faq__ikona,
.kat-faq__otazka:hover .kat-faq__ikona::after {
    border-color: var(--color-primary, #00a8ee);
}

/* Skrytí odpovědi */
.kat-faq__polozka.je-zabaleno .kat-faq__odpoved {
    display: none;
}

.kat-faq__odpoved {
    margin:      0;
    padding:     0 18px 18px 58px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.7;
    color:       var(--color-text, #24242e);
}

.kat-faq__odpoved p {
    margin: 0 0 10px;
}

.kat-faq__odpoved p:last-child {
    margin-bottom: 0;
}

.kat-faq__odpoved a {
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.kat-faq__odpoved a:hover {
    text-decoration: none;
}

@media (max-width: 767px) {
    .kat-faq__nadpis {
        font-size: 17px;
    }

    .kat-faq__otazka {
        font-size: 14px;
        padding:   12px 14px;
        gap:       10px;
    }

    .kat-faq__ikona {
        width:  26px;
        height: 26px;
    }

    .kat-faq__odpoved {
        font-size: 13px;
        padding:   0 14px 14px 50px;
    }
}

/* Notebook / střední desktop — aby otázka nepřepadávala na dva řádky */
@media (max-width: 1280px) and (min-width: 768px) {
    .kat-faq__otazka {
        font-size: 14px;
    }
}


/* -----------------------------------------------------------------------------
   15d. PRŮVODCE VÝBĚREM — accordion
   Jeden velký blok, tlačítko otevře celý obsah.
   Toggle stejný jako FAQ (.je-zabaleno na rootu).

   HTML:
     <section class="kat-pruvodce je-zabaleno">
       <button class="kat-pruvodce__hlavicka" aria-expanded="false">
         <span class="kat-pruvodce__titulek">
           <span class="kat-pruvodce__ikona-kniha" aria-hidden="true"></span>
           Průvodce výběrem — Jak vybrat topný žebřík
         </span>
         <span class="kat-pruvodce__ikona" aria-hidden="true"></span>
       </button>
       <div class="kat-pruvodce__obsah">
         <div class="kat-pruvodce__krok">
           <h3 class="kat-pruvodce__krok-nadpis">
             <span class="kat-pruvodce__cislo">1</span> Název kroku
           </h3>
           <p>Text…</p>
         </div>
       </div>
     </section>

   Závislost: .kat-tip (15b)
   -------------------------------------------------------------------------- */

.kat-pruvodce {
    margin:        32px 0 16px;
    border:        1px solid #e4e4e4;
    border-radius: 10px;
    background:    #f7f7f8;
    overflow:      hidden;
    transition:    border-color 0.15s ease-in-out,
                   background   0.15s ease-in-out;
}

.kat-pruvodce:not(.je-zabaleno) {
    border-color: #d0d0d2;
    background:   #ffffff;
}

.kat-pruvodce__hlavicka {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    width:           100%;
    box-sizing:      border-box;
    padding:         16px 20px;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:      color 0.15s ease-in-out;
}

.kat-pruvodce__hlavicka:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: -2px;
    border-radius:  10px;
}

.kat-pruvodce__titulek {
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     16px;
    font-weight:   700;
    line-height:   1.3;
    color:         var(--color-text, #24242e);
    transition:    color 0.15s ease-in-out;
    min-width:     0;
    overflow-wrap: break-word;
    word-break:    break-word;
}

.kat-pruvodce__hlavicka:hover .kat-pruvodce__titulek {
    color: var(--color-primary, #00a8ee);
}

/* Ikona knihy */
.kat-pruvodce__ikona-kniha {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   8px;
    background:      #e8f6fd;
    font-size:       16px;
    line-height:     1;
}

.kat-pruvodce__ikona-kniha::before {
    content: '📋';
}

/* Šipka vpravo — stejný vzor jako .kat-faq__ikona */
.kat-pruvodce__ikona {
    flex-shrink:   0;
    display:       inline-block;
    width:         28px;
    height:        28px;
    border:        1px solid #d0d0d2;
    border-radius: 50%;
    background:    #ffffff;
    position:      relative;
    transition:    transform    0.25s ease-in-out,
                   border-color 0.15s ease-in-out,
                   background   0.15s ease-in-out;
}

.kat-pruvodce__ikona::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         7px;
    height:        7px;
    border-right:  2px solid var(--color-text, #24242e);
    border-bottom: 2px solid var(--color-text, #24242e);
    transform:     translate(-50%, -65%) rotate(45deg);
    transition:    border-color 0.15s ease-in-out,
                   transform    0.25s ease-in-out;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona {
    border-color: var(--color-primary, #00a8ee);
    background:   #e8f6fd;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona::after {
    border-color: var(--color-primary, #00a8ee);
    transform:    translate(-50%, -30%) rotate(225deg);
}

.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona,
.kat-pruvodce__hlavicka:hover .kat-pruvodce__ikona::after {
    border-color: var(--color-primary, #00a8ee);
}

/* Skrytí obsahu */
.kat-pruvodce.je-zabaleno .kat-pruvodce__obsah {
    display: none;
}

.kat-pruvodce__obsah {
    padding:    0 20px 24px;
    border-top: 1px solid #e4e4e4;
}

.kat-pruvodce__krok {
    padding-top: 24px;
}

.kat-pruvodce__krok + .kat-pruvodce__krok {
    border-top: 1px solid #ebebec;
}

.kat-pruvodce__krok-nadpis {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 12px;
    padding:     0;
}

/* Číslo kroku — modrý kroužek */
.kat-pruvodce__cislo {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      var(--color-primary, #00a8ee);
    color:           #ffffff;
    font-size:       13px;
    font-weight:     700;
    line-height:     1;
}

.kat-pruvodce__obsah p {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.7;
    color:       var(--color-text, #24242e);
    margin:      0 0 12px;
}

.kat-pruvodce__obsah p:last-child {
    margin-bottom: 0;
}

.kat-pruvodce__seznam {
    margin:      0 0 12px;
    padding:     0 0 0 20px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.7;
    color:       var(--color-text, #24242e);
}

.kat-pruvodce__seznam li {
    margin-bottom: 6px;
}

.kat-pruvodce__seznam li:last-child {
    margin-bottom: 0;
}

/* Tabulka srovnání */
.kat-pruvodce__tabulka-wrapper {
    overflow-x:    auto;
    margin:        0 0 12px;
    border:        1px solid #e4e4e4;
    border-radius: 8px;
}

.kat-pruvodce__tabulka {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    line-height:     1.5;
    color:           var(--color-text, #24242e);
}

.kat-pruvodce__tabulka th {
    background:    #f0f0f1;
    font-weight:   600;
    text-align:    left;
    padding:       9px 14px;
    border-bottom: 1px solid #e4e4e4;
    white-space:   nowrap;
}

.kat-pruvodce__tabulka td {
    padding:        9px 14px;
    border-bottom:  1px solid #ebebec;
    vertical-align: top;
}

.kat-pruvodce__tabulka tr:last-child td {
    border-bottom: none;
}

.kat-pruvodce__tabulka tbody tr:hover td {
    background: #fafafa;
}

@media (max-width: 767px) {
    .kat-pruvodce__hlavicka {
        padding: 14px 16px;
    }

    .kat-pruvodce__titulek {
        font-size: 14px;
        gap:       8px;
    }

    .kat-pruvodce__ikona-kniha {
        width:     28px;
        height:    28px;
        font-size: 14px;
    }

    .kat-pruvodce__ikona {
        width:  26px;
        height: 26px;
    }

    .kat-pruvodce__obsah {
        padding: 0 14px 18px;
    }

    .kat-pruvodce__krok {
        padding-top: 18px;
    }

    .kat-pruvodce__krok-nadpis {
        font-size: 14px;
    }

    .kat-pruvodce__obsah p,
    .kat-pruvodce__seznam {
        font-size: 13px;
    }

    .kat-pruvodce__tabulka th,
    .kat-pruvodce__tabulka td {
        font-size: 12px;
        padding:   7px 10px;
    }
}

/* Notebook / střední desktop — zabrání přetečení titulku */
@media (max-width: 1280px) and (min-width: 768px) {
    .kat-pruvodce__titulek {
        font-size: 15px;
    }
}


/* -----------------------------------------------------------------------------
   15e. IDENTITA
   Vždy viditelný blok — NESBALOVAT. AI nástroje z něj čtou fakta o e-shopu.

   HTML:
     <section class="kat-identita">
       <div class="kat-identita__text"><p>Text s fakty…</p></div>
       <ul class="kat-identita__benefity">
         <li class="kat-identita__benefit">
           <span class="kat-identita__benefit-ikona">🏆</span>
           <span class="kat-identita__benefit-text">Popis benefitu</span>
         </li>
       </ul>
     </section>
   -------------------------------------------------------------------------- */

.kat-identita {
    margin:        32px 0 16px;
    padding:       20px 24px;
    border:        1px solid #e4e4e4;
    border-left:   3px solid var(--color-primary, #00a8ee);
    border-radius: 10px;
    background:    #f7f7f8;
}

.kat-identita__text {
    margin-bottom: 16px;
}

.kat-identita__text p {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   14px;
    line-height: 1.75;
    color:       var(--color-text, #24242e);
    margin:      0;
}

.kat-identita__benefity {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    list-style:  none;
    margin:      0;
    padding:     16px 0 0;
    border-top:  1px solid #e4e4e4;
}

.kat-identita__benefit {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 14px;
    background:    #ffffff;
    border:        1px solid #e4e4e4;
    border-radius: 50px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     13px;
    font-weight:   500;
    color:         var(--color-text, #24242e);
    white-space:   nowrap;
}

.kat-identita__benefit-ikona {
    font-size:   14px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .kat-identita {
        padding: 16px;
    }

    .kat-identita__text p {
        font-size: 13px;
    }

    .kat-identita__benefit {
        font-size: 12px;
        padding:   5px 11px;
    }
}


/* -----------------------------------------------------------------------------
   15f. SKRYTÍ SEKCE „NEJPRODÁVANĚJŠÍ"
   Pro zobrazení změň na display: block
   -------------------------------------------------------------------------- */

.type-category .products-top-wrapper {
    display: none;
}


/* =============================================================================
   16. PRODUKTOVÁ KARTA (.prod-*)
   -----------------------------------------------------------------------------
   Komponenty:
     16a. Štítek v <div> — oprava blokového zobrazení v krátkém popisku
     16b. Text výrobce — accordion
     16c. Kategorie produktu — pill rozcestník (styl viz 14b)
     16d. Galerie barev výrobce
     16e. Dostupné rozměry
     16f. Barevné varianty
   Pill tagy .prod-varianta-* a štítek .prod-stitek jsou v sekci 14.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   16a. ŠTÍTEK V DIVU
   Zajistí, že <div> obalující štítek se chová jako blok a štítek začíná
   na novém řádku bez ohledu na render kontext krátkého popisku Shoptetu.
   -------------------------------------------------------------------------- */

.p-short-description div:has(> .kat-stitek),
.short-description div:has(> .kat-stitek),
.p-short-description div:has(> .prod-stitek),
.short-description div:has(> .prod-stitek) {
    display:       block;
    width:         100%;
    margin-top:    16px;
    margin-bottom: 6px;
}

.p-short-description div:has(> .kat-stitek):first-child,
.short-description div:has(> .kat-stitek):first-child,
.p-short-description div:has(> .prod-stitek):first-child,
.short-description div:has(> .prod-stitek):first-child {
    margin-top: 0;
}


/* -----------------------------------------------------------------------------
   16b. TEXT VÝROBCE — accordion
   HTML:
     <div>
       <span class="kat-stitek prod-vyrobce__toggle"
             aria-expanded="false" role="button" tabindex="0">Text výrobce</span>
     </div>
     <div class="prod-vyrobce__obsah je-zabaleno">
       <!-- původní HTML výrobce beze změn -->
     </div>

   Toggle (inline script v HTML):
     (function(){
       var btn = document.querySelector('.prod-vyrobce__toggle');
       if (!btn) return;
       btn.addEventListener('click', function(){
         var obsah = document.querySelector('.prod-vyrobce__obsah');
         var expanded = btn.getAttribute('aria-expanded') === 'true';
         btn.setAttribute('aria-expanded', !expanded);
         obsah.classList.toggle('je-zabaleno');
       });
       btn.addEventListener('keydown', function(e){
         if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); }
       });
     })();
   -------------------------------------------------------------------------- */

.prod-vyrobce__toggle {
    cursor:              pointer;
    display:             inline-flex !important;
    align-items:         center;
    gap:                 6px;
    user-select:         none;
    -webkit-user-select: none;
    transition:          background-color 0.15s ease-in-out,
                         border-color     0.15s ease-in-out,
                         color            0.15s ease-in-out;
}

/* Šipka vpravo od textu štítku */
.prod-vyrobce__toggle::after {
    content:       '';
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-right:  1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform:     rotate(45deg) translateY(-2px);
    transition:    transform 0.2s ease-in-out;
    flex-shrink:   0;
    margin-left:   2px;
}

.prod-vyrobce__toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-2px);
}

.prod-vyrobce__toggle:hover {
    background-color: #e2e2e4;
    border-color:     #999;
}

.prod-vyrobce__toggle:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
    border-radius:  50px;
}

.prod-vyrobce__obsah {
    margin-top:    12px;
    padding:       14px 18px;
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 8px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     13px;
    line-height:   1.7;
    color:         var(--color-text, #24242e);
}

.prod-vyrobce__obsah.je-zabaleno {
    display: none;
}

.prod-vyrobce__obsah p {
    margin: 0 0 8px;
}

.prod-vyrobce__obsah p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .prod-vyrobce__obsah {
        font-size: 12px;
        padding:   12px 14px;
    }
}


/* -----------------------------------------------------------------------------
   16c. KATEGORIE PRODUKTU
   Sekce „Produkt najdete také v kategoriích" v dlouhém popisku.
   Vzhled pillů je definován v sekci 14b.

   HTML:
     <section class="prod-kategorie" aria-label="Kategorie produktu">
       <p class="prod-kategorie__nadpis">Produkt najdete také v kategoriích</p>
       <ul class="prod-kategorie__grid">
         <li class="prod-kategorie__item">
           <a class="prod-kategorie__link" href="/url/">Název kategorie</a>
         </li>
       </ul>
     </section>
   -------------------------------------------------------------------------- */

.prod-kategorie {
    margin:  32px 0 16px;
    padding: 0;
}

.prod-kategorie__nadpis {
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          #aaa;
    margin:         0 0 10px;
    padding:        0;
}


/* -----------------------------------------------------------------------------
   16d. GALERIE BAREV VÝROBCE
   Mřížka náhledových čtverečků v sekci Text výrobce. Zachovává původní
   strukturu .plus-gallery-wrap, přidává layout a zalamování.
   -------------------------------------------------------------------------- */

.prod-galerie-barev {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin:    12px 0 16px;
    padding:   0;
}

.prod-galerie-barev .plus-gallery-item {
    width:         64px !important;
    height:        64px !important;
    border-radius: 6px;
    overflow:      hidden;
    border:        1px solid #e4e4e4;
    display:       inline-block;
    transition:    border-color 0.15s ease-in-out,
                   box-shadow   0.15s ease-in-out;
}

.prod-galerie-barev .plus-gallery-item:hover {
    border-color: var(--color-primary, #00a8ee);
    box-shadow:   0 2px 8px rgba(0, 168, 238, 0.15);
}

.prod-galerie-barev .plus-gallery-item a {
    display: block;
    width:   100%;
    height:  100%;
}

.prod-galerie-barev .plus-gallery-item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .prod-galerie-barev .plus-gallery-item {
        width:  52px !important;
        height: 52px !important;
    }
}


/* -----------------------------------------------------------------------------
   16e. DOSTUPNÉ ROZMĚRY
   Rozcestník na ROZMĚROVÉ varianty téhož produktu — stejná série, barva
   i typ připojení, mění se pouze rozměr. Aktuální rozměr má zelený rámeček
   a není klikatelný.

   Nezaměňovat s .prod-varianta-* (pill tagy) — tohle je výraznější
   komponenta určená pro rozměrový rozcestník.

   HTML:
     <div><span class="kat-stitek">Dostupné rozměry</span></div>
     <ul class="prod-rozmery-grid">
       <li class="prod-rozmery-item">
         <span class="prod-rozmery-link is-current" aria-current="true">400x930 mm</span>
       </li>
       <li class="prod-rozmery-item">
         <a class="prod-rozmery-link" href="/url-varianty/">400x1250 mm</a>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-rozmery-grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    padding:    10px 0 4px;
    list-style: none;
    margin:     0;
}

.prod-rozmery-item {
    flex:      0 0 auto;
    min-width: 0;
}

.prod-rozmery-link {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          11px 18px;
    background-color: var(--prod-rozmery-bg);
    border:           2px solid transparent;
    border-radius:    var(--prod-rozmery-radius);
    font-family:      var(--font-primary, 'Poppins', sans-serif);
    font-size:        14px;
    font-weight:      700;
    line-height:      1.2;
    color:            var(--prod-rozmery-text);
    text-decoration:  none !important;
    white-space:      nowrap;
    box-sizing:       border-box;
    transition:       background-color 0.18s ease-in-out,
                      border-color     0.18s ease-in-out;
}

/* Hover jen na klikatelných odkazech */
a.prod-rozmery-link:hover {
    background-color: var(--prod-rozmery-bg-hover);
}

.prod-rozmery-link:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
}

.prod-rozmery-link.is-current {
    background-color: var(--prod-rozmery-current-bg);
    border-color:     var(--prod-rozmery-current);
    color:            var(--prod-rozmery-text);
    cursor:           default;
    pointer-events:   none;
}

@media (max-width: 767px) {
    .prod-rozmery-grid {
        gap: 8px;
    }

    .prod-rozmery-link {
        padding:   9px 13px;
        font-size: 13px;
    }
}


/* -----------------------------------------------------------------------------
   16f. BAREVNÉ VARIANTY
   Rozcestník na BAREVNÉ varianty téhož produktu. Aktuální barva má zelený
   prstenec s bílým zatržítkem a není klikatelná.

   Název barvy se při najetí myší zobrazí v bublině — text se bere
   z atributu data-nazev (viz níže). Atribut title se už nepoužívá.

   HTML:
     <div><span class="kat-stitek">Barevné varianty</span></div>
     <ul class="prod-barvy-grid">
       <li class="prod-barvy-item">
         <span class="prod-barva is-current" aria-current="true"
               data-nazev="Bílá" aria-label="Bílá (aktuální barva)">
           <span class="prod-barva__kruh prod-barva--bila"></span>
         </span>
       </li>
       <li class="prod-barvy-item">
         <a class="prod-barva" href="/url-varianty/"
            data-nazev="Černá mat" aria-label="Černá mat">
           <span class="prod-barva__kruh prod-barva--cerna"></span>
         </a>
       </li>
     </ul>
   -------------------------------------------------------------------------- */

.prod-barvy-grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    padding:    10px 0 4px;
    list-style: none;
    margin:     0;
}

.prod-barvy-item {
    flex:   0 0 auto;
    margin: 0;
}

.prod-barva {
    position:        relative;   /* kotva pro bublinu s názvem barvy */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    border-radius:   50%;
    cursor:          pointer;
}

.prod-barva.is-current {
    cursor: default;
}

/* --- Bublina s názvem barvy (tooltip) ---
   Text se bere z atributu data-nazev na .prod-barva. Bez tohoto atributu
   se bublina nevykreslí. V HTML nepoužívej zároveň title="…" — prohlížeč
   by nad bublinou zobrazil ještě svůj vlastní nativní tooltip.
   Zobrazuje se i u aktuální (neklikatelné) barvy. */

.prod-barva[data-nazev]::after,
.prod-barva[data-nazev]::before {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    position:       absolute;
    left:           50%;
    z-index:        5;
    transition:     opacity    0.15s ease-in-out,
                    transform  0.15s ease-in-out,
                    visibility 0.15s ease-in-out;
}

/* Tělo bubliny */
.prod-barva[data-nazev]::after {
    content:       attr(data-nazev);
    bottom:        calc(100% + 9px);
    transform:     translate(-50%, 4px);
    padding:       5px 10px;
    background:    var(--prod-barva-tip-bg);
    color:         var(--prod-barva-tip-text);
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     11px;
    font-weight:   500;
    line-height:   1.3;
    white-space:   nowrap;
    border-radius: 6px;
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Šipka bubliny */
.prod-barva[data-nazev]::before {
    content:          '';
    bottom:           calc(100% + 4px);
    transform:        translate(-50%, 4px);
    width:            0;
    height:           0;
    border:           5px solid transparent;
    border-top-color: var(--prod-barva-tip-bg);
}

.prod-barva[data-nazev]:hover::after,
.prod-barva[data-nazev]:hover::before,
.prod-barva[data-nazev]:focus-visible::after,
.prod-barva[data-nazev]:focus-visible::before {
    opacity:    1;
    visibility: visible;
    transform:  translate(-50%, 0);
}

.prod-barva__kruh {
    position:      relative;
    display:       block;
    width:         var(--prod-barva-size);
    height:        var(--prod-barva-size);
    border-radius: 50%;
    border:        1px solid var(--prod-barva-border);
    box-sizing:    border-box;
    transition:    transform  0.15s ease-in-out,
                   box-shadow 0.15s ease-in-out;
}

.prod-barva:not(.is-current):hover .prod-barva__kruh {
    transform:  scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.prod-barva:focus-visible {
    outline: none;
}

.prod-barva:focus-visible .prod-barva__kruh {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
}

/* Aktuální barva — zelený prstenec + zatržítko */
.prod-barva.is-current .prod-barva__kruh {
    border:     3px solid var(--prod-barva-current);
    box-shadow: 0 0 0 1px #ffffff inset;
}

.prod-barva.is-current .prod-barva__kruh::after {
    content:       '';
    position:      absolute;
    left:          50%;
    top:           48%;
    width:         8px;
    height:        15px;
    border-right:  3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform:     translate(-50%, -58%) rotate(45deg);
    /* stín, aby bylo zatržítko čitelné i na světlém vzorníku */
    filter:        drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

/* Modifikátory barev — přidávej dle sortimentu */
.prod-barva--bila     { background: #ffffff; }
.prod-barva--cerna    { background: #1f1f1f; }
.prod-barva--antracit { background: #3a3a40; }
.prod-barva--chrom    { background: linear-gradient(135deg, #f2f2f2 0%, #c2c2c2 42%, #fafafa 52%, #9e9e9e 100%); }
.prod-barva--nerez    { background: linear-gradient(135deg, #e3e3e3 0%, #b6b6b6 50%, #d8d8d8 100%); }
.prod-barva--stribrna { background: linear-gradient(135deg, #ededed 0%, #c8c8c8 50%, #e0e0e0 100%); }
.prod-barva--zlata    { background: linear-gradient(135deg, #f0d98c 0%, #c9a23d 100%); }
.prod-barva--piskovec { background: #cbb48f; }
.prod-barva--bronz    { background: #8c6b3f; }
.prod-barva--verde    { background: #5f7a5b; }
.prod-barva--siena    { background: #a4522e; }
.prod-barva--moca     { background: #6e5743; }
.prod-barva--bridlice { background: linear-gradient(135deg, #555c61 0%, #3f4549 55%, #4d545a 100%); }
.prod-barva--agila    { background: #9a9b86; }
.prod-barva--fallback { background: #d8d8da; }

@media (max-width: 767px) {
    .prod-barvy-grid {
        gap: 10px;
    }

    .prod-barva__kruh {
        width:  var(--prod-barva-size-mob);
        height: var(--prod-barva-size-mob);
    }
}


/* =============================================================================
   17. HOMEPAGE
   -----------------------------------------------------------------------------
   Styly platné výhradně pro titulní stránku (.type-index) a sdílené
   komponenty, které se na ni váží.

   Komponenty:
     17a. Benefit banner (systémový)
     17b. Welcome obsah — omezení šířky GEO bloků
     17c. Carousel bannerů
     17d. Sekce značek
     17e. Rozcestník kategorií (ikonkový grid)
     17f. Trust / hero box (sdílené s kategoriemi)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   17a. BENEFIT BANNER
   -------------------------------------------------------------------------- */

.type-index .benefitBanner {
    border-bottom: none !important;
    margin-top:    10px;
}

.position--benefitHomepage {
    margin-bottom:  0px !important;
    padding-bottom: 0px !important;
}


/* -----------------------------------------------------------------------------
   17b. WELCOME OBSAH
   Omezení šířky vlastního HTML obsahu v .welcome bloku na 1100 px.
   Struktura Shoptetu: .welcome-wrapper > .welcome > div

   Shoptet na homepage někdy renderuje .welcome nebo jeho přímé children
   jako inline / table-cell kontext, kde button[width:100%] přeteče —
   proto se blokový kontext vynucuje.
   -------------------------------------------------------------------------- */

.type-index .welcome-wrapper .welcome {
    display:    block !important;
    width:      100%;
    overflow-x: hidden;
}

.type-index .welcome-wrapper .welcome > div {
    display:      block !important;
    width:        100%;
    max-width:    1100px;
    margin-left:  auto;
    margin-right: auto;
    box-sizing:   border-box;
}


/* -----------------------------------------------------------------------------
   17c. CAROUSEL BANNERŮ
   Portrait bannery 665×1000 px (poměr 2:3), multi-card.
   Počet viditelných slidů řídí proměnná --tz-visible; musí sedět
   s hodnotou VISIBLE v doprovodném JS (stejně jako --tz-gap ↔ GAP).
     Desktop:        4 bannery, gap 8 px
     Tablet ≤1024px: 3 bannery
     Mobil  ≤640px:  2 bannery

   HTML:
     <div class="tz-carousel-wrap">
       <div class="tz-carousel" id="tz-carousel">
         <div class="tz-carousel__viewport">
           <div class="tz-carousel__track" id="tz-carousel-track">
             <div class="tz-carousel__slide"><a href="..."><img …/></a></div>
           </div>
         </div>
         <button id="tz-carousel-prev" …></button>
         <button id="tz-carousel-next" …></button>
       </div>
       <div class="tz-carousel__dots" id="tz-carousel-dots"></div>
     </div>
   -------------------------------------------------------------------------- */

.tz-carousel-wrap {
    --tz-visible: 4;
    --tz-gap:     8px;

    width:         100%;
    margin-bottom: 0;
    padding:       16px 0 12px;
    box-sizing:    border-box;
}

.tz-carousel {
    position:            relative;
    width:               100%;
    -webkit-user-select: none;
    user-select:         none;
}

.tz-carousel.is-dragging {
    cursor: grabbing;
}

/* Viewport — ořízne přesahující slidy */
.tz-carousel__viewport {
    overflow: hidden;
    width:    100%;
}

/* Track — flex řada, animovaný translateX */
.tz-carousel__track {
    display:     flex;
    gap:         var(--tz-gap);
    transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Slide — šířka = (100% - (visible-1) × gap) / visible */
.tz-carousel__slide {
    flex:          0 0 calc((100% - (var(--tz-visible) - 1) * var(--tz-gap)) / var(--tz-visible));
    min-width:     0;
    overflow:      hidden;
    border-radius: 8px;
}

.tz-carousel__slide a {
    display:         block;
    text-decoration: none;
}

.tz-carousel__slide img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 665 / 1000;
    object-fit:   cover;
}

@media (max-width: 1024px) {
    .tz-carousel-wrap { --tz-visible: 3; }
}

@media (max-width: 640px) {
    .tz-carousel-wrap { --tz-visible: 2; }
}

/* Tečky */
.tz-carousel__dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    padding:         12px 0 4px;
}

.tz-carousel__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    #d0d0d0;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, transform 0.2s;
}

.tz-carousel__dot.is-active {
    background: var(--tz-brand, #da2935);
    transform:  scale(1.3);
}

.tz-carousel__dot:hover {
    background: var(--tz-brand-dark, #aa1721);
}

/* Šipky */
.tz-carousel__arrow {
    position:        absolute;
    top:             40%;
    transform:       translateY(-50%);
    background:      rgba(255, 255, 255, 0.92);
    border:          none;
    border-radius:   50%;
    width:           44px;
    height:          44px;
    cursor:          pointer;
    z-index:         10;
    color:           #24242e;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      background 0.2s, transform 0.15s;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.18);
}

.tz-carousel__arrow svg {
    width:        20px;
    height:       20px;
    stroke:       currentColor;
    stroke-width: 2.5;
    fill:         none;
}

.tz-carousel__arrow:hover {
    background: #ffffff;
    transform:  translateY(-50%) scale(1.08);
}

.tz-carousel__arrow.is-hidden {
    opacity:        0;
    pointer-events: none;
}

.tz-carousel__arrow--prev { left:  8px; }
.tz-carousel__arrow--next { right: 8px; }

@media (max-width: 640px) {
    .tz-carousel__arrow {
        width:  34px;
        height: 34px;
    }

    .tz-carousel__arrow svg {
        width:  16px;
        height: 16px;
    }
}


/* -----------------------------------------------------------------------------
   17d. SEKCE ZNAČEK
   Levý text + odkaz | pravý grid log značek.

   HTML:
     <section class="pk-brands">
       <div class="pk-brands__left">
         <h2>…</h2>
         <a href="/znacka/">Zobrazit všechny značky</a>
       </div>
       <div class="pk-brands__grid">
         <a class="pk-brand-item" href="…"><img … /></a>
       </div>
     </section>

   Desktop: levý sloupec 240 px, grid 4 sloupce
   Tablet ≤900px: menší levý sloupec
   Mobil  ≤640px: sloupcový layout, grid 2 sloupce
   -------------------------------------------------------------------------- */

.pk-brands {
    display:       flex;
    align-items:   center;
    gap:           32px;
    padding:       24px 28px;
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 12px;
    margin:        20px 0;
    box-sizing:    border-box;
}

.pk-brands__left {
    flex:      0 0 240px;
    min-width: 0;
}

.pk-brands__left h2 {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   16px;
    font-weight: 700;
    line-height: 1.4;
    color:       var(--color-text, #24242e);
    margin:      0 0 10px;
    padding:     0;
}

.pk-brands__left a {
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.pk-brands__left a:hover {
    text-decoration: none;
}

.pk-brands__grid {
    flex:                  1;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    min-width:             0;
}

.pk-brand-item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #ffffff;
    border:          1px solid #e4e4e4;
    border-radius:   10px;
    padding:         12px 10px;
    min-height:      64px;
    text-decoration: none !important;
    box-sizing:      border-box;
    transition:      border-color 0.2s ease-in-out,
                     box-shadow   0.2s ease-in-out;
}

.pk-brand-item:hover {
    border-color: var(--color-primary, #00a8ee);
    box-shadow:   0 2px 10px rgba(0, 168, 238, 0.12);
}

.pk-brand-item img {
    display:     block;
    max-width:   100%;
    max-height:  36px;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    margin:      0 auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .pk-brands {
        gap: 20px;
    }

    .pk-brands__left {
        flex: 0 0 190px;
    }

    .pk-brands__left h2 {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .pk-brands {
        flex-direction: column;
        align-items:    stretch;
        padding:        18px 16px;
        gap:            16px;
    }

    .pk-brands__left {
        flex: none;
    }

    .pk-brands__left h2 {
        font-size:     15px;
        margin-bottom: 6px;
    }

    .pk-brands__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pk-brand-item {
        min-height: 56px;
        padding:    10px 8px;
    }

    .pk-brand-item img {
        max-height: 30px;
    }
}


/* -----------------------------------------------------------------------------
   17e. ROZCESTNÍK KATEGORIÍ
   Světle šedé karty se zaoblenými rohy, line-art SVG ikonou a popiskem.

   HTML:
     <nav class="hp-rozcestnik" aria-label="Rychlý výběr kategorií">
       <ul class="hp-rozcestnik__grid">
         <li class="hp-rozcestnik__item">
           <a class="hp-rozcestnik__link" href="/teplovodni-topne-zebriky/">
             <span class="hp-rozcestnik__ikona" aria-hidden="true"><svg …></svg></span>
             <span class="hp-rozcestnik__label">Teplovodní topné žebříky</span>
           </a>
         </li>
         <li class="hp-rozcestnik__item">
           <a class="hp-rozcestnik__link hp-rozcestnik__link--znacky" href="/topne-zebriky-znacky/">…</a>
         </li>
       </ul>
     </nav>

   Breakpointy: ≥992px 5 dlaždic, ≤991px 4, ≤640px 3, ≤380px 2
   -------------------------------------------------------------------------- */

.hp-rozcestnik {
    margin:  24px 0 32px;
    padding: 0;
}

.hp-rozcestnik__grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   var(--hp-roz-gap);
    list-style:            none;
    margin:                0;
    padding:               0;
}

.hp-rozcestnik__item {
    margin:    0;
    min-width: 0;
}

.hp-rozcestnik__link {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    height:           100%;
    min-height:       var(--hp-roz-min-h);
    padding:          16px 10px;
    background-color: var(--hp-roz-bg);
    border:           1px solid transparent;
    border-radius:    var(--hp-roz-radius);
    text-decoration:  none !important;
    box-sizing:       border-box;
    transition:       background-color 0.2s ease-in-out,
                      transform        0.2s ease-in-out,
                      border-color     0.2s ease-in-out,
                      box-shadow       0.2s ease-in-out;
}

.hp-rozcestnik__link:hover {
    background-color: var(--hp-roz-bg-hover);
    transform:        translateY(-3px);
    box-shadow:       0 6px 18px rgba(45, 58, 94, 0.10);
}

.hp-rozcestnik__link:focus-visible {
    outline:        2px solid var(--color-primary, #00a8ee);
    outline-offset: 2px;
}

.hp-rozcestnik__ikona {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--hp-roz-ikona-size);
    height:          var(--hp-roz-ikona-size);
    margin:          0 auto;
    flex-shrink:     0;
}

/* Ve v1.01 sloučeno — původně dvě deklarace za sebou */
.hp-rozcestnik__ikona svg {
    display:         block;
    width:           100%;
    height:          100%;
    margin:          0 auto;
    stroke:          var(--hp-roz-ikona);
    stroke-width:    1.6;
    stroke-linecap:  round;
    stroke-linejoin: round;
    fill:            none;
    transition:      stroke 0.2s ease-in-out;
}

.hp-rozcestnik__label {
    display:       block;
    width:         100%;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     13px;
    font-weight:   600;
    line-height:   1.2;
    color:         var(--hp-roz-label);
    text-align:    center;
    margin:        0;
    word-wrap:     break-word;
    overflow-wrap: break-word;
}

/* Zvýrazněná dlaždice — Všechny značky A–Z */
.hp-rozcestnik__link--znacky {
    background-color: var(--hp-roz-znacky-bg);
}

.hp-rozcestnik__link--znacky:hover {
    background-color: var(--hp-roz-znacky-bg-hover);
}

.hp-rozcestnik__link--znacky .hp-rozcestnik__ikona svg {
    stroke: var(--hp-roz-znacky-border);
}

.hp-rozcestnik__link--znacky .hp-rozcestnik__label {
    color: var(--hp-roz-znacky-border);
}

@media (max-width: 991px) {
    .hp-rozcestnik__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    :root {
        --hp-roz-ikona-size: 48px;
    }

    .hp-rozcestnik__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   8px;
    }

    .hp-rozcestnik__link {
        min-height:    112px;
        padding:       14px 6px;
        gap:           10px;
        border-radius: 12px;
    }

    .hp-rozcestnik__label {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .hp-rozcestnik__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* -----------------------------------------------------------------------------
   17f. TRUST / HERO BOX
   Tmavý gradientový panel s kickerem, nadpisem, statistikami, trust-pointy,
   CTA tlačítky a disclaimerem. Sdílená komponenta — funguje na titulní
   stránce i ve spodním popisku kategorií. Namespace .tz-trust je nezávislý
   na .kat-identita.

   HTML (zkráceně):
     <section class="tz-trust" aria-label="O obchodě TOPNÝŽEBŘÍK.cz">
       <div class="tz-trust__inner">
         <span class="tz-trust__kicker">Proč TOPNÝŽEBŘÍK.cz</span>
         <h2 class="tz-trust__nadpis">…</h2>
         <p class="tz-trust__sub">…</p>
         <div class="tz-trust__stats">
           <div class="tz-trust__stat">
             <span class="tz-trust__stat-big">25 let</span>
             <span class="tz-trust__stat-lbl">…</span>
           </div>
         </div>
         <div class="tz-trust__points">
           <span class="tz-trust__point"><svg …></svg>Text</span>
         </div>
         <div class="tz-trust__cta">
           <a class="tz-trust__btn tz-trust__btn--light" href="…">…</a>
           <a class="tz-trust__btn tz-trust__btn--outline" href="tel:…">…</a>
         </div>
       </div>
     </section>

   Breakpointy: desktop 4 statistiky, ≤860px 2 statistiky, ≤560px užší padding
   -------------------------------------------------------------------------- */

.tz-trust {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--tz-trust-radius);
    color:         #ffffff;
    background:
        radial-gradient(130% 120% at 92% -20%, rgba(255, 160, 165, 0.28) 0%, rgba(255, 160, 165, 0) 50%),
        linear-gradient(135deg, #d12631 0%, #7e1118 100%);
    padding:    46px 40px;
    margin:     28px 0;
    box-sizing: border-box;
}

/* Dekorativní kruh vpravo dole */
.tz-trust::after {
    content:        "";
    position:       absolute;
    right:          -60px;
    bottom:         -60px;
    width:          260px;
    height:         260px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}

.tz-trust__inner {
    position: relative;
    z-index:  2;
}

.tz-trust__kicker {
    display:        inline-block;
    font-family:    var(--font-primary, 'Poppins', sans-serif);
    font-weight:    700;
    font-size:      12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          #ffd0d3;
}

.tz-trust__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    color:       #ffffff;
    font-size:   clamp(26px, 3.6vw, 38px);
    font-weight: 700;
    line-height: 1.12;
    margin:      8px 0 0;
    padding:     0;
    max-width:   none;
}

.tz-trust__sub {
    color:       #ffe1e3;
    margin:      14px 0 0;
    max-width:   none;
    font-size:   16px;
    line-height: 1.6;
}

/* Statistiky */
.tz-trust__stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   18px;
    margin:                30px 0 8px;
    padding:               0;
    list-style:            none;
}

.tz-trust__stat {
    padding-right: 14px;
    border-right:  1px solid rgba(255, 255, 255, 0.16);
}

.tz-trust__stat:last-child {
    border-right: none;
}

.tz-trust__stat-big {
    display:     block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size:   clamp(24px, 3.2vw, 32px);
    line-height: 1;
    color:       #ffffff;
}

.tz-trust__stat-lbl {
    display:     block;
    color:       #ffcdd0;
    font-size:   13px;
    margin-top:  6px;
    line-height: 1.4;
}

/* Klikatelná statistika (např. hodnocení e-shopu) */
.tz-trust__stat-link {
    display:         block;
    text-decoration: none !important;
    color:           inherit;
    transition:      opacity 0.2s ease;
}

.tz-trust__stat-link:hover {
    opacity: 0.82;
}

.tz-trust__stat-link:hover .tz-trust__stat-lbl {
    text-decoration: underline;
}

.tz-trust__stat-link:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 3px;
    border-radius:  6px;
}

/* Trust-pointy */
.tz-trust__points {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     26px 0 0;
    padding:    0;
    list-style: none;
}

.tz-trust__point {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    font-family:   var(--font-primary, 'Poppins', sans-serif);
    font-size:     14px;
    font-weight:   600;
    color:         #ffffff;
    background:    rgba(255, 255, 255, 0.10);
    border:        1px solid rgba(255, 255, 255, 0.18);
    padding:       9px 14px;
    border-radius: 999px;
}

.tz-trust__point svg {
    width:  15px;
    height: 15px;
    color:  #ffd0d3;
    flex:   none;
    stroke: currentColor;
}

/* CTA tlačítka */
.tz-trust__cta {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin:    28px 0 0;
}

.tz-trust__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none !important;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-weight:     700;
    font-size:       14.5px;
    border-radius:   12px;
    padding:         13px 20px;
    box-sizing:      border-box;
    transition:      transform 0.2s ease, background 0.2s ease;
}

.tz-trust__btn svg {
    width:  17px;
    height: 17px;
    stroke: currentColor;
    flex:   none;
}

.tz-trust__btn--light {
    background: #ffffff;
    color:      var(--tz-trust-brand-dark) !important;
}

.tz-trust__btn--light:hover {
    transform: translateY(-2px);
}

.tz-trust__btn--outline {
    background: transparent;
    color:      #ffffff !important;
    border:     1px solid rgba(255, 255, 255, 0.45);
}

.tz-trust__btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    transform:  translateY(-2px);
}

.tz-trust__disc {
    margin:      24px 0 0;
    font-size:   12.5px;
    color:       #f0b8bc;
    max-width:   none;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .tz-trust__stats {
        grid-template-columns: 1fr 1fr;
        gap:                   22px 18px;
    }

    .tz-trust__stat:nth-child(2) {
        border-right: none;
    }
}

@media (max-width: 560px) {
    .tz-trust {
        padding: 30px 22px;
    }

    .tz-trust__nadpis {
        font-size: 24px;
    }

    .tz-trust__btn {
        flex:            1 1 100%;
        justify-content: center;
    }
}


/* =============================================================================
   18. BLOG (.blog-*)
   -----------------------------------------------------------------------------
   Styly blogových článků. Šířka článku 860 px, stejná jako .srv-page.
   ============================================================================= */

.blog-article {
    max-width:   860px;
    margin:      0 auto;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   15px;
    line-height: 1.8;
    color:       var(--color-text, #24242e);
}

.blog-article a {
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.blog-article a:hover {
    text-decoration: none;
}

/* Úvodní perex */
.blog-perex {
    font-size:   17px;
    line-height: 1.75;
    color:       #4a4a5a;
    border-left: 3px solid var(--color-primary, #00a8ee);
    padding:     12px 20px;
    margin:      0 0 36px;
}

/* Obsah článku (table of contents) */
.blog-toc {
    background:    #f7f7f8;
    border:        1px solid #e4e4e4;
    border-radius: 10px;
    padding:       20px 24px;
    margin:        0 0 40px;
}

.blog-toc__nadpis {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color:          #aaa;
    margin:         0 0 14px;
}

.blog-toc__seznam {
    list-style:     none;
    margin:         0;
    padding:        0;
    counter-reset:  toc;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.blog-toc__polozka {
    counter-increment: toc;
}

.blog-toc__polozka a {
    color:           var(--color-text, #24242e);
    text-decoration: none;
    font-size:       14px;
    font-weight:     400;
    display:         flex;
    align-items:     baseline;
    gap:             10px;
    padding:         3px 0;
}

.blog-toc__polozka a::before {
    content:     counter(toc);
    font-size:   11px;
    font-weight: 600;
    color:       #bbb;
    min-width:   16px;
    flex-shrink: 0;
}

.blog-toc__polozka a:hover {
    color: var(--color-primary, #00a8ee);
}

/* Sekce */
.blog-sekce {
    margin: 48px 0;
}

.blog-sekce__nadpis {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size:   21px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 18px;
    padding:     0;
    line-height: 1.3;
}

.blog-sekce p {
    margin: 0 0 16px;
}

.blog-sekce p:last-child {
    margin-bottom: 0;
}

/* Tip — decentní zvýraznění textu (nahrazuje info kartičky) */
.blog-tip {
    border-left: 3px solid #e4e4e4;
    padding:     2px 0 2px 18px;
    color:       #5a5a6a;
    font-size:   14px;
    line-height: 1.75;
    margin:      20px 0;
}

/* Varianty — seznam možností bez barevných boxů */
.blog-varianty {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin:         24px 0;
    border:         1px solid #e4e4e4;
    border-radius:  10px;
    overflow:       hidden;
}

.blog-varianta {
    padding:       18px 20px;
    border-bottom: 1px solid #e4e4e4;
}

.blog-varianta:last-child {
    border-bottom: none;
}

.blog-varianta--doporucena {
    background: #f5fbff;
}

.blog-varianta__nadpis {
    font-size:   14px;
    font-weight: 700;
    color:       var(--color-text, #24242e);
    margin:      0 0 6px !important;
}

.blog-varianta p {
    font-size:   14px;
    line-height: 1.7;
    color:       #4a4a5a;
    margin:      0 !important;
}

.blog-varianta a {
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

/* Tabulka */
.blog-tabulka-wrapper {
    overflow-x:    auto;
    margin:        20px 0 28px;
    border:        1px solid #e4e4e4;
    border-radius: 10px;
}

.blog-tabulka {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    line-height:     1.5;
    color:           var(--color-text, #24242e);
}

.blog-tabulka th {
    background:     #f7f7f8;
    font-weight:    600;
    text-align:     left;
    padding:        10px 16px;
    border-bottom:  1px solid #e4e4e4;
    white-space:    nowrap;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color:          #666;
}

.blog-tabulka td {
    padding:        10px 16px;
    border-bottom:  1px solid #f0f0f1;
    vertical-align: top;
}

.blog-tabulka tr:last-child td {
    border-bottom: none;
}

.blog-tabulka tbody tr:hover td {
    background: #fafafa;
}

.blog-tabulka__zvyrazneny {
    background: #f5fbff;
}

/* Tučnější text jen v buňkách těla, ne v hlavičce */
.blog-tabulka__zvyrazneny:not(th) {
    font-weight: 500;
}

/* Obrázek */
.blog-img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 10px;
    margin:        28px 0;
}

/* Tlačítka kategorií */
.blog-kategorie-wrap {
    margin: 24px 0;
}

.blog-kategorie-nadpis {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          #aaa;
    margin:         0 0 10px;
}

.blog-kategorie-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

.blog-kategorie-grid a {
    display:         inline-flex;
    align-items:     center;
    padding:         6px 14px;
    background:      #f0f0f1;
    border-radius:   50px;
    font-family:     var(--font-primary, 'Poppins', sans-serif);
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-text, #24242e) !important;
    text-decoration: none !important;
    border:          1px solid transparent;
    white-space:     nowrap;
    transition:      background 0.15s, border-color 0.15s;
}

.blog-kategorie-grid a:hover {
    background: #e4e4e6;
}

.blog-kategorie-grid a.hlavni {
    background:   #e8f6fd;
    color:        var(--color-primary, #00a8ee) !important;
    border-color: #c2e4f5;
    font-weight:  600;
}

.blog-kategorie-grid a.hlavni:hover {
    background: #d4eef9;
}

/* Oddělovač sekcí */
.blog-oddelovac {
    height:     1px;
    background: #ebebed;
    margin:     48px 0;
    border:     none;
}

@media (max-width: 767px) {
    .blog-perex {
        font-size: 15px;
    }

    .blog-sekce__nadpis {
        font-size: 18px;
    }

    .blog-toc {
        padding: 16px 18px;
    }

    .blog-varianta {
        padding: 14px 16px;
    }

    .blog-tabulka th,
    .blog-tabulka td {
        padding:   8px 12px;
        font-size: 12px;
    }

    .blog-kategorie-grid a {
        font-size: 12px;
        padding:   5px 12px;
    }
}


/* =============================================================================
   19. SERVISNÍ STRÁNKY (.srv-*)
   -----------------------------------------------------------------------------
   Kontakty, O nás, Doprava a platba, Obchodní podmínky, Reklamace
   a vrácení zboží a další servisní stránky.

   Komponenty:
     19a. Layout stránky
     19b. Hero kontakt
     19c. Karta
     19d. Tabulka klíč–hodnota
     19e. Nadpis sekce
     19f. Galerie fotek
     19g. Seznam odkazů
     19h. CTA akce (reklamace, vrácení)
     19i. Mřížka dvou karet
     19j. Badge e-shopy
     19k. Hodnocení widget
     19l. Doprava a platba — tabulky
   ============================================================================= */

/* -----------------------------------------------------------------------------
   19a. LAYOUT SERVISNÍ STRÁNKY
   -------------------------------------------------------------------------- */

.srv-page {
    max-width:   860px;
    margin:      0 auto;
    font-family: var(--srv-font);
    font-size:   15px;
    line-height: 1.75;
    color:       var(--srv-text);
    padding:     0 0 40px;
}

.srv-page a {
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.srv-page a:hover {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   19b. HERO KONTAKT
   Velký uvítací blok s přímými kontaktními údaji.
   HTML: <div class="srv-hero"> … </div>

   Ve v1.01 vyčištěno: hodnota, popisek a rozložení kontaktů byly původně
   definovány dvakrát (podruhé v override bloku s !important). Zde je
   ponechána vždy jen výsledná, platná hodnota.
   -------------------------------------------------------------------------- */

.srv-hero {
    background:    var(--srv-primary);
    border-radius: var(--srv-radius);
    padding:       36px 40px;
    margin:        0 0 28px;
    color:         #ffffff;
    text-align:    center;
}

/* Shoptet přepisuje barvu odkazů globálními styly — !important je nutné */
.srv-hero,
.srv-hero p,
.srv-hero span,
.srv-hero a,
.srv-hero a:link,
.srv-hero a:visited,
.srv-hero a:hover,
.srv-hero a:active {
    color: #ffffff !important;
}

.srv-hero a,
.srv-hero a:link,
.srv-hero a:visited,
.srv-hero a:hover,
.srv-hero a:active {
    text-decoration: none !important;
}

.srv-hero__pretitulek {
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity:        0.75;
    margin:         0 0 8px;
}

.srv-hero__intro {
    font-size:   15px;
    line-height: 1.6;
    opacity:     0.9;
    margin:      0 0 28px;
}

/* Kontakty vždy pod sebou (dřívější řádkový layout byl overridem zrušen) */
.srv-hero__kontakty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            24px;
    flex-wrap:      wrap;
}

.srv-hero__telefon,
.srv-hero__email {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

.srv-hero__hodnota {
    font-size:       38px;
    font-weight:     700;
    line-height:     1.1;
    letter-spacing:  -0.5px;
    text-decoration: none !important;
}

.srv-hero__hodnota:hover {
    opacity: 0.85;
}

.srv-hero__popisek {
    font-size:   15px;
    font-weight: 400;
    opacity:     0.9;
}

/* Oddělovač — při sloupcovém layoutu nedává smysl.
   Pokud se hero vrátí k řádkovému rozložení, nastav display: block
   a šířku 1px / výšku 48px. */
.srv-hero__divider {
    display: none;
}

@media (max-width: 640px) {
    .srv-hero {
        padding: 24px 20px;
    }

    .srv-hero__hodnota {
        font-size: 26px;
    }
}


/* -----------------------------------------------------------------------------
   19c. KARTA
   HTML: <div class="srv-card"> … </div>
   Varianty: .srv-card--highlight (modrý okraj), .srv-card--warning (červený)
   -------------------------------------------------------------------------- */

.srv-card {
    background:    var(--srv-white);
    border:        1px solid var(--srv-border);
    border-radius: var(--srv-radius);
    padding:       24px 28px;
    margin-bottom: 20px;
}

.srv-card--highlight {
    border-left: 3px solid var(--color-primary, #00a8ee);
}

.srv-card--warning {
    border-left: 3px solid var(--srv-primary);
    background:  #fff8f8;
}

.srv-card__nadpis {
    font-family:    var(--srv-font);
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          var(--srv-muted);
    margin:         0 0 16px;
    padding:        0;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.srv-card__nadpis-ikona {
    font-size:   16px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .srv-card {
        padding: 18px;
    }
}


/* -----------------------------------------------------------------------------
   19d. TABULKA KLÍČ–HODNOTA
   HTML: <table class="srv-table"><tr><td>Klíč</td><td>Hodnota</td></tr></table>
   -------------------------------------------------------------------------- */

.srv-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--srv-font);
    font-size:       14px;
    line-height:     1.6;
    color:           var(--srv-text);
}

.srv-table td {
    padding:        9px 0;
    border-bottom:  1px solid var(--srv-border);
    vertical-align: top;
}

.srv-table tr:last-child td {
    border-bottom: none;
}

.srv-table td:first-child {
    color:         var(--srv-muted);
    font-weight:   500;
    white-space:   nowrap;
    padding-right: 20px;
    min-width:     160px;
}

.srv-table td:last-child {
    font-weight: 500;
    color:       var(--srv-text);
}

.srv-table a {
    color:           var(--color-primary, #00a8ee);
    text-decoration: underline;
}

.srv-table a:hover {
    text-decoration: none;
}

@media (max-width: 480px) {
    .srv-table td:first-child {
        min-width: 120px;
        font-size: 12px;
    }

    .srv-table td:last-child {
        font-size: 13px;
    }
}


/* -----------------------------------------------------------------------------
   19e. NADPIS SEKCE
   HTML: <div class="srv-section-title"><h2>Nadpis</h2></div>
   -------------------------------------------------------------------------- */

.srv-section-title {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    margin:          32px 0 16px;
    flex-wrap:       wrap;
}

.srv-section-title h2 {
    font-family: var(--srv-font);
    font-size:   18px;
    font-weight: 700;
    color:       var(--srv-text);
    margin:      0;
    padding:     0;
}

.srv-section-title a {
    font-size:       13px;
    font-weight:     500;
    color:           var(--color-primary, #00a8ee);
    white-space:     nowrap;
    text-decoration: underline;
}

.srv-section-title a:hover {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   19f. GALERIE FOTEK
   HTML: <div class="srv-gallery"><div class="srv-gallery__item">…</div></div>
   -------------------------------------------------------------------------- */

.srv-gallery {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
    margin:                0 0 20px;
}

.srv-gallery__item {
    border-radius: var(--srv-radius-sm);
    overflow:      hidden;
    aspect-ratio:  4 / 3;
}

.srv-gallery__item a {
    display: block;
    width:   100%;
    height:  100%;
}

.srv-gallery__item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.25s ease-in-out;
}

.srv-gallery__item:hover img {
    transform: scale(1.04);
}

@media (max-width: 640px) {
    .srv-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* -----------------------------------------------------------------------------
   19g. SEZNAM ODKAZŮ
   HTML: <ul class="srv-links"><li><a href="…">Text</a></li></ul>
   -------------------------------------------------------------------------- */

.srv-links {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
}

.srv-links li {
    border-bottom: 1px solid var(--srv-border);
}

.srv-links li:last-child {
    border-bottom: none;
}

.srv-links li a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 0;
    font-family:     var(--srv-font);
    font-size:       14px;
    font-weight:     500;
    color:           var(--srv-text);
    text-decoration: none !important;
    transition:      color 0.15s ease-in-out;
}

.srv-links li a::after {
    content:      '';
    display:      inline-block;
    width:        6px;
    height:       6px;
    border-right: 2px solid var(--srv-muted);
    border-top:   2px solid var(--srv-muted);
    transform:    rotate(45deg);
    flex-shrink:  0;
    transition:   border-color 0.15s ease-in-out;
}

.srv-links li a:hover {
    color: var(--color-primary, #00a8ee);
}

.srv-links li a:hover::after {
    border-color: var(--color-primary, #00a8ee);
}


/* -----------------------------------------------------------------------------
   19h. CTA AKCE (reklamace, vrácení zboží apod.)
   HTML: <div class="srv-action"> … </div>
   -------------------------------------------------------------------------- */

.srv-action {
    display:       flex;
    align-items:   center;
    gap:           24px;
    background:    var(--srv-bg);
    border:        1px solid var(--srv-border);
    border-radius: var(--srv-radius);
    padding:       24px 28px;
    margin-bottom: 20px;
}

.srv-action__img {
    flex-shrink: 0;
}

.srv-action__img img {
    display:    block;
    max-width:  120px;
    max-height: 80px;
    object-fit: contain;
}

.srv-action__text {
    flex:      1;
    min-width: 0;
}

.srv-action__text h3 {
    font-family: var(--srv-font);
    font-size:   16px;
    font-weight: 700;
    color:       var(--srv-text);
    margin:      0 0 6px;
    padding:     0;
}

.srv-action__text p {
    font-size:   14px;
    line-height: 1.6;
    color:       var(--srv-muted);
    margin:      0 0 14px;
}

.srv-action__btn {
    display:         inline-flex;
    align-items:     center;
    padding:         9px 20px;
    background:      var(--srv-primary);
    color:           #ffffff !important;
    font-family:     var(--srv-font);
    font-size:       13px;
    font-weight:     600;
    border-radius:   30px;
    text-decoration: none !important;
    white-space:     nowrap;
    transition:      background 0.2s ease-in-out;
}

.srv-action__btn:hover {
    background: var(--srv-primary-dark);
}

@media (max-width: 540px) {
    .srv-action {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
        padding:        18px;
    }

    .srv-action__img img {
        max-width:  80px;
        max-height: 56px;
    }
}


/* -----------------------------------------------------------------------------
   19i. MŘÍŽKA DVOU KARET
   HTML: <div class="srv-grid-2"><div class="srv-card">…</div>…</div>
   -------------------------------------------------------------------------- */

.srv-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         20px;
}

.srv-grid-2 .srv-card {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .srv-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* -----------------------------------------------------------------------------
   19j. BADGE — ESHOPY
   HTML: <div class="srv-eshopy"><a href="…">TOPNYZEBRIK.cz</a></div>
   -------------------------------------------------------------------------- */

.srv-eshopy {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin:    8px 0 0;
}

.srv-eshopy a {
    display:         inline-flex;
    align-items:     center;
    padding:         5px 14px;
    background:      #f0f0f1;
    border-radius:   50px;
    font-family:     var(--srv-font);
    font-size:       13px;
    font-weight:     600;
    color:           var(--srv-text) !important;
    text-decoration: none !important;
    border:          1px solid var(--srv-border);
    transition:      background 0.15s, border-color 0.15s;
}

.srv-eshopy a:hover {
    background:   #e2e2e4;
    border-color: #ccc;
}


/* -----------------------------------------------------------------------------
   19k. HODNOCENÍ WIDGET
   -------------------------------------------------------------------------- */

.srv-hodnoceni {
    text-align: center;
    margin:     24px 0 0;
}

.srv-hodnoceni a {
    display:         inline-block;
    text-decoration: none !important;
}

.srv-hodnoceni img {
    max-width:     100%;
    height:        auto;
    display:       block;
    margin:        0 auto;
    border-radius: var(--srv-radius-sm);
}

/* Obrázek s automatickým centrováním v obsahu stránky */
.srv-auto-img {
    display:   block;
    max-width: 100%;
    height:    auto;
    margin:    16px auto 0;
}


/* -----------------------------------------------------------------------------
   19l. DOPRAVA A PLATBA
   Na displejích ≤640px se tabulka přepíná na card layout
   (štítky se berou z atributu data-label na buňkách s cenou).
   -------------------------------------------------------------------------- */

.srv-dp-tabulka {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    border:          1px solid var(--srv-border);
    border-radius:   var(--srv-radius);
    overflow:        hidden;
    font-family:     var(--srv-font);
    font-size:       14px;
    margin-bottom:   20px;
}

.srv-dp-tabulka thead tr {
    background: var(--srv-bg);
}

.srv-dp-tabulka thead th {
    padding:        12px 16px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--srv-muted);
    border-bottom:  1px solid var(--srv-border);
    white-space:    nowrap;
}

.srv-dp-tabulka thead th:first-child   { text-align: center; }
.srv-dp-tabulka thead th:nth-child(2)  { text-align: left; }
.srv-dp-tabulka thead th:nth-child(3),
.srv-dp-tabulka thead th:nth-child(4)  { text-align: center; }

.srv-dp-tabulka tbody tr {
    background: #ffffff;
    transition: background 0.15s ease-in-out;
}

.srv-dp-tabulka tbody tr:hover {
    background: #fafafa;
}

.srv-dp-tabulka tbody tr + tr {
    border-top: 1px solid var(--srv-border);
}

.srv-dp-tabulka tbody td {
    padding:        16px;
    vertical-align: middle;
    color:          var(--srv-text);
    line-height:    1.5;
}

.srv-dp-tabulka tbody td:first-child {
    text-align: center;
    width:      90px;
}

.srv-dp-tabulka tbody td:nth-child(3),
.srv-dp-tabulka tbody td:nth-child(4) {
    text-align:  center;
    white-space: nowrap;
    font-weight: 600;
    width:       140px;
}

/* Logo v tabulce — ve v1.01 sloučeny dvě protichůdné deklarace */
.srv-dp-tabulka img {
    max-height: 36px;
    max-width:  130px;
    object-fit: contain;
    display:    block;
    margin:     0 auto;
}

/* Cena zdarma */
.srv-dp-zdarma {
    color:       var(--color-primary, #00a8ee) !important;
    font-weight: 700 !important;
}

/* Poznámka pod řádkem */
.srv-dp-poznamka {
    font-size:   12px;
    color:       var(--srv-muted);
    margin-top:  3px;
    font-weight: 400;
}

/* Tabulka klíč–hodnota pro bankovní převod */
.srv-dp-info {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    border:          1px solid var(--srv-border);
    border-radius:   var(--srv-radius);
    overflow:        hidden;
    font-family:     var(--srv-font);
    font-size:       14px;
    margin-bottom:   20px;
}

.srv-dp-info td {
    padding:        12px 16px;
    vertical-align: top;
    line-height:    1.6;
    color:          var(--srv-text);
}

.srv-dp-info tr + tr td {
    border-top: 1px solid var(--srv-border);
}

.srv-dp-info td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width:       260px;
    background:  var(--srv-bg);
    color:       var(--srv-muted);
}

/* Mobil — card layout */
@media (max-width: 640px) {

    .srv-dp-tabulka thead {
        display: none;
    }

    .srv-dp-tabulka,
    .srv-dp-tabulka tbody,
    .srv-dp-tabulka tr,
    .srv-dp-tabulka td {
        display: block;
        width:   100%;
    }

    .srv-dp-tabulka tbody tr {
        border-top: 1px solid var(--srv-border);
        padding:    16px;
        position:   relative;
    }

    .srv-dp-tabulka tbody tr:first-child {
        border-top: none;
    }

    /* Logo — vlevo nahoře */
    .srv-dp-tabulka tbody td:first-child {
        text-align:    left;
        margin-bottom: 10px;
        padding:       0;
        width:         auto;
    }

    .srv-dp-tabulka tbody td:first-child img {
        margin: 0;
    }

    /* Popis — plná šířka */
    .srv-dp-tabulka tbody td:nth-child(2) {
        padding:       0;
        margin-bottom: 12px;
        font-size:     14px;
    }

    /* Ceny — vedle sebe */
    .srv-dp-tabulka tbody td:nth-child(3),
    .srv-dp-tabulka tbody td:nth-child(4) {
        display:      inline-block;
        width:        auto !important;
        padding:      0;
        margin-right: 16px;
        font-size:    14px;
        text-align:   left;
    }

    /* Štítek před cenou z atributu data-label */
    .srv-dp-tabulka tbody td:nth-child(3)::before,
    .srv-dp-tabulka tbody td:nth-child(4)::before {
        content:        attr(data-label);
        display:        block;
        font-size:      10px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color:          var(--srv-muted);
        margin-bottom:  2px;
    }

    /* Info tabulka (bankovní převod) */
    .srv-dp-info,
    .srv-dp-info tbody,
    .srv-dp-info tr,
    .srv-dp-info td {
        display: block;
        width:   100%;
    }

    .srv-dp-info tr + tr {
        border-top: 1px solid var(--srv-border);
    }

    .srv-dp-info td {
        padding: 8px 12px;
    }

    .srv-dp-info td:first-child {
        background:     var(--srv-bg);
        font-size:      11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding:        10px 14px 4px;
        width:          auto;
        border-bottom:  none;
    }

    .srv-dp-info td:last-child {
        padding: 4px 14px 12px;
    }
}


/* =============================================================================
   KONEC SOUBORU — styly-v1.02.css
   ============================================================================= */