/* ==========================================================================
   styly-v1.50.css — KONSOLIDOVANÝ CSS SOUBOR
   seoprakticky.cz
   ==========================================================================
   VERZE: v1.50 (2026-10-24)
   Changelog se v souboru nevede, aby nenafukoval CSS.
   ==========================================================================
   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
   §14 AUTOR            .pk-author — medailonek autora článku
   §15 KONTAKTY         .pk-info — karty s kontaktními a fakturačními údaji
   §16 KÓD & VÝUKA      .pk-code, .pk-rules, .pk-match, .pk-toc, .pk-sources,
                        .pk-quote, .pk-mono, .pk-timeline

   ── 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
   Ukázka kódu / výukový blok v článku       → §16

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


/* ── Kontaktní tabulka ──────────────────────────────────────────────────── */
/* Přepisuje globální <table> výše: bez stínu, bez Arialu.
   Používá se na stránce Kontakty pro adresu a fakturační údaje. */

.contact-table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 32px;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: none;                     /* přebíjí globální stín */
  border: 1px solid var(--color-border);
  font-family: var(--font-display);     /* přebíjí globální Arial */
}

.contact-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px !important;
  line-height: 1.5;
  vertical-align: top;
}

.contact-table tr:last-child td { border-bottom: 0; }

/* Levý sloupec — popisky */
.contact-table td:first-child {
  width: 42%;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Pravý sloupec — hodnoty */
.contact-table td:last-child {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;   /* čísla lícují pod sebou */
}

/* Zebra ponechána, jen jemnější než globální */
.contact-table tbody tr:nth-child(even) { background: var(--color-bg-soft); }
.contact-table tbody tr:nth-child(odd)  { background: var(--color-bg); }

.contact-table a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .contact-table td { padding: 11px 14px; font-size: 14px !important; }
  .contact-table td:first-child { width: 46%; }
}



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 ───────────────────────────────────── */
/* v1.23: karty se otevírají KLIKNUTÍM do modálního okna, ne na hover.
   Hover rozbaloval kartu přímo v mřížce, takže se při scrollování obsah
   pod kurzorem sám roztahoval a mřížka poskakovala.

   Řešeno přes <details>, bez JavaScriptu:
     <details class="review-card" name="recenze">   ← name = otevřená jen jedna
       <summary class="review-card__summary">        ← karta v mřížce (úryvek)
       <div class="review-card__modal">              ← modál s celým textem

   Tmavé pozadí modálu je summary::before a křížek summary::after — obojí
   je součástí <summary>, takže kliknutí na ně modál zavře. Kliknutí do
   samotného modálu ho nezavírá, protože modál pod <summary> nepatří.

   Krátké recenze, které se do karty vejdou celé, nemají modál vůbec —
   používají <article class="review-card review-card--plain">. */

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

.review-card {
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Rozklikávací karta */
details.review-card { cursor: pointer; }

details.review-card:hover {
  border-color: var(--color-accent-logo);
  box-shadow: var(--shadow-soft);
}

.review-card__summary {
  display: flex;
  flex-direction: column;
  flex: 1;
  list-style: none;
  cursor: pointer;
}

.review-card__summary::-webkit-details-marker { display: none; }
.review-card__summary::marker { content: ""; }

/* POZOR: obsah <summary> je poskládaný ze <span>, protože editor Shoptetu
   vytahuje blokové elementy (div, p, footer) ven ze <summary> a karta pak
   zůstane prázdná. Blokové chování proto dodává CSS, ne značky. */

.review-card__stars {
  display: block;
  color: #f6b300;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 8px;
}

.review-card__text {
  display: block;
  margin: 0 0 12px;
  color: #2b2f33;
  flex: 1;
}

.review-card__p {
  display: block;
  margin: 0 0 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2b2f33;
}

.review-card__p:last-child { margin-bottom: 0 !important; }

/* Výzva k rozkliknutí */
.review-card__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.review-card__more::after {
  content: "→";
  font-size: 13px;
  transition: transform var(--transition-base);
}

details.review-card:hover .review-card__more::after { transform: translateX(3px); }

details.review-card[open] .review-card__more { visibility: hidden; }

/* ── Modální okno ───────────────────────────────────────────────────────── */

.review-card__modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(640px, calc(100vw - 32px));
  max-height: 82vh;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-logo);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  padding: 26px 28px 24px;
  cursor: default;
  -webkit-overflow-scrolling: touch;
}

.review-card__dialog { display: flex; flex-direction: column; }

.review-card__full { margin-bottom: 18px; }

.review-card__full .review-card__p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Tmavé pozadí — je součástí <summary>, takže kliknutí modál zavře */
details.review-card[open] > .review-card__summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(10, 10, 11, 0.55);
  cursor: pointer;
}

/* Křížek vpravo nahoře — také součást <summary>, zavírá modál */
details.review-card[open] > .review-card__summary::after {
  content: "✕";
  position: fixed;
  top: 20px;
  right: 22px;
  z-index: 1010;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.2);
  cursor: pointer;
}

/* ── Autor recenze ──────────────────────────────────────────────────────── */

.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__meta { display: block; min-width: 0; }

.review-card__name {
  display: block;
  font-weight: 700;
  color: #1f2327;
  font-size: 14px;
  line-height: 1.2;
}

.review-card__date {
  display: block;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

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

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

@media (max-width: 599px) {
  .review-card__modal {
    width: calc(100vw - 24px);
    max-height: 86vh;
    padding: 22px 18px 20px;
  }
  details.review-card[open] > .review-card__summary::after {
    top: 12px;
    right: 12px;
  }
}

/* ── 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) ───────── */

/* v1.48 OPRAVA: li bylo display: flex, takže se každý inline element uvnitř
   odrážky stal samostatnou flex položkou. Shoptet do obsahu automaticky
   vkládá odkazy na slovník pojmů — ty se pak odtrhly od věty a text se
   rozsypal do sloupců s mezerami. Tečku nově řeší absolutně pozicovaný
   ::before, stejně jako u .pk-arrowlist a .smart-bullets. */

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

.bullet-yellow li {
  position: relative;
  padding-left: 1.35em;
  line-height: 1.45;
  margin: 0 0 0.45em;
}

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

.bullet-yellow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1em * 1.45 - 0.65em) / 2);
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--color-accent);
}


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

