/* ==========================================================================
   Chocolenka – blogové komponenty (chb-*)            verze 1 | 2026-10-19
   Vše je scopované pod obalák .chb-clanek → nic neovlivní zbytek šablony Classic.
   Fonty (Source Sans 3 / Exo 2) dodává Shoptet, zde se NEnastavují.
   Barvy: hnědá #603914 · nadpisy #321b0d · text #3b281b · tlumený #75655a
          oranžová CTA #d9801a / hover #b96512 · krém #fbf8f2 / #fbf7ef · rámeček #e8dccf
   ========================================================================== */

.chb-clanek{
  --chb-ink:#321b0d; --chb-brown:#603914; --chb-text:#3b281b; --chb-muted:#75655a;
  --chb-orange:#d9801a; --chb-orange-hover:#b96512; --chb-gold:#d99a35;
  --chb-cream:#fbf8f2; --chb-cream-2:#fbf7ef; --chb-line:#e8dccf; --chb-white:#fff;
  --chb-shadow:0 10px 26px rgba(72,43,24,.09);
  --chb-radius:20px;
  max-width:860px; margin:0 auto; color:var(--chb-text);
  font-size:17px; line-height:1.72;
}
.chb-clanek *,.chb-clanek *::before,.chb-clanek *::after{box-sizing:border-box}
.chb-clanek p{margin:0 0 16px}
.chb-clanek h2{margin:52px 0 16px; color:var(--chb-ink); font-size:clamp(23px,3vw,30px); line-height:1.25; font-weight:700; scroll-margin-top:120px}
.chb-clanek h3{margin:30px 0 10px; color:var(--chb-brown); font-size:clamp(19px,2.3vw,22px); line-height:1.3; font-weight:700; scroll-margin-top:120px}
.chb-clanek a{color:var(--chb-brown); text-decoration-color:var(--chb-gold)}
.chb-clanek a:hover{color:var(--chb-orange-hover)}
.chb-clanek img{max-width:100%; height:auto}

