/* ==========================================================================
   styly-v1.22.css — KONSOLIDOVANÝ CSS SOUBOR
   seoprakticky.cz
   ==========================================================================
   VERZE: v1.22 (2026-08-07)
   Changelog:
     v1.22 — OPRAVA: na mobilu se pod patičkou karty .pk-ref objevovala
             bílá plocha vysoká ~460px. .pk-ref__source má flex-basis
             460px, což v řádku znamená šířku — ale patička se pod
             760px přepíná na flex-direction: column a tam se
             flex-basis vztahuje na VÝŠKU. V mobilním breakpointu se
             proto flex resetuje na 0 0 auto.
     v1.21 — Nová komponenta .pk-cs (§13) pro případové studie:
             tmavé shrnutí výsledku nahoře, graf cílů proti výsledku,
             číslovaný postup prací, rámované screenshoty s popiskem
             a zvýrazněný blok pro upřímné pasáže.
     v1.20 — .pk-pos rozšířeno o rozbalovací seznamy konkrétních frází
             (.pk-pos__group / __summary / __items). Řešeno přes
             <details>, ne přes <input type=radio> — editor Shoptetu
             formulářové prvky odstraňuje, <details> nechává být.
     v1.19 — Nová komponenta .pk-pos (§12): dashboard rozložení pozic
             ve vyhledávání — KPI dlaždice, přehledový pruh a sloupcový
             graf s hover tooltipy. Pozor: prefix .pk-pos, nikoli
             .pk-rank — ta třída je obsazená v §5.
     v1.18 — Nová komponenta .pk-bars (§11): sloupcový graf pro
             porovnání s konkurencí. Konkurence je šedá, vlastní
             sloupec žlutý s tmavým obrysem — důraz nese odstup,
             ne barevná paleta. Stejný wrapper s vodorovným
             posouváním na mobilu jako .pk-ref__chart.
     v1.17 — Oprava mobilního zobrazení grafu v .pk-ref: graf dostal
             aspect-ratio (starší WebKit dával SVG bez atributu height
             výchozích 150px, pod grafem tak zůstávala prázdná plocha)
             a na úzkých displejích se nezmenšuje pod čitelnou mez —
             nově se posouvá vodorovně v novém wrapperu
             .pk-ref__chart-wrap. Ten je nutné doplnit i do HTML.
     v1.16 — Nová sekce §10 REFERENCE: komponenta .pk-ref (referenční
             karta klienta s KPI dlaždicemi a SVG grafem organické
             návštěvnosti, hover tooltip řešený čistě CSS, bez JS).
             POZOR: komponenta se původně jmenovala .pk-case, ale ta
             třída už je obsazená případovými studiemi v §5 — proto
             prefix .pk-ref. Při vkládání HTML je nutné třídy přejmenovat.
     v1.15 — .pk-usp (4 vedle sebe) sjednoceno s .pk-usp--3, .effects
             a .pk-social: bílá karta s jemným žlutým rámečkem, měkký
             stín, ikona jako dlaždice 44px místo volného obrázku 72px,
             text zarovnaný doleva a nový .pk-usp__title (dřív byl
             název hodnoty jen <strong> uvnitř odstavce).
             Nový modifikátor .pk-banner-lite__title--sm (30px) pro
             nadpisy podsekcí.
     v1.14 — .hp-trust vizuálně dotažen: výhody v pravém sloupci jsou
             nově karty s jemným rámečkem místo volně plovoucího
             seznamu, ikona je dlaždice 38px (dřív kroužek 50px),
             mezi sloupci přibyla vlasová linka, logo je odděleno
             linkou, ghost tlačítko je neutrální (dřív dvě žlutá
             tlačítka vedle sebe), velikosti písma dostaly !important
             kvůli globálnímu 17px z #content-wrapper.
     v1.13 — OPRAVA .pk-social: karta se vrací na <article>, protože
             editor Shoptetu (TinyMCE) rozseká <a>, které obaluje
             blokové elementy — mřížka se pak rozpadne. Klikatelnost
             celé karty řeší roztažený pseudo-element ::after na
             .pk-social__link, anchor tak obsahuje jen inline obsah.
     v1.12 — .pk-social sjednoceno s vizuálem .pk-catalog / .effects:
             bílé karty se zaoblením, jemným žlutým rámečkem a měkkým
             stínem; badge s logem už nepřesahuje přes horní hranu
             (dlaždice 40px se šedým podkladem), celá karta je klikací
             odkaz a žluté tlačítko nahradil decentní řádek
             .pk-social__link. Původní .pk-social__btn zůstává funkční
             pro starší HTML.
     v1.11 — .pk-usp--3 sjednoceno s vizuálem .pk-catalog / .effects:
             zrušen žlutý přechod na pozadí a velký kroužek s ikonou
             přesahující přes horní hranu karty; nově bílá karta
             s jemným žlutým rámečkem, měkkým stínem a decentní
             ikonou 34px v hlavičce vedle titulku (nový volitelný
             wrapper .pk-usp__head), text zarovnaný doleva.
     v1.10 — Blok .effects sjednocen s vizuálem .pk-catalog: bílé karty
             se zaoblením, jemným žlutým rámečkem a měkkým stínem,
             štítek jako plná pilulka v žluté z loga (dřív světlá
             průhledná žlutá, radius 8px), dekorativní .effect-dot
             se už nevykresluje, mřížka na 1000px a gap 16px.
     v1.09 — Nová komponenta .pk-rank (žebříček s vodorovnými sloupci,
             interaktivní hover, bez JS).
     v1.08 — Nová komponenta .pk-tools (interní nástroje a dashboardy):
             karty s automatickým číslováním přes CSS counter, vychází
             z bloku .o-apps ve vzorovém návrhu.
     v1.07 — .pk-catalog rozšířen na 1000px (--max-width-content, shodně
             se zbytkem obsahu stránky); .pk-eyebrow zvětšen o 20 %.
     v1.06 — .pk-catalog: zarovnání ikony a titulku vráceno přesně na
             hodnoty vzoru (ikona 34px, gap 11px, bez min-height na
             hlavičce) + text-wrap: balance pro rovnoměrné zalamování
             víceřádkových titulků.
     v1.05 — .pk-catalog vyladěn podle vzorového návrhu: lehčí titulky
             (weight 700 místo 800 — Poppins je opticky tučnější než
             Manrope ve vzoru), pilulky bez rámečku, jemný žlutý rámeček
             u všech karet, jemnější stín (nový token --shadow-soft).
     v1.04 — .pk-eyebrow zmenšen o 30 %; .pk-catalog: vyšší karty,
             štítky nově značí disciplínu (SEO / GEO / SEO + GEO),
             .pk-catalog__lead zrušen (perex používá výchozí styl odstavce).
     v1.03 — .pk-catalog přepsán podle proporcí ze vzorového návrhu
             (motorydrevohostice v1.04, blok .o-svc): max-width 920px,
             štítek absolutně v rohu karty, ikona 34px, menší typografie.
     v1.02 — .pk-catalog: omezení na šířku obsahu (1000px, zarovnání se
             zbytkem stránky) + styly pro inline SVG ikony v kartách
             (čárové ikony místo emoji).
     v1.01 — Nová komponenta .pk-catalog (katalog služeb: karty s ikonou,
             štítkem a popisem) + reusable žlutý štítek .pk-eyebrow nad H2.
     v1.00 — Baseline: konsolidace 9 původních souborů, token
             --color-accent-logo, sjednocení žlutých zvýraznění.
   ==========================================================================
   Tento soubor nahrazuje původních 9 souborů (01–08 + homepage-v6).
   Pořadí sekcí ODPOVÍDÁ původnímu pořadí načítání — NEMĚNIT,
   kaskáda na něm závisí (globální <table> musí být před .pk-table-*, atd.).

   ── OBSAH ────────────────────────────────────────────────────────────────
   §1  TOKENY           Design tokeny (CSS proměnné) — jediný :root
   §2  BASE             Globální reset, typografie, breakpointy, utility
   §3  TLAČÍTKA         .pk-cta, .emoji-button + sdílený vzor malých tlačítek
   §4  LAYOUT           .sp-split, .pk-banner-lite, .cs-*, .sp-img, video, .rv-*
   §5  OBSAHOVÉ BLOKY   .pk-callout, .pk-usp, .effects, .pk-stats, .pkd-stats,
                        .pk-tiles, .pk-alert-inline, .pk-tip-inline, .pk-faq,
                        .reviews, .pk-cases, .pk-eyebrow, .pk-catalog,
                        .pk-tools, .pk-rank
   §6  TABULKY          .pk-table-simple, .pk-table-head, .pk-compare
   §7  AUTOR & SEZNAMY  .author-card, .article-sources, .pk-steps, odrážky
   §8  SOCIÁLNÍ & PRODUKTY  .pk-social, legacy social, reels, video-card,
                        .hero-metodika, produktové úpravy
   §9  HOMEPAGE         .hp-faq, .hp-accord, .hp-trust
   §10 REFERENCE        .pk-ref — karta klienta s KPI a grafem
   §11 SROVNÁNÍ         .pk-bars — sloupcový graf porovnání s konkurencí
   §12 POZICE           .pk-pos — dashboard rozložení pozic ve vyhledávání
   §13 PŘÍPADOVÉ STUDIE .pk-cs — shrnutí, cíle, postup, obrázky

   ── PŘIDÁVÁNÍ NOVÝCH KOMPONENT ──────────────────────────────────────────
   Nové globální hodnoty (barvy, velikosti)  → vždy jen §1 TOKENY!
   Nové tlačítko                             → §3
   Nová layout komponenta (sekce, banner)    → §4
   Nová obsahová komponenta (blok textu)     → §5
   Nová tabulka                              → §6
   Nový typ seznamu nebo průvodce            → §7
   Sociální síť / produktová úprava          → §8
   Homepage-only komponenta (prefix hp-)     → §9

   ── OPRAVY PROVEDENÉ PŘI KONSOLIDACI ────────────────────────────────────
   ✅ Odstraněny fallbacky ve var(--x, fallback) u hp-* komponent.
      Fallbacky se lišily od tokenů (např. --radius-xl 16px vs. token 14px,
      --text-md 19px vs. token 18px) — protože tokeny jsou teď ve stejném
      souboru, fallback se nikdy nepoužil a jen mátl. Platí hodnoty tokenů,
      vizuál se NEMĚNÍ (fallback se neuplatňoval ani dřív).
   ✅ .article-sources: barvy #eddd00 a rgba(237,221,0,…) sjednoceny na
      token --color-accent / rgba(237,222,0,…) — poslední zapomenuté odstíny.
   ✅ Odstraněn duplicitní blok .effect-card .effect-text (identické
      deklarace jako .effect-text — mrtvý kód).
   ✅ .pkd-stat__value: 45px → var(--text-3xl) (stejná hodnota, přes token).
   ✅ Jediný :root — žádné duplicitní definice proměnných.
   ========================================================================== */


/* ==========================================================================
   §1 TOKENY — Design Tokens & CSS Custom Properties
   ==========================================================================
   Zde jsou definovány všechny sdílené hodnoty projektu.
   Měňte hodnoty ZDE — změna se projeví v celém projektu automaticky.
   ========================================================================== */

:root {
  /* ── Barvy ────────────────────────────────────────────────────────────── */
  --color-accent:          #edde00;   /* žlutá – primární akcentní barva */
  --color-accent-logo:     #ebe14a;   /* žlutá z loga a CTA tlačítek – zvýraznění nadpisů, hp-trust */
  --color-accent-hover:    #e0d000;   /* o stupeň tmavší pro hover */
  --color-accent-soft:     rgba(237, 222, 0, 0.16);  /* průhledná verze */
  --color-accent-mid:      rgba(237, 222, 0, 0.45);
  --color-accent-strong:   rgba(237, 222, 0, 0.65);

  --color-text:            #111111;
  --color-text-muted:      #333333;
  --color-text-subtle:     rgba(17, 17, 17, 0.68);
  --color-text-faint:      rgba(17, 17, 17, 0.60);

  --color-bg:              #ffffff;
  --color-bg-soft:         #F8F9FA;   /* světle šedé pozadí bloků */
  --color-bg-alt:          #F1F3F5;   /* hover stav */

  --color-border:          #E5E7EB;   /* hlavní border */
  --color-border-soft:     rgba(0, 0, 0, 0.06);
  --color-border-medium:   rgba(0, 0, 0, 0.08);

  /* Sémantické barvy */
  --color-positive:        #15803d;   /* zelená – ✓ */
  --color-negative:        #b91c1c;   /* červená – ✗ */
  --color-alert-bg:        #fff4f4;   /* červený alert box */

  /* Tmavé varianty (tmavé stats bloky) */
  --color-dark-bg:         #262B30;
  --color-dark-card:       #323840;
  --color-dark-card-hover: #3A424C;
  --color-dark-border:     rgba(255, 255, 255, 0.10);
  --color-dark-text:       rgba(255, 255, 255, 0.92);
  --color-dark-muted:      rgba(255, 255, 255, 0.78);

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --font-body:    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: Poppins, sans-serif;
  --font-code:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   32px;
  --text-2xl:  40px;
  --text-3xl:  45px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* ── Prostory ─────────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;

  /* ── Poloměry rohů ────────────────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     14px;
  --radius-full:   999px;

  /* ── Stíny ────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 18px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 10px 28px rgba(15, 23, 42, 0.06);
  --shadow-btn:   0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-btn-hover: 0 4px 10px rgba(0, 0, 0, 0.10);
  --shadow-badge: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-soft:  0 1px 2px rgba(15, 17, 21, 0.04), 0 10px 30px -22px rgba(15, 17, 21, 0.35);

  /* ── Přechody ─────────────────────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.15s ease;
  --transition-normal: 0.18s ease;
  --transition-slow:   0.25s ease;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --max-width-content: 1000px;
  --max-width-wide:    1200px;
  --max-width-text:    860px;
}


/* ==========================================================================
   §2 BASE — Základní styly, typografie, globální reset
   ==========================================================================
   Základní nastylování elementů: nadpisy, odstavce, tabulky, kód, HR, a-tag.
   Tyto styly platí globálně pro celý web.
   ========================================================================== */


/* ── Nadpisy ────────────────────────────────────────────────────────────── */

h1 {
  text-align: center;
  font-size: 45px;
  margin-top: 40px;
  margin-bottom: 40px;
}

h2 {
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  margin-bottom: 40px;
}

hr {
  display: none;
}


/* ── Obsah článku ───────────────────────────────────────────────────────── */

#content-wrapper p,
#content-wrapper ul,
#content-wrapper ol,
.basic-description ul,
.basic-description ol,
.product {
  font-size: 17px;
}

#content-wrapper p {
  margin-bottom: 25px;
  line-height: 1.8em;
}

