/* ==========================================================================
   styly.css — KONSOLIDOVANÝ CSS SOUBOR
   seoprakticky.cz
   ==========================================================================
   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
   §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

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

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


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

:root {
  /* ── Barvy ────────────────────────────────────────────────────────────── */
  --color-accent:          #edde00;   /* žlutá – primární akcentní barva */
  --color-accent-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);

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

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


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


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

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

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

hr {
  display: none;
}


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

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

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

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


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

a {
  text-decoration: underline;
}


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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


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

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

@media (min-width: 1418px) {

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

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

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

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

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

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

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

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

}


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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

  padding: 24px 26px;

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

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

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

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

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

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

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


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

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

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

  padding: 24px 26px;

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

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

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

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

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


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

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

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


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

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


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

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

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

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

/* Žluté zvýraznění textu (funguje přes více řádků).
   Pozn.: --hl je záměrně světlejší žlutá než --color-accent (jemnější
   zvýrazňovač pod textem) — neměnit na token bez vizuální kontroly. */
.sp-hl {
  --hl: #f2ea63;
  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 */
.pk-hl {
  font-weight: 700;
  padding: 0 0.10em;
  background-image: linear-gradient(
    to top,
    var(--color-accent-mid) 0,
    var(--color-accent-mid) 0.52em,
    transparent 0.52em
  );
  background-repeat: repeat-x;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

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


/* ── 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 bloky, 4 vedle sebe (emotikony) ────────────────────── */

.pk-usp {
  --pk: #00a8ee;
  --txt: #24242e;
  --bd: #E6E8EC;
  --bd-hover: #D6DAE0;
  --bg-hover: #F8F9FA;

  font-size: 15px;
  line-height: 1.4;

  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.pk-usp__item {
  background: var(--color-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius-xl);
  padding: 16px 14px;
  text-align: center;
  box-shadow: none;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
  font: inherit;
  line-height: inherit;
  color: var(--txt);
}

.pk-usp__item:hover {
  background: var(--bg-hover);
  border-color: var(--bd-hover);
}

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

.pk-usp__text {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.pk-usp__text strong,
.pk-usp__text b { font-weight: 700; }

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


/* ── 3. PK-USP--3 — USP bloky, 3 vedle sebe (JPG ikony + zbarvení) ──────── */

.pk-usp--3 {
  --iconSize: 72px;
  --iconSafeGap: 18px;

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

.pk-usp--3 .pk-usp__item {
  position: relative;
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-bg) 70%);
  border: 1px solid rgba(51, 51, 51, 0.12);
  border-radius: 10px;
  padding: calc(var(--iconSize) / 2 + var(--iconSafeGap)) 16px 16px;
  text-align: center;
  box-shadow: none;
  outline: 1px solid transparent;
  outline-offset: 0;
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    outline-color var(--transition-normal);
}

.pk-usp--3 .pk-usp__item:hover {
  background: rgba(237, 222, 0, 0.07);
  border-color: rgba(237, 222, 0, 0.50);
  outline-color: rgba(237, 222, 0, 0.22);
}

.pk-usp--3 .pk-usp__icon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 2px solid var(--color-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

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

.pk-usp--3 .pk-usp__title,
.pk-usp--3 .pk-usp__text { margin: 0; }

.pk-usp--3 .pk-usp__title {
  font-weight: 800;
  color: #333333;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.pk-usp--3 .pk-usp__text {
  margin-top: 10px;
  color: rgba(51, 51, 51, 0.80);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

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


/* ── 4. EFFECTS — Bloky služeb dlaždice (5 vedle sebe) ──────────────────── */

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

.effects__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.effect-card {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-none);
  border: 1px solid #E9ECEF;
  box-shadow: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.effect-card:hover {
  background: var(--color-bg-soft);
  border-color: #DEE2E6;
}

.effect-dot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.effect-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(237, 222, 0, 0.22);
  color: var(--color-text);
  margin-bottom: 10px;
}

/* Pozn.: při konsolidaci odstraněn duplicitní blok
   `.effect-card .effect-text` — obsahoval identické deklarace. */
.effect-text {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.78);
  padding-right: 18px;
  padding-bottom: 2px;
}

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

.pk-tile {
  border: 1px solid var(--b);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: 16px 16px 14px;
  box-shadow: none;
  color: var(--t);
}

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

.pk-faq__h3 { margin: 0; }

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

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

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

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

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

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

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

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


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

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

.review-card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

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

.review-card__text {
  margin: 0 0 14px;
  color: #2b2f33;
  font-size: 14px !important;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  position: relative;
}

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

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

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

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

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

.review-card__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: #E3E6EA;
  border: 1px solid #E3E6EA;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

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

.review-card__date {
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}

@media (max-width: 599px)                         { .reviews__grid { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 1099px) { .reviews__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (min-width: 1100px)                        { .reviews__grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }


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

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

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

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

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

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

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

.pk-case__title { margin: 0; }

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

.pk-compare__text {
  color: #475569;
  font-size: var(--text-base);
  line-height: 1.4;
  background-color: rgba(0, 0, 0, 0);
  font-family: inherit;
}

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

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

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


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


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

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

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

/* Žlutý proužek vlevo */
.author-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--strip);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(237, 222, 0, 0.85),
    rgba(237, 222, 0, 0.55) 45%,
    rgba(237, 222, 0, 0.20) 70%,
    rgba(237, 222, 0, 0) 100%
  );
  z-index: 0;
}

.author-card__stripe { display: none; }

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

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

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

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

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

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

/* Citát */
.author-card__quote {
  position: relative;
  padding: 34px 0 4px 22px;
  line-height: var(--leading-relaxed);
  max-width: var(--quoteMax);
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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


/* ── 1. PK-SOCIAL — Bloky sociálních sítí (6 karet vedle sebe) ──────────── */

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

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

/* Karta */
.pk-social__card {
  background: var(--color-bg);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  padding: 18px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Badge s ikonou */
.pk-social__badge {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  margin-bottom: 12px;
}

.pk-social__badge img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Název sítě */
.pk-social__name {
  margin: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}

/* Číslo */
.pk-social__value {
  margin: 10px 0 0;
  font: inherit;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  color: var(--color-text);
}

/* Popisek */
.pk-social__meta {
  margin: 4px 0 0;
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.2;
  color: rgba(17, 17, 17, 0.70);
}

/* Tlačítko — sdílená DNA z §3 */
.pk-social__btn {
  margin-top: 12px;
  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(160px, 1fr)); } }

/* 2 vedle sebe */
@media (max-width: 599px) {
  .pk-social__grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .pk-social__card { padding: 16px 10px 12px; }
  .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);
  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. Černé pozadí, žlutý text,
   logo nahoře, 4 výhody s ikonkami, 2 CTA tlačítka dole.
   Ikony: Tabler outline webfont (https://tabler.io/icons) — vyžaduje načtený
   font, NEBO nahraď <i> vlastními <img>/SVG ikonami.
   Pozn.: --hp-trust-acc (#ebe14a) je záměrně světlejší žlutá než
   --color-accent — na černém pozadí má lepší kontrast. Neměnit na token. */

.hp-trust {
  --hp-trust-acc: #ebe14a;
  --hp-trust-line: rgba(255, 255, 255, 0.14);
  --hp-trust-muted: rgba(255, 255, 255, 0.70);
  max-width: var(--max-width-wide);
  margin: var(--space-12) auto;
  background: #000000;
  border-radius: 22px;
  padding: 44px;
  color: #ffffff;
  font-family: var(--font-body);
}

.hp-trust__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

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

.hp-trust__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Levý blok ── */
.hp-trust__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(235, 225, 74, 0.14);
  color: var(--hp-trust-acc);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 22px;
  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;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 18px;
}

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

.hp-trust__lead {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--hp-trust-muted);
  margin: 0;
}

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

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

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

.hp-trust__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hp-trust-muted);
}

.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 ── */
.hp-trust__benefits {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hp-trust__benefit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.hp-trust__ico {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #141414;
  border: 1px solid var(--hp-trust-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-trust-acc);
  font-size: 23px;
}

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

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

.hp-trust__btitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #ffffff;
  margin: 0 0 3px;
}

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

/* ── 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: 15px 30px;
  border-radius: var(--radius-full);
  text-decoration: none !important;
  transition: transform var(--transition-base),
              background 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); }

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

.hp-trust__btn--ghost:hover {
  background: var(--hp-trust-acc);
  color: #111111 !important;
}

/* ── Mobil ── */
@media (max-width: 768px) {
  .hp-trust { padding: 32px 22px; }
  .hp-trust__grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-trust__title { font-size: 24px; }
  .hp-trust__cta { flex-direction: column; }
  .hp-trust__btn { width: 100%; justify-content: center; }
}

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