/* ── Odkazy uvnitř textu ────────────────────────────────────────────────── */
/* Shoptet do obsahu automaticky vkládá odkazy na slovník pojmů. Bez tohoto
   pravidla dědí výchozí tmavou barvu webu a na černém pozadí zmizí.
   Selektory jsou cílené na textové bloky, aby se nedotkly tlačítek. */

.hp-trust__title a,
.hp-trust__lead a,
.hp-trust__points a,
.hp-trust__btitle a,
.hp-trust__bdesc a {
  color: var(--hp-trust-acc);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
}

.hp-trust__title a:hover,
.hp-trust__lead a:hover,
.hp-trust__points a:hover,
.hp-trust__btitle a:hover,
.hp-trust__bdesc a:hover {
  color: #ffffff;
}

/* Tučný text uvnitř odrážek zůstává bílý i když je zároveň odkazem */
.hp-trust__points strong a { color: var(--hp-trust-acc); }

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


/* ── 4. Varianta BEZ JavaScriptu — nativní <details> ────────────────────── */
/* Skript, který přepíná třídu .is-open, běží jen na homepage. V článcích
   a na podstránkách proto accordion stavíme na <details>:

     <details class="hp-accord__item">
       <summary class="hp-accord__question">Otázka?</summary>
       <div class="hp-accord__body">
         <div class="hp-accord__answer"><p>Odpověď.</p></div>
       </div>
     </details>

   Otázka je textem přímo v <summary> — blokový element (např. <h3>) by
   odtud editor Shoptetu vytáhl ven a karta by zůstala prázdná.
   Barvy, toggle i stav [open] řeší pravidla výše, sdílená s JS variantou. */

details.hp-accord__item > summary.hp-accord__question {
  display: block;                 /* ruší display: list-item, a s ním i marker */
  list-style: none;
}

details.hp-accord__item > summary.hp-accord__question::-webkit-details-marker {
  display: none !important;
}

details.hp-accord__item > summary.hp-accord__question::marker {
  content: "" !important;
}

/* Strop 700px je u JS varianty potřeba kvůli animaci max-height.
   U <details> se obsah zobrazuje nebo skrývá celý, takže by delší
   odpověď jen ořízl. */
details.hp-accord__item[open] > .hp-accord__body {
  max-height: none;
}


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

/* Modifikátory šířky — bez nich se malý screenshot upscaluje na 1000px.
   --sm pro výřezy z nástrojů a grafy, --md pro střední snímky obrazovky. */
.pk-cs__fig--sm { max-width: 520px; }
.pk-cs__fig--md { max-width: 720px; }

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


/* ── 7. Světlé shrnutí výsledků (varianta k tmavému .pk-cs__hero) ───────── */
/* Sladěno s referenčními kartami .pk-ref — bílá karta, žlutý vlasový
   rámeček, šedé KPI dlaždice. Používá se v horní části případové studie. */

.pk-cs__panel {
  max-width: var(--max-width-content);
  margin: 28px 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-cs__panel * { box-sizing: border-box; }

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

.pk-cs__panel-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-cs__panel-sub {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4;
  color: var(--color-text-faint);
}

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

/* Hlavní číslo */
.pk-cs__result {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--color-bg-soft);
  border: 1px solid #F0F1F4;
  border-radius: 13px;
  padding: 20px 22px;
  margin-bottom: 14px;
}

.pk-cs__result-value {
  margin: 0 !important;
  font-size: 54px !important;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}

