/*
 * ============================================================
 *  PAN-BLOG — ŠTÝLY PRE BLOGOVÉ ČLÁNKY
 *  Panakei.sk
 *  Verzia: 4.0 | Máj 2026
 * ============================================================
 *
 *  Komponenty:
 *
 *  1.  CSS PREMENNÉ
 *  2.  HERO SEKCIA              (.spt-hero-*)
 *  3.  TLDR KARTA               (.pan-blog-tldr-*)
 *  4.  OBSAH (TOC)              (.shp-custom-toc*)
 *  5.  FAQ                      (.shp-custom-faq-*)
 *  6.  ZDROJE                   (.shp-custom-sources-*)
 *  7.  AUTOR                    (.author-box-soft)
 *  8.  SCROLL TLAČÍTKO          (.shp-custom-floatback)
 *  9.  TELO ČLÁNKU              (.pan-blog-clanok)
 *  10. VLASTNOSTI PLEMENA       (.pv-*)
 *  11. HEADER V ČÍSLACH         (.ph-*)
 *  12. ALTERNATÍVNE PLEMENÁ     (.ap-*)
 *
 *  Poradie načítania:
 *    1. kategorie.css
 *    2. pan-kategorie.css
 *    3. pan-produkt.css
 *    4. pan-blog.css   ← tento súbor
 * ============================================================
 */


/* =============================================================
   1. CSS PREMENNÉ
   ============================================================= */

:root {
  --pan-blog-akcent:        #8a9e68;
  --pan-blog-akcent-tmava:  #6b7c50;
  --pan-blog-akcent-soft:   rgba(138,158,104,.12);
  --pan-blog-akcent-border: rgba(138,158,104,.25);
  --pan-blog-text:          #24242e;
  --pan-blog-tlmeny:        #6b7280;
  --pan-blog-bg-soft:       #f4f5ef;
  --pan-blog-border:        rgba(17,24,39,.12);
  --pan-blog-radius:        12px;
  --pan-blog-tien:          0 8px 24px rgba(0,0,0,.07);
  --pan-blog-maxw:          860px;
  --pan-blog-gap:           10px;
  --pan-blog-font:          'Poppins',sans-serif;
  --pan-blog-font-size:     10pt;
  --pan-blog-font-maly:     9pt;
  --pan-blog-font-tyny:     8.5pt;

  --shp-custom-accent:      #6b7c50;
  --shp-custom-text:        #24242e;
  --shp-custom-muted:       #6b7280;
  --shp-custom-soft:        #f4f5ef;
  --shp-custom-border:      rgba(17,24,39,.12);
  --shp-custom-radius:      14px;
  --shp-custom-shadow:      0 8px 24px rgba(0,0,0,.07);
  --shp-custom-maxw:        860px;
  --shp-custom-gap:         10px;
  --shp-custom-font:        10pt;
  --shp-custom-font-small:  9pt;
  --shp-custom-font-tiny:   8.5pt;
  --shp-custom-float-threshold: 360;
}



/* =============================================================
   SMOOTH SCROLL
   ============================================================= */

html { scroll-behavior: smooth; }

/* =============================================================
   2. HERO SEKCIA
   ============================================================= */

