/* ==========================================================================
   styly-v1.04.css — KONSOLIDOVANÝ CSS SOUBOR
   primakoupelny.cz
   ==========================================================================
   VERZE: v1.04 (2026-08-14)

   Changelog:
     v1.04 — Vizuální sjednocení obsahových bloků v popisku kategorie
             (§7 + §9). Bloky si dosud odporovaly v poloměrech, rámečcích,
             barvách textu i tvarosloví ikon — každý vypadal jako z jiné
             šablony. Zavedena sdílená sada tokenů v §1
             (--kat-blok-*, --kat-ikona-*, --kat-text-*) a aplikována na:
             - .kat-stitek / .prod-stitek — dashed pill nahrazen typografickým
               kickerem (uppercase, firemní modrá) shodným s .pk-hero__kicker.
             - pill tagy (.kat-parametricka-link, .prod-varianta-link,
               .prod-kategorie__link) — šedá #f0f0f1 nahrazena tlumenou
               firemní modrou, font 11 → 12 px, hover má modrý rámeček.
             - .kat-faq__polozka, .kat-pruvodce, .kat-postup, .kat-identita —
               jednotný poloměr 16 px, rámeček --kat-blok-border, namodralé
               tlumené pozadí #f7f9fc místo šedého #f7f7f8.
             - .kat-faq__ikona / .kat-pruvodce__ikona — jemnější rámeček
               a barvy z palety --kat-text-*.
             - .kat-pruvodce__ikona-kniha — emoji 📋 nahrazeno inline SVG
               v HTML (dlaždice 40 px, radius 12 px jako .pk-benefit__ikona);
               emoji zůstává jen jako fallback pro prázdný element.
             - .kat-tip-expert__ikona — kruh změněn na zaoblený čtverec
               42 px / 12 px, tvarově shodný s ikonami v .pk-benefit.
             - texty všech kat-* bloků převedeny z --color-text / #6b7280
               na --kat-text / --kat-text-mute (tj. paletu hero panelu).
             - sjednocen styl odkazů uvnitř bloků a vertikální rytmus
               (margin 28px 0 u sekcí).
             Nové !important nepřidáno.

     v1.03 — Trust panel (§9, .pk-hero): zrušeno omezení šířky textu
             zavedené v1.02. .pk-hero__nadpis i .pk-hero__sub mají zpět
             max-width: none, takže nadpis i perex využívají celou šířku
             panelu místo zhruba dvou třetin. Zbytek v1.02 beze změny.

     v1.02 — Redesign trust panelu na homepage (§9, .pk-hero):
             - .pk-hero__points / .pk-hero__point (8 pillů s fajfkou)
               nahrazeny mřížkou karet .pk-hero__benefity / .pk-benefit
               (ikona + nadpis + jednořádkový popis, 3 sloupce → 2 → 1).
               Staré třídy ponechány jako DEPRECATED pro starší obsahové
               bloky, nové HTML je nepoužívá.
             - .pk-hero__stats dostaly linku nahoře i dole místo svislých
               dělítek mezi sloupci (.pk-hero__stat už nemá border-right).
             - .pk-hero__nadpis: jemnější line-height (max-width 19ch
               zrušeno v v1.03).
             - .pk-hero__sub: vlastní styl odkazů (max-width 68ch
               zrušeno v v1.03),
               (podtržení firemní modrou), strong má weight 600 místo 700.
             - .pk-hero__btn--outline: bílé pozadí místo transparentního,
               jemnější rámeček.
             - Breakpointy sjednoceny na 980 / 860 / 620 px.
             Nové !important nepřidáno.

     v1.01 — První konsolidovaná verze. Sloučeno 11 souborů:
             00-README.css, 01-zaklad-typografie.css,
             02-hlavicka-menu-navigace.css, 03-kategorie-filtry-vypis.css,
             04-detail-kosik-objednavky.css, 05-obsahove-komponenty.css,
             homepage-v10.css, kategorie-v3.css, produkt-v15.css,
             ostatni.css, weboturci.css

             NEZAŘAZENO: styly-v1_49.css — patří k jinému projektu
             (seoprakticky.cz), do konsolidace nevstupuje.

             ODSTRANĚNÉ DUPLICITY:
             - 12× :root sloučeno do jednoho bloku (§1)
             - .kat-parametricka-link-blog byl v kategorie-v3.css 2×
             - .pk-brand-item / .pk-brand-item img byly v homepage-v10.css
               2× (druhý blok přepisoval první) → sloučeno
             - .srv-dp-tabulka img definován 2× (44/100px → 36/130px
               !important) → jedna sada hodnot, !important odstraněn
             - .srv-hero__kontakty / __popisek / __hodnota / __divider
               měly na konci souboru „OVERRIDE“ blok, který je přepisoval
               → sloučeno do výsledných hodnot, !important odstraněn
             - 5 identických tlačítkových komponent (.prod-rozmery-*,
               .prod-provedeni-*, .prod-verze-*, .prod-slim-*,
               .prod-konstrukce-*) → jedno pravidlo se skupinou selektorů
             - 2 identické textové varianty (.prod-barvy-text-*,
               .prod-umyvadlo-*) → jedno pravidlo
             - 3 identické pill komponenty (.kat-parametricka-link,
               .prod-varianta-link, .prod-kategorie__link) → jedno pravidlo
             - .kat-stitek a .prod-stitek byly znak po znaku shodné
             - .kat-faq__ikona a .kat-pruvodce__ikona byly shodné

             OPRAVENÉ KONFLIKTY (styly, které si šly proti sobě):
             1) .project-email: pravidlo od 768px mělo
                `font-size:14px !important; font-weight:400 !important`,
                takže pravidlo od 1200px (16px, bold, modrá) se NIKDY
                neuplatnilo — !important přebíjí vyšší specificitu.
                → pravidlo pro e-mail omezeno na 768–1199px.
             2) .seo-subcategories li a { height: 88px } bylo mrtvé —
                od 768px ho přebíjí `height:70px !important`, do 767px
                pozdější pravidlo 73px. → odstraněno.
             3) .type-category #filters .param-filter-top form měl
                pozadí + rámeček a o pár řádků níž si je sám rušil
                (`border-color:transparent; background:transparent`).
                → selektor odstraněn z prvního pravidla, výsledek je
                stejný, ale je zřejmý.
             4) .srv-dp-tabulka td:nth-child(3)/(4) měly ve stejném
                breakpointu (640px) `width:80px` a o kus níž
                `width:auto !important`. → ponechána platná hodnota.
             5) .dm-coupon-div::before mělo bílý text na pozadí
                --color-primary-light (#d6f1fd) → nečitelné (kontrast
                ~1.3:1). Pozadí změněno na --color-primary (#00a8ee).
                POZOR: jediná vizuální změna v tomto souboru.
             6) .pk-brands__grid v @media (max-width:900px) nastavoval
                repeat(4,1fr), což je shodné se základní hodnotou →
                odstraněno.

             OPRAVENÉ KOMENTÁŘE (popisovaly kód, který tam nebyl):
             - checkbox „přidat poznámku“ neměl žádný background-image
               fallback, komentář ho zmiňoval
             - h2 breakpoint neobsahoval žádný display ani reset

   ==========================================================================
   OBSAH
   ==========================================================================
   §1  TOKENY            Všechny CSS proměnné — jediný :root
   §2  ZÁKLAD            Fonty, nadpisy, tlačítka, systémové příznaky
   §3  HLAVIČKA          Horní lišta, menu, navigace, related
   §4  KATEGORIE         Podkategorie, dlaždice, filtry, výpis produktů
   §5  DETAIL & KOŠÍK    Pořadí prvků, popisy, slevový kód, objednávka
   §6  OBSAH .pk-*       Tabulky, odrážky, FAQ, kroky, autor, USP, CTA
   §7  KATEGORIE .kat-*  Karty kategorií, FAQ, průvodce, tipy, citace
   §8  PRODUKT .prod-*   Varianty, rozměry, barvy, parametry
   §9  HOMEPAGE          Carousel, rozcestníky, značky, hero, sociální sítě
   §10 SERVISNÍ .srv-*   Kontakty, doprava a platba, reklamace
   §11 LEGACY            Kandidáti na smazání — viz komentář v sekci

   KAM PSÁT NOVÉ STYLY:
   Nová globální hodnota (barva, velikost)   → vždy jen §1 TOKENY
   Úprava šablony Shoptetu                    → §2–§5 podle stránky
   Nová obsahová komponenta do článku         → §6
   Komponenta do popisku kategorie            → §7 (prefix kat-)
   Komponenta do popisku produktu             → §8 (prefix prod-)
   Komponenta na titulku                      → §9
   Komponenta na servisní stránku             → §10 (prefix srv-)
   ========================================================================== */


/* ==========================================================================
   §1 TOKENY — všechny CSS proměnné na jednom místě
   ==========================================================================
   Původně bylo :root ve 12 blocích napříč 9 soubory. Hodnoty, které se
   opakovaly pod dvěma názvy, jsou nově aliasy — mění se na jednom místě.
   ========================================================================== */

:root {
  /* --- Barvy: primární paleta ------------------------------------------ */
  --color-primary:              #00a8ee;
  --color-primary-dark:         #0F86B8;
  --color-primary-light:        #d6f1fd;
  --color-primary-bg:           #ecf5fe;
  --color-primary-hover:        #D9EBFD;

  /* --- Barvy: text ----------------------------------------------------- */
  --color-text:                 #24242E;
  --color-text-muted:           #A3A3A3;

  /* --- Barvy: hranice a pozadí ----------------------------------------- */
  --color-border:               #E4E4E4;
  --color-bg-light:             #F6F6F6;
  --color-bg-subtle:            #F9F9F9;

  /* --- Barvy: akční příznak (štítky nad produkty) ---------------------- */
  --color-flag:                 #ff7925;

  /* --- Typografie ------------------------------------------------------ */
  --font-primary:               'Poppins', sans-serif;

  /* --- Tlačítka: globální zaoblení ------------------------------------- */
  --btn-border-radius:          30px;

  /* --- Tlačítka podkategorií (§4) -------------------------------------- */
  --btn-bg:                     var(--color-primary-bg);
  --btn-bg-hover:               var(--color-primary-hover);
  --btn-text:                   var(--color-text);
  --btn-radius:                 4px;
  --btn-h:                      52px;
  --btn-h-mobile:               56px;
  --ico-slot-w:                 55px;
  --ico-slot-h:                 45px;
  --ico-max:                    45px;
  --logo-max:                   30px;
  --text-gap:                   10px;
  --highlight-bg:               #ffe9eb;
  --highlight-bg-hover:         #ffd8db;

  /* --- Obsahové komponenty (§6) ---------------------------------------- */
  --pk-brand:                   var(--color-primary);
  --pk-accent:                  #1aa3d9;
  --pk-table-radius:            14px;
  --pk-table-border:            #e6f2f8;
  --pk-table-row-bg:            #fbfdff;
  --pk-table-shadow:            0 10px 28px rgba(15, 23, 42, .06),
                                0 1px 0 rgba(15, 23, 42, .04);

  /* --- Medailonek autora (§6) ------------------------------------------ */
  --authorMax:                  840px;
  --quoteMax:                   640px;
  --stripWidth:                 10px;
  --authorLeft:                 230px;
  --authorGap:                  26px;

  /* --- Karty hlavních kategorií (§7) ----------------------------------- */
  --kat-hlavni-bg:              #f7f7f8;
  --kat-hlavni-bg-hover:        #edeeef;
  --kat-hlavni-bg-blog:         #eef5fc;
  --kat-hlavni-bg-blog-hover:   #daeaf8;
  --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);
  --kat-hlavni-h-mobile:        120px;
  --kat-hlavni-img-h-mobile:    50px;
  --kat-hlavni-gap-mobile:      6px;
  --kat-hlavni-label-size-mob:  10px;

  /* --- Pill tagy sdílené kategoriemi i produktem (§7, §8) -------------- */
  --pill-bg:                    rgba(0, 168, 238, 0.07);
  --pill-bg-hover:              rgba(0, 168, 238, 0.14);

  /* --- Rozcestníky variant produktu (§8) ------------------------------- */
  --prod-rozmery-bg:            var(--pill-bg);
  --prod-rozmery-bg-hover:      var(--pill-bg-hover);
  --prod-rozmery-text:          var(--color-text);
  --prod-rozmery-current:       #2e9e44;
  --prod-rozmery-current-bg:    #ffffff;
  --prod-rozmery-radius:        10px;

  /* --- Vzorníky barev (§8) --------------------------------------------- */
  --prod-barva-size:            44px;
  --prod-barva-size-mob:        40px;
  --prod-barva-border:          #e0e0e0;
  --prod-barva-current:         #1aa01a;
  --prod-barva-tip-bg:          var(--color-text);
  --prod-barva-tip-text:        #ffffff;

  /* --- Homepage: banner carousel (§9) ---------------------------------- */
  --pk-carousel-gap:            8px;
  --pk-carousel-radius:         14px;

  /* --- Homepage: hero / trust panel (§9) ------------------------------- */
  --pk-hero-bg:                 #ecf3fc;
  --pk-hero-accent:             var(--color-primary);
  --pk-hero-ink:                #1a1a2e;
  --pk-hero-ink-soft:           #3a4a63;
  --pk-hero-ink-mute:           #5a6a82;
  --pk-hero-radius:             24px;

  /* --- Sdílený vzhled obsahových bloků v popiscích (§7, §9) -----------
     Jedna sada hodnot pro FAQ, průvodce, postup, identitu, tip experta
     i benefitové karty hero panelu. Když se má vzhled bloků posunout,
     mění se to tady, ne v jednotlivých komponentách. */
  --kat-blok-radius:            16px;
  --kat-blok-radius-lg:         20px;
  --kat-blok-border:            rgba(26, 26, 46, 0.10);
  --kat-blok-border-akcent:     rgba(0, 168, 238, 0.35);
  --kat-blok-bg:                #ffffff;
  --kat-blok-bg-tlumeny:        #f7f9fc;
  --kat-blok-linka:             rgba(26, 26, 46, 0.10);
  --kat-ikona-radius:           12px;
  --kat-ikona-bg:               rgba(0, 168, 238, 0.10);
  --kat-text:                   var(--pk-hero-ink);
  --kat-text-soft:              var(--pk-hero-ink-soft);
  --kat-text-mute:              var(--pk-hero-ink-mute);

  /* --- Servisní stránky (§10) ------------------------------------------
     Pozn.: --srv-primary (#4ba6e8) je jiná modrá než --color-primary
     (#00a8ee). Je to záměr původního souboru, ne překlep — servisní
     stránky mají světlejší odstín. Pokud se má sjednotit, stačí zde. */
  --srv-primary:                #4ba6e8;
  --srv-primary-dark:           #2e8fd0;
  --srv-text:                   var(--color-text);
  --srv-muted:                  #6b6b7a;
  --srv-border:                 var(--color-border);
  --srv-bg:                     #f7f7f8;
  --srv-white:                  #ffffff;
  --srv-radius:                 12px;
  --srv-radius-sm:              8px;
  --srv-font:                   var(--font-primary);
}


/* ==========================================================================
   §2 ZÁKLAD — fonty, nadpisy, tlačítka, systémové příznaky
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTY
   Poppins na html/body pokrývá vše, co dědí. Následující skupiny jsou
   potřeba tam, kde Shoptet nastavuje font-family přímo na prvek —
   dědičnost by v takovém případě prohrála.
   Přidáváte-li nový prvek, zařaďte ho do příslušné skupiny níže.
   -------------------------------------------------------------------------- */

html,
body {
  font-family: var(--font-primary) !important;
}

/* Nadpisy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary) !important;
}

/* Navigace a UI prvky */
.navigation-in a,
.menu-helper > ul > li a,
.fav-cat li a,
.user-action-tabs li a {
  font-family: var(--font-primary) !important;
}

/* Ceny a produktové informace */
.price strong,
.products-block.products .p .price span,
.price-final,
.price-wrapper,
.payment-shipping-price {
  font-family: var(--font-primary) !important;
}

/* Tlačítka */
.btn:not(.cart-count),
a.btn:not(.cart-count) {
  font-family: var(--font-primary) !important;
}