.pk-cs__result-text {
  margin: 0 !important;
  flex: 1 1 260px;
  font-size: 14px !important;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pk-cs__result-text strong { color: var(--color-text); font-weight: 600; }

/* KPI dlaždice */
.pk-cs__panel-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

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

.pk-cs__panel-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-cs__panel-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-cs__panel-kpi-note {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35;
  color: var(--color-text-muted);
}

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

/* Patička panelu */
.pk-cs__panel-foot {
  margin: 14px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 11px !important;
  line-height: 1.45;
  color: var(--color-text-faint);
}

@media (max-width: 760px) {
  .pk-cs__panel { padding: 20px 16px 16px; }
  .pk-cs__panel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-cs__result { gap: 14px; padding: 16px 16px; }
  .pk-cs__result-value { font-size: 42px !important; }
}

@media (max-width: 420px) {
  .pk-cs__panel-kpis { grid-template-columns: 1fr; }
  .pk-cs__result-value { font-size: 36px !important; }
}


/* ── 8. Tmavá varianta shrnutí ──────────────────────────────────────────── */
/* Přidej .pk-cs__panel--dark k .pk-cs__panel. Struktura HTML se nemění.
   POZOR: graf cílů má barvy zapsané přímo v SVG (atribut fill se v inline
   SVG neřídí kaskádou spolehlivě), pro tmavou variantu je proto potřeba
   vložit tmavou verzi SVG, ne tu světlou. */

.pk-cs__panel--dark {
  background: #0A0A0B;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #ffffff;
}

.pk-cs__panel--dark .pk-cs__panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.pk-cs__panel--dark .pk-cs__panel-title { color: #ffffff; }
.pk-cs__panel--dark .pk-cs__panel-sub { color: rgba(255, 255, 255, 0.55); }

.pk-cs__panel--dark .pk-cs__result {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hlavní číslo je ve žluté z loga — na tmavém pozadí nese celý akcent */
.pk-cs__panel--dark .pk-cs__result-value { color: var(--color-accent-logo); }

.pk-cs__panel--dark .pk-cs__result-text { color: rgba(255, 255, 255, 0.70); }
.pk-cs__panel--dark .pk-cs__result-text strong { color: #ffffff; }

.pk-cs__panel--dark .pk-cs__panel-kpi {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}

.pk-cs__panel--dark .pk-cs__panel-kpi-label { color: rgba(255, 255, 255, 0.55); }
.pk-cs__panel--dark .pk-cs__panel-kpi-value { color: #ffffff; }
.pk-cs__panel--dark .pk-cs__panel-kpi-note { color: rgba(255, 255, 255, 0.55); }

/* Zelená z světlé varianty by na černé neměla dostatečný kontrast */
.pk-cs__panel--dark .pk-cs__panel-kpi-note--up { color: #6EDB9A; }

.pk-cs__panel--dark .pk-cs__panel-foot {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
}

.pk-cs__panel--dark .pk-cs__wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}


/* ── 9. Plošný graf vývoje rozložení pozic ──────────────────────────────── */
/* Vrstvy zdola: TOP 3, 4.–10., 11.–20., 21. a horší. Barvy jsou v SVG.
   Hover tooltipy sdílejí třídy .pk-pt / .pk-hit / .pk-tip / .pk-guide. */

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

.pk-cs__area .pk-hit { fill: transparent; cursor: crosshair; }

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

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

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

.pk-cs__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0 !important;
}

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

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

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


/* ── 10. Vodorovný sloupcový graf (Market Share) ────────────────────────── */
/* Vodorovná orientace kvůli dlouhým názvům domén — svisle by se musely
   otáčet a hůř by se četly. Vlastní doména je žlutá s tmavým obrysem,
   konkurence šedá. Barvy jsou zapsané v SVG.
   POZOR: viewBox má proměnnou výšku podle počtu řádků, aspect-ratio se
   proto nastavuje inline u konkrétního SVG, ne tady. */

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

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

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


/* ═══════════════════════════════════════════════════════════════════════════
   §14 AUTOR — Medailonek autora článku
   ═══════════════════════════════════════════════════════════════════════════

   Komponenta .pk-author — fotka vlevo, jméno a popis vpravo, pod tím
   štítky s kvalifikací. Jméno je v HTML (ne jen ve fotce), aby si ho
   přečetly vyhledávače i AI nástroje.

   Na fotku se nedává rámeček ani stín — obrázek už má vlastní žluté
   pozadí a dvojité orámování by působilo těžce.

   Pozn.: velikosti písma mají !important kvůli #content-wrapper (17px),
   rozměry obrázku taky, protože editor Shoptetu dopisuje inline style.
   ═══════════════════════════════════════════════════════════════════════════ */

.pk-author {
  max-width: var(--max-width-content);
  margin: 32px auto;
  /* Bez rámečku i stínu — medailonek autora je doplňková informace
     a má splývat s obsahem. Rámečky na stránce nese jen to, co
     obsahuje data. Oddělení řeší vlasové linky nad a pod. */
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 0;
  box-sizing: border-box;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  font-family: var(--font-display);
  color: var(--color-text);
}

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

/* ── Fotka ──────────────────────────────────────────────────────────────── */

.pk-author__photo {
  flex: 0 0 156px;
  width: 156px;
}

.pk-author__photo img {
  display: block;
  width: 156px !important;
  height: auto !important;
  border-radius: 12px;
}

/* ── Text ───────────────────────────────────────────────────────────────── */

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

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

.pk-author__name {
  margin: 0 0 2px !important;
  font-size: 21px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}

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

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

.pk-author__text:last-of-type { margin-bottom: 16px !important; }
.pk-author__text strong { color: var(--color-text); font-weight: 600; }

/* ── Štítky s kvalifikací ───────────────────────────────────────────────── */

.pk-author__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.pk-author__tag {
  list-style: none;
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-muted);
}

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

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

.pk-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

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

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

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

@media (max-width: 640px) {
  .pk-author {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 0;
    gap: 18px;
  }
  .pk-author__tags,
  .pk-author__links { justify-content: center; }
  .pk-author__links { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §15 KONTAKTY — Karty s kontaktními a fakturačními údaji
   ═══════════════════════════════════════════════════════════════════════════

   Komponenta .pk-info nahrazuje dvousloupcovou tabulku .contact-table.
   Popisek je NAD hodnotou, ne vedle — dvousloupcová tabulka na mobilu
   mačká hodnoty do úzkého sloupce a dlouhá čísla se lámou.

   Údaje se skládají do mřížky, která se sama přizpůsobí počtu položek.
   Čísla (IČO, DIČ, účet, IBAN, datová schránka) používají třídu
   .pk-info__value--mono — neproporcionální písmo se čte i opisuje
   podstatně líp než Poppins.

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

.pk-info {
  max-width: var(--max-width-content);
  margin: 24px auto 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

/* ── Karta ──────────────────────────────────────────────────────────────── */

.pk-info__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px 22px;
  font-family: var(--font-display);
  color: var(--color-text);
}

/* Zvýrazněná karta — žlutý rámeček pro to hlavní (např. adresa kanceláře) */
.pk-info__card--accent { border-color: var(--color-accent-logo); }

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

.pk-info__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

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

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

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

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

/* ── Mřížka údajů ───────────────────────────────────────────────────────── */

.pk-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px 24px;
}

/* Položka přes celou šířku mřížky (dlouhé hodnoty typu spisová značka) */
.pk-info__item--wide { grid-column: 1 / -1; }

.pk-info__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: var(--color-text-faint);
}

.pk-info__value {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.pk-info__value a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.pk-info__value a:hover { border-bottom-color: var(--color-text); }

/* Čísla — neproporcionální písmo kvůli čitelnosti a opisování */
/* Číselné hodnoty — žádný další font, jen tabulkové číslice ze stejného
   Poppins, aby číslice měly stejnou šířku a lícovaly pod sebou. */
.pk-info__value--mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

/* Doplňková poznámka pod hodnotou */
.pk-info__note {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35;
  color: var(--color-text-faint);
}

/* ── Skupina uvnitř karty (mezinadpis) ──────────────────────────────────── */

.pk-info__group {
  margin: 24px 0 14px !important;
  padding-left: 11px;
  border-left: 3px solid var(--color-accent-logo);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-text);
}

.pk-info__group:first-of-type { margin-top: 0 !important; }

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

.pk-info__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

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

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

/* ── Otevírací doba jako štítek ─────────────────────────────────────────── */

.pk-info__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

.pk-info__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-logo);
  flex: 0 0 7px;
}


/* ── VARIANTA B: vycentrovaná hlavička ──────────────────────────────────── */
/* Použij, když jsou nadpisy stránky centrované. Ikona jde nad titulek. */

.pk-info__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.pk-info__head--center .pk-info__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  background: var(--color-accent-logo);
  color: var(--color-text);
}

.pk-info__head--center .pk-info__icon svg { width: 23px; height: 23px; }

/* ── VARIANTA B: řádkový seznam údajů ───────────────────────────────────── */
/* Popisek vlevo, hodnota vpravo, mezi řádky vlasová linka. U fakturačních
   údajů čitelnější než mřížka — oko sjíždí po jedné ose a hodnoty jsou
   zarovnané pod sebou. */

