/* ============================================================================
   MUJVIT 2.0, Brand CSS (mobile-first)
   Vít 20.5.2026, Krev style, EFSA-safe copy, Poppins, brand colors
   ============================================================================ */

/* Poppins SELF-HOSTED (Vit 2.7.2026 - GDPR + rychlost, misto Google Fonts CDN) */
/* poppins-latin-ext-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/poppins-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/poppins-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/poppins-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/poppins-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/poppins-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* poppins-latin-ext-800-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/poppins-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-800-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/poppins-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


:root {
  /* Brand colors (z MUJVIT_BRAND skill) */
  --brand-primary: #289546;
  --brand-primary-soft: #E8F5E9;
  --brand-primary-dark: #1F7037;
  --brand-warm: #F8961F;
  --brand-orange: #EF6C00;
  --brand-yellow: #FBC02D;
  --brand-text: #1A2332;
  --brand-text-soft: #6B7785;
  --brand-text-medium: #4A5662;
  --brand-gray-1: #E5E7EB;
  --brand-gray-2: #9CA3AF;
  --brand-gray-3: #6B7280;
  --brand-cream: #FFF9F0;
  --brand-red: #EE2E27;

  /* Spacing & radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-cta: 0 6px 18px rgba(40,149,70,0.28);

  --container-max: 1140px;
  --container-narrow: 720px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
/* Vít 2.7.2026: MOBILNÍ FIX - žádný vodorovný scroll (jako GymBeam: jde jen nahoru/dolů). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* CLIP místo HIDDEN: zabrání bočnímu scrollu, ale NEROZBÍJÍ position:sticky (spodní lišty). */
html, body { max-width: 100%; overflow-x: clip; }
img, picture, video, canvas, svg { max-width: 100%; }
/* Siroke tabulky (clanky krev): vlastni vodorovny scroll UVNITR tabulky, ať je globální overflow-x:hidden neořízne. */
main table:not(.compose-table):not(.compare-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--brand-text);
  background: var(--brand-cream);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* Vít 26.5.2026: FOTKY VŽDY proporcionálně (zachovat aspect ratio), nikdy se nesmí jen horizontálně/vertikálně squashovat.
   Když má parent málo místa → obrázek se ZMENŠÍ proporcionálně, ne deformuje. */
picture { display: block; }
picture > img { max-width: 100%; height: auto; object-fit: contain; }
a { color: var(--brand-primary); text-decoration: none; }@media (hover: hover) and (pointer: fine){
a:hover { text-decoration: underline; }}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 16px; /* iOS no auto-zoom */ }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }

/* === Layout containers === */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) {
  .container { padding: 0 24px; }
  .container-narrow { padding: 0 24px; }
}

/* === Top bar (Doprava ZDARMA) === */
.topbar {
  background: var(--brand-primary); color: #fff;
  font-size: 13.5px; font-weight: 600;
  text-align: center; padding: 8px 14px;
  letter-spacing: 0.2px;
}
.topbar strong { color: #fff; font-weight: 800; }
.topbar .topbar-sep { opacity: 0.5; margin: 0 2px; }
.topbar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-short { display: none; }
@media (max-width: 560px) {
  .topbar { font-size: 11.5px; padding: 7px 12px; }
  .topbar-full { display: none; }
  .topbar-short { display: inline; }
}

/* === Header === */
/* Vít 21.5.2026: wrapper musí být display:contents, jinak je sticky header
   uvězněný v malém divu a odscrolluje hned pryč */
#site-header { display: contents; }
/* FOUC/flicker fix (Vít 9.6.): rezervuj místo hlavičce a patičce, dokud je JS nedotáhne (loadComponent), ať obsah nenaskakuje. Projeví se hlavně s vypnutou cache / otevřeným DevTools. :empty platí jen dokud je div prázdný; po vložení obsahu se pravidlo vypne. */
#site-header:empty { display: block; min-height: 106px; background: #fff; }
#site-footer:empty { display: block; min-height: 470px; background: var(--brand-text, #1A2332); }
@media (max-width: 760px) {
  #site-header:empty { min-height: 124px; }
  #site-footer:empty { min-height: 1100px; }
}
.site-header {
  background: white;
  border-bottom: 1px solid var(--brand-gray-1);
  position: sticky; top: 0; z-index: 100;
  transition: transform 0.28s ease;
}
/* hide-on-scroll (Vít 2.7.2026): PC i mobil stejně - scroll dolů schová, scroll nahoru hned ukáže (řeší JS) */
html.header-hidden .site-header { transform: translateY(-100%); }
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; gap: 6px; position: relative;
  max-width: var(--container-max); margin: 0 auto;
}
.site-logo img { height: 34px; width: auto; }
/* Vít 7.6.: mobil, hamburger + logo vlevo vedle sebe, košík+profil vpravo (GymBeam styl) */
.site-logo { margin-right: auto; }
.site-header-actions .login-btn { order: 1; }
.site-header-actions .cart-link { order: 2; }
.site-nav { display: none; }
.site-nav-mobile-toggle {
  background: none; border: none; padding: 8px;
  margin-left: -8px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center; align-items: center;
  cursor: pointer;
}
.site-nav-mobile-toggle span {
  width: 24px; height: 2px; background: var(--brand-text);
  border-radius: 2px; transition: all 0.25s;
}
.site-nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.site-nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.site-nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.site-header-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; margin-right: -7px;
}
/* Vít 21.5.2026: levá skupina headeru, logo + Přihlásit */
.site-header-left { display: flex; align-items: center; gap: 10px; }
.cart-link {
  position: relative; padding: 8px 10px;
  color: var(--brand-text); display: flex; align-items: center; gap: 0;
}
.cart-link-icon { font-size: 20px; line-height: 1; }
.cart-badge {
  background: var(--brand-warm); color: var(--brand-text);
  border-radius: 999px; min-width: 18px; height: 18px;
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid #fff;
  margin-left: -11px; margin-top: -12px; position: relative; z-index: 2;
}
.login-btn {
  padding: 7px; border-radius: 8px; border: none;
  color: var(--brand-text); display: inline-flex; align-items: center;
  background: transparent;
}
.login-btn svg { display: block; }@media (hover: hover) and (pointer: fine){
.login-btn:hover { background: var(--brand-gray-1); }}
/* Profil/login SKRYTÝ do spuštění webu - profil děláme až po launchi (Vít 28.6.). Znovu zapnout = smazat tyto 2 řádky. */
.login-btn, .login-btn-nav { display: none !important; }
.site-nav-mobile-account a[href="prihlaseni.html"] { display: none !important; }