/* --- Štítek (pilulka) – v tip/info boxech -------------------------------- */
.chb-clanek .chb-label{display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:999px; background:var(--chb-orange); color:#fff; font-size:12px; line-height:1.4; font-weight:700; letter-spacing:1px; text-transform:uppercase}
.chb-clanek .chb-info .chb-label{background:var(--chb-brown)}

/* --- 1) Úvodní box (perex) ----------------------------------------------- */
.chb-clanek .chb-perex{margin:0 0 24px; padding:32px 36px; border:1px solid var(--chb-line); border-radius:var(--chb-radius); background:var(--chb-cream)}
.chb-clanek .chb-perex__lead{margin:0 0 14px; color:var(--chb-ink); font-size:19px; line-height:1.65; font-weight:600}
.chb-clanek .chb-perex p:last-child{margin-bottom:0}

/* --- 2) Obsah článku (TOC) ------------------------------------------------ */
.chb-clanek .chb-toc{margin:28px 0 36px; padding:26px 36px; border:1px solid var(--chb-line); border-radius:var(--chb-radius); background:#fff; box-shadow:var(--chb-shadow)}
.chb-clanek .chb-toc__title{margin:0 0 12px; color:var(--chb-ink); font-size:20px; line-height:1.3; font-weight:700}
.chb-clanek .chb-toc ol{margin:0; padding:0 0 0 22px; color:var(--chb-orange); font-size:16px; line-height:1.5}
.chb-clanek .chb-toc li{margin:0 0 8px; padding-left:4px}
.chb-clanek .chb-toc li:last-child{margin-bottom:0}
.chb-clanek .chb-toc a{color:var(--chb-brown); font-weight:600; text-decoration:none}
.chb-clanek .chb-toc a:hover{color:var(--chb-orange-hover); text-decoration:underline}
.chb-clanek .chb-toc[data-chb-auto]:empty{display:none}

/* --- 3) Tip box ------------------------------------------------------------ */
.chb-clanek .chb-tip{margin:28px 0; padding:22px 32px 22px 26px; border-left:5px solid var(--chb-orange); border-radius:0 var(--chb-radius) var(--chb-radius) 0; background:var(--chb-cream-2)}
.chb-clanek .chb-tip p:last-child{margin-bottom:0}

/* --- 4) Info box ----------------------------------------------------------- */
.chb-clanek .chb-info{margin:24px 0; padding:24px 32px; border:1px solid var(--chb-line); border-radius:var(--chb-radius); background:#fffdf9}
.chb-clanek .chb-info p:last-child{margin-bottom:0}
.chb-clanek .chb-info ul{margin:0; padding:0 0 0 20px}
.chb-clanek .chb-info li{margin:0 0 10px}
.chb-clanek .chb-info li::marker{color:var(--chb-orange)}
.chb-clanek .chb-info li strong{color:var(--chb-brown)}

/* --- Karty bodů (výhody, 2–4 položky) ------------------------------------- */
.chb-clanek .chb-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 8px}
.chb-clanek .chb-card{margin:0; padding:18px 20px; border:1px solid var(--chb-line); border-radius:16px; background:#fff; transition:border-color .2s, box-shadow .2s}
.chb-clanek .chb-card:hover{border-color:var(--chb-gold); box-shadow:var(--chb-shadow)}
.chb-clanek .chb-card p{margin:0}
.chb-clanek .chb-card__title{display:block; margin:0 0 4px; color:var(--chb-brown); font-size:17px}

/* --- Číslované kroky -------------------------------------------------------- */
.chb-clanek .chb-steps{counter-reset:chb-step; margin:18px 0}
.chb-clanek .chb-step{position:relative; margin:16px 0; padding:20px 22px 20px 82px; border:1px solid var(--chb-line); border-radius:16px; background:#fff; counter-increment:chb-step}
.chb-clanek .chb-step::before{content:counter(chb-step); position:absolute; left:22px; top:20px; width:44px; height:44px; border-radius:50%; background:var(--chb-orange); color:#fff; font-size:20px; line-height:44px; font-weight:700; text-align:center}
.chb-clanek .chb-step h3{margin:4px 0 8px}
.chb-clanek .chb-step p{margin:0}

/* --- 5) Tabulka (responzivní obal) ---------------------------------------- */
.chb-clanek .chb-table-wrap{margin:24px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--chb-line); border-radius:16px}
.chb-clanek .chb-table{width:100%; min-width:480px; margin:0; border-collapse:collapse; font-size:15px; line-height:1.5}
.chb-clanek .chb-table caption{padding:12px 16px; caption-side:top; text-align:left; color:var(--chb-ink); font-weight:700; background:var(--chb-cream)}
.chb-clanek .chb-table th{padding:12px 16px; background:var(--chb-ink); color:#fff; text-align:left; font-weight:700}
.chb-clanek .chb-table td{padding:12px 16px; border-top:1px solid var(--chb-line); vertical-align:top}
.chb-clanek .chb-table tbody tr:nth-child(odd){background:#fffdf9}
.chb-clanek .chb-table tbody tr:hover{background:var(--chb-cream-2)}

/* --- 6) Produktové karty (bez cen) ---------------------------------------- */
/* a) jeden produkt v toku textu */
.chb-clanek .chb-product{display:flex; align-items:center; gap:20px; margin:20px 0; padding:14px; border:1px solid var(--chb-line); border-radius:18px; background:#fff; box-shadow:var(--chb-shadow); transition:border-color .2s, transform .2s}
.chb-clanek .chb-product:hover{border-color:var(--chb-gold); transform:translateY(-2px)}
.chb-clanek .chb-product__img{flex:0 0 150px; display:block; border-radius:12px; overflow:hidden; background:#fff}
.chb-clanek .chb-product__img img{display:block; width:150px; height:150px; object-fit:contain}
.chb-clanek .chb-product__body{flex:1 1 auto; min-width:0}
.chb-clanek .chb-product__kicker{margin:0 0 2px; color:var(--chb-orange); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase}
.chb-clanek .chb-product__name{margin:0; font-size:18px; line-height:1.35; font-weight:700}
.chb-clanek .chb-product__name a{color:var(--chb-ink); text-decoration:none}
.chb-clanek .chb-product__name a:hover{color:var(--chb-orange-hover)}
.chb-clanek .chb-product__note{margin:4px 0 0; color:var(--chb-muted); font-size:15px; line-height:1.5}
/* b) mřížka 2–4 produktů */
.chb-clanek .chb-products{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0}
.chb-clanek .chb-products .chb-product{flex-direction:column; align-items:stretch; margin:0; padding:12px 12px 18px; text-align:center}
.chb-clanek .chb-products .chb-product__img{flex:none}
.chb-clanek .chb-products .chb-product__img img{width:100%; height:220px}
.chb-clanek .chb-products .chb-product__body{padding:4px 6px 0}

/* --- Tlačítka --------------------------------------------------------------- */
.chb-clanek .chb-btn{display:inline-block; margin:6px; padding:13px 26px; border:1px solid var(--chb-orange); border-radius:999px; background:var(--chb-orange); color:#fff; font-size:16px; line-height:1.2; font-weight:700; text-decoration:none; transition:background .2s, border-color .2s, color .2s}
.chb-clanek .chb-btn:hover{background:var(--chb-orange-hover); border-color:var(--chb-orange-hover); color:#fff; text-decoration:none}
.chb-clanek .chb-btn--small{margin:10px 0 0; padding:9px 18px; border-color:var(--chb-brown); background:#fff; color:var(--chb-brown); font-size:14px}
.chb-clanek .chb-btn--small:hover{border-color:var(--chb-orange); background:var(--chb-orange); color:#fff}
.chb-clanek .chb-btn--ghost{background:transparent; border-color:var(--chb-cream); color:var(--chb-cream)}
.chb-clanek .chb-btn--ghost:hover{background:var(--chb-cream); border-color:var(--chb-cream); color:var(--chb-ink)}

/* --- Tmavý zvýrazněný box --------------------------------------------------- */
.chb-clanek .chb-highlight{margin:30px 0; padding:30px 36px; border-radius:var(--chb-radius); background:var(--chb-ink); color:var(--chb-cream)}
.chb-clanek .chb-highlight h2,.chb-clanek .chb-highlight h3{margin-top:0; color:#fff}
.chb-clanek .chb-highlight strong{color:#fff}
.chb-clanek .chb-highlight a:not(.chb-btn){color:#f6c27a}
.chb-clanek .chb-highlight .chb-product a:not(.chb-btn){color:var(--chb-ink)}
.chb-clanek .chb-highlight .chb-product{box-shadow:none}

/* --- 7) CTA blok na konci ---------------------------------------------------- */
.chb-clanek .chb-cta{margin:52px 0 10px; padding:40px 48px; border-radius:24px; background-color:var(--chb-ink); background-image:linear-gradient(135deg,#321b0d 0%,#603914 100%); color:var(--chb-cream); text-align:center}
.chb-clanek .chb-cta h2{margin:0 0 14px; color:#fff}
.chb-clanek .chb-cta p{max-width:640px; margin:0 auto 20px}
.chb-clanek .chb-cta a:not(.chb-btn){color:#f6c27a}
.chb-clanek .chb-cta__buttons{margin:0 !important}

/* --- Volitelné: citát odborníka / shrnutí ---------------------------------- */
.chb-clanek .chb-quote{margin:32px 0; padding:28px 36px; border-radius:var(--chb-radius); background:var(--chb-cream)}
.chb-clanek .chb-quote blockquote{margin:0 0 16px; padding:0; border:0; color:var(--chb-ink); font-size:19px; line-height:1.6; font-style:italic}
.chb-clanek .chb-quote__author{display:flex; align-items:center; gap:12px; margin:0}
.chb-clanek .chb-quote__author img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.chb-clanek .chb-quote__author span{display:block; color:var(--chb-muted); font-size:14px}
.chb-clanek .chb-summary{margin:32px 0; padding:24px 32px; border:2px solid var(--chb-gold); border-radius:var(--chb-radius); background:#fff}
.chb-clanek .chb-summary p:last-child{margin-bottom:0}

/* --- Mobil ------------------------------------------------------------------- */
@media (max-width:640px){
  .chb-clanek{font-size:16px}
  .chb-clanek .chb-perex,.chb-clanek .chb-toc,.chb-clanek .chb-info,.chb-clanek .chb-highlight,.chb-clanek .chb-quote,.chb-clanek .chb-summary{padding:20px; border-radius:16px}
  .chb-clanek .chb-tip{padding:18px 18px 18px 18px}
  .chb-clanek .chb-perex__lead{font-size:17px}
  .chb-clanek .chb-cards{grid-template-columns:1fr}
  .chb-clanek .chb-step{padding:18px 18px 18px 70px}
  .chb-clanek .chb-step::before{left:16px; top:18px; width:40px; height:40px; line-height:40px; font-size:18px}
  .chb-clanek .chb-product{flex-direction:column; align-items:stretch; text-align:center}
  .chb-clanek .chb-product__img{flex:none}
  .chb-clanek .chb-product__img img{width:100%; height:200px}
  .chb-clanek .chb-products{grid-template-columns:1fr}
  .chb-clanek .chb-cta{padding:28px 20px; border-radius:18px}
  .chb-clanek .chb-cta .chb-btn{display:block; margin:10px 0}
}
@media (prefers-reduced-motion:reduce){
  .chb-clanek *{transition:none !important}
  .chb-clanek .chb-product:hover{transform:none}
}