.pk-info__rows {
  display: flex;
  flex-direction: column;
}

.pk-info__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid #F1F2F4;
}

.pk-info__row:last-child { border-bottom: 0; }

.pk-info__rlabel {
  margin: 0 !important;
  flex: 0 0 auto;
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.pk-info__rvalue {
  margin: 0 !important;
  text-align: right;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.pk-info__rvalue--mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

.pk-info__rnote {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-faint);
}

/* ── VARIANTA B: centrovaný mezinadpis skupiny ──────────────────────────── */

.pk-info__group--center {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  margin: 26px 0 8px !important;
  position: relative;
}

.pk-info__group--center::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent-logo);
  margin: 8px auto 0;
}

.pk-info__group--center:first-of-type { margin-top: 0 !important; }

/* Patička na střed */
.pk-info__foot--center { justify-content: center; }

@media (max-width: 560px) {
  .pk-info__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .pk-info__rvalue { text-align: left; }
}


/* ── VARIANTA C: bez rámečku, zúžený seznam ─────────────────────────────── */
/* .pk-info__card--bare    — karta splývá s obsahem, bez rámečku a stínu
   .pk-info__rows--narrow  — seznam zúžený a vycentrovaný

   Proč zúžení: na plné šířce obsahu (1000px) se popisek a hodnota rozjedou
   na opačné konce řádku a oko je přestane vnímat jako pár. 560px je mez,
   při které k sobě položky pořád patří. */

.pk-info__card--bare {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.pk-info__rows--narrow {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Hlavička v bare variantě potřebuje menší odsazení, chybí padding karty */
.pk-info__card--bare .pk-info__head {
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.pk-info__card--bare .pk-info__foot {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ── VARIANTA D: vše na střed ───────────────────────────────────────────── */
/* Popisek nad hodnotou, obojí vycentrované. Použij, když jsou nadpisy
   stránky centrované — zarovnání label vlevo / hodnota vpravo v takovém
   kontextu působí rozházeně. */

.pk-info__rows--center .pk-info__row {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 5px;
  padding: 15px 0;
}

.pk-info__rows--center .pk-info__rlabel {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-text-faint);
}

.pk-info__rows--center .pk-info__rvalue {
  text-align: center;
  font-size: 16px !important;
}

.pk-info__rows--center .pk-info__rnote { text-align: center; }

/* Poslední řádek bez linky, aby nekolidoval s patičkou */
.pk-info__rows--center .pk-info__row:last-child { border-bottom: 0; }


/* ── Hodnoty k opsání (kopírování) ──────────────────────────────────────── */
/* user-select: all → jedno kliknutí označí celou hodnotu, pak Ctrl+C.
   Bez JavaScriptu, protože editor Shoptetu <script> z obsahu odstraňuje.

   Pokud do Nastavení → HTML kódy doplníš skript pro schránku, CSS už má
   připravený stav .is-copied (ikona se změní na potvrzení). */

.pk-info__copyrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.pk-info__copy {
  user-select: all;
  -webkit-user-select: all;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 4px;
  margin: 0 -4px;
  transition: background-color var(--transition-base);
}

.pk-info__copy:hover { background: rgba(235, 225, 74, 0.30); }
.pk-info__copy::selection { background: var(--color-accent-logo); color: var(--color-text); }
.pk-info__copy::-moz-selection { background: var(--color-accent-logo); color: var(--color-text); }

/* Ikona — čistě signál, že se dá kliknout. Nesmí být součástí výběru. */
.pk-info__cbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--color-text-faint);
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
  transition: opacity var(--transition-base), background-color var(--transition-base);
}

.pk-info__cbtn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-info__copyrow:hover .pk-info__cbtn {
  opacity: 1;
  background: var(--color-bg-soft);
}

/* Stav po zkopírování — využije se jen když je doplněný skript */
.pk-info__cbtn.is-copied {
  opacity: 1;
  color: #1B8A4B;
  background: rgba(27, 138, 75, 0.10);
}


/* ── VARIANTA E: dvojice na jednom řádku, blok na střed ─────────────────── */
/* Popisek vpravo zarovnaný ve sloupci pevné šířky, hodnota hned vedle vlevo.
   Dvojice tak drží u sebe, hodnoty lícují pod sebou a celý blok je
   vycentrovaný vůči stránce. Kombinuj s .pk-info__rows--narrow. */

/* Pevná dvousloupcová osa. Blok centruje --narrow (margin auto),
   řádky uvnitř začínají všechny na stejné souřadnici — jinak se
   dvojice posouvá podle délky hodnoty a sloupce dělají cikcak. */
.pk-info__rows--pair .pk-info__row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: baseline;
  text-align: left;
  gap: 18px;
  padding: 12px 0;
}

.pk-info__rows--pair .pk-info__rlabel {
  text-align: right;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.pk-info__rows--pair .pk-info__rvalue {
  min-width: 0;
  text-align: left;
  font-size: 15px !important;
}

.pk-info__rows--pair .pk-info__rnote { text-align: left; }

@media (max-width: 560px) {
  .pk-info__rows--pair .pk-info__row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3px;
  }
  .pk-info__rows--pair .pk-info__rlabel {
    text-align: center;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }
  .pk-info__rows--pair .pk-info__rvalue,
  .pk-info__rows--pair .pk-info__rnote { text-align: center; }
}

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

@media (max-width: 560px) {
  .pk-info__card { padding: 20px 18px 18px; }
  .pk-info__grid { grid-template-columns: 1fr; gap: 16px; }
  .pk-info__title { font-size: 16px !important; }
}


/* ==========================================================================
   §16 KÓD & VÝUKA — komponenty pro technické články
   ==========================================================================
   Sada pro návody typu robots.txt, hreflang, strukturovaná data:

   1. .pk-code    — ukázka kódu / konfiguračního souboru se štítkem
   2. .pk-rules   — mřížka karet „hotové pravidlo ke zkopírování"
   3. .pk-match   — dva sloupce SEDÍ / NESEDÍ (zástupné znaky, vzory URL)
   4. .pk-toc     — obsah dlouhého článku s kotvami
   5. .pk-sources — zdroje v akademické citaci (ČSN ISO 690)
   6. .pk-quote   — doslovná citace z cizího zdroje
   7. .pk-mono    — neproporcionální označení výrazu uvnitř běžného textu
   8. .pk-timeline — svislá časová osa (chronologie událostí)

   POZOR na dvě omezení Shoptetu, podle kterých je sekce navržena:
   a) Kód se sází po řádcích jako <span class="pk-code__line">, NE v <pre>.
      TinyMCE normalizuje bílé znaky a odsazení uvnitř <pre> se rozpadá;
      řádkové <span>y s display: block přežijí uložení beze změny.
   b) Velikosti písma a marginy mají !important — #content-wrapper nastavuje
      globálně 17px a margin-bottom: 25px pro <p>, <ul> a <ol>.
   ========================================================================== */