/* Košík a objednávky */
.cart-widget .popup-widget-inner::before,
.cart-widget-product-name a,
.cart-widget-product > span,
.cart-item-name,
.cart-item-price,
.cart-table tr td.p-name a,
a.cart-related-name,
.empty-cart-boxes ul li a,
.payment-info,
ol.cart-header li a,
ol.cart-header li strong,
.order-summary-item.helper,
.recapitulation-single,
.reca-number,
.id--15 .cart-table .p-name,
.id--15 .cart-table .p-price {
  font-family: var(--font-primary) !important;
}

/* Košík – widget tlačítka a ikony */
.quantity .increase::before,
.quantity .decrease::before,
.header-top .btn.cart-count .cart-price,
.navigation-buttons > a[data-target="cart"] i,
.header-top .oblibeneBtn em {
  font-family: var(--font-primary) !important;
}

/* Vyhledávač */
.search-whisperer ul::before,
.search-whisperer .p-info span,
.search-whisperer .price,
.search-box::before,
.search-whisperer-documents a,
.search-whisperer-empty,
.search-results-groups #search-group-categories .search-results-group-list ul li a {
  font-family: var(--font-primary) !important;
}

/* Filtry a kategorie */
.box-filters::before,
.param-filter-top::before,
.filtrovat,
.tab-mobil,
.box-bg-variant .categories a {
  font-family: var(--font-primary) !important;
}

/* Podkategorie a popisky */
.subcategories.with-image li a .text,
.name,
.category-header label,
.dropdown-menu > li > a,
.category-appendix {
  font-family: var(--font-primary) !important;
}

/* Stránkování */
.pagination > a,
.pagination > strong {
  font-family: var(--font-primary) !important;
}

/* Produktový detail */
.availability-value,
.all-param span,
#productsAlternative::before,
.rate-average,
.vote-form::before,
#variants::before,
.var-dostupnost,
.variant-name,
.vote-title,
.shp-tabs-holder ul.shp-tabs li a {
  font-family: var(--font-primary) !important;
}

/* Recenze a hodnocení */
.vote-form > form::before {
  font-family: var(--font-primary) !important;
}

/* Dárky */
.free-gift-name,
.p-gifts-heading,
.p-gift-name,
.id--9 .free-product-gifts-wrapper::before {
  font-family: var(--font-primary) !important;
}

/* Přihlášení */
#register-form > fieldset .form-group:not(.consents) label,
a.login-btn.facebook,
a.login-btn.google,
a.login-btn.seznam {
  font-family: var(--font-primary) !important;
}

/* Výrobci a zápatí */
ul.manufacturers ul li,
#footer .contact-box::before {
  font-family: var(--font-primary) !important;
}

/* Novinky */
.news-item-widget h5 {
  font-family: var(--font-primary) !important;
}

/* Compact form */
.compact-form .form-control {
  font-family: var(--font-primary) !important;
}


/* --------------------------------------------------------------------------
   NADPISY
   -------------------------------------------------------------------------- */

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

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


/* --------------------------------------------------------------------------
   TLAČÍTKA – globální zaoblení
   -------------------------------------------------------------------------- */

.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a,
.pagination > strong,
a.login-btn {
  border-radius: var(--btn-border-radius);
}


/* --------------------------------------------------------------------------
   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: var(--color-flag);
}


/* --------------------------------------------------------------------------
   ZVÝRAZNĚNÝ BOX (obecný)
   -------------------------------------------------------------------------- */

.zvyraznenybox {
  background-color: var(--color-bg-subtle);
  padding:          20px;
  border-radius:    10px;
}

.zvyraznenybox h2 { margin-top:    0; }
.zvyraznenybox p  { margin-bottom: 5px; }


/* ==========================================================================
   §3 HLAVIČKA, MENU & NAVIGACE
   ========================================================================== */

/* --------------------------------------------------------------------------
   HLAVNÍ MENU + HORNÍ LIŠTA (desktop od 768px)
   Sloučeno ze čtyř samostatných @media (min-width:768px) bloků.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  #header::after {
    background-color: var(--color-primary-light);
  }

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

  .navigation-in > ul > li > a,
  .submenu-arrow::after,
  .menu-helper::after {
    color: var(--color-text);
  }

  /* Poměry sloupců horní lišty */
  .top-navigation-menu     { flex: 1 1 33% !important; }
  .top-navigation-contacts { flex: 1 1 40% !important; }
  .top-navigation-tools    { flex: 1 1 27% !important; }

  /* Telefon – váha a velikost textu */
  .project-phone {
    font-weight: 400 !important;
    font-size:   14px !important;
  }

  /* Provozní doba za telefonním číslem */
  .top-navigation-bar .project-phone::after {
    content: " (Po - Pá 8:00 - 17:00)" !important;
  }

  /* Mega-menu – výška vnořeného seznamu u položky #9828 */
  .navigation-in > ul > .menu-item-9828.ext > ul > li > div > ul {
    height: 220px !important;
  }
}

/* E-mail v horní liště – 768–1199px
   OPRAVA: původně bylo `min-width:768px` bez horní hranice a s !important,
   takže pravidlo pro ≥1200px (16px, bold, modrá) se nikdy neuplatnilo. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .project-email {
    font-weight: 400 !important;
    font-size:   14px !important;
  }
}

/* Provozní doba – vzhled od 992px */
@media screen and (min-width: 992px) {
  .top-navigation-bar .project-phone::after {
    color:        var(--color-text-muted);
    font-size:    13px;
    font-weight:  400;
    margin-left:  5px;
    display:      inline-block;
  }
}

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

  /* E-mail v hlavičce – plné zobrazení s textem */
  .top-navigation-bar .project-email {
    display:     inline-block;
    font-size:   16px;
    font-weight: bold;
    margin-left: 24px;
    color:       var(--color-primary);
  }

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

/* Mobil: jen ikona e-mailu, text skryt */
@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; }
}


/* --------------------------------------------------------------------------
   OPRAVENÉ PRODUKTY V SEKCI „RELATED“ (.mjs-*)
   -------------------------------------------------------------------------- */

.mjs-products-related      { display: none; }
.mjs-related > .product    { display: block !important; }
.mjs-related-expand        { display: none; }

@media (max-width: 768px) {
  .mjs-related-expand {
    display:         flex;
    justify-content: center;
    margin-bottom:   20px;
    margin-top:      -50px;
  }

  .mjs-related > .product:nth-child(n+5) { display: none !important; }

  .mjs-related.mjs-related-full > .product { display: block !important; }
}


/* --------------------------------------------------------------------------
   FILTR – hover panel kategorií
   -------------------------------------------------------------------------- */

#category-filter-hover.visible {
  display:        flex;
  flex-direction: column;
}


/* ==========================================================================
   §4 KATEGORIE — podkategorie, dlaždice, filtry, výpis produktů
   ========================================================================== */

/* --------------------------------------------------------------------------
   SUBCATEGORIES / SEO-SUBCATEGORIES – wrapper
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
) {
  display:     flex !important;
  flex-wrap:   wrap !important;
  align-items: stretch !important;
  padding:     4px 0 !important;
  margin:      0 -6px 12px -6px !important;
  position:    relative !important;
}

/* Reset pseudo-elementů wrapperu */
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image,
  .subcategories,
  .seo-subcategories
)::before,
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image,
  .subcategories,
  .seo-subcategories
)::after {
  height: 0 !important;
}

.subcategories,
.seo-subcategories {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

.category-perex { margin-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   SUBCATEGORIES – položka (LI)
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image li,
  .seo-subcategories.with-image li,
  body.type-post .subcategories.with-image li
) {
  list-style: none !important;
  flex:       0 0 auto !important;
  padding:    4px !important;
  box-sizing: border-box !important;
}

/* Mezera mezi nadpisem a první řadou tlačítek */
:is(h1,h2,h3,.h1,.h2,.h3) + :is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  .subcategories.with-image
) {
  margin-top: 0 !important;
}

@supports selector(:has(*)) {
  :is(h1,h2,h3,.h1,.h2,.h3):has(+ :is(
    .subcategories.seo-subcategories.with-image,
    .seo-subcategories.with-image,
    .subcategories.with-image
  )) {
    margin-bottom: 10px !important;
  }
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – tlačítko (A)
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
) {
  display:          flex !important;
  align-items:      center !important;
  position:         relative !important;
  height:           var(--btn-h) !important;
  padding:          6px 10px !important;
  font-weight:      bold !important;
  text-decoration:  none !important;
  background-color: var(--btn-bg) !important;
  border-radius:    var(--btn-radius) !important;
  box-shadow:       inset 0 -1px 0 0 rgba(0, 0, 0, .1) !important;
  border:           0 !important;
  color:            var(--btn-text) !important;
  transition:       background-color 0.15s ease;
}

:is(
  .subcategories.seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  .seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  body.type-post .subcategories.with-image li:not(.highlitedsub) a:hover
) {
  background-color: var(--btn-bg-hover) !important;
}

/* Skrytí pseudo-elementů tlačítek */
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a,
  .subcategories li a,
  .seo-subcategories li:not(.highlitedsub) a
)::before,
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a,
  .subcategories li a,
  .seo-subcategories li:not(.highlitedsub) a
)::after {
  display: none !important;
}

/* Obecné subcategories bez .with-image */
.subcategories li a { box-shadow: none; }


/* --------------------------------------------------------------------------
   SUBCATEGORIES – zvýraznění (.highlitedsub)
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a,
  .seo-subcategories.with-image li.highlitedsub a,
  body.type-post .subcategories.with-image li.highlitedsub a,
  .highlitedsub a
) {
  background: var(--highlight-bg) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a:hover,
  .seo-subcategories.with-image li.highlitedsub a:hover,
  body.type-post .subcategories.with-image li.highlitedsub a:hover,
  .highlitedsub a:hover
) {
  background: var(--highlight-bg-hover) !important;
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – ikona (.image)
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image li a .image,
  .seo-subcategories.with-image li a .image,
  body.type-post .subcategories.with-image li a .image
) {
  flex:            0 0 var(--ico-slot-w) !important;
  width:           var(--ico-slot-w) !important;
  height:          var(--ico-slot-h) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  overflow:        hidden !important;
}

:is(
  .subcategories.seo-subcategories.with-image li a .image img,
  .seo-subcategories.with-image li a .image img,
  body.type-post .subcategories.with-image li a .image img
) {
  width:      auto !important;
  height:     auto !important;
  max-width:  var(--ico-max) !important;
  max-height: var(--ico-max) !important;
  object-fit: contain !important;
  display:    block !important;
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – text
   -------------------------------------------------------------------------- */

:is(
  .subcategories.seo-subcategories.with-image li a .text,
  .seo-subcategories.with-image li a .text,
  body.type-post .subcategories.with-image li a .text
) {
  padding-left:       var(--text-gap) !important;
  min-width:          0 !important;
  white-space:        normal !important;
  overflow:           hidden !important;
  text-overflow:      clip !important;
  overflow-wrap:      normal !important;
  word-break:         normal !important;
  hyphens:            none !important;
  font-size:          14px !important;
  font-weight:        bold !important;
  line-height:        1.15 !important;
  display:            -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-height:         calc(2 * 1.15em) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a .text,
  .seo-subcategories.with-image li.highlitedsub a .text,
  body.type-post .subcategories.with-image li.highlitedsub a .text
) {
  text-overflow: ellipsis !important;
}

html .type-category .seo-subcategories li a .text {
  font-size:   14px !important;
  line-height: 1.3em !important;
  font-weight: bold !important;
}

.seo-subcategories .text { font-weight: bold; }


/* --------------------------------------------------------------------------
   SUBCATEGORIES – loga značek (.imageznacka)
   -------------------------------------------------------------------------- */

.imageznacka {
  width:           100% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
}

.imageznacka img {
  width:      auto !important;
  height:     auto !important;
  max-height: var(--logo-max) !important;
  max-width:  100% !important;
  object-fit: contain !important;
  display:    block !important;
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – výška a rozložení na desktopu
   -------------------------------------------------------------------------- */

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

  .subcategories.with-image li a .image,
  .seo-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,
  .seo-subcategories.with-image li a .text { width: auto !important; }
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – responzivní počet sloupců
   -------------------------------------------------------------------------- */

/* Mobil: 2 v řadě */
@media (max-width: 767px) {
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li,
    .subcategories li
  ) {
    width: 50% !important;
  }

  :is(
    .subcategories.seo-subcategories.with-image li a,
    .seo-subcategories.with-image li a,
    body.type-post .subcategories.with-image li a
  ) {
    height: var(--btn-h-mobile) !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; }

  .seo-subcategories.with-image li a .image { width: 30% !important; }
  .seo-subcategories li                     { padding: 4px; }
  .seo-subcategories li a                   { height: 73px; }

  /* Obsahové stránky: 2 v řadě */
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 50% !important;
  }
}

/* Tablet: 3 v řadě */
@media (min-width: 768px) and (max-width: 991px) {
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

/* Obsahové stránky: 3 v řadě */
@media (min-width: 768px) and (max-width: 1199px) {
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

/* Kategorie a blog: 3 v řadě */
@media (min-width: 992px) and (max-width: 1279px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 33.333% !important;
  }

  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

/* Blog a obsahové stránky: 4 v řadě */
@media (min-width: 1200px) {
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 25% !important;
  }

  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 25% !important;
  }
}

/* Kategorie: 4 v řadě */
@media (min-width: 1280px) and (max-width: 1599px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 25% !important;
  }
}

/* Kategorie: 5 v řadě */
@media (min-width: 1600px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 20% !important;
  }
}


/* --------------------------------------------------------------------------
   SUBCATEGORIES – barevné vzorníky (obrázky ze složky /barva/)
   -------------------------------------------------------------------------- */

@supports selector(:has(*)) {
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a {
    height:      var(--btn-h) !important;
    display:     flex !important;
    align-items: center !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a .image {
    flex:            0 0 var(--ico-slot-w) !important;
    width:           var(--ico-slot-w) !important;
    height:          var(--ico-slot-h) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         4px !important;
    box-sizing:      border-box !important;
    overflow:        hidden !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) {
    width:      auto !important;
    height:     auto !important;
    max-width:  100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display:    block !important;
  }
}

/* Fallback pro prohlížeče bez :has() */
@supports not selector(:has(*)) {
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) {
    width:      auto !important;
    height:     auto !important;
    max-width:  var(--ico-max) !important;
    max-height: var(--ico-max) !important;
    object-fit: contain !important;
    display:    block !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image {
    padding:    4px !important;
    box-sizing: border-box !important;
    overflow:   hidden !important;
  }
}


/* --------------------------------------------------------------------------
   SEO-SUBCATEGORIES – základní vzhled (fallback pro markup bez .with-image)
   Pozn.: `height: 88px` bylo odstraněno — od 768px ho přebíjelo
   `height:70px !important`, do 767px pozdější pravidlo 73px.
   Nikdy se tedy neuplatnilo.
   -------------------------------------------------------------------------- */

.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;
  padding:         12px;
  font-weight:     500;
  color:           var(--color-text);
  border:          1px solid var(--color-border);
  text-decoration: none !important;
  transition:      border-color 0.15s ease;
}

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

.seo-subcategories.with-image li a {
  display:     flex;
  align-items: center;
}

.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;
}

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


/* --------------------------------------------------------------------------
   BLOG – subcategories s obrázkem
   -------------------------------------------------------------------------- */

.type-post .subcategories.with-image li a,
.type-post .seo-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:     0 0 0 10px !important;
  width:       100% !important;
}

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

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

.news-item-detail .text { margin-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   VÝPIS PRODUKTŮ
   -------------------------------------------------------------------------- */

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

/* Skrytí sekce „Nejprodávanější“ na stránkách kategorií.
   Pro zobrazení změň na display: block. */
.type-category .products-top-wrapper { display: none; }


/* --------------------------------------------------------------------------
   FILTRY – vizuální úpravy
   -------------------------------------------------------------------------- */

.filter-sections,
.box-filters {
  background-color: transparent !important;
  border:           0 !important;
}

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

/* Aktivní filtrovací formulář.
   OPRAVA: původně byl v selektoru i `.type-category #filters
   .param-filter-top form`, kterému o pár řádků níž stejný soubor
   pozadí i rámeček zase rušil. Odstraněno — chování je stejné. */
.type-category .filter-section form {
  padding:        15px;
  padding-bottom: 0 !important;
  margin-bottom:  20px !important;
  background:     var(--color-bg-light);
  border-radius:  5px;
  border:         1px solid var(--color-border) !important;
}

/* Výjimka: stock filter bez vlastního stylu */
.type-category #filters .param-filter-top form[action="/action/ProductsListing/setStockFilter/"] {
  padding:    0 !important;
  border:     0 !important;
  background: transparent !important;
  margin:     0 !important;
}