/* Výjimka: pk-* komponenty uvnitř #content-wrapper/.basic-description
   nesmí dostat 25px margin-bottom — každá komponenta si spravuje spacing sama. */
#content-wrapper .pk-callout__li-text p,
#content-wrapper .pk-callout__li-text,
#content-wrapper .pk-callout__p,
#content-wrapper .pk-callout__check,
.basic-description .pk-callout__li-text p,
.basic-description .pk-callout__li-text,
.basic-description .pk-callout__p,
.basic-description .pk-callout__check {
  margin-bottom: 0 !important;
  line-height: var(--leading-relaxed);
}


/* ── Odkazy ─────────────────────────────────────────────────────────────── */

a {
  text-decoration: underline;
}


/* ── Globální tabulka (fallback) ────────────────────────────────────────── */
/* Poznámka: toto je globální fallback. Pro komponenty použijte .pk-table-head
   nebo .pk-table-simple ze sekce §6 TABULKY (přepisují tento styl). */

table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  /* min-height: 50vh; — ODSTRANĚNO: způsobovalo obrovské bílé plochy
     na detail stránkách produktů (tabulka Kategorie: SEO knihy apod.) */
}

thead {
  background-color: #f0f0f0;
  color: #333;
}

th {
  font-weight: bold;
  text-align: center;
  padding: 12px 15px;
  border-bottom: 2px solid #ddd;
}

td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
  cursor: default;
}

td code {
  padding: 2px 5px;
  background-color: #e8e8e8;
  border-radius: 3px;
  font-size: 0.9em;
}


/* ── Kód & pre bloky ────────────────────────────────────────────────────── */

.code-container {
  background-color: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-left: 4px solid #007bff;
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #24292e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  white-space: pre-wrap;
}

.code-container code {
  background: none;
  padding: 0;
  color: inherit;
}

pre {
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 1.5em;
  margin: 1.5em 0;
  overflow-x: auto;
  line-height: 1.6;
  font-family: var(--font-code);
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow var(--transition-slow);
}

.language-html {
  display: block;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  overflow-x: auto;
  background-color: #282c34;
  color: #abb2bf;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.language-html .token.tag,
.language-html .token.attr-name {
  color: #e06c75;
}

.language-html .token.attr-value {
  color: #98c379;
}

.language-html .line-number {
  color: #5c6370;
  margin-right: 15px;
  user-select: none;
}

.code-wrapper::before {
  content: "Html";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #5c6370;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 10;
}


/* ── Layout breakpointy (globální container) ─────────────────────────────── */

@media (min-width: 1440px) {
  .container { width: 1418px; }
}

@media (min-width: 1418px) {
  .breadcrumbs                              { width: 1200px; }
  .index-content-wrapper                   { width: 1418px; }
  .ordering-process .content-wrapper-in    { width: 1418px; }
  .type-search .content-wrapper-in         { width: 1418px; }
  .type-manufacturers-listing .content-wrapper-in { width: 1200px; }
  .type-manufacturer-detail .content-wrapper-in   { width: 1200px; }
  .type-posts-listing .content-wrapper-in  { width: 1000px; }
  .type-post .content-wrapper-in           { width: 1000px; }
  .type-page .content-wrapper-in           { width: 1000px; }
  .type-glossary .content-wrapper-in       { width: 1000px; }
  .next-to-carousel-banners                { width: 1200px; }
  .type-category .content                  { width: 1200px; }
  .p-detail-inner                          { width: 1418px; }
  .p-detail-tabs-wrapper                   { width: 1000px; }
}


/* ── Speciální štítky & utility ─────────────────────────────────────────── */

/* Sleva / flag žlutá */
.flag.flag-discount { background-color: #efe41d; }
.flags-extra .flag .price-standard,
.flags-extra .flag .price-save { font-size: 12px; color: black; }

/* Štítek "Doporučeno" – černý */
.badge-recommended-dark {
  background-color: #000000;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  display: inline-block;
  line-height: 1;
  border-radius: var(--radius-none);
}

/* Tlačítko objednávka – černé (legacy) */
.button-objednavka-seo {
  background-color: #000000;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px;
  cursor: pointer;
  border: none;
  border-radius: 1px;
  font-family: Arial, sans-serif;
  transition-duration: 0.4s;
}

.button-objednavka-seo:hover {
  background-color: #555555;
  color: white;
}


/* ==========================================================================
   §2a HOMEPAGE — obsah pod produkty: zúžení na 1000px (shodné s type-post)
   ==========================================================================
   Platí pouze na širokých monitorech (min-width: 1418px), kde je rozdíl
   mezi 1418px (type-index) a 1000px (type-post) viditelný.
   Na menších obrazovkách se chování nemění.

   Komponenty s barevným pozadím přes celou šířku (.cs-wrap, .rv-wrap)
   zůstávají full-width — zužuje se pouze jejich vnitřní obsah
   přes .cs-inner a .rv-inner.
   ========================================================================== */

@media (min-width: 1418px) {

  /* Textový obsah — nadpisy, odstavce, seznamy.
     Bez > aby se zachytily i odstavce zanořené o úroveň hlouběji (Shoptet wrappery).
     Výjimky pro komponenty, které si spravují vlastní layout, jsou níže. */
  .type-index #content-wrapper h1,
  .type-index #content-wrapper h2,
  .type-index #content-wrapper h3,
  .type-index #content-wrapper p,
  .type-index #content-wrapper ol,
  .type-index #content-wrapper ul {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Výjimky: odstavce a seznamy uvnitř komponent nesmí dostat max-width 1000px,
     protože by rozbily jejich vnitřní layout (gridy, flex, atd.) */
  .type-index .pk-stats p,
  .type-index .pk-stats ul,
  .type-index .pk-stats ol,
  .type-index .pk-steps p,
  .type-index .pk-steps ul,
  .type-index .pk-steps ol,
  .type-index .pk-usp--3 p,
  .type-index .pk-usp--3 ul,
  .type-index .pk-usp--3 ol,
  .type-index .pk-social p,
  .type-index .pk-social ul,
  .type-index .pk-social ol,
  .type-index .pk-faq p,
  .type-index .pk-faq ul,
  .type-index .pk-faq ol,
  .type-index .pk-banner-lite p,
  .type-index .pk-banner-lite ul,
  .type-index .pk-banner-lite ol,
  .type-index .effects p,
  .type-index .effects ul,
  .type-index .effects ol,
  .type-index .cs-wrap p,
  .type-index .cs-wrap ul,
  .type-index .cs-wrap ol,
  .type-index .cs-wrap h1,
  .type-index .cs-wrap h2,
  .type-index .cs-wrap h3,
  .type-index .rv-wrap p,
  .type-index .rv-wrap ul,
  .type-index .rv-wrap ol,
  .type-index .rv-wrap h1,
  .type-index .rv-wrap h2,
  .type-index .rv-wrap h3 {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
  }

  /* Kompaktní bloky — centrování na 1000px */
  .type-index .pk-stats,
  .type-index .pk-steps,
  .type-index .pk-usp--3,
  .type-index .pk-social,
  .type-index .pk-faq,
  .type-index .author-card {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Banner lite */
  .type-index .pk-banner-lite {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Effects grid — zúžení vnitřní mřížky
     (sekce .effects nemá vlastní pozadí, lze zúžit celou) */
  .type-index .effects {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* cs-wrap a rv-wrap jsou full-width sekce s barevným pozadím —
     zužujeme pouze jejich vnitřní container, pozadí zůstává přes celou šířku */
  .type-index .cs-inner {
    max-width: 1000px;
  }

  .type-index .rv-inner {
    max-width: 1000px;
  }

  /* Emoji tlačítka — vycentrování */
  .type-index .emoji-button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ==========================================================================
   §3 TLAČÍTKA — Tlačítka & CTA
   ==========================================================================
   Všechny typy tlačítek na jednom místě.

   Obsah:
   1. Sdílené mikro-interakce (hover/active/focus mixin-pattern)
   2. .pk-cta          — hlavní CTA tlačítko (kulaté, žluté)
   3. .emoji-button    — tlačítko s emoji ikonou
   4. Varianty tlačítek v komponentách (.pk-case__btn, .pk-social__btn, atd.)
      jsou definovány přímo u svých komponent (§5, §8), ale sdílejí
      stejné tokeny odtud.
   ========================================================================== */


/* ── 1. Sdílený základ pro žlutá tlačítka ───────────────────────────────── */
/* Tuto skupinu vlastností sdílejí .pk-cta, .emoji-button, .pk-case__btn,
   .pk-social__btn, .pk-callout .pk-cta. Změna zde se projeví všude. */

.pk-cta,
.emoji-button {
  background: var(--color-accent);
  color: var(--color-text) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: var(--radius-full);
  text-decoration: none !important;

  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;

  box-shadow: var(--shadow-btn);
  white-space: normal;
  text-align: center;

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.pk-cta:hover,
.emoji-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

.pk-cta:active,
.emoji-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}

.pk-cta:focus-visible,
.emoji-button:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.22);
  outline-offset: 3px;
}


/* ── 2. .pk-cta — hlavní CTA ────────────────────────────────────────────── */

.pk-cta {
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 10px;

  width: fit-content;
  max-width: 100%;

  padding: 24px 26px;

  font-size: var(--text-base) !important;

  /* Více CTA vedle sebe */
  margin: 6px;
  vertical-align: middle;
}

/* Jediné CTA = na střed */
.pk-cta:first-child:last-child {
  margin: 0 auto;
}

.pk-cta__text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.pk-cta__text strong,
.pk-cta__text b {
  font-weight: 800;
}

.pk-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 520px) {
  .pk-cta {
    padding: 22px 20px;
    gap: 10px;
    row-gap: 12px;
    line-height: 1.3;
    margin: 6px;
  }
}


/* ── 3. .emoji-button — tlačítko s emoji ────────────────────────────────── */

.emoji-button {
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 10px;

  margin: 0 auto;
  width: fit-content;
  max-width: 100%;

  padding: 24px 26px;

  font-size: var(--text-base) !important;
}

.emoji-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.emoji-button__text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.emoji-button__text strong,
.emoji-button__text b {
  font-weight: 800;
}

@media (max-width: 520px) {
  .emoji-button {
    padding: 22px 20px;
    gap: 10px;
    row-gap: 12px;
    line-height: 1.3;
  }
}


/* ── 4. Sdílený vzor malých žlutých tlačítek (dokumentace) ──────────────── */
/* Třídy .pk-case__btn (§5) a .pk-social__btn (§8) žijí u svých komponent,
   ale sdílejí přesně tuto vizuální DNA:

  background: var(--color-accent);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px–14px 14px–18px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font: inherit; font-weight: 700; line-height: 1;
  border: 0;
  box-shadow: var(--shadow-btn);
  transition: transform var(--transition-base), box-shadow var(--transition-base);

  :hover → translateY(-1px) + shadow-btn-hover
  :active → translateY(0) + shadow-btn
  :focus-visible → outline 3px rgba(17,17,17,.22) offset 3px
*/


/* ==========================================================================
   §4 LAYOUT — Layout komponenty
   ==========================================================================
   Rozvržení stránky a velké layout komponenty:

   1. .sp-split           — 2 bloky text + obrázek (vedle sebe)
   2. .pk-banner-lite     — lehký nadpisový banner
   3. .cs-wrap / .cs-inner — text s tlačítkem a obrázkem
   4. .sp-img-wrap        — obrázek se zaoblenými rohy
   5. .sp-videoCard       — video karta s popisem
   6. .rv-wrap / .rv-inner — citace s recenzí a obrázkem
   ========================================================================== */


/* ── 1. SP-SPLIT — 2 bloky text + obrázek ───────────────────────────────── */

.sp-split {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

/* Text */
.sp-split__text {
  flex: 1 1 55%;
  min-width: 0;
}

.sp-split__title {
  margin: 0 0 18px;
  line-height: 1.05;
}

/* Žluté zvýraznění textu (funguje přes více řádků).
   Barva = žlutá z loga (--color-accent-logo), sjednoceno s .pk-hl a .hp-faq__hl. */
.sp-hl {
  --hl: var(--color-accent-logo);
  padding: 0 0.18em;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 62%,
    var(--hl) 62%,
    var(--hl) 95%,
    rgba(0, 0, 0, 0) 95%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.sp-split__text p,
.sp-split__text ul,
.sp-split__text ol {
  margin: 0 0 12px;
}

.sp-split__text ul,
.sp-split__text ol {
  padding-left: 20px;
}

/* Média */
.sp-split__media {
  flex: 1 1 45%;
  min-width: 0;
  margin: 0;
}

.sp-split__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

/* 2 obrázky pod sebou */
.sp-split__mediaStack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Varianta: obrázek vlevo, text vpravo */
.sp-split--reverse {
  flex-direction: row-reverse;
}

@media (max-width: 860px) {
  .sp-split,
  .sp-split--reverse {
    flex-direction: column;
    gap: 16px;
  }
}


/* ── 2. PK-BANNER-LITE — lehký nadpisový banner ─────────────────────────── */

.pk-banner-lite {
  background: transparent;
  width: 100%;
  padding: 28px 18px;
  box-sizing: border-box;
}

.pk-banner-lite__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-text);
}

/* Žluté podtržení v banneru — žlutá z loga, sjednoceno se .sp-hl a .hp-faq__hl */
.pk-hl {
  font-weight: 700;
  padding: 0 0.10em;
  background-image: linear-gradient(
    to top,
    var(--color-accent-logo) 0,
    var(--color-accent-logo) 0.52em,
    transparent 0.52em
  );
  background-repeat: repeat-x;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Menší varianta pro nadpisy podsekcí (dřív inline font-size: 22pt) */
.pk-banner-lite__title--sm {
  font-size: 30px;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .pk-banner-lite { padding: 22px 14px; }
  .pk-banner-lite__title { font-size: 28px; line-height: 1.2; }
  .pk-banner-lite__title--sm { font-size: 24px; }
}


/* ── 3. CS — Text s tlačítkem a obrázkem (case study sekce) ─────────────── */

.cs-wrap {
  background: var(--color-bg-soft);
  padding: 48px 0;
}

.cs-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.cs-badge {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

.cs-title {
  margin: 0 0 16px;
  font-weight: 900;
  font-size: 42px;
  line-height: 1.15;
  color: var(--color-text);
}

.cs-desc {
  margin: 0 0 22px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(17, 17, 17, 0.78);
  max-width: 54ch;
}

.cs-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: var(--radius-none);
}

@media (max-width: 999px) {
  .cs-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cs-media { order: 1; }
  .cs-text  { order: 2; }
  .cs-title { font-size: 34px; }
  .cs-desc  { max-width: unset; }
}


/* ── 4. SP-IMG — Obrázek se zaoblenými rohy ─────────────────────────────── */

.sp-img-wrap {
  margin: 16px 40px;
}

.sp-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.sp-img-caption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(17, 17, 17, 0.7);
  text-align: center;
}

@media (max-width: 860px) {
  .sp-img-wrap { margin-left: 0; margin-right: 0; }
}


/* ── 5. SP-VIDEOCARD — Video karta ──────────────────────────────────────── */

.sp-videoCard {
  font-family: var(--font-display);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 100%;
  margin: 16px 40px;
}

/* Poměr 16:9 */
.sp-videoCard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.sp-videoCard__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sp-videoCard__body {
  padding: 18px 28px 20px;
  overflow: visible;
}

.sp-videoCard__title {
  display: inline;
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}

.sp-videoCard__title:hover {
  text-decoration-thickness: 3px;
}

.sp-videoCard__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: var(--leading-normal);
  color: rgba(17, 17, 17, 0.78);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.sp-videoCard:hover .sp-videoCard__desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

@media (max-width: 860px) {
  .sp-videoCard { margin-left: 0; margin-right: 0; border-radius: var(--radius-md); }
  .sp-videoCard__body { padding: 14px 16px 16px; }
}


/* ── 6. RV — Citace s recenzí a obrázkem (banner) ───────────────────────── */
/* Pozn.: !important je zde záměrné — přebíjí Shoptet šablonu. */

.rv-wrap {
  background: var(--color-bg-soft);
  padding: 40px 0 24px;
}

.rv-wrap,
.rv-wrap * {
  box-sizing: border-box;
}

.rv-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 52px 60px 34px;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: end;
}

.rv-text,
.rv-text p,
.rv-text blockquote {
  margin: 0;
  padding: 0;
}

/* Hvězdy */
.rv-stars {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--color-accent);
  font-size: 30px;
  line-height: 1;
}

/* Citace */
.rv-quote {
  margin: 0 0 18px;
}

.rv-quote p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: var(--leading-loose) !important;
  font-style: italic !important;
  color: rgba(17, 17, 17, 0.78) !important;
  max-width: 56ch;
}