/* ── 1. PK-CODE — Ukázka kódu se štítkem souboru ─────────────────────────── */
/* Struktura:
     <div class="pk-code">
       <p class="pk-code__label">robots.txt</p>
       <div class="pk-code__body">
         <span class="pk-code__line pk-code__line--c"># komentář</span>
         <span class="pk-code__line"><span class="pk-code__f">User-agent:</span> *</span>
         <span class="pk-code__line pk-code__line--blank"> </span>
       </div>
       <p class="pk-code__foot">Vysvětlení pod blokem (volitelné).</p>
     </div>

   Varianty:
     .pk-code--light   světlá (do karet a mezi text)
     .pk-code--mini    kompaktní, bez vnějšího odsazení (dovnitř .pk-rule) */

.pk-code {
  --code-bg:     var(--color-dark-bg);
  --code-head:   rgba(255, 255, 255, 0.05);
  --code-text:   var(--color-dark-text);
  --code-muted:  rgba(255, 255, 255, 0.48);
  --code-border: var(--color-dark-border);
  --code-field:  var(--color-accent-logo);
  --code-dot:    var(--color-accent-logo);
  --code-foot:   rgba(255, 255, 255, 0.04);

  width: 100%;
  max-width: var(--max-width-content);
  margin: 22px auto 28px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-sizing: border-box;
}

/* Štítek se jménem souboru */
.pk-code__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 11px 18px;
  background: var(--code-head);
  border-bottom: 1px solid var(--code-border);
  color: var(--code-muted);
  font-family: var(--font-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4 !important;
}

.pk-code__label::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--code-dot);
}

/* Tělo — vodorovné posouvání na mobilu místo zalamování řádků */
.pk-code__body {
  margin: 0 !important;
  padding: 16px 18px;
  overflow-x: auto;
  color: var(--code-text);
  font-family: var(--font-code) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  -webkit-text-size-adjust: 100%;
}

.pk-code__line {
  display: block;
  white-space: pre;
  margin: 0 !important;
  font: inherit !important;
  color: inherit;
}

/* Komentář (#) — ztlumený */
.pk-code__line--c,
.pk-code__c {
  color: var(--code-muted) !important;
}

/* Prázdný řádek mezi skupinami pravidel */
.pk-code__line--blank {
  height: 0.9em;
  line-height: 0.9em !important;
}

/* Název pole (User-agent:, Disallow:, Allow:, Sitemap:) */
.pk-code__f {
  color: var(--code-field);
  font-weight: 700;
}

/* Patička s vysvětlením */
.pk-code__foot {
  margin: 0 !important;
  padding: 12px 18px 13px;
  background: var(--code-foot);
  border-top: 1px solid var(--code-border);
  color: var(--code-muted);
  font-family: var(--font-body);
  font-size: 13px !important;
  line-height: 1.6 !important;
}

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

/* ── Světlá varianta ── */
.pk-code--light {
  --code-bg:     var(--color-bg-soft);
  --code-head:   var(--color-bg-alt);
  --code-text:   var(--color-text);
  --code-muted:  var(--color-text-faint);
  --code-border: var(--color-border);
  --code-field:  var(--color-text);
  --code-dot:    var(--color-accent-logo);
  --code-foot:   var(--color-bg-alt);
}

/* ── Kompaktní varianta do karet ── */
.pk-code--mini {
  margin: 0 !important;
  border-radius: var(--radius-md);
}

.pk-code--mini .pk-code__body {
  padding: 12px 14px;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

@media (max-width: 560px) {
  .pk-code__body { padding: 14px; font-size: 13px !important; }
  .pk-code__label { padding: 10px 14px; }
  .pk-code__foot { padding: 11px 14px 12px; }
}


/* ── Varianta se zalamováním — pro prompty a delší textové ukázky ── */
/* Výchozí .pk-code__body má white-space: pre, protože u konfiguračního
   souboru je zalomení řádku součástí obsahu. U promptu pro AI nástroj
   je obsahem věta — vodorovný posun by z ní udělal nečitelný pruh.
   Používejte jen tam, kde na přesném zalomení nezáleží. */

.pk-code--wrap .pk-code__line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pk-code--wrap .pk-code__body { overflow-x: visible; }


/* ── 2. PK-RULES — Karty „hotové pravidlo ke zkopírování" ───────────────── */
/* Struktura:
     <div class="pk-rules">
       <div class="pk-rules__grid">
         <div class="pk-rule">
           <p class="pk-rule__title">Zakázat celý web</p>
           <p class="pk-rule__desc">Popis situace.</p>
           <div class="pk-rule__code">
             <div class="pk-code pk-code--light pk-code--mini">…</div>
           </div>
         </div>
       </div>
     </div>
   Modifikátor .pk-rule--accent = žlutý rámeček (nejdůležitější pravidlo). */

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

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

.pk-rule {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px 20px;
  box-sizing: border-box;
}

.pk-rule--accent { border-color: var(--color-accent-logo); }

.pk-rule__title {
  margin: 0 0 6px !important;
  font-family: var(--font-display);
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  color: var(--color-text);
  text-align: left;
}

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

/* margin-top: auto přisune kód ke spodní hraně — karty v řádku pak mají
   ukázky zarovnané na stejné ose i při různě dlouhém popisu.
   Pozn.: záměrně NE flex-basis — ve směru column se chová jako výška. */
.pk-rule__code { margin-top: auto; }


/* Varianta mřížky pro „časté chyby" — červený rámeček a štítek.
   Odlišuje sekci chyb od kuchařky pravidel, která používá stejnou mřížku. */
.pk-rules--warn .pk-rule { border-color: rgba(185, 28, 28, 0.22); }

.pk-rule__flag {
  display: inline-block;
  margin: 0 0 9px !important;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-alert-bg);
  color: var(--color-negative);
  font-family: var(--font-display);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4 !important;
}