/* Vít 3.7.2026: mobil - logo VLEVO, košík + hamburger VPRAVO (hamburger úplně vpravo pro palec) */
@media (max-width: 979px) {
  .site-logo { order: 1; margin-right: auto; }
  .site-header-actions { order: 2; margin-left: 0; margin-right: 2px; }
  .site-nav-mobile-toggle { order: 3; margin-left: 0; margin-right: -6px; }
}
/* Mobile nav drawer, Vít 3.7.2026: otevírá se ZPRAVA (ovládání jednou rukou) */
.site-nav-mobile {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 86%; max-width: 380px;
  background: white; z-index: 200;
  padding: 70px 20px 30px;
  overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform 0.3s ease;
}
.site-nav-mobile.open { display: block; transform: translateX(0); }
.site-nav-mobile-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-gray-1); color: var(--brand-text);
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.site-nav-mobile-group { margin-bottom: 22px; }
.site-nav-mobile-group-h {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--brand-warm); margin: 0 0 10px;
}
.site-nav-mobile a {
  display: block; padding: 12px 0;
  color: var(--brand-text); font-weight: 600; font-size: 15.5px;
  border-bottom: 1px solid var(--brand-gray-1);
}@media (hover: hover) and (pointer: fine){
.site-nav-mobile a:hover { color: var(--brand-primary); text-decoration: none; }}

/* === Vít 21.5.2026 v3: nový kompaktní mobile drawer === */
.site-nav-mobile-primary {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 22px;
}
/* Mobile drawer primary CTA, Vít 21.5.2026 v3: hranaté, BEZ emoji, sjednoceno s desktop nav */
.nav-prim-item {
  display: flex !important; align-items: center; gap: 12px;
  padding: 14px 18px !important;
  border: 2px solid var(--brand-gray-1) !important;
  border-radius: 12px;
  background: white;
  text-decoration: none;
  transition: all 0.18s;
}
.nav-prim-item:first-child {
  background: var(--brand-primary); color: white !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 12px rgba(40,149,70,0.22);
}
.nav-prim-item:first-child strong, .nav-prim-item:first-child small { color: white; }@media (hover: hover) and (pointer: fine){
.nav-prim-item:hover {
  border-color: var(--brand-primary) !important;
  transform: translateY(-1px);
}}
.nav-prim-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; flex: 1; }
.nav-prim-text strong { font-size: 15.5px; font-weight: 800; color: var(--brand-text); }
.nav-prim-text small { font-size: 12.5px; font-weight: 500; color: var(--brand-text-soft); }

.site-nav-mobile-section {
  border-bottom: 1px solid var(--brand-gray-1);
  margin-bottom: 0;
}
.site-nav-mobile-section > summary {
  list-style: none; cursor: pointer;
  padding: 14px 4px;
  font-weight: 700; font-size: 14px;
  color: var(--brand-text);
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav-mobile-section > summary::-webkit-details-marker { display: none; }
.site-nav-mobile-section > summary::after {
  content: '▾';
  color: var(--brand-text-soft);
  transition: transform 0.2s;
}
.site-nav-mobile-section[open] > summary::after { transform: rotate(180deg); }
.site-nav-mobile-section a {
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  color: var(--brand-text) !important;
  border-radius: 10px;
  margin: 2px 0;
  transition: background 0.15s, color 0.15s;
}@media (hover: hover) and (pointer: fine){
.site-nav-mobile-section a:hover,
.site-nav-mobile-section a:focus,
.site-nav-mobile-section a:active,
.site-nav-mobile-section a.is-current,
.site-nav-mobile-section a[aria-current="page"] {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}}
.site-nav-mobile-section a:last-child { margin-bottom: 8px; }

.site-nav-mobile-account {
  display: flex; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--brand-gray-1);
}
.site-nav-mobile-account a {
  flex: 1; text-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px !important;
  border: 1.5px solid var(--brand-gray-1) !important;
  border-radius: 999px !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--brand-text) !important;
  border-bottom: 1.5px solid var(--brand-gray-1) !important;
}
.nav-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 150;
}
.nav-backdrop.open { display: block; }

@media (min-width: 980px) {
  /* nav (vč. profilu) má margin-left:auto → celá skupina se přilepí doprava
     ke košíku; při roztahování okna roste jen mezera mezi logem a profilem */
  .site-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  .site-nav-mobile-toggle { display: none; }
  /* desktop, logo zpět do toku vlevo (na mobilu je absolutně vystředěné) */
  .site-logo { position: static; transform: none; top: auto; left: auto; margin-right: 0; }
  /* desktop, jen nav má margin-left:auto (jinak se s actions dělí prostor
     a menu skončí uprostřed). Actions navazují hned za nav vpravo. */
  .site-header-actions { margin-left: 0; }
  /* desktop, profil je v nav vlevo (před „O nás"); v actions zůstává jen košík */
  .site-header-actions .login-btn { display: none; }
  .site-nav > a, .site-nav-item > button, .site-nav-item > a {
    padding: 10px 14px; font-size: 14.5px; font-weight: 600;
    color: var(--brand-text); border-radius: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; cursor: pointer;
  }@media (hover: hover) and (pointer: fine){
  .site-nav > a:hover, .site-nav-item > button:hover, .site-nav-item > a:hover {
    background: var(--brand-primary-soft); color: var(--brand-primary);
    text-decoration: none;
  }}
  /* Vít 21.5.2026 v2: nav CTA = ořezaná verze mega-CTA, hranaté (16px), žádné emoji */
  /* Vyplnit dotazník = PRIMÁRNÍ CTA */
  .site-nav > a.nav-cta-primary {
    background: var(--brand-primary) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    box-shadow: 0 4px 12px rgba(40,149,70,0.22);
    transition: all 0.18s;
    border: 2px solid var(--brand-primary) !important;
  }@media (hover: hover) and (pointer: fine){
  .site-nav > a.nav-cta-primary:hover {
    transform: translateY(-1px);
    background: var(--brand-primary-dark, #1f6b39) !important;
    border-color: var(--brand-primary-dark, #1f6b39) !important;
    box-shadow: 0 8px 20px rgba(40,149,70,0.30);
    color: white !important;
  }}
  /* Sestavit balíček = SEKUNDÁRNÍ CTA, outline pill */
  .site-nav > a.nav-cta-secondary {
    background: white !important;
    border: 2px solid var(--brand-gray-1) !important;
    color: var(--brand-text) !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    transition: all 0.18s;
  }@media (hover: hover) and (pointer: fine){
  .site-nav > a.nav-cta-secondary:hover,
  .site-nav > a.nav-cta-secondary:focus,
  .site-nav > a.nav-cta-secondary:focus-visible,
  .site-nav > a.nav-cta-secondary:active,
  .site-nav > a.nav-cta-secondary.is-current {
    background: #fff !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text) !important;
    box-shadow: 0 6px 16px rgba(40,149,70,0.12);
  }}
  /* Krevní testy = běžný text link (žádný pill ani box) */
  .site-nav > a.nav-link { font-weight: 600; }
  .site-nav-item { position: relative; }
  .site-nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: white; border: 1px solid var(--brand-gray-1);
    border-radius: 12px; padding: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 240px; z-index: 50;
  }@media (hover: hover) and (pointer: fine){
  .site-nav-item:hover .site-nav-dropdown { display: block; }}
  .site-nav-dropdown a {
    display: block; padding: 10px 14px; font-size: 14px;
    color: var(--brand-text); font-weight: 500;
    border-radius: 8px;
  }@media (hover: hover) and (pointer: fine){
  .site-nav-dropdown a:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }}
}

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 24px;
  border-radius: var(--radius-pill); font-weight: 700;
  font-size: 15px; cursor: pointer;
  transition: all 0.15s; text-decoration: none !important;
  border: none; line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: var(--brand-primary); color: white;
  box-shadow: var(--shadow-cta);
}@media (hover: hover) and (pointer: fine){
.btn-primary:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-1px);
  color: white;
}}
.btn-primary:active { background: var(--brand-primary-dark); color: white; transform: translateY(1px); }
.btn-secondary {
  background: white; color: var(--brand-text);
  border: 1.5px solid var(--brand-gray-1);
}@media (hover: hover) and (pointer: fine){
.btn-secondary:hover {
  border-color: var(--brand-text); background: #fafafa;
  color: var(--brand-text);
}}
.btn-mega:active, .btn-mega-primary:active, .btn-mega-secondary:active { transform: translateY(1px); }
.btn-large { padding: 16px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* === Sections === */
section { padding: 40px 0; }
@media (min-width: 720px) { section { padding: 60px 0; } }

.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--brand-warm); text-transform: uppercase;
  margin-bottom: 14px; display: inline-block;
}
.section-h2 {
  font-size: 31px; font-weight: 800; color: var(--brand-text);
  margin-bottom: 14px; letter-spacing: -0.5px;
}