/* Prázdné / disabled formuláře a horní parametrický filtr bez rámečku */
.type-category .filter-section form:not(:has(div)),
.type-category #filters .param-filter-top form,
.type-category .filter-section form:has(input[disabled]) {
  border-color: transparent !important;
  background:   transparent !important;
}

/* Bez hover pozadí na fieldsetech */
.filter-section form > fieldset > div:not(.advanced-filters-wrapper):hover {
  background-color: transparent !important;
}

.filter-section form:first-of-type { padding-top: 0 !important; }

/* Skrytí disabled voleb */
.filter-section input[type="checkbox"]:disabled + label,
.filter-section input[type="radio"]:disabled + label {
  display: none;
}

/* Slider filtr */
.slider-wrapper.dkLab__slider-parameter { margin: unset !important; }
.filters-wrapper > .filters > .slider-wrapper { display: none; }

/* Více / méně parametrů filtru */
.more-param:not(.rozbaleno) form fieldset div:nth-child(n+6) { display: none; }

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

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

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

/* Odsazení první a poslední položky filtru */
.filter-section fieldset div:first-of-type label { margin-top:    15px; }
.filter-section fieldset div:last-of-type  label { margin-bottom: 15px; }


/* --------------------------------------------------------------------------
   PARAMETRICKÉ FILTRY – řazení sekcí podle kategorie
   -------------------------------------------------------------------------- */