.pk-rule__flag--ok {
  background: rgba(21, 128, 61, 0.09);
  color: var(--color-positive);
}

@media (max-width: 720px) {
  .pk-rules__grid { grid-template-columns: 1fr; }
  .pk-rule { padding: 16px 18px 18px; }
}


/* ── 3. PK-MATCH — Dva sloupce SEDÍ / NESEDÍ ────────────────────────────── */
/* Ukazuje, na které URL vzor pasuje a na které ne (zástupné znaky * a $).
   Struktura:
     <div class="pk-match">
       <div class="pk-match__head">
         <p class="pk-match__pattern">Disallow: /fish</p>
         <p class="pk-match__note">Vysvětlení jednou větou.</p>
       </div>
       <div class="pk-match__cols">
         <div class="pk-match__col pk-match__col--yes">
           <p class="pk-match__title">Zablokuje</p>
           <ul class="pk-match__list"><li>/fish.html</li></ul>
         </div>
         <div class="pk-match__col pk-match__col--no">…</div>
       </div>
     </div> */

.pk-match {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 20px auto 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  box-sizing: border-box;
}

.pk-match__head {
  padding: 14px 18px 15px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.pk-match__pattern {
  margin: 0 !important;
  font-family: var(--font-code) !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.45 !important;
  color: var(--color-text);
  word-break: break-word;
}

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

.pk-match__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pk-match__col { padding: 15px 18px 17px; min-width: 0; }
.pk-match__col + .pk-match__col { border-left: 1px solid var(--color-border); }

.pk-match__title {
  margin: 0 0 9px !important;
  font-family: var(--font-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4 !important;
}

.pk-match__col--yes .pk-match__title { color: var(--color-positive); }
.pk-match__col--no  .pk-match__title { color: var(--color-negative); }

.pk-match__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pk-match__list li {
  position: relative;
  margin: 0 0 5px !important;
  padding-left: 21px;
  font-family: var(--font-code);
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

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

.pk-match__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

.pk-match__col--yes .pk-match__list li::before { content: "✓"; color: var(--color-positive); }
.pk-match__col--no  .pk-match__list li::before { content: "✕"; color: var(--color-negative); }

@media (max-width: 640px) {
  .pk-match__cols { grid-template-columns: 1fr; }
  .pk-match__col + .pk-match__col {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
}


/* ── 4. PK-TOC — Obsah článku ───────────────────────────────────────────── */
/* Číslování řeší CSS counter — při přidání položky se přečísluje samo.
   Struktura:
     <div class="pk-toc">
       <p class="pk-toc__title">Co v článku najdete</p>
       <ul class="pk-toc__list"><li><a href="#kotva">Nadpis</a></li></ul>
     </div> */

.pk-toc {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 26px auto 34px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--color-border-medium) inset;
  padding: 20px 24px 22px;
  box-sizing: border-box;
}

.pk-toc__title {
  margin: 0 0 13px !important;
  font-family: var(--font-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4 !important;
  color: var(--color-text-faint);
  text-align: left;
}

.pk-toc__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 28px;
  counter-reset: pktoc;
}

.pk-toc__list li {
  counter-increment: pktoc;
  position: relative;
  margin: 0 !important;
  padding-left: 28px;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.pk-toc__list li::before {
  content: counter(pktoc);
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-full);
  background: var(--color-accent-logo);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}

.pk-toc a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-mid);
  transition: border-color var(--transition-base);
}

.pk-toc a:hover { border-bottom-color: var(--color-text); }

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



/* ── 5. PK-SOURCES — Zdroje v akademické citaci (ČSN ISO 690) ───────────── */
/* Proti .article-sources (§7) se nerozbaluje a je stavěná na světlé pozadí.
   Číslování řeší CSS counter — pořadí se při editaci přepočítá samo.
   Struktura:
     <div class="pk-sources">
       <p class="pk-sources__title">Zdroje</p>
       <ul class="pk-sources__list">
         <li>GOOGLE. Název dokumentu. <cite>Google for Developers</cite>
             [online]. Aktualizováno 21. 11. 2025 [cit. 11. 8. 2026].
             Dostupné z: <a href="…" target="_blank" rel="noopener">…</a></li>
       </ul>
     </div> */

.pk-sources {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 34px auto;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  box-sizing: border-box;
}

.pk-sources__title {
  margin: 0 0 15px !important;
  font-family: var(--font-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4 !important;
  color: var(--color-text-faint);
  text-align: left;
}

.pk-sources__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: pksrc;
}

.pk-sources__list li {
  counter-increment: pksrc;
  position: relative;
  margin: 0 0 11px !important;
  padding-left: 32px;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

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

.pk-sources__list li::before {
  content: "[" counter(pksrc) "]";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--color-text-faint);
}

.pk-sources cite { font-style: italic; }

.pk-sources a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent-mid);
}

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

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

@media (max-width: 560px) {
  .pk-sources__list li { padding-left: 27px; }
}


/* ── 6. PK-QUOTE — Doslovná citace z cizího zdroje ──────────────────────── */
/* Odliší převzatý text od našeho. Používá se pro citace z dokumentace
   vyhledávačů, z blogů nástrojů a z oficiálních prohlášení — tam, kde
   na přesném znění záleží a parafráze by oslabila důkaz.
   Struktura:
     <blockquote class="pk-quote">
       <p class="pk-quote__text">Doslovné znění citace.</p>
       <p class="pk-quote__cite">Zdroj: Ahrefs, Domain Rating</p>
     </blockquote>
   Víc odstavců v citaci je v pořádku, .pk-quote__cite je vždy poslední. */

.pk-quote {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 24px auto 28px !important;
  padding: 18px 22px 16px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent-logo);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-sizing: border-box;
}

.pk-quote__text {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-style: italic;
  line-height: 1.7 !important;
  color: var(--color-text-muted);
}

.pk-quote__text:last-of-type { margin-bottom: 12px !important; }

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

.pk-quote__cite {
  margin: 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5 !important;
  color: var(--color-text-faint);
  font-style: normal;
}

.pk-quote__cite a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 560px) {
  .pk-quote { padding: 16px 16px 14px; }
  .pk-quote__text { font-size: 15px !important; }
}