/* === Vít 21.5.2026: global H1 safety net, žádné overflow textu napříč webem === */
h1 {
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
@media (max-width: 380px) {
  /* Ultra-mobile guard, extrémně úzké android phones */
  h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.15; } /* Vit 23.7.: vetsi + plynule (drive clamp 24/7vw/32 = H1 skakal dolu a byl maly <=380); sedi s hero clamp(34,9vw,44) */
}

/* === Vít 21.5.2026 v8: VŠECHNA TLAČÍTKA HRANATÁ napříč webem ===
   Globální override všech pill (999px) buttons → hranatý 12px.
   Vít: "všechny tlačítka ať jsou hranaté"
   Aplikuje se i přes inline styly díky vysoké specificitě.
   =============================================================== */
.btn,
.btn-warm, .btn-primary, .btn-secondary, .btn-large,
button.btn-primary, button.btn-warm, button.btn-secondary,
a.btn, a.btn-primary, a.btn-warm, a.btn-secondary,
.basket-cta, .bm-cta, .basket-add-another,
.dotv2-start-btn, .dotv2-alt-btn,
.btn-mega, .btn-mega-primary, .btn-mega-secondary,
.cart-redirect-btn, .pricing-cta-btn,
.cv3-cta, .cv3-back-btn, .cv3-next-btn,
.qty-warn-btn, .qty-warn-confirm, .qty-warn-cancel,
.login-btn, .reviews-preview-cta,
.faq-q, .step-cta, .feature-cta,
.btn-row > button, .btn-row > a,
input[type="submit"], button[type="submit"] {
  border-radius: 12px !important;
}
/* Větší tlačítka, lehce větší rádius */
.btn-large, .btn-mega, .btn-mega-primary, .btn-mega-secondary,
.dotv2-start-btn-hero, .dotv2-start-btn-big {
  border-radius: 14px !important;
}
/* Výjimky, pill style chceme zachovat */
.cart-badge, .bm-bag-badge,                    /* malé number badge */
.cat-tab, .quick-nav-pill,                     /* sticky tab navigace */
.basket-head, .bm-cta-icon,                     /* pill header sticky basket */
.dot-hero-stars, .stars,                       /* star ratings */
.google-badge, .dotv2-google-badge, .krev-google-badge {
  border-radius: 999px !important;
}

/* ========================================================================
   MEGA CTA BUTTONS, sjednocený standard napříč VŠEMI stránkami
   (původně v index.html inline → globální 21.5.2026)
   Vít: "ty tlačítka takto se mi líbí a chci je mít všude"
   ======================================================================== */
.btn-mega {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-radius: 16px;
  font-family: inherit; font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease-out;
  min-height: 64px; min-width: 240px;
  flex: 1 1 240px; max-width: 360px;
}
.btn-mega-icon img { display: block; height: 36px; width: auto; max-width: 26px; }
.btn-mega-text strong { font-size: 16px; line-height: 1.2; font-weight: 800; }
.btn-mega-primary {
  background: var(--brand-primary); color: white;
  box-shadow: 0 8px 22px rgba(40,149,70,0.28);
}@media (hover: hover) and (pointer: fine){
.btn-mega-primary:hover {
  background: var(--brand-primary-dark, #1f6b39); transform: translateY(-2px);
  color: white; text-decoration: none;
  box-shadow: 0 12px 30px rgba(40,149,70,0.35);
}}
.btn-mega-primary strong, .btn-mega-primary small { color: white; }
.btn-mega-secondary {
  background: white; color: var(--brand-text);
  border: 2px solid var(--brand-gray-1);
}@media (hover: hover) and (pointer: fine){
.btn-mega-secondary:hover {
  border-color: var(--brand-primary); color: var(--brand-primary);
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 22px rgba(40,149,70,0.12);
}}
.btn-mega-secondary strong { color: var(--brand-text); }
.btn-mega-secondary small { color: var(--brand-text-soft); }
.btn-mega-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: stretch;
  margin: 18px 0 4px;
}
@media (max-width: 979px) {
  .btn-mega { width: 100%; max-width: none; justify-content: center; }
  .btn-mega-row { flex-direction: column; align-items: stretch; }
  .btn-mega-text { text-align: center; }
}
.section-lede {
  font-size: 16px; color: var(--brand-text-soft);
  margin-bottom: 28px; max-width: 600px;
}
@media (min-width: 720px) {
  .section-h2 { font-size: 36px; margin-bottom: 18px; }
  .section-lede { font-size: 17px; }
}
@media (min-width: 980px) {
  .section-h2 { font-size: 42px; }
}

/* === Cards === */
.card {
  background: white;
  border: 1px solid var(--brand-gray-1);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-feature {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: white; border: 1px solid var(--brand-gray-1);
  transition: all 0.18s;
}@media (hover: hover) and (pointer: fine){
.card-feature:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}}
.card-feature-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--brand-primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--brand-primary);
}
.card-feature h3 {
  font-size: 16px; font-weight: 700; color: var(--brand-text);
}
.card-feature p {
  font-size: 14px; color: var(--brand-text-soft);
  margin: 0; line-height: 1.55;
}