/* Autor */
.rv-author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.rv-author__avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-full) !important;
  background: #EEF1F4 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

.rv-author__avatar::before {
  content: "👤" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.65 !important;
}

.rv-author__icon { display: none !important; }

.rv-author__text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.rv-author__name {
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  color: rgba(17, 17, 17, 0.86) !important;
}

.rv-author__meta {
  margin: 1px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: rgba(17, 17, 17, 0.68) !important;
}

/* Pravá strana s obrázkem */
.rv-media {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
}

.rv-media__box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.rv-img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 999px) {
  .rv-wrap { padding: 32px 0 18px; }
  .rv-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 20px 20px;
    align-items: stretch;
  }
  .rv-quote p { max-width: unset !important; }
  .rv-media { align-items: center !important; }
  .rv-img { max-width: 360px !important; }
  .rv-stars { font-size: 22px; }
}


/* ==========================================================================
   §5 OBSAHOVÉ BLOKY — Komponenty pro obsah článků a stránek
   ==========================================================================
   1. .pk-callout        — šedý callout (CTA varianta + Summary/seznam varianta)
   2. .pk-usp            — USP bloky s emotikony (4 vedle sebe)
   3. .pk-usp--3         — USP bloky s JPG ikonami (3 vedle sebe)
   4. .effects           — Bloky služeb dlaždice (5 vedle sebe)
   5. .pk-stats          — Číselné důkazy světlé
   6. .pkd-stats         — Číselné důkazy tmavé
   7. .pk-tiles          — Info bloky (3 vedle sebe)
   8. .pk-alert-inline   — Alert box (červený)
   9. .pk-tip-inline     — Tip box (žlutý)
   10. .pk-faq           — FAQ blok
   11. .reviews__grid    — Bloky s hodnocením
   12. .pk-cases         — Případové studie / články
   ========================================================================== */


/* ── 1. PK-CALLOUT — Šedý callout blok (2 varianty) ─────────────────────── */

.pk-callout {
  width: 100%;
  margin: 60px 0 40px;
  position: relative;
  box-sizing: border-box;
  font-family: var(--font-body);
}

/* Badge (emoji kolečko nad boxem) */
.pk-callout__badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-text-muted);
  border: 0;
  box-shadow: var(--shadow-badge);
}

/* Box — background musí přebít jakýkoli parent reset (Shoptet homepage wrapper) */
.pk-callout__box {
  background: #F8F9FA !important; /* var(--color-bg-soft) — !important kvůli Shoptet homepage wrapperu */
  border: 0 !important;
  border-radius: 0;
  padding: 42px 28px 22px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  box-sizing: border-box;
}

/* ── Sdílené nadpisy pro obě varianty ── */
/* Bez :has() — funguje bezpečně i v Shoptetu a starších kontextech */
.pk-callout__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-text-muted);
}


/* ── SUMMARY varianta — .pk-callout__list ── */
/* Styly jsou psány BEZ :has() aby fungovaly spolehlivě v každém kontextu
   (Shoptet homepage, detail produktu, article, page). */

.pk-callout__p {
  margin: 0 !important;       /* přebije #content-wrapper p { margin-bottom: 25px } */
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.pk-callout__p + .pk-callout__p { margin-top: 10px !important; }
.pk-callout__p--left             { text-align: left; }
.pk-callout__spacer              { margin: 0 !important; line-height: var(--leading-relaxed); color: var(--color-text-muted); }

.pk-callout__list {
  list-style: none !important;  /* přebije globální ul styl */
  padding: 0 !important;
  margin: 12px 0 0 !important;
  text-align: left;
}

.pk-callout__li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  margin: 0 0 10px !important;  /* konzistentní mezera — přebije případné globální li styly */
}

.pk-callout__li:last-child { margin-bottom: 0 !important; }

/* Fajfka / check mark */
.pk-callout__check {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: var(--leading-relaxed);
  font-weight: 800;
  flex: 0 0 auto;
  margin: 0 !important;         /* přebije případné globální p/span margin */
}

/* Text položky — klíčové: margin: 0 přebíjí #content-wrapper p { margin-bottom: 25px } */
.pk-callout__li-text,
.pk-callout__li-text p {
  font-size: 12pt !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-text-muted);
  margin: 0 !important;         /* ← zabraňuje 25px mezerám z globálního p stylu */
}

.pk-callout__li-text p + p { margin-top: 6px !important; }


/* ── CTA varianta — .pk-callout__cta ── */

/* Pokud existuje .pk-callout__cta sourozenec, přenastaví titulek */
.pk-callout__cta ~ .pk-callout__title,
.pk-callout__title:has(~ .pk-callout__cta) { color: inherit; }

.pk-callout__cta-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* CTA tlačítko uvnitř calloutu — staví na .pk-cta ze §3 */
.pk-callout__box .pk-cta {
  padding: 24px 26px;
  gap: 12px;
  white-space: nowrap;
}

.pk-callout__note {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-text-faint);
}

/* Zachovat zpětnou kompatibilitu s :has() variantou CTA */
.pk-callout:has(.pk-callout__cta) .pk-callout__title {
  margin: 0 0 14px;
  color: inherit;
}
.pk-callout:has(.pk-callout__cta) .pk-callout__cta {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.pk-callout:has(.pk-callout__cta) .pk-cta {
  padding: 24px 26px;
  gap: 12px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .pk-callout__box .pk-cta,
  .pk-callout:has(.pk-callout__cta) .pk-cta {
    padding: 22px 20px;
    gap: 10px;
    white-space: normal;
    text-align: center;
  }
}

/* Mobil — sdílené */
@media (max-width: 560px) {
  .pk-callout         { margin: 52px 0 28px; }
  .pk-callout__box    { padding: 40px 18px 18px; }
  .pk-callout__badge  { width: 54px; height: 54px; top: -27px; font-size: 26px; }
}


/* ── 2. PK-USP — USP karty, 4 vedle sebe ───────────────────────────────── */
/* v1.15: vizuál sjednocen s .pk-usp--3, .effects a .pk-social — bílá karta,
   jemný žlutý rámeček z loga, zaoblení, měkký stín. Ikona je dlaždice 44px
   se světle šedým podkladem (dřív volný obrázek 72px), obsah zarovnaný
   doleva a název hodnoty má vlastní třídu .pk-usp__title.

   Struktura karty:
     <div class="pk-usp__item">
       <div class="pk-usp__icon"><img …></div>
       <p class="pk-usp__title">Poctivost</p>
       <p class="pk-usp__text">…</p>
     </div>

   Ikona funguje i s emoji nebo inline SVG, nejen s <img>.
   Pozn.: rozměry obrázku mají !important, protože editor Shoptetu rád
   dopisuje k <img> inline style="width: 72px; height: 72px". */

.pk-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--max-width-content);   /* 1000px — shodně s .pk-catalog */
  margin: 24px auto 32px;
  align-items: stretch;
}

.pk-usp__item {
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px 19px;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  color: var(--color-text);
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.pk-usp__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Potlačená varianta — bez žlutého rámečku */
.pk-usp__item--dim {
  border-color: var(--color-border);
}

.pk-usp__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 11px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.pk-usp__icon img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
  display: block;
}

.pk-usp__icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-usp__title {
  margin: 0 0 8px !important;
  font-family: var(--font-display);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.pk-usp__text {
  margin: 0 !important;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: left;
}

.pk-usp__text strong,
.pk-usp__text b { font-weight: 700; color: var(--color-text); }

@media (max-width: 900px) { .pk-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .pk-usp { grid-template-columns: 1fr; }
  .pk-usp__item { padding: 18px; }
}


/* ── 3. PK-USP--3 — USP karty s ikonou (3 vedle sebe) ──────────────────── */
/* v1.11: vizuál sjednocen s .pk-catalog a .effects — bílá karta, jemný žlutý
   rámeček z loga, měkký stín. Zrušen žlutý přechod na pozadí i velký kroužek
   s ikonou přesahující přes horní hranu; ikona je teď decentní dlaždice 34px
   v hlavičce vedle titulku, obsah je zarovnaný doleva.

   Doporučená struktura karty (ikona + titulek v jedné řadě):
     <article class="pk-usp__item">
       <div class="pk-usp__head">
         <div class="pk-usp__icon"><img …></div>
         <h3 class="pk-usp__title">…</h3>
       </div>
       <p class="pk-usp__text">…</p>
     </article>

   Bez wrapperu .pk-usp__head to funguje taky — ikona se jen postaví nad
   titulek. Starší HTML na jiných stránkách se tedy nerozbije.

   Pozn.: velikosti písma mají !important kvůli #content-wrapper, který
   globálně nastavuje 17px pro odstavce. */

.pk-usp--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  max-width: var(--max-width-content);   /* 1000px — shodně s .pk-catalog */
  margin: 24px auto 32px;
  align-items: stretch;
}