/* ── 7. PK-MONO — Neproporcionální označení uvnitř běžného textu ────────── */
/* Doplněk k .pk-code: zatímco .pk-code je celý výpis souboru, .pk-mono je
   jednoslovná zmínka uvnitř věty — název tagu, souboru nebo adresy
   (lastmod, robots.txt, vasedomena.cz/sitemap.xml).

   Struktura:
     <span class="pk-mono">lastmod</span>

   Pozn. 1: font-size je v em, aby chip zůstal poměrný k okolnímu textu
   i uvnitř komponent s vlastní velikostí (.pk-rule__desc, .pk-step__text).
   Pozn. 2: Shoptet prolinkuje slovníkové pojmy i uvnitř chipu. Stejně jako
   v .pk-code (bod 10 níže) se odkaz uvnitř chová i vypadá jako běžný text —
   chip má působit jako doslovný zápis, ne jako odkaz. */

.pk-mono {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-bg-alt);
  box-shadow: 0 0 0 1px var(--color-border) inset;
  font-family: var(--font-code) !important;
  font-size: 0.88em !important;
  line-height: inherit !important;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.pk-mono a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  pointer-events: none;
  cursor: text;
}


/* ── 8. PK-TIMELINE — Svislá časová osa ─────────────────────────────────── */
/* Chronologický přehled událostí: osa vlevo, karty vpravo, roky jako
   značky na ose. Vznikla pro článek o historii SEO, použitelná pro
   jakoukoli chronologii — historii firmy, vývoj projektu v případové
   studii, přehled změn algoritmu.

   Struktura:
     <div class="pk-timeline">
       <p class="pk-timeline__legend">
         <span class="pk-timeline__key">Svět</span>
         <span class="pk-timeline__key pk-timeline__key--cz">Česko</span>
         <span class="pk-timeline__key pk-timeline__key--major">Zásadní milník</span>
       </p>
       <div class="pk-timeline__list">
         <p class="pk-timeline__year">1998</p>
         <div class="pk-timeline__item pk-timeline__item--major">
           <div class="pk-timeline__card">
             <p class="pk-timeline__meta">
               <span class="pk-timeline__date">4. 9. 1998</span>
               <span class="pk-timeline__area">Svět</span>
               <span class="pk-timeline__cat">Vyhledávač</span>
             </p>
             <p class="pk-timeline__title">Vzniká Google</p>
             <p class="pk-timeline__text">Popis. <a class="pk-timeline__ref" href="#zdroj-12">[12]</a></p>
           </div>
         </div>
       </div>
     </div>

   Modifikátory položky:
     --cz      česká událost: žlutá tečka na ose a žlutý štítek oblasti
     --major   zásadní milník: žlutý rámeček karty, větší titulek
     --minor   doplňková událost: menší karta bez stínu na šedém podkladu

   Proč jednostranná osa a ne střídání vlevo/vpravo: strana by musela nést
   význam (svět / Česko), jenže události nejdou rovnoměrně — dlouhé úseky
   by zůstaly prázdné na jedné straně. Oblast proto nese barva tečky
   a štítek, osa zůstává vlevo a karta má celou šířku i na mobilu.

   Bez JavaScriptu a bez <ol>/<li>: seznamy dostávají v Shoptetu globální
   odrážky a odsazení, <div> a <p> se přepisují jednodušeji.
   Velikosti písma a marginy mají !important kvůli #content-wrapper. */

.pk-timeline {
  --tl-axis: 19px;          /* poloha osy od levé hrany */
  --tl-gap: 48px;           /* odsazení karet od levé hrany */
  --tl-dot-world: var(--color-text);
  --tl-dot-cz: var(--color-accent-logo);

  width: 100%;
  max-width: var(--max-width-content);
  margin: 26px auto 36px;
  box-sizing: border-box;
  font-family: var(--font-display);
  color: var(--color-text);
}

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

/* ── Legenda ── */
.pk-timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 20px !important;
  padding-left: var(--tl-gap);
  line-height: 1.3 !important;
}

.pk-timeline__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pk-timeline__key::before {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--tl-dot-world);
}

.pk-timeline__key--cz::before {
  background: var(--tl-dot-cz);
  box-shadow: 0 0 0 1.5px var(--color-text) inset;
}

.pk-timeline__key--major::before {
  flex-basis: 18px;
  width: 18px;
  height: 12px;
  border-radius: 4px;
  background: var(--color-bg);
  box-shadow: 0 0 0 1.5px var(--color-accent-logo) inset;
}

/* ── Osa ── */
.pk-timeline__list {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.pk-timeline__list::before {
  content: "";
  position: absolute;
  left: var(--tl-axis);
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--color-border);
}

/* ── Rok jako značka na ose ── */
.pk-timeline__year {
  position: relative;
  margin: 30px 0 12px !important;
  padding-left: var(--tl-gap);
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--color-text);
  text-align: left;
}

.pk-timeline__year:first-child { margin-top: 0 !important; }

.pk-timeline__year::before {
  content: "";
  position: absolute;
  left: var(--tl-axis);
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--color-text);
  box-shadow: 0 0 0 4px var(--color-bg);
  transform: translate(-50%, -50%);
}

/* ── Položka a tečka na ose ── */
.pk-timeline__item {
  position: relative;
  margin: 0 0 12px !important;
  padding-left: var(--tl-gap);
}

.pk-timeline__item::before {
  content: "";
  position: absolute;
  left: var(--tl-axis);
  top: 21px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--tl-dot-world);
  box-shadow: 0 0 0 3px var(--color-bg);
  transform: translateX(-50%);
  z-index: 1;
}

.pk-timeline__item--cz::before {
  background: var(--tl-dot-cz);
  box-shadow: 0 0 0 1.5px var(--color-text) inset, 0 0 0 3px var(--color-bg);
}

/* ── Karta ── */
.pk-timeline__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 14px 18px 15px;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.pk-timeline__card:hover { box-shadow: var(--shadow-md); }

.pk-timeline__item--major .pk-timeline__card { border-color: var(--color-accent-logo); }