/* === Hero === */
.hero {
  background: linear-gradient(180deg, var(--brand-cream) 0%, white 100%);
  padding: 32px 0 40px;
}
.hero-inner {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
/* Vít 21.5.2026: jediný breakpoint 980px, hero side-by-side jen na desktopu */
@media (min-width: 980px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; }
  .hero { padding: 60px 0 70px; }
}
.hero-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--brand-warm); text-transform: uppercase;
  margin-bottom: 14px; display: inline-block;
}
.hero-h1 {
  font-size: 36px; font-weight: 800; color: var(--brand-text);
  margin-bottom: 16px; letter-spacing: -1px; line-height: 1.05;
}
.hero-h1 span.green { color: var(--brand-primary); }
.hero-h1 span.warm { color: var(--brand-warm); }
@media (min-width: 720px) { .hero-h1 { font-size: 48px; } }
@media (min-width: 1100px) { .hero-h1 { font-size: 60px; } }
.hero-lede {
  font-size: 16px; color: var(--brand-text-soft);
  margin-bottom: 24px; line-height: 1.6;
}
@media (min-width: 720px) { .hero-lede { font-size: 17px; } }
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; margin-bottom: 18px;
}
.hero-ctas .or {
  font-size: 13px; color: var(--brand-text-soft); padding: 0 4px;
}
.hero-trust {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--brand-text-soft);
  margin-top: 14px; flex-wrap: wrap;
}
.hero-trust .stars { color: var(--brand-yellow); letter-spacing: -1px; }
.hero-image {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.hero-image img {
  max-width: 100%; max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.18));
}

/* === Grid utilities === */
/* Vít 21.5.2026: jediný breakpoint 980px, mobil = base, desktop = ≥980px.
   Žádný mezistav: mobil drží 2 sloupce, desktop skočí rovnou na cílový počet. */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 980px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .grid-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}

/* === Testimonial / Expert quote === */
.expert-quote {
  background: var(--brand-cream); border-radius: var(--radius-xl);
  padding: 28px 22px; position: relative;
  margin: 28px 0;
}
.expert-quote::before {
  content: '"'; position: absolute; top: -16px; left: 22px;
  font-size: 90px; line-height: 1; color: var(--brand-warm);
  font-family: Georgia, serif; font-weight: 700;
}
.expert-quote-text {
  font-size: 16px; line-height: 1.7; color: var(--brand-text);
  font-style: italic; margin: 12px 0 18px;
}
.expert-quote-author {
  display: flex; align-items: center; gap: 12px;
}
.expert-quote-author img {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.expert-quote-author-text strong {
  display: block; color: var(--brand-text); font-weight: 700; font-size: 14.5px;
}
.expert-quote-author-text span {
  font-size: 12.5px; color: var(--brand-text-soft);
}

/* === Process steps === */
.process-steps {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
/* Vít 21.5.2026: jediný breakpoint 980px */
@media (min-width: 980px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.process-step {
  background: white; border: 1px solid var(--brand-gray-1);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  position: relative;
}
.process-step-num {
  position: absolute; top: -14px; left: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-warm); color: white;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.process-step h3 {
  font-size: 17px; font-weight: 700; color: var(--brand-text);
  margin: 8px 0 8px;
}
.process-step p {
  font-size: 14px; color: var(--brand-text-soft);
  margin: 0; line-height: 1.55;
}

/* === Customer case cards === */
.case-card {
  background: white; border-radius: var(--radius-lg);
  border: 1px solid var(--brand-gray-1);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.case-card-photo {
  aspect-ratio: 1/1; width: 100%; background: var(--brand-gray-1);
  overflow: hidden;
}
.case-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-card-body { padding: 18px 18px 22px; }
.case-card-name {
  font-size: 18px; font-weight: 700; color: var(--brand-text);
  margin: 0 0 2px;
}
.case-card-handle {
  font-size: 13px; color: var(--brand-primary); font-weight: 600;
  margin: 0 0 8px;
}
.case-card-profession {
  font-size: 13.5px; color: var(--brand-text-soft);
  margin: 0 0 14px;
}
.case-card-price {
  font-size: 15px; color: var(--brand-text); margin: 0 0 12px;
}
.case-card-price strong { color: var(--brand-warm); font-size: 22px; font-weight: 800; }
.case-card-pack {
  background: var(--brand-cream); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--brand-text);
}
.case-card-pack-h {
  font-size: 11px; font-weight: 700; color: var(--brand-warm);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}

/* === FAQ accordion === */
.faq-list {
  background: white; border-radius: var(--radius-lg);
  border: 1px solid var(--brand-gray-1);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--brand-gray-1);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 15px; font-weight: 700;
  color: var(--brand-text); text-align: left;
  background: white; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}@media (hover: hover) and (pointer: fine){
.faq-q:hover { background: var(--brand-primary-soft); }}
.faq-item.open .faq-q { color: var(--brand-primary); }
.faq-q-icon {
  font-size: 26px; line-height: 1; color: var(--brand-primary);
  flex-shrink: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-q-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(-4px);
  visibility: hidden;
  padding: 0 20px;
  font-size: 14.5px; color: var(--brand-text-medium); line-height: 1.65;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.38s;
}
.faq-item.open .faq-a {
  max-height: 600px; opacity: 1; transform: translateY(0);
  visibility: visible;
  padding: 8px 20px 20px;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s ease 0.06s,
              transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-item.open .faq-a, .faq-q-icon, .faq-q { transition: none; }
}

/* === USP / Trust bar === */
.usp-bar {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; padding: 18px 0;
  font-size: 13.5px; color: var(--brand-text);
}
.usp-bar-item {
  display: flex; align-items: center; gap: 6px;
}
.usp-bar-item::before {
  content: "\2713\FE0E"; font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif; color: var(--brand-primary); font-weight: 800;
}

/* Vit 5.7.2026: kratky nazev produktu jen na mobilu (Kys. hyaluronova) */
.nm-short { display: none; }
@media (max-width: 979px) {
  .nm-full { display: none; }
  .nm-short { display: inline; }
}

/* === Help block (pre-footer) === */
.help-block {
  background: var(--brand-text); color: white;
  padding: 36px 0;
  position: relative; z-index: 2;
}
.help-block-inner {
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; text-align: center;
  max-width: 600px; margin: 0 auto; padding: 0 16px;
}
.help-block h2 {
  font-size: 22px; font-weight: 700; color: white;
  margin: 0;
}
.help-block-hours {
  font-size: 13.5px; opacity: 0.85;
}
.help-block-contacts {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}
.help-block-contacts a {
  background: rgba(255,255,255,0.1); color: white;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}@media (hover: hover) and (pointer: fine){
.help-block-contacts a:hover {
  background: var(--brand-primary); text-decoration: none;
}}

/* === Footer === */
.site-footer {
  background: #0F1620; color: #B5BCC7;
  padding: 50px 0 28px;
}
.site-footer-inner {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
  max-width: var(--container-max); margin: 0 auto; padding: 0 16px;
}
/* Vít 21.5.2026: jediný breakpoint 980px, footer 1 sloupec mobil → 5 sloupců desktop */
@media (min-width: 980px) { .site-footer-inner { grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 32px; } }

.site-footer-col h4 {
  color: white; font-size: 14px; font-weight: 700;
  margin: 0 0 14px; letter-spacing: 0.2px;
  text-transform: uppercase;
}
.site-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.site-footer-col a {
  color: #B5BCC7; font-size: 13.5px; font-weight: 500;
  transition: color 0.15s;
}@media (hover: hover) and (pointer: fine){
.site-footer-col a:hover { color: white; text-decoration: none; }}
.site-footer-contact {
  font-size: 13.5px; line-height: 1.6;
}
.site-footer-contact a { display: block; padding: 4px 0; }
.site-footer-social {
  display: flex; gap: 8px; margin-top: 10px;
}
.site-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.site-footer-bottom {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  justify-content: space-between; align-items: center;
  font-size: 12.5px; color: #8089A0;
  max-width: var(--container-max); margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px;
}
/* Vit 20.7.: spodni lista = info blok vlevo + bily logotype vpravo */
.site-footer-bottom-main { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
.site-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer-legal-info { line-height: 1.7; }
.site-footer-brand { flex: 0 0 auto; display: flex; align-items: center; }
.site-footer-logo { height: 36px; width: auto; display: block; opacity: 0.92; }
@media (min-width: 980px) { .site-footer-logo { height: 42px; } }
@media (max-width: 979px) {
  .site-footer-bottom { justify-content: center; text-align: center; }
  .site-footer-legal, .site-footer-payments { justify-content: center; }
  .site-footer-brand { order: -1; width: 100%; justify-content: center; margin-bottom: 6px; }
}
.site-footer-payments {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: #8089A0;
}
.site-footer-payments span {
  background: rgba(255,255,255,0.06); padding: 4px 8px; border-radius: 6px;
}
/* Vit 4.7.: loga platebnich firem (bile chipy jako v checkoutu) */
.site-footer-payments .sfp-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 25px; padding: 3px 6px; box-sizing: border-box;
  background: #fff; border-radius: 6px;
}
.site-footer-payments .sfp-logo img { max-width: 100%; max-height: 100%; display: block; }
/* Vit 23.7.: ComGate logo = širší bílý chip; "QR" = bílý chip s textem (místo "Bankovní převod") */
.site-footer-payments .sfp-logo-wide { width: auto; min-width: 62px; padding: 3px 10px; }
.site-footer-payments .sfp-chip-text { width: auto; padding: 4px 12px; color: var(--brand-text); font-weight: 800; font-size: 12px; letter-spacing: 0.3px; }
.site-footer-payments { align-items: center; }

/* === Dual CTA block (před footerem) === */
.cta-block {
  background: var(--brand-primary-soft);
  padding: 50px 0; text-align: center;
}
.cta-block h2 {
  font-size: 26px; font-weight: 800; color: var(--brand-text);
  margin: 0 0 12px;
}
.cta-block p {
  font-size: 15px; color: var(--brand-text-medium);
  max-width: 540px; margin: 0 auto 24px;
}
.cta-block-buttons {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}
@media (min-width: 720px) {
  .cta-block { padding: 70px 0; }
  .cta-block h2 { font-size: 34px; }
}

/* === TODO banner (mock features) === */
.todo-banner {
  background: #FFF3E0; border-left: 4px solid var(--brand-warm);
  padding: 14px 18px; border-radius: 12px;
  margin: 20px 0; font-size: 13.5px; color: var(--brand-text-medium);
  line-height: 1.55;
}
.todo-banner strong { color: var(--brand-warm); }

/* === Forms === */
.form-field {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 14px;
}
.form-field label {
  font-size: 13.5px; font-weight: 600; color: var(--brand-text);
}
.form-field label .req { color: var(--brand-warm); }
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1.5px solid var(--brand-gray-1);
  border-radius: 10px; font-size: 16px;
  background: white; color: var(--brand-text);
  transition: border-color 0.15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand-primary);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--brand-text-medium);
  margin: 14px 0; cursor: pointer;
}
.form-checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-primary); flex-shrink: 0; }
.form-checkbox a { color: var(--brand-primary); }