.pk-usp--3 .pk-usp__item {
  position: relative;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px 19px;
  min-height: 172px;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  outline: none;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.pk-usp--3 .pk-usp__item:hover {
  background: var(--color-bg);
  border-color: var(--color-accent-logo);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  outline: none;
}

/* Potlačená varianta — bez žlutého rámečku */
.pk-usp--3 .pk-usp__item--dim {
  border-color: var(--color-border);
}

/* Hlavička karty: ikona + titulek v jedné řadě (jako .pk-catalog__head) */
.pk-usp--3 .pk-usp__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

/* Ikona — dlaždice 34px se světle šedým pozadím, bez žlutého kroužku */
.pk-usp--3 .pk-usp__icon {
  position: static;
  transform: none;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0 0 10px;
  border: 0;
  border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.pk-usp--3 .pk-usp__head .pk-usp__icon { margin: 0; }

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

.pk-usp--3 .pk-usp__icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-usp--3 .pk-usp__title {
  margin: 0 0 10px !important;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.pk-usp--3 .pk-usp__head .pk-usp__title { margin: 0 !important; }

.pk-usp--3 .pk-usp__text {
  margin: 0 !important;
  color: var(--color-text-muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: left;
}

/* Responzivita shodná s .pk-catalog: 900px → 2 sloupce, 640px → 1 sloupec */
@media (max-width: 900px) {
  .pk-usp--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pk-usp--3 { grid-template-columns: 1fr; }
  .pk-usp--3 .pk-usp__item { min-height: 0; padding: 18px; }
}


/* ── 4. EFFECTS — Bloky služeb dlaždice (5 vedle sebe) ──────────────────── */
/* v1.10: vizuál sjednocen s .pk-catalog — bílé karty se zaoblením, jemným
   žlutým rámečkem a měkkým stínem; štítek je plná pilulka v žluté z loga
   (dřív rgba(237,222,0,0.22) s radiusem 8px, tedy výrazně světlejší).
   Dekorativní tečka .effect-dot se už nevykresluje — v HTML ji lze
   vypustit, skrytí je tu kvůli šablonám, kde ještě zůstala. */

.effects {
  background: var(--color-bg);
  color: var(--color-text);
  padding-top: 16px;
  padding-bottom: 24px;
  margin: 0;
}

.effects__grid {
  max-width: var(--max-width-content);   /* 1000px — shodně s .pk-catalog */
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

/* Karta — bílá, jemný žlutý rámeček, měkký stín (shodně s .pk-catalog__card) */
.effect-card {
  position: relative;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 15px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.effect-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Potlačená varianta — bez žlutého rámečku (obdoba .pk-catalog__card--dim) */
.effect-card--dim {
  border-color: var(--color-border);
}

/* Zrušeno ve v1.10 — nahrazeno pilulkou. Ponecháno kvůli starému HTML. */
.effect-dot { display: none; }

/* Štítek — plná pilulka v žluté z loga, shodně s .pk-catalog__tag */
.effect-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  margin-bottom: 10px;
}

/* Tmavá varianta pilulky (obdoba .pk-catalog__tag--geo) */
.effect-tag--dark {
  background: var(--color-text);
  color: var(--color-accent-logo);
}

/* Pozn.: !important kvůli #content-wrapper, který globálně nastavuje 17px. */
.effect-text {
  margin: 0 !important;
  color: var(--color-text-muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

/* Centrování 3 karet v 5-sloupcové mřížce */
.effects__grid--center-3 .effect-card:nth-child(1) { grid-column: 2; }
.effects__grid--center-3 .effect-card:nth-child(2) { grid-column: 3; }
.effects__grid--center-3 .effect-card:nth-child(3) { grid-column: 4; }

@media (max-width: 1100px) {
  .effects__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .effects__grid--center-3 .effect-card:nth-child(1),
  .effects__grid--center-3 .effect-card:nth-child(2),
  .effects__grid--center-3 .effect-card:nth-child(3) { grid-column: auto; }
}
@media (max-width: 860px)  { .effects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .effects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .effects__grid { grid-template-columns: 1fr; } }


/* ── 5. PK-STATS — Číselné důkazy (světlé) ──────────────────────────────── */

.pk-stats {
  width: 100%;
  margin: 20px 0;
  padding: 16px 14px;
  background: var(--color-bg-soft);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: pkstats;
}

.pk-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.pk-stat {
  background: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-none);
  padding: 14px 14px 10px;
  box-sizing: border-box;
}

.pk-stat__value {
  margin: 0 0 4px;
  color: var(--color-text);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(26px, 5.5cqw, 78px);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pk-stat__label {
  margin: 0 0 6px;
  color: var(--color-text-muted);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.2;
}

.pk-stat__label::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 6px;
  background: var(--color-accent);
}

.pk-stat__desc {
  margin: 0;
  color: rgba(17, 17, 17, 0.78);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.pk-stat:hover {
  background: var(--color-bg-soft);
  border-color: rgba(0, 0, 0, 0.10);
}

@container pkstats (max-width: 900px) {
  .pk-stats__grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@container pkstats (max-width: 560px) {
  .pk-stats { padding: 14px 12px; }
  .pk-stats__grid { grid-template-columns: 1fr; }
  .pk-stat { padding: 12px 12px 9px; }
}

/* Fallback pro starší prohlížeče bez container queries */
@media (max-width: 999px) { .pk-stats__grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
@media (max-width: 599px) {
  .pk-stats { padding: 14px 12px; }
  .pk-stats__grid { grid-template-columns: 1fr; }
  .pk-stat { padding: 12px 12px 9px; }
}


/* ── 6. PKD-STATS — Číselné důkazy (tmavé) ──────────────────────────────── */

.pkd-stats {
  width: 100%;
  margin: 20px 0;
  padding: 16px 14px;
  background: var(--color-dark-bg);
  box-sizing: border-box;
}

.pkd-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.pkd-stat {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-none);
  padding: 14px 14px 10px;
  box-sizing: border-box;
  text-align: left;
}

.pkd-stat__value {
  margin: 0 0 4px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  font-size: var(--text-3xl); /* 45px — sjednoceno na token */
  white-space: nowrap;
}

.pkd-stat__label {
  margin: 0 0 6px;
  color: var(--color-dark-text);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
}

.pkd-stat__label::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 6px;
  background: var(--color-accent);
}

.pkd-stat__desc,
.pkd-stat__desc p {
  margin: 0;
  color: var(--color-dark-muted);
  font-size: 15px;
  line-height: 1.25;
  text-align: left !important;
  text-align-last: left;
  text-justify: auto;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.pkd-stat__desc p + p { margin-top: 6px; }

.pkd-stat:hover {
  background: var(--color-dark-card-hover);
  border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 999px) { .pkd-stats__grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
@media (max-width: 599px) {
  .pkd-stats { padding: 14px 12px; }
  .pkd-stats__grid { grid-template-columns: 1fr; }
  .pkd-stat { padding: 12px 12px 9px; }
}


/* ── 7. PK-TILES — Info bloky (3 vedle sebe) ────────────────────────────── */

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

  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: var(--radius-sm);
  background: var(--color-bg);
  padding: 16px 16px 14px;
  box-shadow: none;
  color: var(--t);
}

.pk-tile__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  color: var(--t);
  font-size: 18px;
  margin-bottom: 10px;
  border: 1px solid var(--b);
}

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

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


/* ── 8. PK-ALERT-INLINE — Alert box (červený) ───────────────────────────── */

.pk-alert-inline {
  font-family: var(--font-body);
  width: 100%;
  max-width: none;
  margin: 30px 0;
  background-color: var(--color-alert-bg);
  border: 0;
  border-radius: 0;
  padding: 18px;
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
}

.pk-alert-inline__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1.2;
  margin-top: 1px;
}

.pk-alert-inline__content {
  flex: 1 1 auto;
  min-width: 0;
}

.pk-alert-inline__title {
  font-size: var(--text-base);
  font-weight: bold;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: var(--leading-snug);
}

.pk-alert-inline__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 520px) {
  .pk-alert-inline { padding: 16px 14px; gap: 10px; }
  .pk-alert-inline__icon { font-size: 20px; }
}


/* ── 9. PK-TIP-INLINE — Tip box (žlutý) ─────────────────────────────────── */

.pk-tip-inline {
  font-family: var(--font-body);
  width: 100%;
  max-width: none;
  margin: 30px 0;
  background: linear-gradient(90deg, var(--color-accent-soft) 0%, #fffee2 55%, #fffee2 100%);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  padding: 18px 18px 6px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.pk-tip-inline__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1.2;
  margin-top: 1px;
  opacity: 0.9;
}

.pk-tip-inline__content {
  flex: 1 1 auto;
  min-width: 0;
}

.pk-tip-inline__title {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}

.pk-tip-inline__text,
.pk-tip-inline__text p,
.pk-tip-inline__content * {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 520px) {
  .pk-tip-inline { padding: 16px 14px 9px 14px; gap: 10px; }
  .pk-tip-inline__icon { font-size: 20px; }
}


/* ── 10. PK-FAQ — FAQ blok ──────────────────────────────────────────────── */
/* Pozn.: nekoliduje s .hp-faq (§9) — jiný prefix, jiné použití. */

.pk-faq {
  background: var(--color-bg-soft);
  padding: 34px 18px;
}

.pk-faq__title {
  margin: 0 0 22px;
  text-align: center;
}

.pk-faq__list {
  display: grid;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.pk-faq__card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 22px 24px 10px;
  box-shadow: var(--shadow-lg);
}

/* Summary — vypnout globální "Podrobnosti" i marker */
.pk-faq__q {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pk-faq__q::-webkit-details-marker { display: none !important; }
.pk-faq__q::marker { content: "" !important; }
.pk-faq__q::before,
.pk-faq__q::after { content: none !important; display: none !important; }
.pk-faq__q *::before,
.pk-faq__q *::after { content: unset; }

.pk-faq__h3 { margin: 0; }

/* Šipka */
.pk-faq__chev {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  color: #150966;
  background: rgba(21, 9, 102, 0.08);
  margin-top: 4px;
  transition: transform var(--transition-normal), background var(--transition-normal);
}

.pk-faq__chev::before { content: "⌄"; font-size: 18px; line-height: 1; }

.pk-faq__card[open] .pk-faq__chev {
  transform: rotate(180deg);
  background: rgba(21, 9, 102, 0.12);
}

/* Odpověď */
.pk-faq__a {
  position: relative;
  padding-left: 22px;
}

.pk-faq__a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: var(--color-accent);
}

.pk-faq__a p {
  margin: 0;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

@media (hover: hover) {
  .pk-faq__q:hover .pk-faq__chev { background: rgba(21, 9, 102, 0.14); }
}

@media (max-width: 560px) {
  .pk-faq { padding: 26px 14px; }
  .pk-faq__card { padding: 18px 16px; border-radius: 10px; }
  .pk-faq__a { padding-left: 18px; }
}


/* ── 11. REVIEWS — Bloky s hodnocením ───────────────────────────────────── */

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

.review-card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  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 !important;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  position: relative;
}

.review-card__text * { font-size: 14px !important; line-height: 1.4; margin: 0; }

.review-card__text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.1em;
  background: linear-gradient(to bottom, rgba(248, 249, 250, 0), rgba(248, 249, 250, 1));
  pointer-events: none;
}

.review-card:hover .review-card__text,
.review-card__text:hover {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.review-card:hover .review-card__text::after,
.review-card__text:hover::after { display: none; }

.review-card__user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.review-card__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: #E3E6EA;
  border: 1px solid #E3E6EA;
  color: #6B7280;
  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: 599px)                         { .reviews__grid { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 1099px) { .reviews__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (min-width: 1100px)                        { .reviews__grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }


/* ── 12. PK-CASES — Případové studie / články (3 vedle sebe) ────────────── */

.pk-cases {
  width: 100%;
  margin: 24px 0;
}

.pk-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}

.pk-case {
  background: var(--color-bg-soft);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pk-case__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee;
  overflow: hidden;
}

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

.pk-case__body {
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.pk-case__title { margin: 0; }

.pk-case__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.pk-case__footer {
  margin-top: auto;
  padding: 0 16px 16px;
}

/* Tlačítko v kartě — staví na sdíleném vzoru z §3 */
.pk-case__btn {
  background: var(--color-accent);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  border: 0;
  box-shadow: var(--shadow-btn);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.pk-case__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.pk-case__btn:active { transform: translateY(0); box-shadow: var(--shadow-btn); }
.pk-case__btn:focus-visible { outline: 3px solid rgba(17, 17, 17, 0.22); outline-offset: 3px; }

.pk-case__btn-ico { font-size: 16px; line-height: 1; }

@media (max-width: 999px) { .pk-cases__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 599px) {
  .pk-cases__grid { grid-template-columns: 1fr; }
  .pk-case__footer { padding-bottom: 14px; }
  .pk-case__btn { width: 100%; white-space: normal; }
}


/* ── 13. PK-EYEBROW — Žlutý štítek nad nadpisem sekce ───────────────────── */
/* Použití: <p class="pk-eyebrow">Katalog služeb</p> těsně před <h2>.
   Reusable pro jakoukoli sekci. */

.pk-eyebrow {
  display: table;                     /* shrink-to-fit + margin auto centrování */
  margin: 0 auto -28px !important;    /* přisune se k H2 (H2 má margin-top 40px) */
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.8px !important;       /* v1.03: 13px → v1.04: 9px (−30 %) → v1.07: +20 % */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 13px;
  border-radius: var(--radius-full);
}


/* ── 14. PK-CATALOG — Katalog služeb (karty s ikonou a štítkem) ─────────── */
/* Grid karet, štítek v pravém horním rohu značí disciplínu služby.
   Proporce a vizuál podle vzorového návrhu spolupráce (blok .o-svc).

   Varianty štítku:
   .pk-catalog__tag             — žlutá (výchozí, používá se pro SEO i SEO + GEO)
   .pk-catalog__tag--geo        — tmavá se žlutým textem (čisté GEO)
   .pk-catalog__tag--muted      — neutrální šedá (volitelné / mimo rozsah)

   Volitelný modifikátor karty:
   .pk-catalog__card--dim       — potlačená karta bez žlutého rámečku

   Pozn.: velikosti písma mají !important, protože #content-wrapper nastavuje
   globálně 17px pro p a seznamy — bez toho by se karty rozjely.
   Titulek má weight 700, ne 800: vzor používá Manrope, náš --font-display je
   Poppins, který je při stejné váze opticky výrazně tučnější.
   Perex nad mřížkou se needituje třídou, používá výchozí styl odstavce. */

.pk-catalog {
  width: 100%;
  max-width: var(--max-width-content);  /* 1000px — shodně se zbytkem obsahu */
  margin: 24px auto 32px;
}

.pk-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Karta — bílá, jemný žlutý rámeček, jemný stín */
.pk-catalog__card {
  position: relative;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px 19px;
  min-height: 172px;
  min-width: 0;
  box-sizing: border-box;
}

/* Potlačená varianta — bez žlutého rámečku */
.pk-catalog__card--dim {
  border-color: var(--color-border);
}

/* ── Štítek disciplíny — absolutně v pravém horním rohu, bez rámečku ── */
.pk-catalog__tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* GEO — tmavá pilulka se žlutým textem */
.pk-catalog__tag--geo {
  background: var(--color-text);
  color: var(--color-accent-logo);
}

/* Neutrální šedá (volitelné / mimo rozsah) */
.pk-catalog__tag--muted {
  background: var(--color-bg-soft);
  color: var(--color-text-faint);
}

/* Hlavička karty: ikona + titulek.
   align-items: center drží ikonu opticky ve středu i u dvouřádkového
   titulku. Padding-right rezervuje místo pro štítek — bez něj by titulek
   podlezl pilulku. Žádné min-height: výšku určuje ikona (34px). */
.pk-catalog__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  padding-right: 88px;
}

.pk-catalog__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-catalog__icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-catalog__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* text-wrap: balance rozdělí víceřádkový titulek na přibližně stejně
   dlouhé řádky místo "dlouhý řádek + jedno osamocené slovo".
   V prohlížečích bez podpory se prostě zalomí normálně. */
.pk-catalog__title {
  margin: 0 !important;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.pk-catalog__desc {
  margin: 0 !important;
  color: var(--color-text-muted);
  font-size: 13px !important;
  line-height: 1.55;
}

/* Responzivita: 900px → 2 sloupce, 640px → 1 sloupec */
@media (max-width: 900px) {
  .pk-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pk-catalog__grid { grid-template-columns: 1fr; }
  .pk-catalog__card { min-height: 0; padding: 18px 18px 18px; }
  .pk-catalog__head { padding-right: 84px; }
}


/* ── 15. PK-TOOLS — Interní nástroje, dashboardy a reporty ──────────────── */
/* Grid karet s automatickým pořadovým číslem v pravém horním rohu.
   Číslo generuje CSS counter — při přidání nebo přehození karty se
   přečísluje samo, v HTML se nic needituje.

   Proti .pk-catalog: bez žlutého rámečku (nejde o nabídku služeb, ale
   o výčet nástrojů) a číslo místo štítku disciplíny.

   Pozn.: velikosti písma mají !important kvůli globálním 17px
   z #content-wrapper. */

.pk-tools {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 24px auto 32px;
  counter-reset: pktool;
}

.pk-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Karta */
.pk-tools__card {
  position: relative;
  counter-increment: pktool;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px 19px;
  min-width: 0;
  box-sizing: border-box;
}

/* Pořadové číslo — automaticky z counteru */
.pk-tools__card::after {
  content: counter(pktool);
  position: absolute;
  top: 15px;
  right: 16px;
  background: var(--color-bg-soft);
  color: var(--color-text-faint);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: 6px;
}

/* Hlavička: ikona + titulek. Padding-right rezervuje místo pro číslo. */
.pk-tools__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  padding-right: 44px;
}

.pk-tools__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-tools__icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-tools__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.pk-tools__title {
  margin: 0 !important;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.pk-tools__desc {
  margin: 0 !important;
  color: var(--color-text-muted);
  font-size: 13px !important;
  line-height: 1.55;
}

/* Responzivita: 900px → 2 sloupce, 640px → 1 sloupec */
@media (max-width: 900px) {
  .pk-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pk-tools__grid { grid-template-columns: 1fr; }
  .pk-tools__card { padding: 18px 18px 18px; }
}


/* ── 16. PK-RANK — Žebříček s vodorovnými sloupci ───────────────────────── */
/* Interaktivní graf bez JavaScriptu. Šířku sloupce určuje proměnná --pkr
   nastavená inline na řádku, normalizovaná vůči --pkr-max na kontejneru:

     <ol class="pk-rank" style="--pkr-max: 40">
       <li class="pk-rank__row pk-rank__row--first" style="--pkr: 39.44"> …

   Změna měřítka = změna jediného čísla v --pkr-max (zaokrouhlete nahoru
   nad nejvyšší hodnotu).

   Interakce: hodnoty jsou vidět vždy (kvůli dotykovým zařízením, kde hover
   neexistuje), na najetí myší se řádek podbarví, sloupec ztmavne a hodnota
   zvýrazní. Klávesnicová navigace přes tabindex="0" funguje stejně. */

.pk-rank {
  list-style: none !important;
  width: 100%;
  max-width: var(--max-width-content);
  margin: 24px auto 28px !important;
  padding: 0 !important;
  counter-reset: pkrank;

  /* Výchozí měřítko — přepište inline na elementu */
  --pkr-max: 100;
}

.pk-rank__row {
  counter-increment: pkrank;
  display: grid;
  grid-template-columns: 30px minmax(150px, 210px) 1fr 62px;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition-normal);
}

.pk-rank__row:hover,
.pk-rank__row:focus-visible {
  background: var(--color-bg-soft);
  outline: none;
}

/* Pořadí */
.pk-rank__pos {
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Název agentury */
.pk-rank__name {
  font-size: 14px !important;
  line-height: 1.35;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  min-width: 0;
}

/* Dráha a sloupec */
.pk-rank__track {
  height: 18px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  min-width: 0;
}

.pk-rank__bar {
  display: block;
  height: 100%;
  width: calc(var(--pkr, 0) / var(--pkr-max) * 100%);
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-normal);
}

.pk-rank__row:hover .pk-rank__bar,
.pk-rank__row:focus-visible .pk-rank__bar {
  background: #C9CED6;
}

/* Hodnota */
.pk-rank__val {
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-normal);
}

.pk-rank__row:hover .pk-rank__val,
.pk-rank__row:focus-visible .pk-rank__val {
  color: var(--color-text);
}

/* ── Zvýrazněný řádek (vlastní značka) ── */
.pk-rank__row--first .pk-rank__name {
  font-weight: 800;
  color: var(--color-text);
}

.pk-rank__row--first .pk-rank__pos,
.pk-rank__row--first .pk-rank__val {
  color: var(--color-text);
}

.pk-rank__row--first .pk-rank__bar {
  background: var(--color-accent-logo);
}

.pk-rank__row--first:hover .pk-rank__bar,
.pk-rank__row--first:focus-visible .pk-rank__bar {
  background: var(--color-accent);
}

/* Mobil — název nad sloupcem */
@media (max-width: 620px) {
  .pk-rank__row {
    grid-template-columns: 26px 1fr 56px;
    grid-template-areas:
      "pos name val"
      "pos track val";
    row-gap: 6px;
    column-gap: 10px;
    padding: 8px 6px;
  }
  .pk-rank__pos   { grid-area: pos; align-self: center; }
  .pk-rank__name  { grid-area: name; font-size: 13px !important; }
  .pk-rank__track { grid-area: track; height: 14px; }
  .pk-rank__val   { grid-area: val; align-self: center; }
}


/* ==========================================================================
   §6 TABULKY — Komponentové varianty
   ==========================================================================
   Komponentové tabulky přepisující globální styl z §2 BASE.
   Globální <table> fallback zůstává v §2.

   1. .pk-table-simple  — jednoduchá tabulka bez záhlaví
   2. .pk-table-head    — tabulka se záhlavím (+ varianta --scroll pro 4+ sloupce)
   3. .pk-compare       — srovnávací tabulka (2 služby)
   ========================================================================== */


/* ── 1. PK-TABLE-SIMPLE — Jednoduchá tabulka bez záhlaví ────────────────── */

.pk-table-simple {
  --cell:   #FFFFFF;
  --alt:    #F8F9FA;
  --hover:  #F1F3F5;
  --b:      #E5E7EB;
  --text:   #111827;
  --muted:  #374151;

  width: 100%;
  max-width: var(--max-width-text);
  margin: 0 auto;
  border: 1px solid var(--b);
  border-radius: 6px;
  overflow: hidden;
  background: var(--cell);
}

.pk-table-simple table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.pk-table-simple td {
  padding: 14px 16px;
  vertical-align: top;
  color: var(--text);
  background: var(--cell);
  border-top: 1px solid var(--b);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pk-table-simple tr:first-child td           { border-top: 0; }
.pk-table-simple td + td                     { border-left: 1px solid var(--b); }
.pk-table-simple tr:nth-child(even) td       { background: var(--alt); }
.pk-table-simple tr:hover td                 { background: var(--hover); }

.pk-table-simple td:first-child {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* 3+ sloupců → fixed layout */
@supports selector(.pk-table-simple table:has(td:nth-child(3))) {
  .pk-table-simple table:has(td:nth-child(3)) {
    table-layout: fixed;
  }
  .pk-table-simple table:has(td:nth-child(3)) td:first-child {
    white-space: normal;
    width: 32%;
  }
}

@media (max-width: 720px) {
  .pk-table-simple { max-width: 100%; }
  .pk-table-simple table { width: 100%; font-size: 15px; table-layout: auto; }
  .pk-table-simple td:first-child { white-space: normal; }

  @supports selector(.pk-table-simple table:has(td:nth-child(3))) {
    .pk-table-simple table:has(td:nth-child(3))         { table-layout: auto; }
    .pk-table-simple:has(table td:nth-child(3))         { overflow: visible; }

    .pk-table-simple:has(table td:nth-child(3)) tbody,
    .pk-table-simple:has(table td:nth-child(3)) tr      { display: block; width: 100%; }

    .pk-table-simple:has(table td:nth-child(3)) tr      { padding: 12px 14px; border: 0; }

    .pk-table-simple:has(table td:nth-child(3)) tr:nth-child(even) { background: var(--alt); }
    .pk-table-simple:has(table td:nth-child(3)) tr:nth-child(odd)  { background: var(--cell); }

    .pk-table-simple:has(table td:nth-child(3)) td {
      display: block;
      width: 100%;
      padding: 0;
      border: 0 !important;
      background: transparent;
    }

    .pk-table-simple:has(table td:nth-child(3)) td:first-child    { font-weight: 700; color: var(--muted); margin: 0 0 6px; }
    .pk-table-simple:has(table td:nth-child(3)) td:not(:first-child) { margin-top: 4px; }
    .pk-table-simple:has(table td:nth-child(3)) tr:hover td        { background: transparent; }
  }
}


/* ── 2. PK-TABLE-HEAD — Tabulka se záhlavím ─────────────────────────────── */
/* Pozn.: !important je zde záměrné — přebíjí globální <table> styl z §2. */

.pk-table-head {
  --cell:   #ffffff;
  --alt:    #F8F9FA;
  --hover:  #F1F3F5;
  --b:      #E5E7EB;
  --text:   #111827;
  --muted:  #374151;
  --head:   #E3E8EE;
  --head2:  #D6DDE6;

  width: 100% !important;
  max-width: var(--max-width-text);
  margin: 0 auto !important;
  text-align: left !important;
  box-sizing: border-box;

  border: 1px solid var(--b) !important;
  border-radius: 6px !important;
  background: var(--cell) !important;
  box-shadow: 0 0 0 1px var(--b) inset !important;
  overflow: hidden !important;
}

.pk-table-head table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
  font: inherit !important;
  color: inherit !important;
}

.pk-table-head th,
.pk-table-head td {
  font: inherit !important;
  color: var(--text) !important;
}

/* Záhlaví */
.pk-table-head thead th {
  padding: 14px 16px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #E8EDF3 0%, #DDE5EE 100%) !important;
  font-size: 1.05em !important;
  border-bottom: 2px solid var(--head2) !important;
  vertical-align: top !important;
  position: relative;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.pk-table-head thead th::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
}

.pk-table-head thead th + th { border-left: 0 !important; }

/* Tělo */
.pk-table-head td {
  padding: 14px 16px !important;
  vertical-align: top !important;
  background: var(--cell) !important;
  border-top: 1px solid var(--b) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.pk-table-head tbody tr:first-child td    { border-top: 0 !important; }
.pk-table-head td + td                    { border-left: 0 !important; }
.pk-table-head tbody tr:nth-child(even) td { background: #FBFCFD !important; }
.pk-table-head tbody tr:hover td          { background: var(--hover) !important; }

/* 1. sloupec */
.pk-table-head tbody td:first-child {
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: #F3F5F8 !important;
  border-right: 0 !important;
  box-shadow: inset -1px 0 0 rgba(17, 24, 39, 0.08);
}

.pk-table-head tbody tr:nth-child(even) td:first-child { background: #F3F5F8 !important; }
.pk-table-head tbody tr:hover td:first-child            { background: #EEF2F6 !important; }

/* Mobil — standard */
@media (max-width: 720px) {
  .pk-table-head { max-width: 100%; overflow: hidden !important; }
  .pk-table-head table { table-layout: fixed !important; }
  .pk-table-head thead th,
  .pk-table-head td { padding: 10px !important; white-space: normal !important; min-width: 0; }
}

/* Mobil — scroll varianta (4+ sloupců): přidejte třídu .pk-table-head--scroll */
@media (max-width: 720px) {
  .pk-table-head.pk-table-head--scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    touch-action: pan-x;
    position: relative;
    border-radius: 6px !important;
    border: 1px solid var(--b) !important;
    box-shadow: 0 0 0 1px var(--b) inset !important;
    background: var(--cell) !important;
  }

  .pk-table-head.pk-table-head--scroll table {
    width: 100% !important;
    min-width: 760px;
    table-layout: fixed !important;
  }

  .pk-table-head.pk-table-head--scroll thead th,
  .pk-table-head.pk-table-head--scroll td {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    padding: 10px 12px !important;
    vertical-align: top !important;
  }

  .pk-table-head.pk-table-head--scroll thead th:first-child,
  .pk-table-head.pk-table-head--scroll tbody td:first-child {
    width: 140px;
    max-width: 140px;
  }

  .pk-table-head.pk-table-head--scroll tbody td:first-child {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Gradient hint pro scroll */
  .pk-table-head.pk-table-head--scroll::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(229, 231, 235, 1), rgba(229, 231, 235, 0));
  }

  .pk-table-head.pk-table-head--scroll::before {
    content: "Posuňte tabulku →";
    position: absolute;
    right: 10px;
    bottom: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 1;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--b);
    border-radius: var(--radius-full);
    padding: 7px 10px;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
  }

  .pk-table-head.pk-table-head--scroll::-webkit-scrollbar { height: 10px; }
  .pk-table-head.pk-table-head--scroll::-webkit-scrollbar-track { background: var(--head); }
  .pk-table-head.pk-table-head--scroll::-webkit-scrollbar-thumb {
    background: #C9D2DC;
    border-radius: var(--radius-full);
    border: 2px solid var(--head);
  }
  .pk-table-head.pk-table-head--scroll {
    scrollbar-width: thin;
    scrollbar-color: #C9D2DC var(--head);
  }
}

@media (max-width: 380px) {
  .pk-table-head.pk-table-head--scroll thead th:first-child,
  .pk-table-head.pk-table-head--scroll tbody td:first-child { width: 120px; max-width: 120px; }
}


/* ── 3. PK-COMPARE — Srovnávací tabulka (2 služby) ──────────────────────── */

.pk-compare {
  --plus:  #15803d;   /* = --color-positive */
  --minus: #b91c1c;   /* = --color-negative */

  margin: 22px 0;
  font-family: inherit;
  color: #0f172a;
}

.pk-compare__table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  background: var(--color-bg);
  overflow: hidden;
}

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

.pk-compare__col { padding: 18px 18px 16px; }
.pk-compare__col + .pk-compare__col { border-left: 1px solid var(--color-border); }

@media (max-width: 860px) {
  .pk-compare__col + .pk-compare__col { border-left: 0; border-top: 1px solid var(--color-border); }
}

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

.pk-compare__title { margin: 0; color: inherit; }

.pk-compare__tag {
  padding: 6px 10px;
  border-radius: var(--radius-none);
  border: 1px solid var(--color-bg-soft);
  background: #fbf8c7;
  color: #0f172a;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: inherit;
}

.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: var(--text-base);
  line-height: 1.4;
  background-color: rgba(0, 0, 0, 0);
  font-family: inherit;
}

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

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

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


/* ==========================================================================
   §7 AUTOR & SEZNAMY — Autor, zdroje & SEO seznamy
   ==========================================================================
   1. .author-card           — medailonek autora
   2. .article-sources       — zdroje pod článkem (rozbalovací)
   3. .pk-steps              — průvodce krok za krokem
   4. .pk-arrowlist          — odrážky šipky
   5. .smart-bullets         — odrážky žluté tečky s šipkami
   6. .bullet-yellow         — odrážky žluté tečky (jednodušší)
   7. ol.pk-steps-guide      — číselný seznam
   8. .odrazky               — legacy odrážky (styl01)
   ========================================================================== */


/* ── 1. AUTHOR-CARD — Medailonek autora ─────────────────────────────────── */

.author-card {
  --bd:          #e7eded;
  --t:           #1d2a2b;
  --m:           #5a6a6b;
  --strip:       10px;
  --left:        230px;
  --gap:         26px;
  --authorMax:   840px;
  --quoteMax:    640px;
  --stripeColor: var(--color-accent);
  --dividerColor:#cfd4da;
  --quoteMarkColor: #cfd4da;

  position: relative;
  overflow: hidden;
  padding: 22px 14px 16px 18px;
  background: var(--color-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius-none);
  box-shadow: none;
  width: 100%;
  max-width: var(--authorMax);
  margin-inline: auto;
}

/* Žlutý proužek vlevo */
.author-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--strip);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(237, 222, 0, 0.85),
    rgba(237, 222, 0, 0.55) 45%,
    rgba(237, 222, 0, 0.20) 70%,
    rgba(237, 222, 0, 0) 100%
  );
  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(--gap);
  align-items: start;
}

/* Svislá linka oddělující avatar od textu */
.author-card__inner::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: calc(var(--left) + var(--gap));
  width: 1px;
  background: var(--dividerColor);
}

.author-card__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  max-width: var(--left);
}

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

.author-card__avatar {
  width: 116px;
  height: 116px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg);
  border: 0;
  box-shadow: none;
}