/* ── Řádek s datem, oblastí a kategorií ── */
.pk-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.pk-timeline__date {
  font-size: 13px !important;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

.pk-timeline__area {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
}

.pk-timeline__item--cz .pk-timeline__area {
  background: var(--color-accent-logo);
  color: var(--color-text);
}

.pk-timeline__cat {
  font-size: 12px !important;
  color: var(--color-text-faint);
}

/* ── Text ── */
.pk-timeline__title {
  margin: 0 0 4px !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
}

.pk-timeline__item--major .pk-timeline__title { font-size: 18px !important; }

.pk-timeline__text {
  margin: 0 !important;
  font-family: var(--font-body);
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted);
}

/* Odkazy v textu včetně automatického prolinkování slovníku Shoptetem */
.pk-timeline__title a,
.pk-timeline__text a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pk-timeline__title a:hover,
.pk-timeline__text a:hover { text-decoration-color: var(--color-text); }

/* Odkaz na zdroj [12] — míří na <li id="zdroj-12"> v .pk-sources */
.pk-timeline__text a.pk-timeline__ref {
  margin-left: 3px;
  font-family: var(--font-code);
  font-size: 12px !important;
  font-weight: 700;
  color: var(--color-text-faint);
  text-decoration: none;
  white-space: nowrap;
}

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

/* ── Doplňková událost ── */
.pk-timeline__item--minor::before {
  top: 17px;
  width: 9px;
  height: 9px;
}

.pk-timeline__item--minor .pk-timeline__card {
  background: var(--color-bg-soft);
  border-color: transparent;
  box-shadow: none;
  padding: 10px 16px 11px;
}

.pk-timeline__item--minor .pk-timeline__meta { margin-bottom: 3px !important; }
.pk-timeline__item--minor .pk-timeline__title { font-size: 14px !important; margin-bottom: 2px !important; }
.pk-timeline__item--minor .pk-timeline__text { font-size: 13px !important; line-height: 1.55 !important; }

/* ── Mobil ── */
@media (max-width: 560px) {
  .pk-timeline { --tl-axis: 9px; --tl-gap: 28px; }
  .pk-timeline__year { font-size: 20px !important; margin-top: 24px !important; }
  .pk-timeline__year::before { width: 13px; height: 13px; }
  .pk-timeline__card { padding: 12px 14px 13px; }
  .pk-timeline__item--major .pk-timeline__title { font-size: 17px !important; }
  .pk-timeline__text { font-size: 14px !important; }
}

/* Doplněk k .pk-sources (bod 5): zdroj, na který čtenář přišel odkazem
   [12] z časové osy, se krátce zvýrazní, aby ho v dlouhém seznamu našel.
   scroll-margin drží položku pod pevnou hlavičkou webu. */
.pk-sources__list li { scroll-margin-top: 110px; }
.pk-sources__list li:target {
  background: var(--color-accent-soft);
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--color-accent-soft);
}


/* ── 9. OPRAVA: odsazení pod tabulkami ──────────────────────────────────── */
/* .pk-table-head i .pk-table-simple (§6) mají margin: 0 auto — následující
   odstavec se pak lepí přímo na spodní hranu tabulky, protože #content-wrapper
   nastavuje odstavcům jen margin-bottom, nikoli margin-top. */

.pk-table-head,
.pk-table-simple { margin-bottom: 28px !important; }



/* ── 10. OPRAVA: automatické prolinkování uvnitř ukázek kódu ────────────── */
/* Shoptet vkládá do obsahu odkazy na slovník pojmů. V ukázce kódu je to
   nežádoucí ze dvou důvodů: odkaz dědí globální barvu i podtržení a na
   tmavém pozadí je nečitelný, a hlavně — výpis souboru má vypadat přesně
   tak, jak ho člověk zkopíruje do editoru. Odkaz proto v těle ukázky
   vypadá i reaguje jako obyčejný text.
   Pokud byste prolinkování v kódu naopak chtěli zachovat, smažte
   pointer-events a cursor; barvy nechte. */

.pk-code__body a,
.pk-match__pattern a,
.pk-match__list a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  pointer-events: none;
  cursor: text;
}

/* Patička ukázky je běžný text — odkaz tam smysl dává, musí ale být
   na tmavém pozadí vidět. */
.pk-code__foot a {
  color: var(--code-field) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ── 11. OPRAVA: mezery mezi odstavci v .hp-accord uvnitř článku ─────────── */
/* .hp-accord__answer p { margin: 0 0 var(--space-3) } má specificitu 21
   a prohrává s #content-wrapper p { margin-bottom: 25px } (101).
   V patičce odpovědi tak zůstávala mezera navíc. */

#content-wrapper .hp-accord__answer p,
.basic-description .hp-accord__answer p {
  margin-bottom: var(--space-3) !important;
}

#content-wrapper .hp-accord__answer p:last-child,
.basic-description .hp-accord__answer p:last-child {
  margin-bottom: 0 !important;
}


/* ── 12. Doplňky k existujícím komponentám ───────────────────────────────── */

/* .article-sources--light — světlá varianta zdrojů pod článkem.
   Základní komponenta (§7) je stavěná na tmavé pozadí: bílé rgba rámečky
   na bílém podkladu nejsou vidět. */
.article-sources--light { border-top: 1px solid var(--color-border); }
.article-sources--light > summary { background: var(--color-bg-soft); }
.article-sources--light > summary:hover { background: rgba(237, 222, 0, 0.14); }

/* span.pk-faq__h3 — otázka v FAQ jako <span>, ne <h3>.
   Editor Shoptetu vytahuje blokové elementy ven ze <summary> a karta pak
   zůstane prázdná (stejný problém řešila v1.24 u recenzí). Řádkový <span>
   přežije, blokové chování mu dodá CSS. */
span.pk-faq__h3 {
  display: block;
  font-family: var(--font-display);
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.35 !important;
  color: var(--color-text);
  text-align: left;
}

@media (max-width: 560px) {
  span.pk-faq__h3 { font-size: 17px !important; }
}

/* Odstavce v odpovědi FAQ — .pk-faq__a p { margin: 0 } prohrává
   s #content-wrapper p { margin-bottom: 25px } na specificitu.
   Bez tohoto pravidla má poslední odstavec v kartě 25px mezeru navíc. */
#content-wrapper .pk-faq__a p,
.basic-description .pk-faq__a p {
  margin: 0 0 12px !important;
}

#content-wrapper .pk-faq__a p:last-child,
.basic-description .pk-faq__a p:last-child {
  margin-bottom: 0 !important;
}


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