/* === Page hero (jednoduchý, ne homepage) === */
.page-hero {
  background: white; border-bottom: 1px solid var(--brand-gray-1);
  padding: 36px 0 32px;
}
.page-hero h1 {
  font-size: 30px; font-weight: 800; color: var(--brand-text);
  margin: 0 0 12px; letter-spacing: -0.5px;
}
.page-hero p {
  font-size: 16px; color: var(--brand-text-soft);
  max-width: 640px; margin: 0;
}
@media (min-width: 720px) {
  .page-hero { padding: 50px 0 40px; }
  .page-hero h1 { font-size: 40px; }
}

/* === Utility === */
.text-center { text-align: center; }
.text-warm { color: var(--brand-warm); }
.text-green { color: var(--brand-primary); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.hidden { display: none !important; }

/* === Image placeholders === */
.img-placeholder {
  background: linear-gradient(135deg, var(--brand-primary-soft) 0%, var(--brand-cream) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-primary-dark);
  font-weight: 700; font-size: 13px;
  text-align: center; padding: 16px;
  border-radius: var(--radius-lg);
  min-height: 200px;
}
.img-placeholder::before {
  content: ""; opacity: 0.7;
}

/* === Print === */
@media print {
  .site-header, .site-footer, .help-block, .cta-block { display: none; }
}

/* ============================================================================
   MOBILE FIX PATCH, 20.5.2026 (audit findings)
   ============================================================================ */

/* Touch target garance, WCAG 2.5.5 / Apple HIG 44pt */
.btn, .prod-card-add, .prod-card-info-link, .faq-q,
.cart-link, .login-btn, .site-nav-mobile-toggle,
button[type="submit"], button[type="button"] {
  min-height: 44px;
}

/* iOS no-zoom pojistka pro inputy + textarea */
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
  font-size: 16px;
}

/* Tabulky v produktech, bezpečnostní overflow */
.compose-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
@media (min-width: 540px) {
  .compose-table { display: table; white-space: normal; }
}

/* Modal close buttony */
[onclick*="close"][style*="border-radius:50%"],
[onclick*="remove()"][style*="border-radius:50%"] {
  min-width: 44px;
  min-height: 44px;
}


/* ============================================================================
   MEGA CTA BUTTONS (Vít 20.5.2026), používá se napříč webem v CTA blocích
   ============================================================================ */
.cta-block-buttons.mega { gap: 14px; flex-wrap: wrap; }
.btn-mega {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-radius: 16px;
  font-family: inherit; font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease-out;
  min-height: 64px; min-width: 240px;
  flex: 1 1 240px; max-width: 360px;
  color: var(--brand-text);
}
.btn-mega-icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mega-icon img { width: auto; height: 40px; max-width: 28px; display: block; }
.btn-mega-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.btn-mega-text strong { font-size: 16px; line-height: 1.2; }
.btn-mega-text small { font-size: 12.5px; opacity: 0.85; font-weight: 500; }
.btn-mega-primary {
  background: var(--brand-primary); color: white;
  box-shadow: 0 8px 22px rgba(40,149,70,0.28);
}@media (hover: hover) and (pointer: fine){
.btn-mega-primary:hover, .btn-mega-primary:focus {
  background: var(--brand-primary-dark); transform: translateY(-2px);
  color: white; text-decoration: none;
  box-shadow: 0 12px 30px rgba(40,149,70,0.35);
}}
.btn-mega-secondary {
  background: white; color: var(--brand-text);
  border: 2px solid var(--brand-gray-1);
}@media (hover: hover) and (pointer: fine){
.btn-mega-secondary:hover, .btn-mega-secondary:focus {
  border-color: var(--brand-primary); color: var(--brand-primary);
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 22px rgba(40,149,70,0.12);
}}
.btn-mega-secondary .btn-mega-icon { color: var(--brand-primary); }
/* Vít 21.5.2026: segment podtextu CTA, odrážka drží s textem, zlom jen mezi segmenty */
.cta-seg { white-space: nowrap; }