.author-card__avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--radius-full) !important;
}

/* Citát */
.author-card__quote {
  position: relative;
  padding: 34px 0 4px 22px;
  line-height: var(--leading-relaxed);
  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(--quoteMarkColor);
  opacity: 0.65;
}

.author-card__quote p {
  margin: 0;
  font-style: italic;
  font-size: 13.5px;
  color: #2b3a3b;
}

.author-card__name {
  font-weight: 700;
  color: var(--t);
  font-size: var(--text-base);
  white-space: normal;
  overflow-wrap: anywhere;
}

.author-card__role {
  margin-top: 0;
  color: var(--m);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Mobil */
@media (max-width: 520px) {
  .author-card {
    --gap: 14px;
    --quoteMax: 100%;
    padding: 14px;
    max-width: 100%;
  }

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

  .author-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
  }

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

  .author-card__left {
    max-width: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .author-card__avatar { width: 78px; height: 78px; }
  .author-card__meta   { width: 100%; }
  .author-card__name   { white-space: normal; }

  .author-card__quote {
    width: 100%;
    max-width: 100%;
    padding: 22px 0 0;
    text-align: left;
  }

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


/* ── 2. ARTICLE-SOURCES — Zdroje pod článkem ────────────────────────────── */
/* Pozn.: komponenta je navržena pro TMAVÉ pozadí (bílé rgba bordery/pozadí).
   Při konsolidaci sjednoceny žluté odstíny #eddd00 / rgba(237,221,0,…)
   na token --color-accent / rgba(237,222,0,…). */

.article-sources {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: inherit;
  line-height: var(--leading-relaxed);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* "Zobrazit zdroje" summary tlačítko */
.article-sources > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-accent);
  color: inherit;
  font-weight: 700;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.article-sources > summary::-webkit-details-marker { display: none; }
.article-sources > summary:hover { background: rgba(237, 222, 0, 0.08); box-shadow: 0 0 0 3px rgba(237, 222, 0, 0.12); }
.article-sources > summary:active { transform: translateY(1px); }

.article-sources > summary::after {
  content: "↓";
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1;
  color: #000;
  transform: translateY(2px);
  transition: transform var(--transition-normal);
}

.article-sources[open] > summary::after {
  transform: rotate(180deg) translateY(-2px);
}

/* Seznam zdrojů */
.article-sources > ul {
  margin: 14px 0 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.article-sources > ul > li {
  position: relative;
  margin: 12px 0;
  padding-left: 34px;
  overflow-wrap: anywhere;
  font-size: calc(1em - 2px);
}

.article-sources > ul > li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: calc((1em * 1.65) / 2);
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.article-sources a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: 0.95;
}

.article-sources a:hover { opacity: 1; }


/* ── 3. PK-STEPS — Průvodce krok za krokem ──────────────────────────────── */

.pk-steps {
  --step-bg:    var(--color-bg-soft);
  --step-badge: #333333;
  --step-num:   #ffffff;
  --step-text:  #111111;
  --step-sub:   rgba(17, 17, 17, 0.78);
  --step-line:  #333333;

  width: 100%;
  margin: 26px 0;
}

.pk-steps__title { margin: 0 0 14px; color: inherit; }

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

.pk-step {
  position: relative;
  background: var(--step-bg);
  border: 0;
  border-radius: var(--radius-none);
  padding: 14px 18px 2px 60px;
  box-shadow: none;
}

.pk-step > * { margin: 0; }

/* Číselný badge */
.pk-step__badge {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--step-badge);
  color: var(--step-num);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
}

.pk-step__head {
  margin: 0 0 4px;
  padding: 0;
  color: var(--step-text);
}

.pk-step__text {
  margin: 0;
  padding: 0;
  color: var(--step-sub);
  font: inherit;
}

/* Spojnice mezi kroky */
.pk-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 46px;
  bottom: -12px;
  width: 2px;
  background: var(--step-line);
  border-radius: 0;
}