.spt-hero-section {
  width:100%;background:linear-gradient(to right,#e6e1db,#dcd5cf);
  padding:100px 20px 160px;position:relative;text-align:center;
  margin-top:40px;min-height:480px;
}
.spt-hero-text {
  max-width:800px;margin:0 auto;color:#333;
  position:relative;top:-68px;z-index:2;
}
.spt-group  { font-weight:600;font-size:16px;text-transform:uppercase;margin-bottom:8px; }
.spt-traits { font-weight:400;font-size:13.5px;margin-bottom:6px; }
.spt-origin { font-weight:300;font-size:13px;color:#565656; }
.spt-hero-image {
  position:absolute;left:50%;transform:translateX(-50%);bottom:-40px;
  width:600px;max-width:calc(100% - 40px);height:auto;
  border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:1;display:block;
}
@media (min-width:601px) and (max-width:900px) {
  .spt-hero-section { padding:42px 16px 190px;min-height:420px; }
  .spt-hero-text    { top:0;margin:0 auto 18px; }
  .spt-hero-image   { width:520px;bottom:-56px; }
}
@media (max-width:600px) {
  .spt-hero-section {
    background:linear-gradient(to right,#e6e1db,#dcd5cf);margin-top:0;
    border-radius:12px;display:grid;grid-template-rows:auto auto;
    row-gap:14px;padding:22px 16px;text-align:center;
    align-items:start;justify-items:center;min-height:auto;
  }
  .spt-hero-text  { position:static;margin:0;max-width:32rem; }
  .spt-group      { font-size:15px; }
  .spt-traits     { font-size:13.5px; }
  .spt-origin     { font-size:12.5px;color:#555; }
  .spt-hero-image { position:static;transform:none;width:100%;max-width:360px;aspect-ratio:4/3;object-fit:cover;border-radius:12px; }
  .spt-hero-section+p,.spt-hero-section+p+p { display:none!important;height:0!important;margin:0!important;padding:0!important; }
  .spt-hero-section+* { margin-top:12px!important; }
}


/* =============================================================
   3. TLDR KARTA
   ============================================================= */

.pan-blog-tldr { font-family:var(--pan-blog-font);color:var(--pan-blog-text);max-width:var(--pan-blog-maxw);margin:16px auto;font-size:var(--pan-blog-font-size); }
.pan-blog-tldr-karta { border:1px solid var(--pan-blog-akcent-border);border-radius:var(--pan-blog-radius);box-shadow:var(--pan-blog-tien);background:linear-gradient(180deg,var(--pan-blog-bg-soft),#fff 60%);overflow:hidden;position:relative; }
.pan-blog-tldr-karta::before { content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pan-blog-akcent);opacity:.8; }
.pan-blog-tldr-hlavicka { padding:14px 16px 12px;background:linear-gradient(180deg,var(--pan-blog-bg-soft),#fff);border-bottom:1px solid var(--pan-blog-border); }
.pan-blog-tldr-znacka { display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--pan-blog-border);color:var(--pan-blog-tlmeny);font-size:var(--pan-blog-font-tyny); }
.pan-blog-tldr-bodka { width:8px;height:8px;border-radius:50%;background:var(--pan-blog-akcent);flex:0 0 8px; }
.pan-blog-tldr-nadpis { font-family:var(--pan-blog-font);margin:10px 0 0;font-size:1.15em;line-height:1.3;font-weight:800;color:var(--pan-blog-text); }
.pan-blog-tldr-telo { padding:14px 16px 16px; }
.pan-blog-tldr-uvod { margin:0 0 12px;color:var(--pan-blog-text);line-height:1.75;font-size:var(--pan-blog-font-size); }
.pan-blog-tldr-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pan-blog-gap);margin:10px 0 14px; }
.pan-blog-tldr-pilier { border:1px solid var(--pan-blog-border);border-radius:calc(var(--pan-blog-radius) - 2px);background:#fff;padding:12px; }
.pan-blog-tldr-pilier strong { display:block;font-weight:700;line-height:1.25;margin-bottom:6px;color:var(--pan-blog-text); }
.pan-blog-tldr-pilier span { display:block;color:var(--pan-blog-tlmeny);line-height:1.65;font-size:var(--pan-blog-font-maly); }
.pan-blog-tldr-upozornenie { border:1px solid var(--pan-blog-border);border-left:5px solid var(--pan-blog-akcent);border-radius:calc(var(--pan-blog-radius) - 2px);background:var(--pan-blog-bg-soft);padding:12px 14px;line-height:1.7;font-size:var(--pan-blog-font-size);color:var(--pan-blog-text); }
.pan-blog-tldr-upozornenie strong { font-weight:700; }
@media (max-width:767px) { .pan-blog-tldr-grid { grid-template-columns:1fr; } }


/* =============================================================
   4. OBSAH ČLÁNKU (TOC)
   ============================================================= */

.shp-custom-tocwrap { font-family:var(--pan-blog-font);color:var(--shp-custom-text);max-width:var(--shp-custom-maxw);margin:16px auto;font-size:var(--shp-custom-font); }
.shp-custom-toc { border:1px solid var(--shp-custom-border);border-radius:var(--shp-custom-radius);background:#fff;box-shadow:var(--shp-custom-shadow);overflow:hidden; }
.shp-custom-toc-head { padding:12px 14px;background:linear-gradient(180deg,var(--shp-custom-soft),#fff);border-bottom:1px solid var(--shp-custom-border);display:flex;align-items:center;justify-content:space-between;gap:10px; }
.shp-custom-toc-title { font-weight:950;letter-spacing:.2px;color:var(--shp-custom-text); }
.shp-custom-toc-hint { color:var(--shp-custom-muted);font-size:var(--shp-custom-font-small);white-space:nowrap; }
.shp-custom-toc-body { padding:10px 14px 12px; }
.shp-custom-toc-body ol { margin:0;padding-left:18px;line-height:1.8; }
.shp-custom-toc-body a { color:var(--shp-custom-text);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2);transition:color .15s,border-color .15s; }
.shp-custom-toc-body a:hover { color:var(--shp-custom-accent);border-bottom-color:var(--shp-custom-accent); }
.shp-custom-anchor-target { scroll-margin-top:16px; }
@media (max-width:740px) {
  .shp-custom-toc-head { padding:11px 12px; }
  .shp-custom-toc-body { padding:10px 12px 12px; }
  .shp-custom-toc-hint { display:none; }
}


/* =============================================================
   5. FAQ
   ============================================================= */

.shp-custom-faq { font-family:var(--pan-blog-font);color:var(--shp-custom-text);max-width:var(--shp-custom-maxw);margin:18px auto; }
.shp-custom-faq-header { border:1px solid var(--shp-custom-border);border-radius:var(--shp-custom-radius);background:linear-gradient(180deg,var(--shp-custom-soft),#fff);box-shadow:var(--shp-custom-shadow);padding:16px 16px 14px;margin:0 0 12px; }
.shp-custom-faq-badge { display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--shp-custom-border);color:var(--shp-custom-muted);font-size:var(--shp-custom-font-small); }
.shp-custom-faq-dot { width:10px;height:10px;border-radius:50%;background:var(--shp-custom-accent);opacity:.9;flex:0 0 10px; }
.shp-custom-faq-title { font-family:var(--pan-blog-font);margin:10px 0 0;font-size:1.2rem;line-height:1.25;font-weight:950;color:var(--shp-custom-text); }
.shp-custom-faq-list { display:flex;flex-direction:column;gap:var(--shp-custom-gap); }
.shp-custom-faq-item { border:1px solid var(--shp-custom-border);border-radius:var(--shp-custom-radius);background:#fff;box-shadow:var(--shp-custom-shadow);overflow:hidden;margin:0;padding:0; }
.shp-custom-faq-item summary { list-style:none;cursor:pointer;padding:14px;display:flex;align-items:flex-start;gap:12px;user-select:none;margin:0!important;border:0!important;background:#fff!important;box-shadow:none!important;outline:none!important; }
.shp-custom-faq-item summary::-webkit-details-marker { display:none; }
.shp-custom-faq-item summary::marker { content:""; }
.shp-custom-faq-item summary::before,.shp-custom-faq-item summary::after { content:none!important;display:none!important; }
.shp-custom-faq-q { font-family:var(--pan-blog-font);font-weight:950;line-height:1.4;letter-spacing:.1px;flex:1;font-size:var(--shp-custom-font);color:var(--shp-custom-text); }
.shp-custom-faq-icon { width:22px;height:22px;margin-top:1px;flex:0 0 22px;border-radius:999px;border:1px solid var(--shp-custom-border);background:var(--shp-custom-soft);display:grid;place-items:center; }
.shp-custom-faq-icon svg { width:14px;height:14px;fill:none;stroke:var(--shp-custom-accent);stroke-width:2.4;stroke-linecap:round;transition:transform .15s; }
.shp-custom-faq-a { padding:0 14px 14px;color:var(--shp-custom-text);line-height:1.75;font-size:var(--shp-custom-font);margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important; }
.shp-custom-faq-a p { margin:0!important;color:var(--shp-custom-text); }
.shp-custom-faq-a p+p { margin-top:10px!important; }
.shp-custom-faq-item[open] summary { background:linear-gradient(180deg,var(--shp-custom-soft),#fff)!important;border-bottom:1px solid var(--shp-custom-border)!important; }
.shp-custom-faq-item[open] .shp-custom-faq-icon svg { transform:rotate(180deg); }
@media (max-width:740px) {
  .shp-custom-faq-header { padding:14px 12px 12px; }
  .shp-custom-faq-item summary { padding:13px 12px; }
  .shp-custom-faq-a { padding:0 12px 12px; }
}


/* =============================================================
   6. ZDROJE
   ============================================================= */

.shp-custom-sources { font-family:var(--pan-blog-font);max-width:var(--shp-custom-maxw);margin:18px auto;color:var(--shp-custom-text); }
.shp-custom-sources-card { border:1px solid var(--shp-custom-border);border-radius:var(--shp-custom-radius);background:#fff;overflow:hidden; }
.shp-custom-sources-head { display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(180deg,var(--shp-custom-soft),#fff);border-bottom:1px solid var(--shp-custom-border); }
.shp-custom-sources-dot { width:10px;height:10px;border-radius:50%;background:var(--shp-custom-accent);opacity:.65;flex:0 0 10px; }
.shp-custom-sources-title { font-family:var(--pan-blog-font);margin:0;font-weight:900;letter-spacing:.15px;font-size:1rem;color:var(--shp-custom-text); }
.shp-custom-sources-body { padding:12px 14px 14px; }
.shp-custom-sources-body ul { margin:0;line-height:1.75;font-size:var(--shp-custom-font-small);padding-left:18px; }
.shp-custom-sources-body li { margin:0 0 8px;color:var(--shp-custom-text); }
.shp-custom-sources-body li:last-child { margin-bottom:0; }
.shp-custom-sources-foot { margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06);color:var(--shp-custom-muted);font-size:var(--shp-custom-font-tiny);line-height:1.6; }
@media (max-width:740px) {
  .shp-custom-sources-head { padding:11px 12px; }
  .shp-custom-sources-body { padding:11px 12px 12px; }
}


/* =============================================================
   7. AUTOR
   ============================================================= */

.author-box-soft { font-family:var(--pan-blog-font);display:flex;align-items:flex-start;gap:14px;background:linear-gradient(180deg,var(--shp-custom-soft),#fff 60%);border:1px solid rgba(107,124,80,.22);border-radius:var(--shp-custom-radius);padding:16px;margin-top:22px;box-shadow:var(--shp-custom-shadow);position:relative;overflow:hidden; }
.author-box-soft::before { content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--shp-custom-accent);opacity:.55; }
.author-avatar-soft { width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 72px;border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 22px rgba(0,0,0,.12);background:#fff; }
.author-text-soft { padding-left:4px;min-width:0; }
.author-text-soft h4 { font-family:var(--pan-blog-font);margin:0 0 8px;font-size:.98rem;font-weight:950;letter-spacing:.2px;color:var(--shp-custom-text); }
.author-text-soft p { margin:0 0 10px;font-size:var(--shp-custom-font-tiny);line-height:1.75;color:var(--shp-custom-text); }
.author-name { display:block;margin-top:10px;font-style:italic;font-weight:700;color:var(--shp-custom-muted);font-size:var(--shp-custom-font-tiny); }
.author-box-soft a { color:inherit;text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.25); }
.author-box-soft a:hover { border-bottom-color:var(--shp-custom-accent); }
@media (max-width:600px) {
  .author-box-soft { flex-direction:column;align-items:flex-start;padding:14px 12px;gap:12px; }
  .author-avatar-soft { width:60px;height:60px;flex-basis:60px; }
}


/* =============================================================
   8. SCROLL TLAČÍTKO
   ============================================================= */

.shp-custom-floatback { position:fixed;left:14px;bottom:14px;z-index:2147483000;font-family:var(--pan-blog-font);opacity:1;transform:translateY(0);pointer-events:auto;transition:opacity .18s ease,transform .18s ease;display:block; }
.shp-custom-floatback.shp-custom-hide { opacity:0;transform:translateY(10px);pointer-events:none; }
.shp-custom-floatback a { display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:var(--shp-custom-accent);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.18);font-weight:700;font-size:var(--pan-blog-font-maly);letter-spacing:.15px;transition:background .2s; }
.shp-custom-floatback a:hover { background:#4a5c36; }
.shp-custom-floatback svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }
@media (max-width:767px) {
  .shp-custom-floatback { left:10px;bottom:10px; }
  .shp-custom-floatback a { padding:9px 12px; }
}


/* =============================================================
   9. TELO ČLÁNKU — TYPOGRAFIA
   ============================================================= */

.pan-blog-kotva { display:block;visibility:hidden;height:0; }

.pan-blog-clanok h2 { font-family:var(--pan-blog-font);font-size:18px;font-weight:700;color:var(--pan-blog-text);margin:32px 0 12px;line-height:1.3; }
.pan-blog-clanok h3 { font-family:var(--pan-blog-font);font-size:15px;font-weight:700;color:var(--pan-blog-text);margin:24px 0 10px;line-height:1.35; }
.pan-blog-clanok p { font-family:var(--pan-blog-font);font-size:var(--pan-blog-font-size);line-height:1.75;color:var(--pan-blog-text);margin:0 0 14px; }
.pan-blog-clanok strong { font-weight:700;color:var(--pan-blog-text); }
.pan-blog-clanok a { color:var(--pan-blog-akcent-tmava);text-decoration:underline;text-underline-offset:2px; }
.pan-blog-clanok a:hover { text-decoration:none; }
.pan-blog-clanok img { max-width:100%;height:auto;border-radius:8px;margin:16px 0;display:block; }
.pan-blog-clanok blockquote { margin:16px 0;padding:12px 16px 12px 20px;border-left:4px solid var(--pan-blog-akcent);background:var(--pan-blog-bg-soft);border-radius:0 8px 8px 0;font-style:italic;color:var(--pan-blog-text);font-size:var(--pan-blog-font-size);line-height:1.7; }
.pan-blog-clanok ul,.pan-blog-clanok ol { font-family:var(--pan-blog-font);font-size:var(--pan-blog-font-size);line-height:1.75;color:var(--pan-blog-text);margin:0 0 14px;padding-left:22px; }
.pan-blog-clanok li { margin-bottom:6px; }
@media (max-width:767px) {
  .pan-blog-clanok h2 { font-size:16px;margin:24px 0 10px; }
  .pan-blog-clanok h3 { font-size:14px; }
}


/* =============================================================
   10. CHARAKTERISTIKA A VLASTNOSTI PLEMENA (.pv-*)
       Srdiečka: Unicode ♥ cez ::before — SVG-safe pre Shoptet
   ============================================================= */

.pv-wrap { font-family:var(--pan-blog-font);max-width:var(--pan-blog-maxw);margin:0 auto;color:var(--pan-blog-text); }
.pv-nadpis { font-size:18px;font-weight:700;margin:0 0 16px;color:var(--pan-blog-text);letter-spacing:.1px; }
.pv-radio { display:none; }
.pv-taby { display:flex;gap:8px;flex-wrap:wrap; }
.pv-tab-label { padding:8px 18px;border-radius:999px;border:1.5px solid var(--pan-blog-border);background:#fff;font-size:13px;font-weight:600;color:var(--pan-blog-tlmeny);cursor:pointer;transition:background .15s,color .15s,border-color .15s;user-select:none;font-family:var(--pan-blog-font); }
.pv-tab-label:hover { border-color:var(--pan-blog-akcent);color:var(--pan-blog-akcent-tmava); }

#pv-t1:checked ~ .pv-taby label[for="pv-t1"],
#pv-t2:checked ~ .pv-taby label[for="pv-t2"],
#pv-t3:checked ~ .pv-taby label[for="pv-t3"],
#pv-t4:checked ~ .pv-taby label[for="pv-t4"] { background:var(--pan-blog-text);color:#fff;border-color:var(--pan-blog-text); }

.pv-karta { background:var(--pan-blog-bg-soft);border:1px solid var(--pan-blog-border);border-radius:var(--pan-blog-radius);padding:24px;margin-top:12px; }
.pv-panel { display:none; }

#pv-t1:checked ~ .pv-karta .pv-p1,
#pv-t2:checked ~ .pv-karta .pv-p2,
#pv-t3:checked ~ .pv-karta .pv-p3,
#pv-t4:checked ~ .pv-karta .pv-p4 { display:block; }

.pv-vlastnost { margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(17,24,39,.08); }
.pv-vlastnost:last-child { margin-bottom:0;padding-bottom:0;border-bottom:none; }
.pv-vlabel { font-size:15px;font-weight:700;margin:0 0 10px;color:var(--pan-blog-text); }
.pv-skala-row { display:flex;align-items:center;gap:10px;margin-bottom:6px; }
.pv-od { font-size:12px;font-weight:600;color:var(--pan-blog-tlmeny);min-width:120px;white-space:nowrap; }
.pv-do { font-size:12px;font-weight:600;color:var(--pan-blog-tlmeny);min-width:120px;text-align:right;white-space:nowrap; }

/* SRDIEČKA — Unicode ♥, bezpečné pre Shoptet (nestriahne span::before) */
.pv-srdiecka { display:flex;gap:4px;flex:1;justify-content:center; }
.pv-s { display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;font-size:18px;flex-shrink:0; }
.pv-s-on  { color:#c47a7a; }
.pv-s-off { color:#e0cece; }

.pv-popis { font-size:12px;font-style:italic;color:var(--pan-blog-tlmeny);margin:0;line-height:1.55; }
.pv-badge-row { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px; }
.pv-badge { display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--pan-blog-font); }
.pv-badge-on { background:#fff;border:1.5px solid var(--pan-blog-akcent);color:var(--pan-blog-akcent-tmava); }
.pv-badge-off { background:#fff;border:1.5px solid var(--pan-blog-border);color:#bbb; }
.pv-sekcia-label { font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pan-blog-tlmeny);margin:0 0 8px; }
.pv-farba-dot { width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1); }

@media (max-width:600px) {
  .pv-od,.pv-do { min-width:80px;font-size:11px; }
  .pv-skala-row { gap:6px; }
  .pv-s { width:18px;height:18px;font-size:15px;line-height:18px; }
  .pv-tab-label { padding:7px 14px;font-size:12px; }
  .pv-karta { padding:16px; }
}


/* =============================================================
   11. HEADER V ČÍSLACH + FÁZY ŽIVOTA (.ph-*)
   ============================================================= */

.ph-wrap { font-family:var(--pan-blog-font);max-width:var(--pan-blog-maxw);margin:0 auto; }
.ph-nadpis { font-size:21px;font-weight:700;text-align:center;letter-spacing:3px;text-transform:uppercase;color:var(--pan-blog-text);margin:0 0 24px; }
.ph-karty { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px; }
.ph-karta { background:#fff;border:.5px solid var(--pan-blog-border);border-radius:var(--pan-blog-radius);padding:18px 20px;display:flex;align-items:center;gap:16px; }
.ph-icon { flex-shrink:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center; }
.ph-icon img { width:60px;height:60px;object-fit:contain; }
.ph-label { font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--pan-blog-tlmeny);margin:0 0 5px; }
.ph-hodnota { font-size:13px;color:var(--pan-blog-text);margin:0;line-height:1.65; }
.ph-fazy { background:#fff;border:.5px solid var(--pan-blog-border);border-radius:var(--pan-blog-radius);padding:20px 24px; }
.ph-fazy-label { font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--pan-blog-tlmeny);margin:0 0 14px; }
.ph-timeline { display:flex;border-radius:8px;overflow:hidden;height:46px; }
.ph-faza { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px; }
.ph-faza-junior    { flex:0 0 18%;background:#e8edde;border-right:2px solid #fff; }
.ph-faza-dospelost { flex:0 0 55%;background:#c0cc9a;border-right:2px solid #fff; }
.ph-faza-senior    { flex:1;background:#6b7c50; }
.ph-faza-nazov { font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; }
.ph-faza-junior    .ph-faza-nazov { color:#3d4a2a; }
.ph-faza-dospelost .ph-faza-nazov { color:#2e3a1e; }
.ph-faza-senior    .ph-faza-nazov { color:#fff; }
.ph-faza-roky { font-size:10px;line-height:1.2; }
.ph-faza-junior    .ph-faza-roky { color:#3d4a2a; }
.ph-faza-dospelost .ph-faza-roky { color:#2e3a1e; }
.ph-faza-senior    .ph-faza-roky { color:rgba(255,255,255,.8); }
@media (max-width:600px) {
  .ph-karty          { grid-template-columns:1fr; }
  .ph-nadpis         { font-size:17px;letter-spacing:2px; }
  .ph-faza-junior    { flex:0 0 20%; }
  .ph-faza-dospelost { flex:0 0 52%; }
}


/* =============================================================
   12. ALTERNATÍVNE PLEMENÁ (.ap-*)
   ============================================================= */

.ap-wrap { font-family:var(--pan-blog-font);max-width:var(--pan-blog-maxw);margin:0 auto;color:var(--pan-blog-text); }
.ap-nadpis { font-size:18px;font-weight:700;margin:0 0 20px;color:var(--pan-blog-text); }
.ap-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.ap-karta { background:#fff;border:.5px solid var(--pan-blog-border);border-radius:var(--pan-blog-radius);padding:18px 20px; }
.ap-header { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.ap-vlajka { font-size:20px;line-height:1;flex-shrink:0; }
.ap-nazov { font-size:15px;font-weight:700;color:var(--pan-blog-text);margin:0;flex:1; }
.ap-fci { font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--pan-blog-tlmeny);background:#f3f4f6;padding:2px 7px;border-radius:999px;flex-shrink:0; }
.ap-popis { font-size:13px;color:#374151;line-height:1.6;margin:0 0 12px; }
.ap-metriky { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px; }
.ap-metrika { font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--pan-blog-bg-soft);color:#4a5c36;border:.5px solid #b8c89a;font-family:var(--pan-blog-font); }
.ap-divider { height:.5px;background:rgba(17,24,39,.08);margin:12px 0; }
.ap-rozdiel-label,.ap-koho-label { font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pan-blog-tlmeny);margin:0 0 4px; }
.ap-rozdiel { font-size:12px;font-style:italic;color:#374151;margin:0 0 10px;line-height:1.5; }
.ap-koho { font-size:12px;color:#374151;margin:0;line-height:1.5; }
@media (max-width:600px) { .ap-grid { grid-template-columns:1fr; } }


/* =============================================================
   PRÍSTUPNOSŤ
   ============================================================= */

@media (prefers-reduced-motion:reduce) {
  .shp-custom-floatback,
  .shp-custom-faq-icon svg { transition:none!important; }
}