/* ============================================================================
   Vít 21.5.2026: MEGA CTA v2, pill tlačítka, bez ikon a bez podtextu.
   Primární „Vyplnit dotazník" výrazně dominuje (plný zelený pill + šipka).
   Tento blok je až za oběma definicemi .btn-mega → přebíjí je.
   ============================================================================ */
.btn-mega {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border-radius: 999px !important;
  padding: 17px 34px;
  min-height: 56px; min-width: 0; max-width: none;
  flex: 0 0 auto;
  font-weight: 800; line-height: 1.2;
  text-decoration: none;
}
/* pryč: emoji ikona + podtext (nepodstatné info) */
.btn-mega .btn-mega-icon,
.btn-mega .btn-mega-text small { display: none !important; }
.btn-mega .btn-mega-text {
  display: inline-flex; flex-direction: row; gap: 0;
  text-align: center; flex: 0 0 auto; white-space: nowrap;
}
.btn-mega .btn-mega-text strong { font-size: 16px; font-weight: 800; line-height: 1.2; }
/* primární, výrazný zelený pill se šipkou */
.btn-mega-primary { box-shadow: 0 8px 24px rgba(40,149,70,0.34); }
.btn-mega-primary .btn-mega-text strong { font-size: 17px; }
.btn-mega-primary::before {
  content: "→"; font-size: 18px; font-weight: 700; line-height: 1;
  display: inline-block; flex-shrink: 0; transition: transform 0.16s ease-out;
}@media (hover: hover) and (pointer: fine){
.btn-mega-primary:hover::before { transform: translateX(3px); }}
/* sekundární, menší, méně dominantní pill */
.btn-mega-secondary { padding: 12px 26px; min-height: 46px; }
.btn-mega-secondary .btn-mega-text strong { font-size: 14.5px; }
/* mobil, pill přes celou šířku, vystředěné */
@media (max-width: 979px) {
  .btn-mega { width: 100%; max-width: 420px; }
}

/* === Reveal animace odstraněny (Vít 28.5.: žádné load animace) === */

/* Hover-lift na informačních kartách, jednotně jako na homepage (Vít 21.5.2026) */
.team-card, .dohled-card, .value-card, .pillar-card, .feature-card,
.featured-card, .highlight-card, .benefit-card, .study-card, .protocol-card,
.obal-card, .doprava-card, .mix-card, .rozbor-card, .params-card,
.kv-meta-card, .absorb-card, .kontakt-card, .related-card, .step-card {
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}@media (hover: hover) and (pointer: fine){
.team-card:hover, .dohled-card:hover, .value-card:hover, .pillar-card:hover,
.feature-card:hover, .featured-card:hover, .highlight-card:hover, .benefit-card:hover,
.study-card:hover, .protocol-card:hover, .obal-card:hover, .doprava-card:hover,
.mix-card:hover, .rozbor-card:hover, .params-card:hover, .kv-meta-card:hover,
.absorb-card:hover, .kontakt-card:hover, .related-card:hover, .step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26,35,50,0.10);
}}
@media (prefers-reduced-motion: reduce) {
  .team-card, .dohled-card, .value-card, .pillar-card, .feature-card,
  .featured-card, .highlight-card, .benefit-card, .study-card, .protocol-card,
  .obal-card, .doprava-card, .mix-card, .rozbor-card, .params-card,
  .kv-meta-card, .absorb-card, .kontakt-card, .related-card, .step-card {
    transition: none;
  }
}

/* ============================================================================
   COOKIE LIŠTA (GDPR consent), Vít 22.5.2026
   ============================================================================ */
.cc-bar {
  position: fixed; z-index: 9500;
  left: 16px; bottom: 16px;
  width: 380px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--brand-gray-1);
  border-radius: 16px; box-shadow: 0 18px 48px rgba(26,35,50,0.24);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  animation: ccUp 0.35s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes ccUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cc-bar-title { font-size: 17px; font-weight: 800; color: var(--brand-text); line-height: 1.3; }