@media (max-width: 560px) {
  .pk-step { padding: 12px 14px 6px 54px; }
  .pk-step__badge { left: 14px; top: 12px; width: 26px; height: 26px; font-size: 14px; }
  .pk-step:not(:last-child)::after { left: 27px; top: 42px; }
}


/* ── 4. PK-ARROWLIST — Odrážky se šipkami (→) ───────────────────────────── */

.pk-arrowlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pk-arrowlist li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
  color: #000;
  line-height: var(--leading-relaxed);
}

.pk-arrowlist li:last-child { margin-bottom: 0; }

.pk-arrowlist li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #000;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.pk-arrowlist * { color: #000; }


/* ── 5. SMART-BULLETS — Odrážky žluté tečky s šipkami ───────────────────── */

/* content-rail — centrovací wrapper */
.content-rail {
  display: table;
  margin-inline: auto;
  max-width: min(100%, 120ch);
  padding-inline: clamp(12px, 2vw, 20px);
}

@media (max-width: 700px) {
  .content-rail { display: block; width: 100%; }
}

.bullet-wrap { width: 100%; margin: 0; padding: 0; }

.smart-bullets {
  --dot:      var(--color-accent);
  --dot-size: 1.08em;
  --lh:       1.45;

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

.smart-bullets li {
  position: relative;
  line-height: var(--lh);
  padding-left: calc(var(--dot-size) + 14px);
  margin: 0 0 14px;
  color: #111827;
  font-size: var(--text-base);
}

.smart-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1em * var(--lh) - var(--dot-size)) / 2);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-full);
  background: var(--dot);
}

.smart-bullets strong { font-weight: 700; letter-spacing: 0.01em; }

.smart-bullets .arrow {
  display: inline-block;
  margin: 0 0.45em;
  color: #6b7280;
  transform: translateY(-0.02em);
}


/* ── 6. BULLET-YELLOW — Odrážky žluté tečky (jednodušší varianta) ───────── */

.bullet-yellow {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bullet-yellow li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  line-height: 1.45;
  margin: 0 0 0.45em;
}

.bullet-yellow li:last-child { margin-bottom: 0; }

.bullet-yellow li::before {
  content: "";
  flex: 0 0 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 0.35em;
}


/* ── 7. OL.PK-STEPS-GUIDE — Číselný seznam ──────────────────────────────── */

ol.pk-steps-guide {
  counter-reset: i;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 16px 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-text);
}

ol.pk-steps-guide > li {
  counter-increment: i;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  margin: 0 0 10px;
  line-height: var(--leading-relaxed);
  list-style: none !important;
}

ol.pk-steps-guide > li::marker { content: ""; }

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

ol.pk-steps-guide > li:nth-child(n+10)::before {
  padding-left: 1px;
  box-sizing: border-box;
}


/* ── 8. ODRAZKY — Legacy odrážky (styl01, zpětná kompatibilita) ─────────── */

.odrazky {
  list-style: none;
  padding-left: 0;
}

.odrazky li {
  background-color: #f8f8f8;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px 15px 12px 40px;
  font-size: 0.9em;
  position: relative;
  line-height: 1.5;
}

.odrazky li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  display: block;
  width: 6px;
  height: 10px;
  border: solid #3498db;
  border-width: 0 3px 3px 0;
}

.odrazky li:hover {
  background-color: #f0f0f0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}


/* ==========================================================================
   §8 SOCIÁLNÍ SÍTĚ & PRODUKTY
   ==========================================================================
   1. .pk-social       — bloky sociálních sítí (6 vedle sebe)
   2. .social-container — legacy bloky sledujících
   3. .reels-section   — grid pro Instagram Reels
   4. .video-card      — karta videa (legacy socky.css verze)
   5. .hero-metodika   — rozbalovací metodologický blok
   6. Produktové úpravy (dlaždice, skrývání cen)
   ========================================================================== */


/* ── 1. PK-SOCIAL — Bloky sociálních sítí (6 karet vedle sebe) ──────────── */
/* v1.12: vizuál sjednocen s .pk-catalog, .effects a .pk-usp--3 — bílá karta,
   jemný žlutý rámeček z loga, zaoblení, měkký stín. Badge s logem už
   nepřesahuje přes horní hranu karty (zrušen margin-top: -30px), je to
   decentní dlaždice 40px se světle šedým podkladem.

   v1.13 POZOR — karta MUSÍ zůstat <article>, ne <a>. Editor Shoptetu
   (TinyMCE) neumí anchor obalující blokové elementy: rozseká ho na kusy,
   z jedné karty vzniknou samostatné buňky mřížky a layout se rozpadne.
   Klikatelnost celé plochy proto řeší roztažený pseudo-element ::after
   na .pk-social__link — anchor obsahuje jen inline obsah a editor ho
   nechá být.

   Starší HTML s .pk-social__btn funguje dál, styly tlačítka jsou níž. */

.pk-social {
  width: 100%;
  max-width: var(--max-width-content);   /* 1000px — shodně s .pk-catalog */
  margin: 24px auto 32px;
}

.pk-social__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Karta */
.pk-social__card {
  position: relative;                    /* kotva pro roztažený odkaz */
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 18px 14px 16px;
  text-align: center;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.pk-social__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pk-social__card:focus-within {
  outline: 3px solid rgba(17, 17, 17, 0.22);
  outline-offset: 3px;
}

/* Badge s logem — dlaždice se šedým podkladem, bez přesahu přes hranu */
.pk-social__badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-bg-soft);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
}

.pk-social__badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Název sítě — min-height drží čísla ve všech kartách na stejné lince */
.pk-social__name {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  padding: 0;
}

/* Číslo */
.pk-social__value {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}

/* Popisek pod číslem */
.pk-social__meta {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--color-text-faint);
}

/* Decentní výzva k akci — odkaz s jen inline obsahem (viz poznámka výše).
   margin-top: auto ho přilepí ke spodní hraně, aby seděl ve všech kartách
   na stejné lince i při různě dlouhých názvech. */
.pk-social__link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
}

.pk-social__link:hover,
.pk-social__link:focus { color: var(--color-text); text-decoration: none; }

/* Roztažení odkazu přes celou kartu — klikací je celá plocha */
.pk-social__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}

.pk-social__link-ico {
  font-size: 13px;
  line-height: 1;
  transition: transform var(--transition-base);
}

.pk-social__card:hover .pk-social__link-ico { transform: translateX(3px); }

/* Podtržení v barvě loga najede na hover celé karty */
.pk-social__link-label {
  background-image: linear-gradient(var(--color-accent-logo), var(--color-accent-logo));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size var(--transition-normal);
}

.pk-social__card:hover .pk-social__link-label { background-size: 100% 2px; }

/* ── Legacy tlačítko — ponecháno pro starší HTML ──────────────────────── */
.pk-social__btn {
  margin-top: auto;
  margin-bottom: 0;
  background: var(--color-accent);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  border: 0;
  box-shadow: var(--shadow-btn);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.pk-social__btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.pk-social__btn:active { transform: translateY(0);    box-shadow: var(--shadow-btn); }
.pk-social__btn:focus-visible { outline: 3px solid rgba(17, 17, 17, 0.22); outline-offset: 3px; }
.pk-social__btn-ico { font-size: 14px; line-height: 1; }

/* 3 vedle sebe */
@media (max-width: 1099px) { .pk-social__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 2 vedle sebe */
@media (max-width: 599px) {
  .pk-social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-social__card { padding: 16px 12px 14px; }
  .pk-social__btn { width: 100%; white-space: normal; }
}


/* ── 2. SOCIAL-CONTAINER — Legacy bloky sledujících ─────────────────────── */

.social-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 40px 20px;
  font-family: var(--font-body);
}

.social-box {
  position: relative;
  width: 180px;
  background-color: #f8fdff;
  border: 2px dashed #5B9EA6;
  border-radius: 8px;
  padding: 35px 15px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  border-style: solid;
}

.social-icon {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.social-icon img { width: 28px; height: 28px; object-fit: contain; }

.social-label {
  display: block;
  font-size: 13px;
  color: #5B9EA6;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.social-count { font-size: 32px; font-weight: bold; color: var(--color-text); line-height: 1.2; }
.social-subtext { font-size: 13px; color: #888; margin: 5px 0 0; }

.social-button {
  display: inline-block;
  margin-top: 15px;
  background-color: var(--color-accent);
  color: #000;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(241, 222, 0, 0.3);
}

.social-button:hover {
  transform: scale(1.05);
  background-color: #ffd147;
  box-shadow: 0 6px 15px rgba(241, 222, 0, 0.5);
}

.social-content { display: flex; flex-direction: column; align-items: center; }


/* ── 3. REELS-SECTION — Grid pro Instagram Reels ────────────────────────── */

.reels-section {
  padding: 40px 20px;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  font-family: sans-serif;
}

.reels-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  color: var(--color-text-muted);
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.reel-card {
  position: relative;
  padding-top: 177.78%; /* 9:16 */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background: #000;
}

.reel-card:hover { transform: translateY(-5px); }

.reel-card iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

@media (max-width: 600px) {
  .reels-grid { grid-template-columns: 1fr; padding: 0 20px; }
}


/* ── 4. VIDEO-CARD — Karta videa (legacy varianta ze socky.css) ─────────── */
/* Pozn.: nekoliduje se .sp-videoCard (§4) — jiné třídy, jiný vizuál. */

.video-card {
  background-color: #f8fdff;
  border: 2px dashed #5B9EA6;
  border-radius: 20px;
  padding: 30px;
  margin: 20px auto;
  max-width: 800px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.video-card:hover { transform: translateY(-5px); }

.video-card-icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.video-card-player {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 16 / 9;
}

.video-card-player iframe { width: 100%; height: 100%; border: none; display: block; }

.video-card-title { font-size: 20px; font-weight: bold; color: var(--color-text); margin: 0 0 10px; line-height: 1.3; }

.video-card-description {
  font-size: 15px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card:hover .video-card-description { -webkit-line-clamp: unset; }

.video-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #000;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(255, 209, 71, 0.4); }


/* ── 5. HERO-METODIKA — Rozbalovací metodologický blok ──────────────────── */

.hero-metodika-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}

.hero-metodika-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 760px;
}

.hero-metodika-box summary { list-style: none; }
.hero-metodika-box summary::-webkit-details-marker { display: none; }

.hero-metodika-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  padding: 6px 16px;
  border: 2px solid #d9dee7;
  border-radius: var(--radius-full);
  background: #f5f6f8;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(45, 59, 88, 0.08);
  margin: 0 auto;
}

.hero-metodika-button:hover {
  background: #eef1f5;
  border-color: #cfd6e2;
  transform: translateY(-1px);
}

.hero-metodika-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #4c556d;
}

.hero-metodika-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #dfe3ea;
}

.hero-metodika-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-metodika-content {
  width: 100%;
  max-width: 760px;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid #d9dee7;
  border-radius: 18px;
  background: #fafbfc;
  color: #4f596f;
  box-shadow: 0 2px 8px rgba(45, 59, 88, 0.05);
  animation: heroMetodikaFadeDown var(--transition-slow) ease;
}

.hero-metodika-content p  { margin: 0 0 14px; font-size: 15px; line-height: var(--leading-relaxed); }
.hero-metodika-content ul { margin: 0 0 14px 20px; padding: 0; }
.hero-metodika-content li { margin-bottom: 8px; line-height: var(--leading-relaxed); }

@keyframes heroMetodikaFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero-metodika-wrapper { margin-top: 24px; }
  .hero-metodika-box { max-width: 100%; }
  .hero-metodika-button { gap: 10px; min-height: 36px; padding: 6px 14px; }
  .hero-metodika-title { font-size: 13px; }
  .hero-metodika-icon { width: 20px; height: 20px; }
  .hero-metodika-icon::after { width: 7px; height: 7px; }
  .hero-metodika-content { padding: 16px; }
}