/* Topné tyče */
body[class*="in-topne-tyce"] .filter-section-parametric-id-93   { order: -100; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-99   { order: -99;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-1034 { order: -98;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-30   { order: -97;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-135  { order: -96;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-117  { order: -95;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-45   { order: -94;  }

/* Topné žebříky a koupelnové radiátory */
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-396 { order: -101; }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-93  { order: -100; }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-18  { order: -99;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-21  { order: -98;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-99  { order: -97;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-120 { order: -96;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-30  { order: -95;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-45  { order: -94;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-36  { order: -93;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-929 { order: -92;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-941 { order: -91;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-117 { order: -90;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-210 { order: -89;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-135 { order: -88;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-27  { order: -87;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-102 { order: -86;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-60  { order: -85;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-96  { order: -84;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-114 { order: -83;  }

/* Žlaby */
body[class*="zlaby"] .filter-section-parametric-id-396 { order: -101; }
body[class*="zlaby"] .filter-section-parametric-id-93  { order: -100; }
body[class*="zlaby"] .filter-section-parametric-id-57  { order: -99;  }
body[class*="zlaby"] .filter-section-parametric-id-18  { order: -98;  }
body[class*="zlaby"] .filter-section-parametric-id-21  { order: -97;  }
body[class*="zlaby"] .filter-section-parametric-id-60  { order: -96;  }
body[class*="zlaby"] .filter-section-parametric-id-45  { order: -95;  }
body[class*="zlaby"] .filter-section-parametric-id-30  { order: -94;  }
body[class*="zlaby"] .filter-section-parametric-id-27  { order: -93;  }
body[class*="zlaby"] .filter-section-parametric-id-195 { order: -92;  }
body[class*="zlaby"] .filter-section-parametric-id-114 { order: -91;  }
body[class*="zlaby"] .filter-section-parametric-id-324 { order: -90;  }


/* --------------------------------------------------------------------------
   OBLÍBENÉ KATEGORIE – sekce „vše o nákupu“
   -------------------------------------------------------------------------- */

.in-vse-o-nakupu .subcategories img {
  display:      block !important;
  width:        40px;
  height:       40px;
  margin-right: 10px;
}

.in-vse-o-nakupu .subcategories li a {
  text-align:  left;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .in-vse-o-nakupu .subcategories li { width: 25%; }
}


/* --------------------------------------------------------------------------
   HODNOCENÍ / RECENZE – výpis
   -------------------------------------------------------------------------- */

.r-bottom .vote-wrap {
  width:            calc(25% - 20px) !important;
  margin:           10px !important;
  background-color: var(--color-bg-light);
  border-radius:    10px;
}

.vote-summary { padding-bottom: 10px !important; }

.votes-wrap {
  background-color: var(--color-bg-light);
  border-radius:    10px;
  padding:          2rem;
}

.r-bottom .stars {
  padding-top: 10px;
  left:        10px !important;
}

@media (max-width: 768px) {
  .r-bottom .vote-wrap { width: calc(50% - 20px) !important; }
}

.proklikhodnoceni {
  width:         100%;
  margin-top:    20px;
  margin-bottom: 20px;
  text-align:    center;
}

.proklikhodnoceni .btn { max-width: 100px; }


/* ==========================================================================
   §5 DETAIL PRODUKTU, KOŠÍK & OBJEDNÁVKY
   ========================================================================== */

/* --------------------------------------------------------------------------
   POŘADÍ PRVKŮ V DETAILU PRODUKTU
   -------------------------------------------------------------------------- */

#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 PARAMETRŮ – skrytí v detailu
   -------------------------------------------------------------------------- */

.type-detail .all-param { display: none !important; }


/* --------------------------------------------------------------------------
   ROZŠÍŘENÝ POPIS – tabulky vždy viditelné
   -------------------------------------------------------------------------- */

/* Od 9. řádku zobrazit i bez třídy .otevreno */
.type-detail .extended-description:not(.otevreno) table tr:nth-child(n+9) {
  display: table-row !important;
}

/* Zebra pruhy */
.type-detail .extended-description table tr:nth-child(odd) {
  background: #fbf9f9;
}


/* --------------------------------------------------------------------------
   PROPOJENÍ PRODUKTŮ – obrázkové varianty (add-on)
   -------------------------------------------------------------------------- */

.c-product-interconnection-detail-params__products.is-type--photos {
  gap: 10px !important;
}

.c-product-interconnection-detail-params__products.is-type--photos span.item-type-img {
  width:         80px !important;
  height:        80px !important;
  border-radius: 8px !important;
  border:        2px solid transparent !important;
  transition:    all 0.2s ease !important;
}

.c-product-interconnection-detail-params__products.is-type--photos a.is-current span.item-type-img {
  border: 2px solid #000000 !important;
}

/* Výchozí ikona fajfky a popisek jsou nahrazeny rámečkem */
.c-product-interconnection-detail-params__products a.is-current .item-type-img:before {
  display: none !important;
}

.c-product-interconnection-detail-params__products.is-type--photos .item-label {
  display: none !important;
}

.c-product-interconnection-detail-params__products.is-type--photos a:hover span.item-type-img {
  transform:  scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}


/* --------------------------------------------------------------------------
   SLEVOVÝ KÓD (add-on Dominik Martini)
   OPRAVA: ::before mělo bílý text na pozadí --color-primary-light
   (#d6f1fd) → kontrast ~1.3:1, prakticky nečitelné. Pozadí změněno
   na --color-primary. Jde o jedinou vizuální změnu v tomto souboru;
   pro návrat k původnímu stavu použij --color-primary-light.
   -------------------------------------------------------------------------- */

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

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

.dm-coupon-div::before {
  background-color: var(--color-primary) !important;
  color:            #fff !important;
  font-size:        16px !important;
}


/* --------------------------------------------------------------------------
   KOŠÍK – zaškrtávací pole „přidat poznámku“
   Čtvercové, bez zaoblení; ikona z fontu „ikony“.
   -------------------------------------------------------------------------- */

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);
}


/* --------------------------------------------------------------------------
   OBJEDNÁVKA – skrytí neaktivních platebních metod
   -------------------------------------------------------------------------- */

#order-billing-methods .radio-wrapper.inactive-child { display: none; }


/* --------------------------------------------------------------------------
   STRÁNKA ID-927 – speciální tabulka
   -------------------------------------------------------------------------- */

body.id-927 .content-inner table {
  border-collapse: collapse;
  width:           100%;
}

body.id-927 .content-inner th,
body.id-927 .content-inner td {
  padding: 10px;
  border:  1px solid var(--color-border);
}

body.id-927 .content-inner tr:nth-child(even) { background-color: #f2f2f2; }
body.id-927 .content-inner tr:hover           { background-color: #f5f5f5; }
body.id-927 .content-inner th                 { background-color: #f1f1f1; }


/* --------------------------------------------------------------------------
   BLOG / PŘÍSPĚVKY – šířka obsahu
   -------------------------------------------------------------------------- */

.type-post .content-inner { max-width: 1394px; }

main#content .news-item-detail {
  max-width:     900px;
  width:         100%;
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  16px;
  padding-right: 16px;
}

@media (max-width: 860px) {
  main#content .news-item-detail {
    padding-left:  12px;
    padding-right: 12px;
  }
}


/* ==========================================================================
   §6 OBSAHOVÉ KOMPONENTY (.pk-*)
   Komponenty vkládané do popisků kategorií, produktů a článků.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .pk-table – tabulka s barevným záhlavím
   -------------------------------------------------------------------------- */

.pk-table,
.pk-table--plain {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  background:      #fff;
  border:          1px solid var(--pk-table-border);
  border-radius:   var(--pk-table-radius);
  overflow:        hidden;
  box-shadow:      var(--pk-table-shadow);
  font-size:       16px;
  line-height:     1.6;
}

.pk-table th,
.pk-table td {
  padding:        14px 16px;
  vertical-align: top;
  text-align:     left;
  color:          #334155;
  border-right:   1px solid var(--pk-table-border);
}

.pk-table th:last-child,
.pk-table td:last-child { border-right: 0; }

.pk-table thead th {
  background:   var(--pk-brand);
  color:        #fff;
  font-weight:  700;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.pk-table thead th:last-child { border-right: 0; }

.pk-table tbody th,
.pk-table tbody td { border-top: 1px solid var(--pk-table-border); }

.pk-table tbody tr:nth-child(even) td { background: var(--pk-table-row-bg); }
.pk-table tbody tr:hover td           { background: #f7fbff; }

.pk-table tbody th {
  width:          170px;
  background:     #f5fbff;
  color:          var(--pk-brand);
  font-weight:    700;
  text-transform: none;
  letter-spacing: 0;
}

/* Varianta bez záhlaví */
.pk-table--plain td {
  padding:        14px 16px;
  vertical-align: top;
  color:          #334155;
  border-top:     1px solid var(--pk-table-border);
}

.pk-table--plain tr:first-child td     { border-top: 0; }
.pk-table--plain td + td               { border-left: 1px solid var(--pk-table-border); }
.pk-table--plain tr:nth-child(even) td { background: var(--pk-table-row-bg); }
.pk-table--plain tr:hover td           { background: #f7fbff; }

@media (max-width: 720px) {
  .pk-table,
  .pk-table--plain   { font-size: 15px; }
  .pk-table tbody th { width: auto; }
}


/* --------------------------------------------------------------------------
   .pk-compare – srovnávací tabulka (2 sloupce)
   -------------------------------------------------------------------------- */

.pk-compare {
  --t:     #0f172a;
  --m:     #475569;
  --b:     #d7e7f5;
  --plus:  #15803d;
  --minus: #b91c1c;

  margin: 22px 0;
  color:  var(--t);
}

.pk-compare__table {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border:                1.5px dashed var(--b);
  border-radius:         18px;
  background:            #fff;
  overflow:              hidden;
}

.pk-compare__col { padding: 18px 18px 16px; }

.pk-compare__col + .pk-compare__col { border-left: 1.5px dashed var(--b); }

.pk-compare__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin:          0 0 12px;
}

.pk-compare__title {
  margin:         0;
  font-weight:    800;
  font-size:      1.75rem;
  line-height:    1.15;
  letter-spacing: -.015em;
  color:          var(--t);
}

.pk-compare__tag {
  padding:       6px 10px;
  border-radius: 999px;
  border:        1px solid rgba(14, 165, 233, .25);
  background:    rgba(14, 165, 233, .10);
  color:         var(--t);
  font-weight:   600;
  font-size:     1.02rem;
  white-space:   nowrap;
}

.pk-compare__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  gap:        10px;
}

.pk-compare__col .pk-compare__list + .pk-compare__list { margin-top: 14px; }

.pk-compare__item { display: flex; align-items: center; gap: 12px; }

.pk-compare__text {
  color:       #475569;
  font-size:   16px;
  line-height: 1.4;
}

.pk-compare__icon {
  width:         28px;
  height:        28px;
  border-radius: 999px;
  flex:          0 0 auto;
  display:       grid;
  place-items:   center;
  font-weight:   600;
  font-size:     22px;
  line-height:   1;
}

.pk-compare__item--plus .pk-compare__icon {
  color:      var(--plus);
  background: rgba(21, 128, 61, .08);
  border:     1.5px solid rgba(21, 128, 61, .25);
  transform:  translateY(-1px);
}

.pk-compare__item--minus .pk-compare__icon {
  color:      var(--minus);
  background: rgba(185, 28, 28, .08);
  border:     1.5px solid rgba(185, 28, 28, .25);
  transform:  translateY(-1.5px);
}

@media (max-width: 860px) {
  .pk-compare__table { grid-template-columns: 1fr; }

  .pk-compare__col + .pk-compare__col {
    border-left: 0;
    border-top:  1.5px dashed var(--b);
  }
}


/* --------------------------------------------------------------------------
   .pk-bullets--dot – odrážky s tečkou
   -------------------------------------------------------------------------- */

.pk-bullets--dot {
  --lh:  1.65;
  --dot: 8px;

  list-style: none;
  margin:     0;
  padding:    0;
}

.pk-bullets--dot li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      10px 0;
  line-height: var(--lh);
}

.pk-bullets--dot li::before {
  content:       "";
  width:         var(--dot);
  height:        var(--dot);
  border-radius: 50%;
  background:    var(--pk-accent);
  flex:          0 0 var(--dot);
  margin-top:    calc((1em * var(--lh) - var(--dot)) / 2);
}


/* --------------------------------------------------------------------------
   .bullets-box – box s fajfkami
   -------------------------------------------------------------------------- */

.bullets-box,
.faq {
  padding:       16px 18px;
  margin:        18px 0;
  background:    #fbfdff;
  border:        1px solid var(--pk-table-border);
  border-left:   4px solid var(--pk-accent);
  border-radius: 14px;
}

.bullets-box ul { list-style: none; margin: 0; padding: 0; }

.bullets-box li {
  position:     relative;
  padding-left: 34px;
  line-height:  1.6;
  margin:       10px 0;
}

/* Kruh za fajfkou */
.bullets-box li::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           0.8em;
  transform:     translateY(-50%);
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    #e6f6ff;
  border:        1px solid #9fd6f0;
}

/* Fajfka (L-tvar) */
.bullets-box li::after {
  content:       "";
  position:      absolute;
  left:          7px;
  top:           0.8em;
  transform:     translateY(-60%) rotate(-45deg);
  width:         9px;
  height:        5px;
  border-left:   3px solid var(--pk-accent);
  border-bottom: 3px solid var(--pk-accent);
}

/* Dva sloupce */
.bullets-box.is-2cols ul {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap:            28px;
  row-gap:               10px;
}

.bullets-box.is-2cols li { margin: 0; }
.bullets-box.is-2cols li:nth-child(even)::after { left: 6px; }

@media (max-width: 640px) {
  .bullets-box.is-2cols ul { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   .faq – akordeon na <details>
   Pozn.: pro popisky kategorií existuje samostatná varianta .kat-faq (§7)
   postavená na <button> + JS. Obě se používají, nekolidují.
   -------------------------------------------------------------------------- */

.faq details + details   { border-top: 1px solid var(--pk-table-border); }
.faq details             { padding: 12px 0; }
.faq details:first-child { padding-top: 0; }
.faq details:last-child  { padding-bottom: 0; }

.faq summary {
  cursor:       pointer;
  font-weight:  700;
  line-height:  1.45;
  list-style:   none;
  position:     relative;
  padding-left: 34px;
  user-select:  none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Kruh ikony */
.faq summary::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           50%;
  transform:     translateY(-50%);
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    #e6f6ff;
  border:        1px solid #9fd6f0;
}

/* Ikona: otevřené = mínus (vodorovná čára), zavřené = plus */
.faq summary::after {
  content:       "";
  position:      absolute;
  left:          11px;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         10px;
  height:        2px;
  background:    var(--pk-accent);
  border-radius: 2px;
}

.faq details:not([open]) summary::after {
  background:
    linear-gradient(var(--pk-accent), var(--pk-accent)) center / 10px 2px no-repeat,
    linear-gradient(var(--pk-accent), var(--pk-accent)) center / 2px 10px no-repeat;
  width:  10px;
  height: 10px;
}

.faq .a {
  margin:       8px 0 0;
  padding-left: 34px;
  line-height:  1.65;
  color:        #334155;
}


/* --------------------------------------------------------------------------
   .pk-steps – průvodce krok za krokem (blokový)
   -------------------------------------------------------------------------- */

.pk-steps {
  --brand:  #0ea5e9;
  --brand2: #0b84c6;
  --t:      #0f172a;
  --m:      #475569;
  --b:      #d7e7f5;
  --bg:     #f7fbff;

  margin: 22px 0;
  color:  var(--t);
}

.pk-steps__title {
  margin:         0 0 14px;
  font-size:      1.9rem;
  font-weight:    800;
  line-height:    1.2;
  letter-spacing: -.01em;
}

.pk-steps__list {
  list-style:            none;
  margin:                0;
  padding:               0;
  display:               grid;
  gap:                   14px;
  grid-template-columns: 1fr;
}

.pk-step {
  position:      relative;
  padding:       12px 16px;
  border:        1.5px dashed var(--b);
  border-radius: 16px;
  background:    var(--bg);
}

.pk-step__badge {
  position:      absolute;
  left:          24px;
  top:           -6px;
  width:         40px;
  height:        40px;
  border-radius: 999px;
  display:       grid;
  place-items:   center;
  background:    var(--brand);
  color:         #fff;
  font-weight:   900;
  border:        4px solid #fff;
  box-shadow:    0 8px 18px rgba(15, 23, 42, .12);
}

.pk-step__head {
  margin:         0 0 4px;
  padding-left:   60px;
  font-size:      1.6rem;
  font-weight:    900;
  line-height:    1.2;
  letter-spacing: -.01em;
}

.pk-step__text {
  margin:       0;
  padding-left: 60px;
  color:        var(--m);
  line-height:  1.5;
}

/* Spojovací čára mezi kroky */
.pk-step:not(:last-child)::after {
  content:       "";
  position:      absolute;
  left:          44px;
  top:           34px;
  bottom:        -14px;
  width:         2px;
  background:    rgba(14, 165, 233, .35);
  border-radius: 2px;
}

/* Blog – zarovnání textu podle badge (podtržítko = lokální scope) */
body.type-post .pk-step {
  --_badge-left:  24px;
  --_badge-size:  40px;
  --_badge-gap:   4px;
  --_text-offset: calc(var(--_badge-left) + var(--_badge-size) + var(--_badge-gap));
}

body.type-post .pk-step__badge { left: var(--_badge-left) !important; }

body.type-post .pk-step__head,
body.type-post .pk-step__text { padding-left: var(--_text-offset) !important; }

body.type-post .pk-step__head { margin: 0 0 6px !important; }

body.type-post .pk-step__text,
body.type-post .pk-step__text p       { margin: 0 !important; }
body.type-post .pk-step__text > *     { margin: 0 !important; }
body.type-post .pk-step__text > * + * { margin-top: 8px !important; }
body.type-post .pk-step__text p:empty { display: none !important; }

body.type-post .pk-step:not(:last-child)::after {
  left:      calc(var(--_badge-left) + var(--_badge-size) / 2) !important;
  transform: translateX(-50%) !important;
}


/* --------------------------------------------------------------------------
   ol.pk-steps – číselný seznam
   -------------------------------------------------------------------------- */

ol.pk-steps {
  counter-reset: i;
  list-style:    none;
  padding:       0;
  margin:        16px 0;
}

ol.pk-steps > li {
  counter-increment: i;
  display:           flex;
  align-items:       center;
  gap:               12px;
  margin:            10px 0;
  line-height:       1.6;
}

ol.pk-steps > li::before {
  content:               counter(i);
  width:                 26px;
  height:                26px;
  border-radius:         999px;
  background:            var(--pk-brand);
  color:                 #fff;
  flex:                  0 0 26px;
  display:               flex;
  align-items:           center;
  justify-content:       center;
  font-weight:           700;
  font-size:             13px;
  line-height:           1;
  font-variant-numeric:  tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Dvojciferná čísla – optické vycentrování */
ol.pk-steps > li:nth-child(n+10)::before {
  padding-left: 1px;
  box-sizing:   border-box;
}


/* --------------------------------------------------------------------------
   .tip-box – tip rámeček
   -------------------------------------------------------------------------- */

.tip-box {
  display:       flex;
  align-items:   flex-start;
  gap:           3px;
  padding:       14px 16px;
  margin:        16px 0;
  background:    var(--color-primary-bg);
  border:        2px solid #1EAAE0;
  border-radius: 10px;
}

.tip-box__icon {
  flex:        0 0 auto;
  line-height: 1;
  font-size:   16px;
  margin-top:  2px;
}

.tip-box__text {
  margin:      0;
  color:       var(--color-text);
  font-size:   16px;
  line-height: 1.45;
}

.tip-box__label { font-weight: 700; }

.tip-box__text a {
  color:                 #1EAAE0;
  font-weight:           700;
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.tip-box__text a:hover { color: var(--color-primary-dark); }

.tip-box__text a:focus-visible {
  outline:        2px solid var(--pk-brand);
  outline-offset: 2px;
  border-radius:  4px;
}

body.type-post .tip-box__text,
body.type-post .tip-box__text p              { margin: 0 !important; }
body.type-post .tip-box__text > *:last-child { margin-bottom: 0 !important; }
body.type-post .tip-box__text p:empty        { display: none !important; }


/* --------------------------------------------------------------------------
   .author-card – medailonek autora
   Proměnné jsou v §1 TOKENY.
   -------------------------------------------------------------------------- */

.author-card {
  position:      relative;
  overflow:      hidden;
  padding:       22px 14px 16px 18px;
  background:    #fff;
  border:        1px solid #e7eded;
  border-radius: 14px;
  box-shadow:
    inset 4px 0 0 rgba(40, 173, 226, .10),
    0 10px 26px rgba(0, 0, 0, .06),
    0 2px 8px rgba(0, 0, 0, .04);
  width:         100%;
  max-width:     var(--authorMax);
  margin-inline: auto;
}

/* Levý dekorativní pruh */
.author-card::before {
  content:        "";
  position:       absolute;
  left: 0; top: 0; bottom: 0;
  width:          var(--stripWidth);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 168, 238, .18),
    rgba(0, 168, 238, .10) 45%,
    rgba(0, 168, 238, .04) 70%,
    rgba(0, 168, 238, 0)
  );
  z-index: 0;
}

.author-card__stripe { display: none; }

.author-card__inner {
  position:              relative;
  z-index:               1;
  padding:               0 24px 0 20px;
  display:               grid;
  grid-template-columns: max-content 1fr;
  gap:                   var(--authorGap);
  align-items:           start;
}

/* Vertikální dělicí linie */
.author-card__inner::before {
  content:       "";
  position:      absolute;
  top: 14px; bottom: 14px;
  left:          calc(var(--authorLeft) + var(--authorGap));
  width:         1px;
  border-radius: 2px;
  background:    rgba(0, 168, 238, .65);
}

.author-card__left {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  align-items:    center;
  text-align:     center;
}

.author-card__meta { width: 100%; overflow-wrap: anywhere; }

.author-card__avatar {
  width:         116px;
  height:        116px;
  border-radius: 999px;
  overflow:      hidden;
  background:    #fff;
  border:        0;
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px rgba(0, 0, 0, .08),
    0 10px 24px rgba(0, 0, 0, .08);
}

.author-card__avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.author-card__quote {
  position:    relative;
  padding:     34px 0 4px 22px;
  line-height: 1.6;
  max-width:   var(--quoteMax);
}

.author-card__quote::before {
  content:     "\201C";
  position:    absolute;
  left:        22px;
  top:         6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size:   54px;
  line-height: 1;
  color:       var(--pk-brand);
  opacity:     .30;
}

.author-card__quote p { margin: 0; font-style: italic; font-size: 13.5px; color: #2b3a3b; }
.author-card__name    { font-weight: 700; color: #1d2a2b; font-size: 16px; white-space: nowrap; }
.author-card__role    { margin-top: 0; color: #5a6a6b; font-size: 13px; line-height: 1.35; }

@media (max-width: 520px) {
  :root {
    --authorGap: 14px;
    --quoteMax:  100%;
  }

  .author-card {
    padding:   14px;
    max-width: 100%;
    box-shadow:
      inset 3px 0 0 rgba(40, 173, 226, .10),
      0 10px 26px rgba(0, 0, 0, .06),
      0 2px 8px rgba(0, 0, 0, .04);
  }

  .author-card::before { width: 6px; }

  .author-card__inner {
    grid-template-columns: 1fr;
    padding:               0 12px;
    gap:                   12px;
  }

  .author-card__inner::before { display: none; }

  .author-card__left {
    flex-direction:  row;
    align-items:     center;
    justify-content: flex-start;
    text-align:      left;
    gap:             12px;
  }

  .author-card__meta { width: auto; }

  .author-card__avatar {
    width:  74px;
    height: 74px;
    box-shadow:
      0 0 0 8px #fff,
      0 0 0 9px rgba(0, 0, 0, .08),
      0 8px 18px rgba(0, 0, 0, .10);
  }

  .author-card__name { white-space: normal; }

  .author-card__quote {
    padding:   26px 0 0 0;
    max-width: 100%;
  }

  .author-card__quote::before { left: 0; top: 2px; font-size: 46px; }
}


/* --------------------------------------------------------------------------
   .pk-tiles – info bloky 3 vedle sebe
   -------------------------------------------------------------------------- */

.pk-tiles {
  --t: #0f172a;
  --m: #475569;
  --b: #e5edf5;
  --a: #0ea5e9;

  display: grid;
  gap:     14px;
  margin:  18px 0;
}

@media (min-width: 900px) {
  .pk-tiles { grid-template-columns: repeat(3, 1fr); }
}

.pk-tile {
  border:        1px solid var(--b);
  border-radius: 16px;
  background:    #fff;
  padding:       16px 16px 14px;
  box-shadow:    0 8px 22px rgba(15, 23, 42, .06);
  color:         var(--t);
}

.pk-tile__icon {
  width:         38px;
  height:        38px;
  display:       grid;
  place-items:   center;
  border-radius: 12px;
  background:    rgba(14, 165, 233, .10);
  color:         var(--a);
  font-size:     18px;
  margin-bottom: 10px;
}

.pk-tile__title {
  font-size:      1.55rem !important;
  font-weight:    800 !important;
  line-height:    1.2;
  letter-spacing: -.01em;
  margin:         0 0 10px;
}

.pk-tile__text { margin: 0; color: var(--m); line-height: 1.45; }


/* --------------------------------------------------------------------------
   .pk-quote – citace
   -------------------------------------------------------------------------- */

.pk-quote {
  margin:        24px 0;
  padding:       22px 26px;
  background:    #f6fbff;
  border-radius: 14px;
  box-shadow:    var(--pk-table-shadow);
}

.pk-quote p    { margin: 0; font-style: italic; line-height: 1.85; color: #667085; }
.pk-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: .9em; color: #8a94a6; }


/* --------------------------------------------------------------------------
   .pk-split – blok obrázek + text
   -------------------------------------------------------------------------- */

.pk-split {
  --b:     #e6f2f8;
  --bg:    #fbfdff;
  --txt:   #0f172a;
  --muted: #475569;

  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   28px;
  align-items:           start;
  margin:                26px 0;
}

.pk-split__media {
  background:    var(--bg);
  border:        1px solid var(--b);
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    var(--pk-table-shadow);
}

.pk-split__media img { display: block; width: 100%; height: auto; }

.pk-split__content h2,
.pk-split__content h3 {
  margin:         0 0 12px;
  color:          var(--txt);
  font-weight:    800;
  letter-spacing: .01em;
}

.pk-split__content h2 {
  font-size:      28px;
  line-height:    1.2;
  padding-bottom: 10px;
  border-bottom:  3px solid rgba(0, 168, 238, .25);
}

.pk-split__content p            { margin: 0 0 12px; color: var(--muted); line-height: 1.8; font-size: 16px; }
.pk-split__content p:last-child { margin-bottom: 0; }
.pk-split__content strong       { color: var(--txt); }

.pk-split.is-reverse .pk-split__media   { order: 2; }
.pk-split.is-reverse .pk-split__content { order: 1; }

@media (max-width: 900px) {
  .pk-split { grid-template-columns: 1fr; gap: 16px; }

  .pk-split.is-reverse .pk-split__media,
  .pk-split.is-reverse .pk-split__content { order: unset; }

  .pk-split__content h2 { font-size: 22px; }
}


/* --------------------------------------------------------------------------
   .pk-perex – perex článku
   -------------------------------------------------------------------------- */

.pk-perex {
  margin:        18px 0 24px;
  padding:       16px 18px;
  background:    #f6fbff;
  border-radius: 14px;
  box-shadow:    var(--pk-table-shadow);
  border-top:    3px solid var(--pk-brand);
}

.pk-perex p { margin: 0; font-size: 18px; line-height: 1.85; color: #475569; font-weight: 500; }


/* --------------------------------------------------------------------------
   .reviews__grid / .review-card – bloky s hodnocením
   -------------------------------------------------------------------------- */

.reviews__grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:                   18px;
}

.review-card {
  background:     #f5f5f5;
  border-radius:  14px;
  padding:        18px 20px;
  display:        flex;
  flex-direction: column;
}

.review-card__stars { color: #f6b300; font-size: 18px; letter-spacing: 2px; line-height: 1; margin-bottom: 8px; }
.review-card__text  { margin: 0 0 14px; color: #2b2f33; font-size: 14px; line-height: 1.45; flex: 1; }
.review-card__user  { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.review-card__avatar {
  width:           34px;
  height:          34px;
  border-radius:   999px;
  border:          2px solid var(--pk-brand);
  color:           var(--pk-brand);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 34px;
}

.review-card__name { font-weight: 700; color: #1f2327; font-size: 14px; line-height: 1.2; }
.review-card__date { color: #6b7280; font-size: 12px; margin-top: 2px; }

@media (max-width: 1100px) { .reviews__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 560px)  { .reviews__grid { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   .pk-usp – USP bloky (4 v řadě) a .pk-usp--3 (3 v řadě s ikonou nad boxem)
   -------------------------------------------------------------------------- */

.pk-usp,
.pk-usp--3 {
  --bd:  #e7eded;
  --txt: #24242e;

  display: grid;
  margin:  16px 0;
}

.pk-usp {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:                   16px;
}

.pk-usp--3 {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:                   18px;
  margin:                22px 0 16px;
}

.pk-usp__item {
  background:    #fff;
  border:        1px solid var(--bd);
  border-radius: 14px;
  padding:       16px 14px;
  text-align:    center;
  box-shadow:    0 10px 28px rgba(15, 23, 42, .06);
}

.pk-usp__icon {
  width:           auto;
  height:          auto;
  margin:          0 auto 10px;
  border:          0;
  border-radius:   0;
  color:           var(--pk-brand);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  line-height:     1;
}

.pk-usp__title { font-weight: 800; color: var(--txt); font-size: 14px; line-height: 1.25; }
.pk-usp__text  { margin-top: 6px; color: #5b6470; font-size: 13px; line-height: 1.45; }

/* Varianta se 3 sloupci a ikonou přesahující nad box */
.pk-usp--3 .pk-usp__item {
  position:      relative;
  background:    linear-gradient(180deg, rgba(0, 168, 238, .06), #fff 70%);
  padding:       40px 16px 16px;
  transition:    background-color .2s, border-color .2s, box-shadow .2s;
}

.pk-usp--3 .pk-usp__item:hover {
  background:   rgba(0, 168, 238, .04);
  border-color: rgba(0, 168, 238, .22);
  box-shadow:   0 14px 34px rgba(15, 23, 42, .08);
}

.pk-usp--3 .pk-usp__icon {
  position:        absolute;
  left:            50%;
  top:             0;
  transform:       translate(-50%, -50%);
  width:           60px;
  height:          60px;
  border-radius:   999px;
  background:      #fff;
  border:          2px solid rgba(0, 168, 238, .35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 10px 22px rgba(15, 23, 42, .08);
}

.pk-usp--3 .pk-usp__icon img { width: 36px; height: 36px; object-fit: contain; display: block; }

@media (max-width: 900px) {
  .pk-usp    { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .pk-usp--3 { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .pk-usp { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   .pk-infoline – informační linka
   -------------------------------------------------------------------------- */

.pk-infoline {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       12px 14px;
  border-radius: 14px;
  background:    transparent;
  border:        1px solid rgba(0, 168, 238, .35);
  color:         var(--color-text);
  line-height:   1.6;
}

.pk-infoline__icon {
  width:           26px;
  height:          26px;
  border-radius:   999px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid rgba(0, 168, 238, .35);
  color:           var(--pk-brand);
  background:      #fff;
  font-weight:     700;
  font-size:       13px;
  line-height:     1;
  flex:            0 0 26px;
}

.pk-infoline strong { white-space: nowrap; }


/* --------------------------------------------------------------------------
   .top-topics-wrap – mini buttony s tématy
   -------------------------------------------------------------------------- */

.top-topics-wrap {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           6px;
  margin-top:    -12px;
  margin-bottom: 16px;
}

.top-topics-wrap .top-topic {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         6px 14px;
  border-radius:   999px;
  background:      var(--color-bg-light);
  border:          1px solid var(--color-border);
  color:           var(--color-text) !important;
  text-decoration: none !important;
  font-size:       14px;
  line-height:     1.2;
  transition:      background-color .2s, border-color .2s, box-shadow .2s, transform .05s;
}

.top-topics-wrap .top-topic:hover {
  background:      #eeeeee;
  border-color:    var(--color-border);
  box-shadow:      0 2px 8px rgba(0, 0, 0, .08);
  transform:       translateY(-1px);
  text-decoration: none !important;
}

.top-topics-wrap .top-topic:focus-visible {
  outline:        2px solid #9e9e9e;
  outline-offset: 2px;
}

.top-topics-wrap .top-topic:active { transform: translateY(0); }

.top-topics-wrap .top-topic.is-active,
.top-topics-wrap .top-topic[aria-current="page"] {
  background:   var(--color-text);
  border-color: var(--color-text);
  color:        #fff !important;
  box-shadow:   none;
  transform:    none;
}


/* --------------------------------------------------------------------------
   .pk-cta – CTA tlačítko
   -------------------------------------------------------------------------- */

.pk-cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          44px;
  padding:         0 28px;
  border-radius:   999px;
  background:      var(--pk-brand);
  color:           #fff;
  border:          0;
  font-weight:     700;
  font-size:       14px;
  line-height:     1;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  cursor:          pointer;
  transition:      background-color .2s ease;
}

.pk-cta:hover { background: var(--color-primary-dark); }

.pk-cta:focus-visible {
  outline:        3px solid rgba(0, 168, 232, .35);
  outline-offset: 3px;
}

a.pk-cta,
a.pk-cta * {
  color:           #fff;
  text-decoration: none !important;
  box-shadow:      none !important;
  border-bottom:   0 !important;
}


/* ==========================================================================
   §7 KATEGORIOVÉ KOMPONENTY (.kat-*)
   Komponenty vkládané do horního a dolního popisku kategorií.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ŠTÍTEK (.kat-stitek / .prod-stitek)
   Obě třídy byly znak po znaku shodné → jedno pravidlo.
   Názvy zůstávají oddělené, aby šlo produktový detail v budoucnu
   stylovat nezávisle na kategoriích.
   HTML: <span class="kat-stitek">Hlavní kategorie</span>
   -------------------------------------------------------------------------- */

/* v1.04: dashed pill nahrazen typografickým kickerem — stejné tvarosloví
   jako .pk-hero__kicker, takže štítek nad rozcestníkem a nadpis hero panelu
   patří viditelně k jedné rodině. */
.kat-stitek,
.prod-stitek {
  display:          inline-block;
  padding:          0;
  font-family:      var(--font-primary);
  font-size:        11.5px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.12em;
  line-height:      1.2;
  color:            var(--color-primary);
  background-color: transparent;
  border:           none;
  border-radius:    0;
}

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


/* --------------------------------------------------------------------------
   HLAVNÍ KATEGORIE (.kat-hlavni-*)
   Grid karet s obrázkem a popiskem.

   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" …>
   -------------------------------------------------------------------------- */

.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);
  outline-offset: 2px;
  border-radius:  var(--kat-hlavni-radius);
}

/* Varianta – odkaz na článek */
.kat-hlavni-link-blog        { background-color: var(--kat-hlavni-bg-blog); }
.kat-hlavni-link-blog:hover  { background-color: var(--kat-hlavni-bg-blog-hover); }

.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);
  font-weight:   700;
  text-align:    center;
  line-height:   1.2;
  margin:        0;
  word-wrap:     break-word;
  overflow-wrap: break-word;
}

/* Mobil: 3 karty v řadě */
@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); }
}


/* --------------------------------------------------------------------------
   PILL TAGY (.kat-parametricka-link / .prod-varianta-link /
              .prod-kategorie__link)
   Tři komponenty ze tří souborů měly totožné deklarace → jedno pravidlo.
   Kontejnery a modifikátory zůstávají samostatné.
   -------------------------------------------------------------------------- */

.kat-parametricka-link,
.prod-varianta-link,
.prod-kategorie__link {
  display:          inline-flex;
  align-items:      center;
  padding:          6px 13px;
  background-color: var(--pill-bg);
  border:           1px solid rgba(0, 168, 238, 0.18);
  border-radius:    50px;
  font-family:      var(--font-primary);
  font-size:        12px;
  font-weight:      600;
  color:            var(--kat-text);
  text-decoration:  none !important;
  white-space:      nowrap;
  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: var(--pill-bg-hover);
  border-color:     var(--kat-blok-border-akcent);
}

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

/* Varianta – odkaz na článek (v kategorie-v3.css byla definovaná 2×) */
.kat-parametricka-link-blog       { background-color: var(--kat-hlavni-bg-blog); }
.kat-parametricka-link-blog:hover { background-color: #dceaf7; }

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

/* Kontejner parametrických tagů.
   Asymetrický padding: nad gridem typicky stojí .kat-stitek a bez
   většího horního odsazení jeho dashed rámeček opticky zasahuje
   do první řady pillů. */
.kat-parametricka-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  padding:    12px 0 10px;
  list-style: none;
  margin:     0;
}


/* --------------------------------------------------------------------------
   TIP (.kat-tip) – zelený box s radou pro nakupujícího
   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);
  margin:           16px 0;
}

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


/* --------------------------------------------------------------------------
   VĚDĚLI JSTE (.kat-vedeli) – žlutý box s faktem
   Vizuálně odlišený od .kat-tip. Max. 1× na stránku.
   -------------------------------------------------------------------------- */

.kat-vedeli {
  position:         relative;
  margin:           20px 0;
  padding:          14px 18px 14px 50px;
  background-color: #fff8e6;
  border:           1px solid #f3e1a8;
  border-radius:    8px;
}

.kat-vedeli::before {
  content:     '\1F4AD';
  position:    absolute;
  left:        14px;
  top:         12px;
  font-size:   18px;
  line-height: 1.4;
}

.kat-vedeli__nadpis {
  margin:         0 0 4px;
  font-family:    var(--font-primary);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          #8a6d1a;
  line-height:    1.3;
}

.kat-vedeli__text {
  margin:      0;
  font-family: var(--font-primary);
  font-size:   14px;
  line-height: 1.6;
  color:       var(--color-text);
}

@media (max-width: 767px) {
  .kat-vedeli         { padding: 12px 14px 12px 42px; }
  .kat-vedeli::before { font-size: 16px; left: 12px; top: 12px; }
  .kat-vedeli__text   { font-size: 13px; }
}


/* --------------------------------------------------------------------------
   KRUHOVÁ ŠIPKA (.kat-faq__ikona / .kat-pruvodce__ikona)
   Obě ikony byly shodné → jedno pravidlo. Stavy se liší nositelem
   (aria-expanded u FAQ, třída .je-zabaleno u průvodce), proto jsou
   stavová pravidla dál oddělená.
   -------------------------------------------------------------------------- */

.kat-faq__ikona,
.kat-pruvodce__ikona {
  flex-shrink:   0;
  display:       inline-block;
  width:         28px;
  height:        28px;
  border:        1px solid var(--kat-blok-border);
  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;
}

/* Šipka dolů (∨) pomocí border triku */
.kat-faq__ikona::after,
.kat-pruvodce__ikona::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  width:         7px;
  height:        7px;
  border-right:  2px solid var(--kat-text-mute);
  border-bottom: 2px solid var(--kat-text-mute);
  transform:     translate(-50%, -65%) rotate(45deg);
  transition:    border-color 0.15s ease-in-out,
                 transform    0.25s ease-in-out;
}


/* --------------------------------------------------------------------------
   FAQ – časté otázky (.kat-faq)
   Accordion, každá položka ve vlastním rámečku.

   HTML:
     <section class="kat-faq">
       <h2 class="kat-faq__nadpis">Časté otázky…</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í řeší třída .je-zabaleno, ne atribut hidden — Shoptet ho
   v popisu kategorie ignoruje. Schema.org FAQPage patří do <head>
   přes Shoptet snippet.
   -------------------------------------------------------------------------- */

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

.kat-faq__nadpis {
  font-family:    var(--font-primary);
  font-size:      22px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -0.01em;
  color:          var(--kat-text);
  margin:         0 0 14px;
  padding:        0;
}

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

.kat-faq__polozka {
  border:        1px solid var(--kat-blok-border);
  border-radius: var(--kat-blok-radius);
  background:    var(--kat-blok-bg-tlumeny);
  overflow:      hidden;
  transition:    border-color 0.15s ease-in-out,
                 background   0.15s ease-in-out;
}

.kat-faq__polozka:hover { border-color: var(--kat-blok-border-akcent); }

.kat-faq__polozka:has(.kat-faq__otazka[aria-expanded="true"]) {
  border-color: var(--kat-blok-border-akcent);
  background:   var(--kat-blok-bg);
}

.kat-faq__otazka {
  display:       flex;
  align-items:   center;
  gap:           12px;
  width:         100%;
  box-sizing:    border-box;
  padding:       14px 18px !important;
  background:    none;
  border:        none;
  cursor:        pointer;
  text-align:    left;
  font-family:   var(--font-primary);
  font-size:     15px;
  font-weight:   700;
  line-height:   1.4;
  color:         var(--kat-text);
  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); }

.kat-faq__otazka:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius:  var(--kat-blok-radius);
}

/* Stav: rozbaleno – šipka se otočí na ∧ */
.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona {
  border-color: var(--color-primary);
  background:   #e8f6fd;
}

.kat-faq__otazka[aria-expanded="true"] .kat-faq__ikona::after {
  border-color: var(--color-primary);
  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);
}

.kat-faq__polozka.je-zabaleno .kat-faq__odpoved { display: none; }

.kat-faq__odpoved {
  margin:      0;
  padding:     0 18px 18px 58px !important;
  font-family: var(--font-primary);
  font-size:   14.5px;
  line-height: 1.7;
  color:       var(--kat-text-soft);
}

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

/* Podpis specialisty u odborně náročné odpovědi.
   Specificita: .kat-faq__odpoved p = (0,1,1),
                .kat-faq__odpoved .kat-faq__autor = (0,2,0) → vyhrává. */
.kat-faq__odpoved .kat-faq__autor {
  display:     block;
  margin:      14px 0 0;
  padding-top: 12px;
  border-top:  1px solid var(--kat-blok-linka);
  font-family: var(--font-primary);
  font-size:   13px;
  line-height: 1.4;
}

.kat-faq__autor-jmeno        { font-weight: 700; color: var(--kat-text); }
.kat-faq__autor-jmeno::after { content: ', '; font-weight: 400; color: var(--kat-text-mute); }
.kat-faq__autor-role         { font-weight: 400; color: var(--kat-text-mute); }

/* v1.04: jednotný styl odkazů uvnitř obsahových bloků kategorie.
   Dřív měl každý blok vlastní (FAQ modrý podtržený, průvodce zděděný
   po Shoptetu, hero vlastní) — teď je to jedno pravidlo. */
.kat-faq__odpoved a,
.kat-pruvodce__obsah a,
.kat-postup__text a,
.kat-tip-expert__text a {
  color:                     inherit;
  text-decoration:           underline;
  text-decoration-color:     rgba(0, 168, 238, 0.45);
  text-underline-offset:     3px;
  text-decoration-thickness: 1px;
  transition:                color 0.2s ease;
}

.kat-faq__odpoved a:hover,
.kat-pruvodce__obsah a:hover,
.kat-postup__text a:hover,
.kat-tip-expert__text a:hover { color: var(--color-primary); }

@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 !important;
  }

  .kat-faq__odpoved .kat-faq__autor { font-size: 11px; }
}

/* Notebook / střední desktop – text otázky se nezalamuje na dva řádky */
@media (min-width: 768px) and (max-width: 1280px) {
  .kat-faq__otazka { font-size: 14px; }
}


/* --------------------------------------------------------------------------
   PRŮVODCE VÝBĚREM (.kat-pruvodce)
   Jeden velký accordion. Stejný toggle mechanismus jako FAQ
   (.je-zabaleno na rootu sekce).
   -------------------------------------------------------------------------- */

.kat-pruvodce {
  margin:        28px 0;
  border:        1px solid var(--kat-blok-border);
  border-radius: var(--kat-blok-radius);
  background:    var(--kat-blok-bg-tlumeny);
  overflow:      hidden;
  transition:    border-color 0.15s ease-in-out,
                 background   0.15s ease-in-out;
}

.kat-pruvodce:hover { border-color: var(--kat-blok-border-akcent); }

.kat-pruvodce:not(.je-zabaleno) {
  border-color: var(--kat-blok-border-akcent);
  background:   var(--kat-blok-bg);
}

.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);
  outline-offset: -2px;
  border-radius:  var(--kat-blok-radius);
}

.kat-pruvodce__titulek {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-family:   var(--font-primary);
  font-size:     17px;
  font-weight:   700;
  line-height:   1.3;
  color:         var(--kat-text);
  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); }

/* v1.04: dlaždice se stejným tvaroslovím jako .pk-benefit__ikona.
   Do elementu patří inline SVG; emoji zůstává jen jako fallback,
   když je element prázdný (starší HTML v obsahu). */
.kat-pruvodce__ikona-kniha {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--kat-ikona-radius);
  background:      var(--kat-ikona-bg);
  color:           var(--color-primary);
  font-size:       16px;
  line-height:     1;
}

.kat-pruvodce__ikona-kniha svg {
  width:           20px;
  height:          20px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.7;
  stroke-linecap:  round;
  stroke-linejoin: round;
  display:         block;
}

.kat-pruvodce__ikona-kniha:empty::before { content: '\1F4CB'; }

/* Stav: rozbaleno */
.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona {
  border-color: var(--color-primary);
  background:   #e8f6fd;
}

.kat-pruvodce:not(.je-zabaleno) .kat-pruvodce__ikona::after {
  border-color: var(--color-primary);
  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);
}

.kat-pruvodce.je-zabaleno .kat-pruvodce__obsah { display: none; }

.kat-pruvodce__obsah {
  padding:    0 20px 24px;
  border-top: 1px solid var(--kat-blok-linka);
}

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

.kat-pruvodce__krok + .kat-pruvodce__krok { border-top: 1px solid var(--kat-blok-linka); }

.kat-pruvodce__krok-nadpis {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-primary);
  font-size:   15.5px;
  font-weight: 700;
  color:       var(--kat-text);
  margin:      0 0 10px;
  padding:     0;
}

.kat-pruvodce__cislo {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--color-primary);
  color:           #ffffff;
  font-size:       13px;
  font-weight:     700;
  line-height:     1;
}

.kat-pruvodce__obsah p {
  font-family: var(--font-primary);
  font-size:   14.5px;
  line-height: 1.7;
  color:       var(--kat-text-soft);
  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);
  font-size:   14px;
  line-height: 1.7;
  color:       var(--color-text);
}

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

/* Tabulka srovnání uvnitř průvodce */
.kat-pruvodce__tabulka-wrapper {
  overflow-x:    auto;
  margin:        0 0 12px;
  border:        1px solid var(--color-border);
  border-radius: 8px;
}

.kat-pruvodce__tabulka {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-primary);
  font-size:       13px;
  line-height:     1.5;
  color:           var(--color-text);
}

.kat-pruvodce__tabulka th {
  background:    #f2f5f9;
  font-weight:   600;
  text-align:    left;
  padding:       9px 14px;
  border-bottom: 1px solid var(--color-border);
  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; }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .kat-pruvodce__titulek { font-size: 15px; }
}


/* --------------------------------------------------------------------------
   POSTUP KROK ZA KROKEM (.kat-postup)
   Číslované kroky vždy viditelné — pro sbalitelnou variantu slouží
   .kat-pruvodce. 3–6 kroků, max. 1× na stránku.
   -------------------------------------------------------------------------- */

.kat-postup {
  margin:        28px 0;
  padding:       22px 24px;
  border:        1px solid var(--kat-blok-border);
  border-radius: var(--kat-blok-radius);
  background:    var(--kat-blok-bg);
}

.kat-postup__nadpis {
  font-family: var(--font-primary);
  font-size:   17px;
  font-weight: 700;
  color:       var(--kat-text);
  margin:      0 0 14px;
  padding:     0;
  line-height: 1.4;
}

.kat-postup__seznam { list-style: none; margin: 0; padding: 0; }

.kat-postup__krok {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  padding:     14px 0;
  border-top:  1px solid var(--kat-blok-linka);
  margin:      0;
}

.kat-postup__krok:first-child { padding-top: 4px; border-top: none; }
.kat-postup__krok:last-child  { padding-bottom: 0; }

.kat-postup__cislo {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--color-primary);
  color:           #ffffff;
  font-family:     var(--font-primary);
  font-size:       13px;
  font-weight:     700;
  line-height:     1;
  margin-top:      1px;
}

.kat-postup__obsah { flex: 1; min-width: 0; }

.kat-postup__titulek {
  font-family: var(--font-primary);
  font-size:   15.5px;
  font-weight: 700;
  color:       var(--kat-text);
  margin:      0 0 6px;
  line-height: 1.4;
}

.kat-postup__text {
  font-family: var(--font-primary);
  font-size:   14.5px;
  line-height: 1.7;
  color:       var(--kat-text-soft);
  margin:      0;
}

.kat-postup__text + .kat-postup__text { margin-top: 8px; }

@media (max-width: 767px) {
  .kat-postup          { padding: 16px; }
  .kat-postup__nadpis  { font-size: 15px; margin: 0 0 12px; }
  .kat-postup__krok    { gap: 10px; padding: 12px 0; }
  .kat-postup__cislo   { width: 26px; height: 26px; font-size: 12px; }
  .kat-postup__titulek { font-size: 14px; }
  .kat-postup__text    { font-size: 13px; }
}


/* --------------------------------------------------------------------------
   IDENTITA (.kat-identita)
   Vždy viditelný blok s fakty o značce — NESBALOVAT.
   -------------------------------------------------------------------------- */

.kat-identita {
  margin:        32px 0 16px;
  padding:       20px 24px;
  border:        1px solid var(--color-border);
  border-left:   3px solid var(--color-primary);
  border-radius: 10px;
  background:    var(--kat-hlavni-bg);
}

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

.kat-identita__text p {
  font-family: var(--font-primary);
  font-size:   14px;
  line-height: 1.75;
  color:       var(--color-text);
  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 var(--color-border);
}

.kat-identita__benefit {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  background:    #ffffff;
  border:        1px solid var(--color-border);
  border-radius: 50px;
  font-family:   var(--font-primary);
  font-size:     13px;
  font-weight:   500;
  color:         var(--color-text);
  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; }
}


/* --------------------------------------------------------------------------
   CITACE SPECIALISTY (.kat-citace)
   Max. 1× na stránku.
   -------------------------------------------------------------------------- */

.kat-citace {
  position:      relative;
  margin:        24px 0;
  padding:       18px 24px 18px 60px;
  border:        1px solid var(--color-border);
  border-left:   3px solid var(--color-primary);
  border-radius: 10px;
  background:    #fafbfc;
}

.kat-citace::before {
  content:     '\201C';
  position:    absolute;
  top:         4px;
  left:        18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   54px;
  line-height: 1;
  color:       var(--color-primary);
  opacity:     0.6;
}

.kat-citace__text { margin: 0 0 14px; padding: 0; border: none; }

.kat-citace__text p {
  font-family: var(--font-primary);
  font-size:   15px;
  line-height: 1.7;
  color:       var(--color-text);
  font-style:  italic;
  margin:      0 0 8px;
}

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

.kat-citace__autor {
  display:     block;
  font-family: var(--font-primary);
  font-size:   13px;
  line-height: 1.4;
  padding-top: 10px;
  border-top:  1px solid #ebebec;
  font-style:  normal;
}

.kat-citace__jmeno { display: block; font-weight: 700; color: var(--color-text); }
.kat-citace__role  { display: block; margin-top: 2px; font-weight: 400; color: #6b7280; }

@media (max-width: 767px) {
  .kat-citace          { padding: 14px 16px 14px 46px; }
  .kat-citace::before  { font-size: 42px; top: 2px; left: 14px; }
  .kat-citace__text p  { font-size: 14px; }
  .kat-citace__autor   { font-size: 12px; }
}


/* --------------------------------------------------------------------------
   TIP EXPERTA (.kat-tip-expert)
   Plnobarevný box sladěný s hero sekcí (§9). Max. 1× na stránku.
   -------------------------------------------------------------------------- */

.kat-tip-expert {
  margin:        28px 0;
  padding:       24px 28px;
  background:    var(--pk-hero-bg);
  border-radius: var(--kat-blok-radius-lg);
  box-sizing:    border-box;
}

.kat-tip-expert__hlavicka {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 14px;
}

.kat-tip-expert__ikona {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border-radius:   var(--kat-ikona-radius);
  background:      var(--color-primary);
}

.kat-tip-expert__ikona svg {
  width:           21px;
  height:          21px;
  stroke:          #ffffff;
  fill:            none;
  stroke-width:    1.7;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.kat-tip-expert__nadpis {
  font-family:    var(--font-primary);
  font-size:      17px;
  font-weight:    700;
  line-height:    1.2;
  color:          var(--pk-hero-ink);
  letter-spacing: 0.01em;
}

.kat-tip-expert__text {
  margin:      0;
  font-family: var(--font-primary);
  font-size:   15px;
  line-height: 1.75;
  color:       var(--pk-hero-ink-soft);
}

.kat-tip-expert__autor {
  margin:      14px 0 0;
  padding-top: 14px;
  border-top:  1px solid var(--kat-blok-linka);
  font-family: var(--font-primary);
  font-size:   13px;
  line-height: 1.4;
}

.kat-tip-expert__autor-jmeno { font-weight: 700; color: var(--pk-hero-ink); }
.kat-tip-expert__autor-role  { font-weight: 400; color: var(--pk-hero-ink-mute); }

@media (max-width: 767px) {
  .kat-tip-expert            { padding: 18px; border-radius: 16px; }
  .kat-tip-expert__nadpis    { font-size: 16px; }
  .kat-tip-expert__text      { font-size: 14px; }
  .kat-tip-expert__ikona     { width: 38px; height: 38px; }
  .kat-tip-expert__ikona svg { width: 19px; height: 19px; }
}


/* ==========================================================================
   §8 PRODUKTOVÉ KOMPONENTY (.prod-*)
   Komponenty vkládané do krátkého a dlouhého popisku produktu.
   Pozn.: .prod-stitek a pill tagy .prod-varianta-* / .prod-kategorie__link
   jsou kvůli shodným deklaracím sloučené se svými protějšky v §7.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ŠTÍTEK V DIVU
   Shoptet renderuje <p> v krátkém popisku inline, proto se štítky
   obalují do <div>. Toto pravidlo zajistí odsazení a nový řádek.
   -------------------------------------------------------------------------- */

.p-short-description div:has(> .kat-stitek),
.p-short-description div:has(> .prod-stitek),
.short-description div:has(> .kat-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,
.p-short-description div:has(> .prod-stitek):first-child,
.short-description div:has(> .kat-stitek):first-child,
.short-description div:has(> .prod-stitek):first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   TEXT VÝROBCE – accordion (.prod-vyrobce-*)
   Toggle přes .je-zabaleno, ovládání inline scriptem v HTML.
   -------------------------------------------------------------------------- */

.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: var(--pill-bg-hover);
  border-color:     #999;
}

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

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

.prod-vyrobce__obsah {
  margin-top:    12px;
  padding:       14px 18px;
  background:    var(--kat-hlavni-bg);
  border:        1px solid var(--color-border);
  border-radius: 8px;
  font-family:   var(--font-primary);
  font-size:     13px;
  line-height:   1.7;
  color:         var(--color-text);
}

.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; }
}


/* --------------------------------------------------------------------------
   VARIANTY PRODUKTU (.prod-varianta-*)
   Pill tagy — vzhled odkazu viz §7 (sloučené pravidlo).
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   KATEGORIE PRODUKTU (.prod-kategorie-*)
   Sekce „Produkt najdete také v kategoriích“ v dlouhém popisku.
   -------------------------------------------------------------------------- */

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

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

.prod-kategorie__grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  list-style: none;
  margin:     0;
  padding:    0;
}


/* --------------------------------------------------------------------------
   ROZCESTNÍKY VARIANT — sdílený vzhled
   Pět komponent (rozměr / provedení / verze / okraj / konstrukce) mělo
   identické deklarace ve třech oddělených blocích. Sloučeno do jednoho
   pravidla; názvy tříd zůstávají oddělené kvůli sémantice os variant
   a možnosti nezávislého stylování.

   HTML (příklad):
     <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,
.prod-provedeni-grid,
.prod-verze-grid,
.prod-slim-grid,
.prod-konstrukce-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  padding:    10px 0 4px;
  list-style: none;
  margin:     0;
}

.prod-rozmery-item,
.prod-provedeni-item,
.prod-verze-item,
.prod-slim-item,
.prod-konstrukce-item {
  flex:      0 0 auto;
  min-width: 0;
}

.prod-rozmery-link,
.prod-provedeni-link,
.prod-verze-link,
.prod-slim-link,
.prod-konstrukce-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);
  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 skutečných odkazech, ne na aktuální variantě */
a.prod-rozmery-link:hover,
a.prod-provedeni-link:hover,
a.prod-verze-link:hover,
a.prod-slim-link:hover,
a.prod-konstrukce-link:hover {
  background-color: var(--prod-rozmery-bg-hover);
}

.prod-rozmery-link:focus-visible,
.prod-provedeni-link:focus-visible,
.prod-verze-link:focus-visible,
.prod-slim-link:focus-visible,
.prod-konstrukce-link:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Aktuální varianta – zelený rámeček, neklikatelná */
.prod-rozmery-link.is-current,
.prod-provedeni-link.is-current,
.prod-verze-link.is-current,
.prod-slim-link.is-current,
.prod-konstrukce-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,
  .prod-provedeni-grid,
  .prod-verze-grid,
  .prod-slim-grid,
  .prod-konstrukce-grid { gap: 8px; }

  .prod-rozmery-link,
  .prod-provedeni-link,
  .prod-verze-link,
  .prod-slim-link,
  .prod-konstrukce-link { padding: 9px 13px; font-size: 13px; }
}


/* --------------------------------------------------------------------------
   TEXTOVÉ ROZCESTNÍKY (.prod-barvy-text-* / .prod-umyvadlo-*)
   Pro série s mnoha dekory (Sapho) nebo s výběrem umyvadla (Dřevojas),
   kde kruhový vzorník nedává smysl. Obě komponenty byly identické.
   -------------------------------------------------------------------------- */

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

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

.prod-barvy-text-link,
.prod-umyvadlo-link {
  display:          inline-block;
  padding:          8px 14px;
  font-size:        14px;
  line-height:      1.2;
  text-decoration:  none;
  color:            var(--prod-rozmery-text);
  background-color: var(--prod-rozmery-bg);
  border:           1px solid transparent;
  border-radius:    var(--prod-rozmery-radius);
  transition:       background-color .15s ease, border-color .15s ease;
}

a.prod-barvy-text-link:hover,
a.prod-umyvadlo-link:hover {
  background-color: var(--prod-rozmery-bg-hover);
}

.prod-barvy-text-link.is-current,
.prod-umyvadlo-link.is-current {
  background-color: var(--prod-rozmery-current-bg);
  border-color:     var(--prod-rozmery-current);
  color:            var(--prod-rozmery-current);
  font-weight:      600;
  cursor:           default;
}

@media (max-width: 480px) {
  .prod-barvy-text-link,
  .prod-umyvadlo-link { padding: 7px 12px; font-size: 13px; }
}


/* --------------------------------------------------------------------------
   BAREVNÉ VARIANTY (.prod-barvy-*) – kruhové vzorníky

   HTML:
     <ul class="prod-barvy-grid">
       <li class="prod-barvy-item">
         <span class="prod-barva is-current" aria-current="true"
               data-barva="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-barva="Č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; }

.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);
  outline-offset: 2px;
}

/* Aktuální barva – zelený prstenec + bílé 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);
  filter:        drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}


/* Modifikátory odstínů — 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--med             { background: linear-gradient(135deg, #e3a07a 0%, #b87333 55%, #d68a5e 100%); }
.prod-barva--gunmetal        { background: linear-gradient(135deg, #6a7079 0%, #3a3f45 55%, #565b62 100%); }
.prod-barva--agila           { background: #9a9b86; }
.prod-barva--fallback        { background: #d8d8da; }

/* Dřevodekory a matné odstíny (Aqualine) */
.prod-barva--dub-platin      { background: linear-gradient(135deg, #cfc1a8 0%, #a8967a 55%, #bdac8d 100%); }
.prod-barva--dub             { background: linear-gradient(135deg, #b88f5c 0%, #8c6a3f 55%, #a87f4f 100%); }
.prod-barva--dub-cerny       { background: linear-gradient(135deg, #3c322a 0%, #201913 55%, #2e251d 100%); }
.prod-barva--cerna-mat       { background: #262626; }
.prod-barva--bila-dub-platin { background: linear-gradient(135deg, #ffffff 0%, #ffffff 48%, #cfc1a8 52%, #a8967a 100%); }

/* Matné akryláty, litý mramor a dvoubarevná provedení (Polysan).
   Dvoubarevné vzorníky = diagonální půlení. */
.prod-barva--bila-mat        { background: #f3f3f0; }
.prod-barva--seda            { background: #9b9b9d; }
.prod-barva--ivory           { background: #efe7d4; }
.prod-barva--hneda           { background: #6f5642; }
.prod-barva--bezova          { background: #d6c3a1; }
.prod-barva--cerna-bila      { background: linear-gradient(135deg, #1f1f1f 0%, #1f1f1f 50%, #ffffff 50%, #ffffff 100%); }
.prod-barva--bila-seda       { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #6f757a 50%, #6f757a 100%); }
.prod-barva--bila-antracit   { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #3a3f45 50%, #3a3f45 100%); }
.prod-barva--bila-hneda      { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #6f5642 50%, #6f5642 100%); }
.prod-barva--bila-bezova     { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #d6c3a1 50%, #d6c3a1 100%); }


/* Bublina s názvem barvy.
   Zdroj textu: data-barva má přednost, jinak title (zpětná kompatibilita
   se staršími bloky). */
.prod-barva[data-barva]::after              { content: attr(data-barva); }
.prod-barva[title]:not([data-barva])::after { content: attr(title); }

.prod-barva[data-barva]::after,
.prod-barva[title]::after {
  position:       absolute;
  left:           50%;
  bottom:         calc(100% + 9px);
  transform:      translateX(-50%) translateY(4px);
  z-index:        30;
  padding:        5px 9px;
  border-radius:  6px;
  background:     var(--prod-barva-tip-bg);
  color:          var(--prod-barva-tip-text);
  font-family:    var(--font-primary);
  font-size:      12px;
  font-weight:    600;
  line-height:    1.2;
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  visibility:     hidden;
  transition:     opacity   0.15s ease-in-out,
                  transform 0.15s ease-in-out;
}

/* Šipka pod bublinou */
.prod-barva[data-barva]::before,
.prod-barva[title]::before {
  content:          '';
  position:         absolute;
  left:             50%;
  bottom:           calc(100% + 4px);
  transform:        translateX(-50%) translateY(4px);
  z-index:          30;
  border:           5px solid transparent;
  border-top-color: var(--prod-barva-tip-bg);
  pointer-events:   none;
  opacity:          0;
  visibility:       hidden;
  transition:       opacity   0.15s ease-in-out,
                    transform 0.15s ease-in-out;
}

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

@media (max-width: 767px) {
  .prod-barvy-grid  { gap: 10px; }
  .prod-barva__kruh {
    width:  var(--prod-barva-size-mob);
    height: var(--prod-barva-size-mob);
  }
}


/* --------------------------------------------------------------------------
   GALERIE BAREV VÝROBCE (.prod-galerie-barev)
   Obaluje původní plus-gallery strukturu výrobce.
   -------------------------------------------------------------------------- */

.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 var(--color-border);
  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);
  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;
  }
}


/* --------------------------------------------------------------------------
   KLÍČOVÉ PARAMETRY (.prod-parametry)
   Dvousloupcový přehled: název vlevo, hodnota vpravo tučně.
   -------------------------------------------------------------------------- */

.prod-parametry {
  list-style:    none;
  margin:        10px 0 6px;
  padding:       0;
  border:        1px solid #e6e6e8;
  border-radius: var(--prod-rozmery-radius);
  overflow:      hidden;
  font-family:   var(--font-primary);
}

.prod-parametry li {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         10px 14px;
  font-size:       14px;
  line-height:     1.4;
}

.prod-parametry li:nth-child(even) { background-color: var(--kat-hlavni-bg); }
.prod-parametry li + li            { border-top: 1px solid #efeff1; }

.prod-parametry__nazev { color: #6b6b76; flex: 1 1 auto; }

.prod-parametry__hodnota {
  color:       var(--prod-rozmery-text);
  font-weight: 700;
  text-align:  right;
  flex:        0 0 auto;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .prod-parametry li       { padding: 9px 12px; font-size: 13px; gap: 10px; }
  .prod-parametry__hodnota { white-space: normal; }
}


/* ==========================================================================
   §9 HOMEPAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   POŘADÍ SEKCÍ NA TITULNÍ STRÁNCE
   pk-carousel (middle-banners-wrapper) se zobrazí hned pod menu,
   před benefitBanner a produktovými skupinami (#content-wrapper).
   -------------------------------------------------------------------------- */

.in-index #content-wrapper.container               { order: 3 !important; }
.in-index .content-wrapper.middle-banners-wrapper  { order: 2 !important; }

@media (min-width: 992px) {
  .in-index .overall-wrapper { display: flex; flex-direction: column; }

  .in-index .top-navigation-bar                                  { order: 0; }
  .in-index #header                                              { order: 1; }
  .in-index #content-wrapper                                     { order: 2; }
  .in-index .content-wrapper.homepage-box.before-carousel        { order: 2; }
  .in-index .content-wrapper.latest-contribution-box             { order: 2; }
  .in-index .content-wrapper.homepage-box.middle-banners-wrapper { order: 2; }
  .in-index .content-wrapper.container                           { order: 3; }
  .in-index .content-wrapper.homepage-box.welcome-wrapper        { order: 3; }
}

/* Mezera nad carouselem – srovnáno s mezerou mezi bannery */
.in-index .content-wrapper.middle-banners-wrapper {
  margin-top:  0 !important;
  padding-top: 20px !important;
}

.in-index .content-wrapper.middle-banners-wrapper .content-wrapper-in {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* Záložní: pokud šablona vkládá carousel mimo middle-banners-wrapper */
.in-index .content-wrapper-in > .pk-carousel:first-child,
.in-index > .pk-carousel:first-child {
  margin-top: 20px !important;
}

/* Banner přes celou šířku */
.banners-content.body-banners > div { width: 100% !important; }

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

/* Bez hover stínu na homepage boxech */
.homepage-box:hover,
.homepage-box:hover * { box-shadow: none !important; }


/* --------------------------------------------------------------------------
   BANNER CAROUSEL (.pk-carousel)
   -------------------------------------------------------------------------- */

.pk-carousel {
  position:     relative;
  overflow:     hidden;
  user-select:  none;
  touch-action: pan-y;
  margin-top:   20px !important;
}

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

.pk-carousel__viewport {
  overflow:      hidden;
  border-radius: var(--pk-carousel-radius);
}

.pk-carousel__track {
  display:     flex;
  gap:         var(--pk-carousel-gap);
  transition:  transform 0.35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Desktop: 4 bannery vedle sebe */
.pk-carousel__slide {
  flex:          0 0 calc((100% - 3 * var(--pk-carousel-gap)) / 4);
  min-width:     0;
  border-radius: var(--pk-carousel-radius);
  overflow:      hidden;
}

.pk-carousel__slide a { display: block; line-height: 0; }

.pk-carousel__slide img {
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: var(--pk-carousel-radius);
}

/* Šipky */
.pk-carousel__arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  width:           40px;
  height:          40px;
  border-radius:   999px;
  background:      #fff;
  border:          1px solid var(--color-border);
  box-shadow:      0 2px 8px rgba(0, 0, 0, .12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         10;
  transition:      opacity .2s, box-shadow .2s;
}

.pk-carousel__arrow svg {
  width:           20px;
  height:          20px;
  stroke:          var(--color-text);
  fill:            none;
  stroke-width:    2.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.pk-carousel__arrow--prev     { left:  8px; }
.pk-carousel__arrow--next     { right: 8px; }
.pk-carousel__arrow:hover     { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.pk-carousel__arrow.is-hidden { display: none; }

/* Tečky */
.pk-carousel__dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin-top:      10px;
}

.pk-carousel__dot {
  width:         8px;
  height:        8px;
  border-radius: 999px;
  background:    var(--color-border);
  border:        0;
  padding:       0;
  cursor:        pointer;
  transition:    background .2s, width .2s;
}

.pk-carousel__dot.is-active {
  background: var(--color-primary);
  width:      22px;
}

/* Tablet: 2 bannery */
@media (max-width: 991px) {
  .pk-carousel__slide {
    flex-basis: calc((100% - 1 * var(--pk-carousel-gap)) / 2);
  }
}

/* Mobil: 1 banner */
@media (max-width: 575px) {
  .pk-carousel__slide { flex-basis: 100%; }
}


/* --------------------------------------------------------------------------
   ROZCESTNÍK KATEGORIÍ (.pk-cat-grid / .pk-cat-card)
   Nahrazuje původní .uvodni-kategorie postavenou na Bootstrap
   .row / .col-sm-4 (viz §11 LEGACY).
   -------------------------------------------------------------------------- */

.pk-cat-grid {
  display:               grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:                   16px !important;
  margin:                0 0 16px !important;
  list-style:            none !important;
}

.pk-cat-card {
  position:        relative !important;
  overflow:        hidden !important;
  border-radius:   14px !important;
  padding:         36px 40px 32px !important;
  min-height:      340px !important;
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: space-between !important;
  box-sizing:      border-box !important;
}

.pk-cat-card__content {
  position:  relative !important;
  z-index:   2 !important;
  max-width: 60% !important;
}

.pk-cat-card__img {
  position:        absolute !important;
  right:           4% !important;
  top:             50% !important;
  bottom:          auto !important;
  transform:       translateY(-50%) !important;
  z-index:         0 !important;
  height:          88% !important;
  width:           auto !important;
  max-width:       40% !important;
  max-height:      none !important;
  object-fit:      contain !important;
  object-position: center right !important;
  pointer-events:  none !important;
  display:         block !important;
}

.pk-cat-card__tag {
  display:        inline-block !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          #666 !important;
  margin-bottom:  8px !important;
}

.pk-cat-card h3 {
  margin:         0 0 4px !important;
  font-size:      20px !important;
  font-weight:    800 !important;
  color:          var(--pk-hero-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  line-height:    1.2 !important;
}

.pk-cat-card__desc {
  font-size: 12px !important;
  color:     #555 !important;
  margin:    0 0 14px !important;
}

.pk-cat-card ul {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 0 20px !important;
}

.pk-cat-card ul li { margin: 4px 0 !important; }

.pk-cat-card ul li a {
  font-size:       13px !important;
  color:           #222 !important;
  text-decoration: none !important;
}

.pk-cat-card ul li a:hover {
  color:           var(--color-primary) !important;
  text-decoration: underline !important;
}

.pk-cat-card__all {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  font-size:       12px !important;
  font-weight:     700 !important;
  color:           var(--pk-hero-ink) !important;
  text-transform:  uppercase !important;
  letter-spacing:  .04em !important;
  text-decoration: none !important;
  border-bottom:   2px solid var(--pk-hero-ink) !important;
  padding-bottom:  1px !important;
  border-radius:   0 !important;
}

.pk-cat-card__all:hover {
  color:        var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Barvy pozadí jednotlivých karet */
.pk-cat-card.c-baterie,
.pk-cat-card.c-sprchy,
.pk-cat-card.c-vany,
.pk-cat-card.c-zebriky,
.pk-cat-card.c-nabytek,
.pk-cat-card.c-program { background: #eaf3fd !important; }

/* Tablet: 2 v řadě */
@media (max-width: 991px) {
  .pk-cat-grid { grid-template-columns: 1fr 1fr !important; }

  .pk-cat-card {
    padding:    28px 28px 26px !important;
    min-height: 280px !important;
  }
}

/* Mobil: 1 v řadě */
@media (max-width: 767px) {
  .pk-cat-grid { grid-template-columns: 1fr !important; }

  .pk-cat-card {
    min-height: auto !important;
    padding:    28px 24px !important;
  }

  .pk-cat-card__content { max-width: 100% !important; }
  .pk-cat-card__img     { display: none !important; }
}


/* --------------------------------------------------------------------------
   ROZCESTNÍK HLAVNÍCH KATEGORIÍ (.pk-kat-rozcestnik)
   Ikonová mřížka odkazů, inline SVG.
   -------------------------------------------------------------------------- */

.pk-kat-rozcestnik {
  background:    var(--color-bg-light);
  border-radius: 16px;
  padding:       28px 20px;
  margin:        24px 0;
}

.pk-kat-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   12px;
}

.pk-kat-item {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  gap:             12px;
  width:           100%;
  min-height:      120px;
  padding:         22px 8px 16px;
  background:      #fff;
  border:          0.5px solid var(--color-border);
  border-radius:   14px;
  text-decoration: none !important;
  text-align:      center !important;
  transition:      border-color .15s ease, transform .15s ease;
}

.pk-kat-item:hover {
  border-color: var(--color-primary);
  transform:    translateY(-2px);
}

.pk-kat-item__icon {
  width:        36px;
  height:       36px;
  display:      block;
  flex:         0 0 auto;
  margin-left:  auto;
  margin-right: auto;
}

.pk-kat-item__icon path,
.pk-kat-item__icon rect,
.pk-kat-item__icon circle,
.pk-kat-item__icon line,
.pk-kat-item__icon polyline {
  fill:            none;
  stroke:          var(--pk-hero-ink);
  stroke-width:    1.6;
  stroke-linecap:  round;
  stroke-linejoin: round;
  transition:      stroke .15s ease;
}

.pk-kat-item:hover .pk-kat-item__icon path,
.pk-kat-item:hover .pk-kat-item__icon rect,
.pk-kat-item:hover .pk-kat-item__icon circle,
.pk-kat-item:hover .pk-kat-item__icon line,
.pk-kat-item:hover .pk-kat-item__icon polyline {
  stroke: var(--color-primary);
}

.pk-kat-item__label {
  display:     block;
  width:       100%;
  font-size:   12.5px;
  font-weight: 500;
  line-height: 1.3;
  color:       var(--pk-hero-ink);
  text-align:  center;
}

.pk-kat-item__ab {
  display:        block;
  width:          100%;
  text-align:     center;
  font-size:      30px;
  font-weight:    500;
  letter-spacing: .04em;
  line-height:    1;
}

/* Varianta „značky“ */
.pk-kat-item--znacky        { background: #fbecec; border-color: #f3d3d3; }
.pk-kat-item--znacky:hover  { border-color: #cf2d2d; transform: translateY(-2px); }

.pk-kat-item--znacky .pk-kat-item__label,
.pk-kat-item--znacky .pk-kat-item__ab { color: #cf2d2d; }

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

@media (max-width: 767px) {
  .pk-kat-grid { grid-template-columns: repeat(3, 1fr); }
  .pk-kat-item { min-height: 110px; padding: 18px 6px 14px; }
}

@media (max-width: 480px) { .pk-kat-grid { grid-template-columns: repeat(2, 1fr); } }


/* --------------------------------------------------------------------------
   PRUH SE ZNAČKAMI (.pk-brands)
   Sloučeno: .pk-brand-item a .pk-brand-item img byly v původním
   souboru definované 2×, druhý blok první přepisoval.
   -------------------------------------------------------------------------- */

.pk-brands {
  background:            var(--color-bg-light);
  border-radius:         14px;
  padding:               32px 40px;
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   24px;
  align-items:           center;
  margin:                20px 0;
}

.pk-brands__left h2 {
  margin:      0 0 8px;
  font-size:   22px;
  font-weight: 700;
  color:       var(--pk-hero-ink);
  line-height: 1.25;
}

.pk-brands__left a {
  font-size:       13px;
  color:           var(--pk-hero-ink);
  text-decoration: underline;
}

.pk-brands__left a:hover { color: var(--color-primary); }

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

.pk-brand-item {
  background:      #fff;
  border:          1px solid #e8e8e8;
  border-radius:   10px;
  height:          70px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 20px;
  transition:      border-color 0.2s, box-shadow 0.2s;
}

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

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

@media (max-width: 900px) {
  .pk-brands { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pk-brands       { padding: 24px 20px; }
  .pk-brands__grid { grid-template-columns: repeat(2, 1fr); }
  .pk-brand-item   { height: 84px; padding: 12px 16px; }
  .pk-brand-item img { max-height: 56px; }
}


/* --------------------------------------------------------------------------
   WELCOME WRAPPER – zúžení obsahu
   -------------------------------------------------------------------------- */

.content-wrapper.welcome-wrapper {
  max-width:     1100px;
  margin-left:   auto;
  margin-right:  auto;
  width:         100%;
  padding-left:  16px;
  padding-right: 16px;
  box-sizing:    border-box;
}

@media (max-width: 767px) {
  .content-wrapper.welcome-wrapper {
    padding-left:  12px;
    padding-right: 12px;
  }
}


/* --------------------------------------------------------------------------
   HERO / TRUST PANEL (.pk-hero)
   Světlá varianta trust panelu ve firemní modré.

   v1.02 — pillové trust-pointy (.pk-hero__points) nahrazeny mřížkou
   benefitových karet (.pk-hero__benefity / .pk-benefit) s inline SVG
   ikonami. Staré třídy zůstávají níže jako DEPRECATED kvůli případným
   starším blokům v obsahu; při dalším čištění je možné je smazat.

   HTML (zkráceně):
     <section class="pk-hero" aria-label="O obchodě PRIMAKOUPELNY.cz">
       <div class="pk-hero__inner">
         <span class="pk-hero__kicker">Proč PRIMAKOUPELNY.cz</span>
         <h2 class="pk-hero__nadpis">…</h2>
         <p class="pk-hero__sub">…</p>
         <div class="pk-hero__stats">…</div>
         <div class="pk-hero__benefity">
           <div class="pk-benefit">
             <span class="pk-benefit__ikona"><svg>…</svg></span>
             <span class="pk-benefit__nadpis">…</span>
             <span class="pk-benefit__text">…</span>
           </div>
         </div>
         <div class="pk-hero__cta">…</div>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.pk-hero {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--pk-hero-radius);
  background:    var(--pk-hero-bg);
  color:         var(--pk-hero-ink);
  padding:       48px 44px;
  margin:        28px 0;
  box-sizing:    border-box;
}

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

.pk-hero__inner { position: relative; z-index: 2; }

.pk-hero__kicker {
  display:        inline-block;
  font-family:    var(--font-primary);
  font-weight:    700;
  font-size:      12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--pk-hero-accent);
}

.pk-hero__nadpis {
  font-family: var(--font-primary);
  color:       var(--pk-hero-ink);
  font-size:   clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.14;
  margin:      10px 0 0;
  padding:     0;
  max-width:   none;
}

.pk-hero__sub {
  color:       var(--pk-hero-ink-soft);
  margin:      16px 0 0;
  max-width:   none;
  font-size:   16px;
  line-height: 1.65;
}

.pk-hero__sub strong { color: var(--pk-hero-ink); font-weight: 600; }

.pk-hero__sub a {
  color:                       var(--pk-hero-ink-soft);
  text-decoration:             underline;
  text-decoration-color:       rgba(0, 168, 238, 0.45);
  text-underline-offset:       3px;
  text-decoration-thickness:   1px;
  transition:                  color 0.2s ease;
}

.pk-hero__sub a:hover { color: var(--pk-hero-accent); }

/* Statistiky */
.pk-hero__stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
  margin:                32px 0 0;
  padding:               22px 0;
  border-top:            1px solid rgba(26, 26, 46, 0.10);
  border-bottom:         1px solid rgba(26, 26, 46, 0.10);
  list-style:            none;
}

.pk-hero__stat { padding-right: 14px; }

.pk-hero__stat-big {
  display:        block;
  font-family:    var(--font-primary);
  font-weight:    700;
  font-size:      clamp(23px, 3vw, 28px);
  line-height:    1;
  letter-spacing: -0.01em;
  color:          var(--pk-hero-ink);
}

.pk-hero__stat-lbl {
  display:     block;
  color:       var(--pk-hero-ink-mute);
  font-size:   13px;
  margin-top:  8px;
  line-height: 1.4;
}

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

.pk-hero__stat-link:hover                    { opacity: 0.82; }
.pk-hero__stat-link:hover .pk-hero__stat-lbl { text-decoration: underline; }

.pk-hero__stat-link:focus-visible {
  outline:        2px solid var(--pk-hero-accent);
  outline-offset: 3px;
  border-radius:  6px;
}

/* Benefitové karty */
.pk-hero__benefity {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin:                26px 0 0;
  padding:               0;
  list-style:            none;
}

.pk-benefit {
  display:               grid;
  grid-template-columns: 42px 1fr;
  column-gap:            14px;
  row-gap:               5px;
  background:            #ffffff;
  border:                1px solid rgba(26, 26, 46, 0.07);
  border-radius:         14px;
  padding:               18px 18px 19px;
  box-sizing:            border-box;
  transition:            border-color 0.2s ease, box-shadow 0.2s ease,
                         transform 0.2s ease;
}

.pk-benefit:hover {
  border-color: rgba(0, 168, 238, 0.35);
  box-shadow:   0 10px 26px rgba(15, 23, 42, 0.07);
  transform:    translateY(-2px);
}

.pk-benefit__ikona {
  grid-row:        span 2;
  align-self:      start;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border-radius:   12px;
  background:      rgba(0, 168, 238, 0.10);
  color:           var(--pk-hero-accent);
}

.pk-benefit__ikona svg {
  width:             21px;
  height:            21px;
  stroke:            currentColor;
  fill:              none;
  stroke-width:      1.7;
  stroke-linecap:    round;
  stroke-linejoin:   round;
  display:           block;
}

.pk-benefit__nadpis {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size:   14.5px;
  line-height: 1.3;
  color:       var(--pk-hero-ink);
  align-self:  center;
}

.pk-benefit__text {
  font-family: var(--font-primary);
  font-size:   13.5px;
  line-height: 1.5;
  color:       var(--pk-hero-ink-mute);
}

/* DEPRECATED — pillové trust-pointy, nahrazeno .pk-hero__benefity (v1.02) */
.pk-hero__points {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  margin:     26px 0 0;
  padding:    0;
  list-style: none;
}

.pk-hero__point {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  font-family:   var(--font-primary);
  font-size:     14px;
  font-weight:   600;
  color:         var(--pk-hero-ink);
  background:    rgba(0, 168, 238, 0.08);
  border:        1px solid rgba(0, 168, 238, 0.22);
  padding:       9px 14px;
  border-radius: 999px;
}

.pk-hero__point svg {
  width:  15px;
  height: 15px;
  color:  var(--pk-hero-accent);
  flex:   none;
  stroke: currentColor;
}

/* CTA tlačítka */
.pk-hero__cta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         10px;
  margin:      28px 0 0;
}

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

.pk-hero__btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; flex: none; }

.pk-hero__btn--primary {
  background: var(--pk-hero-accent);
  color:      #ffffff !important;
}

.pk-hero__btn--primary:hover { transform: translateY(-2px); }

.pk-hero__btn--outline {
  background: #ffffff;
  color:      var(--pk-hero-ink) !important;
  border:     1px solid rgba(26, 26, 46, 0.14);
}

.pk-hero__btn--outline:hover {
  border-color: rgba(0, 168, 238, 0.45);
  transform:    translateY(-2px);
}

/* Doplňková věta za tlačítky (volitelná) */
.pk-hero__disc {
  margin:      24px 0 0;
  font-size:   12.5px;
  color:       var(--pk-hero-ink-mute);
  max-width:   none;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .pk-hero__benefity { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .pk-hero__stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }
}

@media (max-width: 620px) {
  .pk-hero           { padding: 30px 20px; }
  .pk-hero__nadpis   { font-size: 24px; max-width: none; }
  .pk-hero__sub      { font-size: 15px; }
  .pk-hero__benefity { grid-template-columns: 1fr; gap: 10px; }
  .pk-benefit        { padding: 15px 16px; }
  .pk-hero__btn      { flex: 1 1 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   ROZCESTNÍK SOCIÁLNÍCH SÍTÍ (.pk-social)
   Karty s firemními ikonami sítí, inline SVG.
   -------------------------------------------------------------------------- */

.pk-social {
  background: transparent;
  padding:    28px 0;
  margin:     24px 0;
  box-sizing: border-box;
}

.pk-social__nadpis {
  margin:      0 0 18px;
  font-size:   18px;
  font-weight: 700;
  color:       var(--pk-hero-ink);
  text-align:  center;
}

.pk-social__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   14px;
}

.pk-social__item {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             12px;
  width:           100%;
  min-height:      118px;
  padding:         22px 10px;
  background:      #fff;
  border:          0.5px solid var(--color-border);
  border-radius:   14px;
  text-decoration: none !important;
  text-align:      center !important;
  transition:      border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.pk-social__item:hover {
  border-color: var(--color-primary);
  transform:    translateY(-2px);
  box-shadow:   0 4px 14px rgba(26, 26, 46, 0.08);
}

.pk-social__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  margin:          0 auto;
  flex:            0 0 auto;
}

.pk-social__icon svg { display: block; width: 34px; height: 34px; }

.pk-social__label {
  display:     block;
  width:       100%;
  font-size:   13px;
  font-weight: 600;
  line-height: 1.3;
  color:       var(--pk-hero-ink);
  text-align:  center;
}

@media (max-width: 600px) {
  .pk-social__grid { grid-template-columns: repeat(2, 1fr); }
  .pk-social__item { min-height: 108px; padding: 18px 8px; }
}


/* --------------------------------------------------------------------------
   YOUTUBE SHORTS (.reels-*)
   Použití: obal každý YouTube iframe do <div class="reel-card">
   -------------------------------------------------------------------------- */

.reels-section { margin: 24px 0; }

.reels-section__heading {
  font-size:   20px;
  font-weight: 700;
  color:       var(--color-text);
  margin:      0 0 16px;
}

.reels-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
  max-width:             900px;
  margin:                0 auto 24px;
}

.reel-card {
  position:      relative;
  border-radius: 12px;
  overflow:      hidden;
  aspect-ratio:  9 / 16;
  background:    #111;
  display:       block;
  transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.reel-card:hover {
  transform:  scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* iframe přebíjí width/height z vloženého YouTube kódu */
.reel-card iframe {
  position: absolute;
  inset:    0;
  width:    100% !important;
  height:   100% !important;
  border:   0;
  display:  block;
}

@media (max-width: 767px) { .reels-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .reels-grid { grid-template-columns: 1fr; } }


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

/* --------------------------------------------------------------------------
   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); text-decoration: underline; }
.srv-page a:hover { text-decoration: none; }


/* --------------------------------------------------------------------------
   HERO KONTAKT (.srv-hero)
   Sloučeno: původní soubor měl na konci „OVERRIDE“ blok, který tento
   vzhled přepisoval (bílý text, jiné velikosti, sloupcové kontakty,
   skrytý divider). Zapsáno rovnou výslednými hodnotami, !important
   ponechán jen tam, kde přebíjí globální styly Shoptetu na odkazech.
   -------------------------------------------------------------------------- */

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

/* Shoptet přebarvuje odkazy globálním stylem – proto !important */
.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;
}

.srv-hero__kontakty {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     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;
}

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

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

/* Divider zůstává v HTML kvůli zpětné kompatibilitě, ale při sloupcovém
   rozložení nedává smysl – proto je skrytý. */
.srv-hero__divider { display: none; }

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


/* --------------------------------------------------------------------------
   KONTAKTNÍ KARTA (.srv-card)
   -------------------------------------------------------------------------- */

.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); }

.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; }
}


/* --------------------------------------------------------------------------
   MŘÍŽKA KARET (.srv-grid-2)
   -------------------------------------------------------------------------- */

.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; }
}


/* --------------------------------------------------------------------------
   KONTAKTNÍ TABULKA (.srv-table)
   Dvousloupcová tabulka klíč–hodnota.
   -------------------------------------------------------------------------- */

.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); 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; }
}


/* --------------------------------------------------------------------------
   NADPIS SEKCE (.srv-section-title)
   -------------------------------------------------------------------------- */

.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);
  white-space:     nowrap;
  text-decoration: underline;
}

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


/* --------------------------------------------------------------------------
   GALERIE FOTEK (.srv-gallery)
   -------------------------------------------------------------------------- */

.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); }
}


/* --------------------------------------------------------------------------
   SEZNAM ODKAZŮ (.srv-links)
   -------------------------------------------------------------------------- */

.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); }
.srv-links li a:hover::after  { border-color: var(--color-primary); }


/* --------------------------------------------------------------------------
   CTA AKCE (.srv-action) – reklamace, vrácení zboží
   -------------------------------------------------------------------------- */

.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:   var(--btn-border-radius);
  text-decoration: none !important;
  transition:      background 0.2s ease-in-out;
  white-space:     nowrap;
}

.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; }
}


/* --------------------------------------------------------------------------
   BADGE – partnerské e-shopy (.srv-eshopy)
   -------------------------------------------------------------------------- */

.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:      var(--pill-bg);
  border:          1px solid var(--srv-border);
  border-radius:   50px;
  font-family:     var(--srv-font);
  font-size:       13px;
  font-weight:     600;
  color:           var(--srv-text) !important;
  text-decoration: none !important;
  transition:      background 0.15s, border-color 0.15s;
}

.srv-eshopy a:hover { background: var(--pill-bg-hover); border-color: #ccc; }


/* --------------------------------------------------------------------------
   HODNOCENÍ WIDGET (.srv-hodnoceni)
   -------------------------------------------------------------------------- */

.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);
}

.srv-auto-img {
  display:   block;
  max-width: 100%;
  height:    auto;
  margin:    16px auto 0;
}


/* --------------------------------------------------------------------------
   DOPRAVA A PLATBA (.srv-dp-*)
   Na mobilu se tabulka přepíná na card layout (data-label u buněk s cenou).
   -------------------------------------------------------------------------- */

.srv-dp-tabulka,
.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-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 dopravce v tabulce (původně definováno 2×, platí menší rozměr) */
.srv-dp-tabulka img {
  max-height: 36px;
  max-width:  130px;
  object-fit: contain;
  display:    block;
  margin:     0 auto;
}

.srv-dp-zdarma {
  color:       var(--color-primary) !important;
  font-weight: 700 !important;
}

.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 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.
   Sloučeno ze dvou @media (max-width:640px) bloků; odstraněna
   `width:80px` u buněk s cenou, kterou o kus níž rušilo
   `width:auto !important` ve stejném breakpointu. */
@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 přes celou šířku */
  .srv-dp-tabulka tbody td:nth-child(2) {
    padding:       0;
    margin-bottom: 12px;
    font-size:     14px;
  }

  /* Ceny vedle sebe, se štítkem z data-label */
  .srv-dp-tabulka tbody td:nth-child(3),
  .srv-dp-tabulka tbody td:nth-child(4) {
    display:      inline-block;
    width:        auto;
    padding:      0;
    margin-right: 16px;
    font-size:    14px;
    text-align:   left;
  }

  .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: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; }
}


/* ==========================================================================
   §11 LEGACY — kandidáti na smazání
   ==========================================================================
   Následující blok je podle komentáře v homepage-v10.css nahrazený
   komponentou .pk-cat-grid / .pk-cat-card (§9). Ponechán schválně:
   nedokážu z CSS ověřit, jestli se stará struktura (.uvodni-kategorie
   s Bootstrap .row / .col-sm-4) na titulní stránce ještě používá.

   POSTUP: zkontroluj HTML titulní stránky. Pokud tam .uvodni-kategorie
   není, smaž celou tuto sekci a vydej v1.02. Šetří to ~70 řádků
   a 6 odkazů na obrázky pozadí.
   ========================================================================== */

.uvodni-kategorie {
  display:       flex;
  flex-wrap:     wrap;
  gap:           20px;
  margin-bottom: 20px;
}

.uvodni-kategorie .col-sm-4 { padding-bottom: 20px; }
.uvodni-kategorie > div     { flex: 1; }

.uvodni-kategorie h3        { font-size: 20px; font-weight: bold; text-transform: uppercase; }
.uvodni-kategorie ul        { list-style: none; padding-left: 0; }
.uvodni-kategorie a         { color: #000; }
.uvodni-kategorie a:hover   { text-decoration: underline !important; }
.uvodni-kategorie a.vsechny { color: #000; font-weight: bold; }

/* Barevná pozadí bloků (fallback bez obrázku) */
.uvodni-kategorie .vodovodni-baterie  { background: #f4f0ec; }
.uvodni-kategorie .sprchove-kouty     { background: #f3ecfb; }
.uvodni-kategorie .vany               { background: #ecf3dd; }
.uvodni-kategorie .zebriky            { background: #f3dddd; }
.uvodni-kategorie .koupelnovy-nabytek { background: #cde3d1; }
.uvodni-kategorie .sprchovy-program   { background: #f4ecfb; }

@media (max-width: 991px) {
  .uvodni-kategorie           { display: block; }
  .uvodni-kategorie > div     { width: 86%; margin: 0 7%; flex-basis: auto; }
  .uvodni-kategorie h3        { padding-top: 20px !important; }
  .uvodni-kategorie .col-sm-4 { margin-bottom: 20px; }
}

@media (max-width: 768px) {
  .uvodni-kategorie { margin-bottom: 0; margin-top: -20px; }
}

/* Obrázková pozadí (desktop) */
@media (min-width: 992px) {
  .uvodni-kategorie .vodovodni-baterie,
  .uvodni-kategorie .sprchove-kouty,
  .uvodni-kategorie .vany,
  .uvodni-kategorie .zebriky,
  .uvodni-kategorie .koupelnovy-nabytek,
  .uvodni-kategorie .sprchovy-program {
    background-size:     cover;
    background-position: center;
  }

  .uvodni-kategorie .vodovodni-baterie {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-baterie.png');
  }
  .uvodni-kategorie .sprchove-kouty {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-sprchy.png');
  }
  .uvodni-kategorie .vany {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-vany.png');
  }
  .uvodni-kategorie .zebriky {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-zebriky.png');
  }
  .uvodni-kategorie .koupelnovy-nabytek {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-koupelnovy-nabytek.png');
  }
  .uvodni-kategorie .sprchovy-program {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-sprchovy-program.png');
  }
}

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