.cc-bar-text { font-size: 12.8px; line-height: 1.6; color: var(--brand-text-medium); }
.cc-bar-text a { color: var(--brand-primary); font-weight: 600; }
/* Vit 23.7.: na PC lišta cookies o ~30 % větší (ať je nepřehlédnutelná před objednávkou); mobil beze změny. */
@media (min-width: 720px) {
  .cc-bar { width: 500px; padding: 30px 30px 26px; gap: 15px; left: 22px; bottom: 22px; }
  .cc-bar-title { font-size: 22px; }
  .cc-bar-text { font-size: 15px; line-height: 1.62; }
  .cc-actions { gap: 10px; }
  .cc-btn { font-size: 16px; padding: 15px 24px; }
  .cc-btn-text { font-size: 14px; padding: 10px; }
}
.cc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cc-btn {
  border: none; cursor: pointer; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 999px; font-family: inherit; width: 100%;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}@media (hover: hover) and (pointer: fine){
.cc-btn:hover { transform: translateY(-1px); }}
.cc-btn-primary { background: var(--brand-primary); color: #fff; box-shadow: 0 6px 18px rgba(40,149,70,0.30); }
.cc-btn-outline { background: #fff; color: var(--brand-text); border: 1.5px solid var(--brand-gray-1); }@media (hover: hover) and (pointer: fine){
.cc-btn-outline:hover { border-color: var(--brand-text); }}
.cc-btn-text { background: none; color: var(--brand-text-soft); text-decoration: underline; padding: 8px; font-size: 13px; }@media (hover: hover) and (pointer: fine){
.cc-btn-text:hover { color: var(--brand-text); transform: none; }}
.cc-modal-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(26,35,50,0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: ccFade 0.2s ease both;
}
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal {
  background: #fff; border-radius: 18px; max-width: 480px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 26px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.cc-modal h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--brand-text); }
.cc-modal-lede { font-size: 13px; color: var(--brand-text-medium); line-height: 1.65; margin: 0 0 10px; }
.cc-modal-sub { font-size: 16px; font-weight: 800; color: var(--brand-text); margin: 18px 0 2px; }
.cc-cat {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--brand-gray-1);
}
.cc-cat-body { flex: 1; min-width: 0; }
.cc-cat-name { font-weight: 700; font-size: 14.5px; color: var(--brand-text); }
.cc-cat-desc { font-size: 12.5px; color: var(--brand-text-soft); line-height: 1.55; margin-top: 3px; }
.cc-toggle { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.cc-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-toggle-track { position: absolute; inset: 0; border-radius: 999px; background: var(--brand-gray-2); transition: background 0.18s ease; }
.cc-toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform 0.18s ease;
}
.cc-toggle input:checked + .cc-toggle-track { background: var(--brand-primary); }
.cc-toggle input:checked + .cc-toggle-track::after { transform: translateX(18px); }
.cc-toggle input:disabled { cursor: default; }
.cc-toggle input:disabled + .cc-toggle-track { opacity: 0.5; }
.cc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cc-modal-actions .cc-btn { width: auto; flex: 1; min-width: 150px; }


/* Vit 16.7.2026: is-reco oranzovy styl smazan (funkce applyRecoCta vypnuta 8.6., oranzova tlacitka zrusena) */


/* ====================================================================
   PŘÍSTUPNOST (WCAG 2.1 AA) — Vít 24.6.2026. Vše v paletě (brand manuál).
   Sdílené v mujvit.css → platí na celém webu.
   ==================================================================== */
/* 2.4.7 Viditelný focus jen pro klávesnici (zelená = značka), ne při kliku myší. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}
/* Pole formuláře: k zelenému rámečku přidat decentní zelený glow. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(40,149,70,0.18);
}
/* 1.4.3 Placeholder = brandová text-soft (#6B7785 = 4.56:1), ne světlejší šedá. */
::placeholder { color: var(--brand-text-soft); opacity: 1; }
::-webkit-input-placeholder { color: var(--brand-text-soft); opacity: 1; }
/* Respekt k uživatelům, kteří nechtějí animace. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Vit 16.7.2026: oranzova tlacitka ZRUSENA (rozhodl Vit) - vsechna CTA zelena s bilym textem,
   lisi se jen tvarem. Puvodni blok "oranzove CTA tmavy text" z 25.6. smazan. */

/* === Mobilní menu CTA = jako desktop pill (Vít) === */
.site-nav-mobile a.nav-m-cta { display:block; text-align:center; padding:13px 18px !important; border:2px solid transparent !important; border-radius:999px; font-weight:800 !important; font-size:15px; text-decoration:none; transition:all .18s; }
.site-nav-mobile a.nav-m-cta-primary { background:var(--brand-primary); color:#fff !important; border-color:var(--brand-primary) !important; box-shadow:0 4px 12px rgba(40,149,70,0.22); }@media (hover: hover) and (pointer: fine){
.site-nav-mobile a.nav-m-cta-primary:hover { background:var(--brand-primary-dark,#1f6b39); border-color:var(--brand-primary-dark,#1f6b39) !important; color:#fff !important; }}
.site-nav-mobile a.nav-m-cta-secondary { background:#fff; color:var(--brand-text) !important; border-color:var(--brand-gray-1) !important; font-weight:700 !important; }@media (hover: hover) and (pointer: fine){
.site-nav-mobile a.nav-m-cta-secondary:hover, .site-nav-mobile a.nav-m-cta-secondary:focus, .site-nav-mobile a.nav-m-cta-secondary:focus-visible, .site-nav-mobile a.nav-m-cta-secondary:active, .site-nav-mobile a.nav-m-cta-secondary.is-current { border-color:var(--brand-primary) !important; color:var(--brand-text) !important; }}
.site-nav-mobile a.site-nav-mobile-link { display:block; padding:14px 4px !important; font-weight:700 !important; font-size:14px; color:var(--brand-text) !important; text-decoration:none; border-bottom:1px solid var(--brand-gray-1); border-radius:0; }@media (hover: hover) and (pointer: fine){
.site-nav-mobile a.site-nav-mobile-link:hover { color:var(--brand-primary) !important; }}

/* === Re-order CTA tlačítka = jako homepage: max-width na střed, NE přes celou šířku (Vít) === */
@media (max-width: 979px) {
  .po-alt .btn-mega-row, .po-prav-cta .btn-mega-row, .faq-a .btn-mega-row { align-items: center !important; }
  .po-alt .btn-mega, .po-prav-cta .btn-mega, .faq-a .btn-mega-row .btn-mega { width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* Neplatné pole formuláře (Vít 29.6.) */
.mv-invalid{border-color:var(--brand-red,#B4232A) !important;background:#FFF6F5 !important;box-shadow:0 0 0 3px rgba(180,35,42,0.12) !important;}

/* hp-megacta-checks fajfky - JEDEN ZDROJ (Vít 29.6.: přesunuto z inline kvůli cache) */
.hp-megacta-checks span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--brand-text); }
.hp-megacta-checks span::before { content: "\2713\FE0E"; font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif; flex-shrink: 0; color: var(--brand-primary); font-weight: 800; font-size: 16px; line-height: 1; }

/* Jak vypadá balíček - popisná fotka (Vít 29.6.: z doporučení i na homepage, béžová ne gradient) */
.pkg-content { max-width: 620px; margin: 36px auto 18px; padding: 30px 26px 28px; background: linear-gradient(165deg, #F2F9F4 0%, #FBF6EC 100%); border-radius: 20px; border: 1px solid #E4EFE7; text-align: center; }
.pkg-content-eyebrow { margin: 0 auto 8px; max-width: 520px; color: var(--brand-warm); font-weight: 700; font-size: 14px; line-height: 1.45; }
.pkg-content-h2 { font-size: 28px; font-weight: 800; color: var(--brand-text); text-align: center; margin: 0 auto 18px; letter-spacing: -0.5px; }
@media (min-width: 720px) { .pkg-content-h2 { font-size: 34px; } }
@media (min-width: 980px) { .pkg-content-h2 { font-size: 38px; } }
.pkg-content-imgwrap { display: flex; justify-content: center; }
.pkg-content-img { width: 100%; max-width: 400px; height: auto; display: block; }

/* === Článkové SEO komponenty (30.6.2026): reviewed badge, TOC, související === */
.article-reviewed { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--brand-text-soft); margin:10px 0 0; }
.article-reviewed svg { color:var(--brand-primary); flex-shrink:0; }
.article-toc { background:var(--brand-cream); border:1px solid var(--brand-gray-1); border-radius:14px; padding:16px 20px; margin:0 0 26px; }
.article-toc strong { display:block; font-size:12px; font-weight:800; color:var(--brand-text); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.article-toc ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.article-toc li::before { content:""; }
.article-toc a { color:var(--brand-primary); font-weight:600; font-size:14.5px; text-decoration:none; }@media (hover: hover) and (pointer: fine){
.article-toc a:hover { text-decoration:underline; }}
.article-related { margin:42px 0 0; }
.article-related h2 { font-size:22px; font-weight:800; color:var(--brand-text); margin:0 0 16px; letter-spacing:-0.3px; }
.article-related-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:680px){ .article-related-grid { grid-template-columns:repeat(3,1fr); } }
.article-related-card { display:block; background:#fff; border:1px solid var(--brand-gray-1); border-radius:14px; padding:14px 16px; text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s; }@media (hover: hover) and (pointer: fine){
.article-related-card:hover { border-color:var(--brand-primary); box-shadow:var(--shadow-md); transform:translateY(-2px); }}
.article-related-card .rl-tag { font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--brand-warm); }
.article-related-card .rl-title { display:block; font-size:14.5px; font-weight:700; color:var(--brand-text); margin-top:5px; line-height:1.35; }

/* === ČLÁNKOVÁ ŠABLONA (externalizováno z inline 30.6.2026, jeden zdroj pravdy) === */
.article-hero { padding: 28px 0 20px; background: linear-gradient(180deg, var(--brand-cream) 0%, white 100%); }
@media (min-width: 980px) { .article-hero { padding: 50px 0 32px; } }
.article-hero .container { max-width: 760px; }
.article-breadcrumb { font-size: 13px; color: var(--brand-text-soft); margin-bottom: 14px; }
.article-breadcrumb a { color: var(--brand-text-soft); }@media (hover: hover) and (pointer: fine){
.article-breadcrumb a:hover { color: var(--brand-primary); }}
.article-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--brand-warm); text-transform: uppercase; display: inline-block; margin-bottom: 10px; }
.article-hero h1 { font-size: clamp(26px, 6vw, 30px); font-weight: 800; color: var(--brand-text); margin: 0 0 12px; letter-spacing: -0.5px; line-height: 1.18; }
@media (min-width: 980px) { .article-hero h1 { font-size: 38px; line-height: 1.15; } }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--brand-text-soft); margin-top: 16px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-body { max-width: 720px; margin: 0 auto; padding: 28px 18px 30px; font-size: 16.5px; line-height: 1.75; color: var(--brand-text-medium); }
@media (min-width: 980px) { .article-body { padding: 40px 24px 40px; } }
.article-body h2 { font-size: 24px; font-weight: 800; color: var(--brand-text); margin: 40px 0 14px; letter-spacing: -0.3px; line-height: 1.22; scroll-margin-top: 90px; }
@media (min-width: 980px) { .article-body h2 { font-size: 28px; margin: 48px 0 16px; } }
.article-body h3 { font-size: 18.5px; font-weight: 800; color: var(--brand-text); margin: 28px 0 10px; line-height: 1.3; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin: 0 0 8px; }
.article-body li::marker { color: var(--brand-primary); }
.article-body strong { color: var(--brand-text); font-weight: 700; }
.article-body a:not(.btn-mega):not(.btn):not(.cta-btn) { color: var(--brand-primary); font-weight: 600; }@media (hover: hover) and (pointer: fine){
.article-body a:not(.btn-mega):not(.btn):not(.cta-btn):hover { text-decoration: underline; }}
/* CTA tlačítka uvnitř článku nesmí dědit styl prose odkazu (barva/podtržení) */
.article-body a.btn-mega { color: #fff; font-weight: 800; text-decoration: none; }@media (hover: hover) and (pointer: fine){
.article-body a.btn-mega:hover { text-decoration: none; }}
.article-lead { font-size: 18px; color: var(--brand-text); font-weight: 500; line-height: 1.65; margin: 0 0 22px; }
.article-answer { background: var(--brand-primary-soft); border-radius: 16px; padding: 18px 20px; margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: var(--brand-text); border: 1px solid #cfe9d6; }
.article-answer strong { color: var(--brand-text); }
.article-figure { margin: 28px 0; text-align: center; background: var(--brand-cream); border-radius: 16px; padding: 14px; border: 1px solid var(--brand-gray-1); }
.article-figure img { width: 100%; max-width: 640px; height: auto; border-radius: 10px; }
.article-figure figcaption { font-size: 13px; color: var(--brand-text-soft); margin-top: 10px; }
.article-cta-box { background: var(--brand-primary-soft); border: 1px solid #cfe9d6; border-radius: 20px; padding: 28px 24px; margin: 32px 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .article-cta-box { padding: 30px 32px; grid-template-columns: 1fr auto; align-items: center; } }
.article-cta-box h3 { font-size: 20px; font-weight: 800; color: var(--brand-text); margin: 0 0 8px; }
.article-cta-box p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--brand-text-medium); }
.article-cta-box .cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-primary); color: #fff; padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,0.12); transition: transform 0.15s; }@media (hover: hover) and (pointer: fine){
.article-cta-box .cta-btn:hover { transform: translateY(-1px); text-decoration: none; }}
.article-cta-box .cta-btn::after { content: "→"; }
.article-author { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--brand-gray-1); border-radius: 16px; padding: 16px 18px; margin: 34px 0 0; }
.article-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; }
.article-author-txt strong { display: block; color: var(--brand-text); font-size: 14.5px; }
.article-author-txt span { font-size: 13px; color: var(--brand-text-soft); }
.article-sources { font-size: 13px; color: var(--brand-text-soft); margin: 22px 0 0; line-height: 1.7; }
.article-sources h3 { font-size: 14px; font-weight: 800; color: var(--brand-text); margin: 0 0 6px; }
.article-sources a { color: var(--brand-primary); font-weight: 600; }
.article-notice { background: #FFF9F0; border-left: 4px solid var(--brand-warm); padding: 16px 20px; border-radius: 10px; font-size: 13.5px; color: var(--brand-text-medium); line-height: 1.65; margin: 22px 0 0; }
.article-notice strong { color: var(--brand-warm); }
.article-end-cta { background: var(--brand-primary-soft); padding: 44px 0; text-align: center; }
.article-end-cta .container { max-width: 680px; }
.article-end-cta h2 { font-size: 24px; font-weight: 800; color: var(--brand-text); margin: 0 0 10px; }
@media (min-width: 980px) { .article-end-cta h2 { font-size: 30px; } }
.article-end-cta .hp-megacta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0 auto 22px; }
.article-end-cta .btn-mega-row { display: flex; justify-content: center; gap: 10px; max-width: 520px; margin: 0 auto; }
.article-end-cta .btn-mega-row--solo { max-width: 520px; }
@media (min-width: 720px) { .article-end-cta .btn-mega-row { flex-direction: row; justify-content: center; } }


/* ===== SKIP-LINK (a11y, přeskočit na obsah) - centrálně, injektuje header.html + mujvit.js kotva #obsah ===== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-primary);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:13000;font-weight:700;text-decoration:none;}
.skip-link:focus{left:0;}
.skip-anchor{position:absolute;width:0;height:0;overflow:hidden;}

/* === FIX 320px (3.7.2026): male displeje <=359px - CTA pill nesmi pretect
   (nowrap min-content 311px > 288px kontejneru => cely hero se rozjel o 7px) === */
@media (max-width: 359px) {
  .btn-mega .btn-mega-text { white-space: normal; }
  .btn-mega .btn-mega-text strong, .btn-mega-primary .btn-mega-text strong { font-size: 15px; }
}

/* Vit 3.7.2026: stitek Autor v bloku pod clankem */
.article-author-txt .aa-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-warm); margin-bottom: 2px; }