/* ── 6. PRODUKTOVÉ ÚPRAVY — Dlaždice produktů ───────────────────────────── */

/* Skrytí cen a tlačítek v kategorii SEO služby a na úvodní stránce */
.id-695 .product .prices,
.id-695 .product .p-tools,
.type-index .product .prices,
.type-index .product .p-tools {
  display: none !important;
}

/* Nadpisy produktů — tučné, větší, 3 řádky */
.products .product .name {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  height: 4.2em !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.products .product .name span {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* Skrytí nákupních prvků pro vybraná ID služeb */
.p-detail:has(input[value="285"]), .p-detail:has(input[value="252"]),
.p-detail:has(input[value="255"]), .p-detail:has(input[value="246"]),
.p-detail:has(input[value="270"]), .p-detail:has(input[value="273"]),
.p-detail:has(input[value="276"]), .p-detail:has(input[value="282"]),
.p-detail:has(input[value="279"]), .p-detail:has(input[value="66"]),
.p-detail:has(input[value="288"]) {
  & .p-variants-block,
  & .p-basic-info-block,
  & .p-final-price-wrapper,
  & .p-add-to-cart-wrapper,
  & .p-param-block { display: none !important; }
  & .p-short-description { border-bottom: none !important; margin-bottom: 0 !important; }
}


/* ==========================================================================
   §9 HOMEPAGE — Komponenty s prefixem hp-
   ==========================================================================
   Prefix "hp-" zaručuje, že nedochází ke kolizi s komponentami §1–§8.

   1. .hp-faq      — wrapper sekce (nadpis + perex)
   2. .hp-accord   — accordion (bez nativního <details> — otevírání řeší JS
                     přidáním třídy .is-open; lze mít otevřeno více naráz)
   3. .hp-trust    — trust / hero sekce (černé pozadí, žlutý akcent)

   Pozn. ke konsolidaci: původní fallbacky ve var(--x, fallback) odstraněny —
   tokeny jsou definovány výše v tomto souboru, fallback se nikdy nepoužil.
   ========================================================================== */


/* ── 1. HP-FAQ — Wrapper sekce ──────────────────────────────────────────── */

.hp-faq {
  max-width: var(--max-width-text);
  margin: var(--space-12) auto;
  padding: 0 var(--space-4);
}

.hp-faq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.hp-faq__hl {
  background: var(--color-accent-logo); /* žlutá z loga, sjednoceno se .sp-hl a .pk-hl */
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hp-faq__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-8);
}


/* ── 2. HP-ACCORD — Accordion ───────────────────────────────────────────── */

.hp-accord {
  width: 100%;
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
}

/* Karta — světle šedé pozadí dle reference */
.hp-accord__item {
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-normal),
              background var(--transition-normal);
}

/* kdyby editor přesto nechal <details> */
.hp-accord__item > summary { list-style: none; }
.hp-accord__item > summary::-webkit-details-marker { display: none; }

/* Nadpis otázky = klikací řádek. Toggle +/− je VLEVO. */
.hp-accord__question {
  position: relative;
  margin: 0;
  padding: 22px 24px 22px 70px;   /* místo vlevo pro toggle */
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Kulatý toggle vlevo */
.hp-accord__question::before {
  content: "+";
  position: absolute;
  top: 22px;
  left: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  transition: background var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal);
}

/* Tělo odpovědi (zavřené) */
.hp-accord__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Žlutý levý proužek u odpovědi — wrapper .hp-accord__answer */
.hp-accord__answer {
  margin: 0 24px 22px 70px;
  border-left: 4px solid var(--color-accent);
  padding-left: 18px;
}

.hp-accord__answer p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.hp-accord__answer p:last-child { margin-bottom: 0; }

/* ── Otevřený stav ── */
.hp-accord__item.is-open,
.hp-accord__item[open] {
  border-color: var(--color-border);
}

.hp-accord__item.is-open .hp-accord__question::before,
.hp-accord__item[open] .hp-accord__question::before {
  content: "−";
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.hp-accord__item.is-open .hp-accord__body,
.hp-accord__item[open] .hp-accord__body {
  max-height: 700px;
}

/* Hover na zavřenou kartu */
.hp-accord__item:not(.is-open):not([open]) .hp-accord__question:hover::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Focus pro klávesnici */
.hp-accord__question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Mobil */
@media (max-width: 560px) {
  .hp-faq__title { font-size: var(--text-lg); }

  .hp-accord__question {
    padding: 18px 16px 18px 58px;
    font-size: var(--text-base);
  }

  .hp-accord__question::before {
    top: 16px;
    left: 14px;
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .hp-accord__answer {
    margin: 0 16px 18px 58px;
    padding-left: 14px;
  }

  .hp-accord__answer p { font-size: 16px; }
}


/* ── 3. HP-TRUST — Trust / hero sekce (positioning + hlavní výhody) ─────── */
/* Reusable sekce na konec klíčových stránek. Tmavé pozadí, žlutý akcent,
   logo nahoře, 4 výhody s ikonami, 2 CTA tlačítka dole.

   v1.14 — vizuální dotažení:
   • výhody vpravo jsou karty s vlasovým rámečkem, ne volně plovoucí odstavce
   • ikona = dlaždice 38px (dřív kroužek 50px, opticky moc těžký)
   • mezi sloupci vlasová linka, pod logem oddělovač
   • ghost tlačítko je neutrální bílé — dvě žlutá tlačítka vedle sebe
     si konkurovala a mazala hierarchii
   • titulky výhod NEJSOU verzálky v HTML; velká písmena řeší CSS,
     aby šel text kdykoli přepnout zpět

   Pozn.: --hp-trust-acc = žlutá z loga (--color-accent-logo) — na tmavém
   pozadí má lepší kontrast než --color-accent.
   Velikosti písma mají !important kvůli #content-wrapper (globálně 17px). */

.hp-trust {
  --hp-trust-acc: var(--color-accent-logo);
  --hp-trust-line: rgba(255, 255, 255, 0.12);
  --hp-trust-muted: rgba(255, 255, 255, 0.70);
  --hp-trust-card: rgba(255, 255, 255, 0.035);

  max-width: var(--max-width-wide);
  margin: var(--space-12) auto;
  background: #0A0A0B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 44px;
  color: #ffffff;
  font-family: var(--font-body);
  box-sizing: border-box;
}

/* Logo — oddělené vlasovou linkou od obsahu */
.hp-trust__logo {
  display: flex;
  justify-content: center;
  padding-bottom: 28px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--hp-trust-line);
}

.hp-trust__logo img {
  height: 44px;
  width: auto;
}

/* Mřížka — vlasová linka mezi sloupci dělá gap čitelnějším */
.hp-trust__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: start;
}

/* ── Levý blok ── */
.hp-trust__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(235, 225, 74, 0.12);
  color: var(--hp-trust-acc);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
  text-decoration: none;
}

.hp-trust__eyebrow a,
.hp-trust__eyebrow a:hover,
.hp-trust__eyebrow a:visited {
  color: inherit;
  text-decoration: none;
}

.hp-trust__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px !important;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 18px !important;
  text-wrap: balance;
}

.hp-trust__title em {
  font-style: normal;
  color: var(--hp-trust-acc);
}

.hp-trust__lead {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--hp-trust-muted);
  margin: 0 !important;
}

.hp-trust__lead strong {
  color: #ffffff;
  font-weight: 600;
}

.hp-trust__lead + .hp-trust__lead {
  margin-top: 14px !important;
}

/* Mini-seznam pod perexem (odrážky se žlutou fajfkou) */
.hp-trust__points {
  list-style: none;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-trust__points li {
  position: relative;
  padding-left: 30px;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--hp-trust-muted);
  list-style: none;
}

.hp-trust__points li::marker { content: ""; }

.hp-trust__points li strong { color: #ffffff; font-weight: 600; }

.hp-trust__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hp-trust-acc);
}

/* fajfka uvnitř žlutého kolečka */
.hp-trust__points li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

/* ── Pravý sloupec — výhody jako karty ── */
.hp-trust__benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 44px;
  border-left: 1px solid var(--hp-trust-line);
}

.hp-trust__benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--hp-trust-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  transition: border-color var(--transition-normal),
              background-color var(--transition-normal);
}

.hp-trust__benefit:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(235, 225, 74, 0.35);
}

/* Ikona — dlaždice místo kroužku, decentnější a lehčí */
.hp-trust__ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-trust-acc);
  font-size: 19px;
}

.hp-trust__ico img { width: 20px; height: 20px; }

.hp-trust__ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--hp-trust-acc);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Titulek výhody — verzálky řeší CSS, v HTML zůstává normální text */
.hp-trust__btitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35 !important;
  color: #ffffff;
  margin: 2px 0 6px !important;
  text-wrap: balance;
}

.hp-trust__bdesc {
  font-size: 14px !important;
  color: var(--hp-trust-muted);
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ── CTA tlačítka dole ── */
.hp-trust__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
  padding-top: 32px;
  border-top: 1px solid var(--hp-trust-line);
}

.hp-trust__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  text-decoration: none !important;
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.hp-trust__btn--primary {
  background: var(--hp-trust-acc);
  color: #111111 !important;
  border: 1.5px solid var(--hp-trust-acc);
}

.hp-trust__btn--primary:hover { transform: translateY(-1px); }

/* Ghost je neutrální — hlavní akce má zůstat jen jedna */
.hp-trust__btn--ghost {
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}

.hp-trust__btn--ghost:hover {
  border-color: var(--hp-trust-acc);
  color: var(--hp-trust-acc) !important;
  transform: translateY(-1px);
}

/* ── Mobil ── */
@media (max-width: 900px) {
  .hp-trust__grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-trust__benefits { padding-left: 0; border-left: 0; }
}

@media (max-width: 768px) {
  .hp-trust { padding: 28px 18px; border-radius: 18px; }
  .hp-trust__logo { padding-bottom: 22px; margin-bottom: 26px; }
  .hp-trust__title { font-size: 24px !important; }
  .hp-trust__cta { flex-direction: column; }
  .hp-trust__btn { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10 REFERENCE — Karta klienta s KPI dlaždicemi a grafem
   ═══════════════════════════════════════════════════════════════════════════

   Komponenta .pk-ref — jedna karta na klienta: hlavička s názvem a doménou,
   čtyři KPI dlaždice a SVG graf vývoje organické návštěvnosti.

   POZOR NA NÁZEV: komponenta vznikla pod prefixem .pk-case, ten je ale
   v §5 obsazený případovými studiemi (.pk-cases__grid > .pk-case). Proto
   .pk-ref. Pokud někde narazíš na starší HTML s .pk-case__kpi apod.,
   je potřeba třídy přejmenovat, jinak se komponenty perou.

   Graf je statické SVG generované z dat Marketing Mineru (skript
   gen_case_chart.py). Hover tooltip je řešený jen přes CSS :hover nad
   neviditelnými sloupci .pk-hit — žádný JavaScript, protože editor
   Shoptetu <script> odstraňuje.

   Pozn.: velikosti písma mají !important kvůli #content-wrapper (17px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PK-REF — Karta ──────────────────────────────────────────────────── */

.pk-ref {
  --pk-ref-line: var(--color-border);
  --pk-ref-muted: var(--color-text-muted);
  --pk-ref-faint: var(--color-text-faint);

  max-width: var(--max-width-content);   /* 1000px */
  margin: 24px auto 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px 20px;
  box-sizing: border-box;
  font-family: var(--font-display);
  color: var(--color-text);
}

.pk-ref * { box-sizing: border-box; }

/* ── 2. Hlavička ────────────────────────────────────────────────────────── */

.pk-ref__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--pk-ref-line);
}

.pk-ref__client { min-width: 0; }

.pk-ref__name {
  margin: 0 0 3px !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pk-ref__url {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4;
  color: var(--pk-ref-faint);
}

.pk-ref__url a {
  color: var(--pk-ref-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--pk-ref-line);
}

.pk-ref__url a:hover { color: var(--color-text); }

/* Štítek se zdrojem dat — shodný vzor s .pk-catalog__tag */
.pk-ref__tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── 3. KPI dlaždice ────────────────────────────────────────────────────── */

.pk-ref__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.pk-ref__kpi {
  background: var(--color-bg-soft);
  border: 1px solid #F0F1F4;
  border-radius: 11px;
  padding: 14px 15px;
}

.pk-ref__kpi-label {
  margin: 0 0 6px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--pk-ref-faint);
}

.pk-ref__kpi-value {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

.pk-ref__kpi-note {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35;
  color: var(--pk-ref-muted);
}

/* Zelený zvýrazněný popisek pro růstové hodnoty */
.pk-ref__kpi-note--up { color: #1B8A4B; font-weight: 600; }

/* ── 4. Graf ────────────────────────────────────────────────────────────── */

.pk-ref__chart-title {
  margin: 0 0 2px !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.pk-ref__chart-sub {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--pk-ref-faint);
}

/* Wrapper grafu — na úzkých displejích umožňuje vodorovné posouvání.
   Bez něj by se graf o poměru 960:250 zmenšil na ~90px výšky
   a popisky os by byly nečitelné. */
.pk-ref__chart-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pk-ref__chart-wrap::-webkit-scrollbar { height: 6px; }
.pk-ref__chart-wrap::-webkit-scrollbar-track { background: transparent; }
.pk-ref__chart-wrap::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* aspect-ratio je zásadní: bez něj starší WebKit dosadí SVG bez atributu
   height výchozích 150px a pod grafem zůstane bílé místo. */
.pk-ref__chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 250;
}

/* Interaktivita: neviditelný sloupec nad každým měsícem odkrývá tooltip.
   Řešeno čistě přes :hover, protože Shoptet <script> odstraňuje. */
.pk-ref__chart .pk-hit {
  fill: transparent;
  cursor: crosshair;
}

.pk-ref__chart .pk-tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.pk-ref__chart .pk-pt:hover .pk-tip { opacity: 1; }

/* Trvalý štítek poslední hodnoty se schová, jakmile je kurzor nad grafem,
   aby se nepřekrýval s tooltipem. */
.pk-ref__chart .pk-last { transition: opacity var(--transition-base); }
.pk-ref__chart:hover .pk-last { opacity: 0; }

.pk-ref__chart .pk-guide {
  stroke: var(--color-text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.25;
}

/* ── 5. Patička ─────────────────────────────────────────────────────────── */

.pk-ref__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pk-ref-line);
}

.pk-ref__source {
  margin: 0 !important;
  flex: 1 1 460px;
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--pk-ref-faint);
}

.pk-ref__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.pk-ref__cta span { transition: transform var(--transition-base); }
.pk-ref__cta:hover span { transform: translateX(3px); }

/* ── 6. Responzivita ────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .pk-ref { padding: 20px 16px 16px; }
  .pk-ref__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-ref__foot { flex-direction: column; gap: 14px; }

  /* KRITICKÉ: v column směru je flex-basis výška, ne šířka.
     Bez tohoto resetu si odstavec vyžádá 460px na výšku a pod
     patičkou vznikne prázdné bílé místo. */
  .pk-ref__source { flex: 0 0 auto; width: 100%; }
  .pk-ref__cta { flex: 0 0 auto; }
}

/* Pod 700px se graf přestává zmenšovat a začíná se posouvat do stran.
   680px je minimum, při kterém zůstávají popisky os čitelné. */
@media (max-width: 700px) {
  .pk-ref__chart {
    width: 680px;
    min-width: 680px;
  }
}

@media (max-width: 420px) {
  .pk-ref__kpis { grid-template-columns: 1fr; }
  .pk-ref__name { font-size: 16px !important; }
  .pk-ref__kpi-value { font-size: 22px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11 SROVNÁNÍ — Sloupcový graf porovnání s konkurencí
   ═══════════════════════════════════════════════════════════════════════════

   Komponenta .pk-bars — karta se sloupcovým grafem. Používá se pro
   srovnávací data (např. viditelnost agentur v AI nástrojích).

   Zásada: konkurenční sloupce jsou šedé, vlastní sloupec žlutý s tmavým
   obrysem. Barevná paleta by odváděla pozornost od toho podstatného,
   tedy od odstupu. Barvy jsou zapsané přímo v SVG, protože atribut fill
   se v inline SVG neřídí kaskádou stejně spolehlivě jako CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

.pk-bars {
  max-width: var(--max-width-content);
  margin: 24px auto 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px 20px;
  box-sizing: border-box;
  font-family: var(--font-display);
  color: var(--color-text);
}

.pk-bars * { box-sizing: border-box; }

.pk-bars__title {
  margin: 0 0 4px !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pk-bars__sub {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Wrapper s vodorovným posouváním — stejný princip jako .pk-ref__chart-wrap */
.pk-bars__wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pk-bars__wrap::-webkit-scrollbar { height: 6px; }
.pk-bars__wrap::-webkit-scrollbar-track { background: transparent; }
.pk-bars__wrap::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* aspect-ratio brání prázdnému místu pod grafem ve starších WebKitech */
.pk-bars__chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 470;
}

.pk-bars__foot {
  margin: 12px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--color-text-faint);
}

@media (max-width: 760px) {
  .pk-bars { padding: 20px 16px 16px; }
}

@media (max-width: 700px) {
  .pk-bars__chart { width: 760px; min-width: 760px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12 POZICE — Dashboard rozložení pozic ve vyhledávání
   ═══════════════════════════════════════════════════════════════════════════

   Komponenta .pk-pos — karta s KPI dlaždicemi, přehledovým pruhem rozložení
   a sloupcovým grafem počtu frází na jednotlivých pozicích.

   POZOR NA NÁZEV: prefix je .pk-pos, ne .pk-rank — ta třída je obsazená
   v §5 OBSAHOVÉ BLOKY.

   Barevná škála má sémantiku: čím lepší pozice, tím tmavší a sytější barva.
   1. pozice černá, 2.–3. žlutá z loga, 4.–10. světlá žlutá, zbytek šedá.
   Barvy jsou zapsané přímo v SVG (fill se v inline SVG neřídí kaskádou
   stejně spolehlivě jako CSS).

   Hover tooltipy sdílejí třídy .pk-pt, .pk-hit a .pk-tip s komponentou
   .pk-ref, ale selektory jsou zde vlastní, aby byly komponenty nezávislé.

   Pozn.: velikosti písma mají !important kvůli #content-wrapper (17px).
   ═══════════════════════════════════════════════════════════════════════════ */

.pk-pos {
  max-width: var(--max-width-content);
  margin: 24px auto 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px 20px;
  box-sizing: border-box;
  font-family: var(--font-display);
  color: var(--color-text);
}

.pk-pos * { box-sizing: border-box; }

/* ── Hlavička ───────────────────────────────────────────────────────────── */

.pk-pos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.pk-pos__title {
  margin: 0 0 3px !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pk-pos__sub {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4;
  color: var(--color-text-faint);
}

.pk-pos__tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── KPI dlaždice ───────────────────────────────────────────────────────── */

.pk-pos__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.pk-pos__kpi {
  background: var(--color-bg-soft);
  border: 1px solid #F0F1F4;
  border-radius: 11px;
  padding: 14px 15px;
}

.pk-pos__kpi-label {
  margin: 0 0 6px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-text-faint);
}

.pk-pos__kpi-value {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

.pk-pos__kpi-note {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.pk-pos__kpi-note--up { color: #1B8A4B; font-weight: 600; }

/* ── Nadpisy grafů ──────────────────────────────────────────────────────── */

.pk-pos__chart-title {
  margin: 18px 0 2px !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.pk-pos__chart-sub {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--color-text-faint);
}

/* ── Grafy ──────────────────────────────────────────────────────────────── */

.pk-pos__wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pk-pos__wrap::-webkit-scrollbar { height: 6px; }
.pk-pos__wrap::-webkit-scrollbar-track { background: transparent; }
.pk-pos__wrap::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* aspect-ratio brání prázdnému místu pod grafem ve starších WebKitech */
.pk-pos__stack {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 118;
}

.pk-pos__chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 350;
}

/* Hover tooltip — čistě CSS, editor Shoptetu <script> odstraňuje */
.pk-pos__chart .pk-hit { fill: transparent; cursor: crosshair; }

.pk-pos__chart .pk-tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.pk-pos__chart .pk-pt:hover .pk-tip { opacity: 1; }

/* ── Legenda ────────────────────────────────────────────────────────────── */

.pk-pos__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}

.pk-pos__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.pk-pos__key i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 0 0 11px;
}


/* ── 7. Rozbalovací seznamy frází ───────────────────────────────────────── */
/* Použité <details>, ne skryté radio inputy: editor Shoptetu formulářové
   prvky odstraňuje, <details> nechává být a nepotřebuje JavaScript. */

.pk-pos__group {
  border: 1px solid var(--color-border);
  border-radius: 11px;
  margin-bottom: 8px;
  background: var(--color-bg);
  overflow: hidden;
}

.pk-pos__group[open] { border-color: var(--color-accent-logo); }

.pk-pos__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  transition: background-color var(--transition-base);
}

.pk-pos__summary:hover { background: var(--color-bg-soft); }

/* Skrytí výchozího trojúhelníku ve WebKitu i jinde */
.pk-pos__summary::-webkit-details-marker { display: none; }
.pk-pos__summary::marker { content: ""; }

/* Vlastní šipka vpravo, otočí se po rozbalení */
.pk-pos__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid var(--color-text-faint);
  border-bottom: 2px solid var(--color-text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-base);
  flex: 0 0 8px;
}

.pk-pos__group[open] .pk-pos__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pk-pos__summary-label { flex: 1 1 auto; min-width: 0; }

.pk-pos__summary-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* Seznam frází — vícesloupcový, aby dlouhé skupiny nenatáhly stránku */
.pk-pos__items {
  list-style: none;
  margin: 0 !important;
  padding: 4px 15px 14px !important;
  columns: 3;
  column-gap: 22px;
}

.pk-pos__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  break-inside: avoid;
  padding: 4px 0;
  border-bottom: 1px solid #F4F5F7;
  font-size: 12px !important;
  line-height: 1.4;
  list-style: none;
}

.pk-pos__item::marker { content: ""; }

.pk-pos__kw {
  color: var(--color-text-muted);
  min-width: 0;
  overflow-wrap: break-word;
}

.pk-pos__badge {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .pk-pos__items { columns: 2; }
}

@media (max-width: 480px) {
  .pk-pos__items { columns: 1; }
}

/* ── Patička ────────────────────────────────────────────────────────────── */

.pk-pos__foot {
  margin: 14px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--color-text-faint);
}

/* ── Responzivita ───────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .pk-pos { padding: 20px 16px 16px; }
  .pk-pos__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .pk-pos__chart { width: 760px; min-width: 760px; }
  .pk-pos__stack { width: 620px; min-width: 620px; }
}

@media (max-width: 420px) {
  .pk-pos__kpis { grid-template-columns: 1fr; }
  .pk-pos__title { font-size: 16px !important; }
  .pk-pos__kpi-value { font-size: 22px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §13 PŘÍPADOVÉ STUDIE — Komponenta .pk-cs
   ═══════════════════════════════════════════════════════════════════════════

   Stavební prvky pro případové studie:
     .pk-cs__hero     tmavé shrnutí výsledku hned pod úvodem
     .pk-cs__goals    graf domluvených cílů proti dosaženému výsledku
     .pk-cs__steps    číslovaný postup prací
     .pk-cs__fig      rámovaný screenshot s popiskem
     .pk-cs__note     zvýrazněný blok pro upřímné / kontextové pasáže

   Pozn.: velikosti písma mají !important kvůli #content-wrapper (17px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Shrnutí výsledku ────────────────────────────────────────────────── */

.pk-cs__hero {
  max-width: var(--max-width-content);
  margin: 28px auto 32px;
  background: #0A0A0B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 30px 26px;
  box-sizing: border-box;
  color: #ffffff;
  font-family: var(--font-display);
}

.pk-cs__hero * { box-sizing: border-box; }

.pk-cs__eyebrow {
  display: inline-flex;
  align-items: center;
  background: rgba(235, 225, 74, 0.12);
  color: var(--color-accent-logo);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  margin: 0 0 16px !important;
}

.pk-cs__headline {
  margin: 0 0 6px !important;
  font-size: 46px !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-accent-logo);
}

.pk-cs__headline-sub {
  margin: 0 0 22px !important;
  font-size: 15px !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
}

.pk-cs__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pk-cs__kpi-label {
  margin: 0 0 5px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
}

.pk-cs__kpi-value {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
}

.pk-cs__kpi-note {
  margin: 3px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

/* ── 2. Graf cílů ───────────────────────────────────────────────────────── */

.pk-cs__card {
  max-width: var(--max-width-content);
  margin: 24px auto 28px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px 18px;
  box-sizing: border-box;
  font-family: var(--font-display);
}

.pk-cs__card-title {
  margin: 0 0 3px !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pk-cs__card-sub {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.pk-cs__wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pk-cs__wrap::-webkit-scrollbar { height: 6px; }
.pk-cs__wrap::-webkit-scrollbar-track { background: transparent; }
.pk-cs__wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.pk-cs__goals {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 230;
}

/* ── 3. Číslovaný postup ────────────────────────────────────────────────── */

.pk-cs__steps {
  list-style: none;
  max-width: var(--max-width-content);
  margin: 24px auto 28px !important;
  padding: 0 !important;
  counter-reset: pkcs;
  display: grid;
  gap: 10px;
}

.pk-cs__step {
  counter-increment: pkcs;
  position: relative;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 15px 18px 15px 62px;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.pk-cs__step::marker { content: ""; }

.pk-cs__step:hover {
  border-color: var(--color-accent-logo);
  box-shadow: var(--shadow-soft);
}

.pk-cs__step::before {
  content: counter(pkcs);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-cs__step-title {
  margin: 0 0 4px !important;
  font-family: var(--font-display);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.pk-cs__step-text {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── 4. Rámovaný obrázek s popiskem ─────────────────────────────────────── */

.pk-cs__fig {
  max-width: var(--max-width-content);
  margin: 24px auto 28px !important;
  padding: 0 !important;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.pk-cs__fig img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-bottom: 1px solid var(--color-border);
}

.pk-cs__figcap {
  margin: 0 !important;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--color-text-faint);
  text-align: left;
}

/* ── 5. Zvýrazněný blok ─────────────────────────────────────────────────── */

.pk-cs__note {
  max-width: var(--max-width-content);
  margin: 24px auto 28px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent-logo);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  box-sizing: border-box;
}

.pk-cs__note-title {
  margin: 0 0 6px !important;
  font-family: var(--font-display);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.pk-cs__note p {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pk-cs__note p:last-child { margin-bottom: 0 !important; }

/* ── 6. Responzivita ────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .pk-cs__hero { padding: 22px 18px 20px; border-radius: 16px; }
  .pk-cs__headline { font-size: 36px !important; }
  .pk-cs__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-cs__card { padding: 18px 16px 14px; }
}

@media (max-width: 700px) {
  .pk-cs__goals { width: 680px; min-width: 680px; }
}

@media (max-width: 420px) {
  .pk-cs__headline { font-size: 30px !important; }
  .pk-cs__kpis { grid-template-columns: 1fr; }
}


/* ── KONEC SOUBORU styly.css ─────────────────────────────────────────────── */