@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

@keyframes rv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

:is(.cp-blocks-full, .cp-page) {
  --rv-bg: var(--bsc-bg, #0a0a0f);
  --rv-bg-2: var(--bsc-surface, #13131a);
  --rv-bg-3: var(--bsc-surface, #1a1a24);
  --rv-bg-rgb: 10, 10, 15;
  --rv-line: var(--bsc-line, #232330);
  --rv-line-2: var(--bsc-line, #2d2d3d);
  --rv-text: var(--bsc-text, #ffffff);
  --rv-text-2: var(--bsc-text-muted, #b8b8c4);
  --rv-text-3: var(--bsc-text-light, #6e6e80);
  --rv-accent: var(--bsc-primary, #c4ff3d);
  --rv-accent-2: var(--bsc-primary-dark, #a8e632);
  --rv-accent-rgb: 196, 255, 61;
  --rv-accent-glow: rgba(var(--rv-accent-rgb, 196, 255, 61), 0.35);
  --rv-radius: var(--bsc-radius, 18px);
  --rv-radius-lg: 28px;
  --rv-display: var(--bsc-display, 'Anton', Impact, 'Arial Black', sans-serif);
  --rv-body: var(--bsc-font, 'Inter', system-ui, sans-serif);
  --rv-accent-hover: color-mix(in oklch, var(--rv-accent) 85%, var(--rv-text));
  --rv-accent-soft: color-mix(in oklch, var(--rv-accent) 12%, var(--rv-bg));
  --rv-accent-border: color-mix(in oklch, var(--rv-accent) 35%, var(--rv-bg));
  --rv-surface-1: color-mix(in oklch, var(--rv-bg) 96%, var(--rv-text));
  --rv-surface-2: color-mix(in oklch, var(--rv-bg) 92%, var(--rv-text));
  --rv-text-subtle: color-mix(in oklch, var(--rv-text) 62%, var(--rv-bg));
  font-family: var(--rv-body);
  color: var(--rv-text);
}

:is(.cp-blocks-full, .cp-page) .rv-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; position: relative; }
:is(.cp-blocks-full, .cp-page) .cp-bsec { position: relative; }
/* Bocny padding je rovnaky ako .rv-container, aby "Sirka obsahu" sedela
   s ostatnymi sekciami aj pod 1320 px. Vodorovny padding sekcii (bsecOpen)
   sa presunul sem, zvisly ostal na sekcii. Cela sirka padding nema. */
:is(.cp-blocks-full, .cp-page) .cp-binner { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
:is(.cp-blocks-full, .cp-page) .cp-binner-full { max-width: none; padding-left: 0; padding-right: 0; }

:is(.cp-blocks-full, .cp-page) .rv-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--rv-body); font-size: calc(13px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rv-accent); margin: 0 0 24px; padding: 0; background: transparent; border: none; }
:is(.cp-blocks-full, .cp-page) .rv-sparkle { font-size: calc(16px * var(--bsc-text-scale, 1)); line-height: 1; color: var(--rv-accent); display: inline-block; animation: rv-spin 8s linear infinite; font-style: normal; }

:is(.cp-blocks-full, .cp-page) .rv-h1 { font-family: var(--rv-display); font-weight: 400; font-size: clamp(56px, 10vw, 160px); line-height: 0.88; letter-spacing: -0.005em; text-transform: uppercase; color: var(--rv-text); margin: 24px 0 48px; text-align: center; display: block; }
:is(.cp-blocks-full, .cp-page) .rv-h1-filled { color: var(--rv-text); text-shadow: 0 0 60px rgba(var(--rv-accent-rgb, 196, 255, 61), 0.08); }
:is(.cp-blocks-full, .cp-page) .rv-h1-outline { -webkit-text-stroke: 2px var(--rv-accent); -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
:is(.cp-blocks-full, .cp-page) .rv-h2 { font-family: var(--rv-display); font-weight: 400; font-size: clamp(40px, 6.5vw, 96px); line-height: 0.92; letter-spacing: -0.003em; text-transform: uppercase; color: var(--rv-text); margin: 12px 0 0; }

:is(.cp-blocks-full, .cp-page) .rv-btn, :is(.cp-blocks-full, .cp-page) a.rv-btn { display: inline-flex; align-items: center; gap: 14px; padding: 20px 36px; background: var(--bsc-btn-bg, var(--rv-accent)); color: var(--bsc-btn-text, var(--rv-bg, #0a0a0f)); font-family: var(--rv-body); font-size: calc(13px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 999px; border: none; box-shadow: 0 0 0 0 var(--rv-accent-glow), 0 8px 32px rgba(var(--rv-accent-rgb, 196, 255, 61), 0.25); transition: all 0.3s ease; cursor: pointer; }
:is(.cp-blocks-full, .cp-page) .rv-btn:hover, :is(.cp-blocks-full, .cp-page) a.rv-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px var(--rv-accent-glow), 0 12px 40px rgba(var(--rv-accent-rgb, 196, 255, 61), 0.35); color: var(--bsc-btn-text, var(--rv-bg, #0a0a0f)); }
:is(.cp-blocks-full, .cp-page) .rv-btn svg { width: 18px; height: 18px; background: var(--bsc-btn-text, var(--rv-bg, #0a0a0f)); color: var(--bsc-btn-bg, var(--rv-accent)); border-radius: 50%; padding: 4px; box-sizing: content-box; flex-shrink: 0; }
/* Dark variant (napr. CTA band tlačidlo na svetlom accent pozadí) — musí mať rovnaký :is() prefix
   ako .rv-btn vyššie, inak generický .rv-btn:hover prebije farbu textu a text zmizne na hover. */
:is(.cp-blocks-full, .cp-page) .rv-btn-dark, :is(.cp-blocks-full, .cp-page) a.rv-btn-dark { background: var(--rv-bg, #0a0a0f); color: var(--rv-accent); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
:is(.cp-blocks-full, .cp-page) .rv-btn-dark:hover, :is(.cp-blocks-full, .cp-page) a.rv-btn-dark:hover { background: var(--rv-bg, #0a0a0f); color: var(--rv-accent); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.4); }
:is(.cp-blocks-full, .cp-page) .rv-btn-dark svg { background: var(--rv-accent); color: var(--rv-bg, #0a0a0f); }
:is(.cp-blocks-full, .cp-page) .rv-btn-ghost, :is(.cp-blocks-full, .cp-page) a.rv-btn-ghost { display: inline-flex; align-items: center; gap: 14px; padding: 20px 36px; background: transparent; color: var(--rv-text); font-family: var(--rv-body); font-size: calc(13px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 999px; border: 1.5px solid var(--rv-line-2); transition: all 0.3s ease; cursor: pointer; }
:is(.cp-blocks-full, .cp-page) .rv-btn-ghost:hover, :is(.cp-blocks-full, .cp-page) a.rv-btn-ghost:hover { border-color: var(--rv-accent); color: var(--rv-accent); background: rgba(var(--rv-accent-rgb, 196, 255, 61), 0.05); }
:is(.cp-blocks-full, .cp-page) .rv-btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }

:is(.cp-blocks-full, .cp-page) .rv-hero { position: relative; padding: 120px 0 140px; background: var(--rv-bg); overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-hero-bg-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(var(--rv-accent-rgb, 196, 255, 61), 0.09) 0%, transparent 60%), radial-gradient(ellipse 800px 400px at 100% 100%, rgba(var(--rv-accent-rgb, 196, 255, 61), 0.05) 0%, transparent 70%); pointer-events: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero .rv-container { position: relative; z-index: 2; }

/* Logo v hlavicke je odkaz na domov, takze je to dotykovy ciel. WCAG 2.5.5
   Target Size (Enhanced) ziada 44x44 px; samotny obrazok loga byva mensi
   (Reminy 36x36, dsas eshop 41x41) alebo uzky (Pevnina 29 px siroky).
   Minimum sa pridava len na odkaz, obrazok sa nezvacsuje — hlavicka preto
   narastie len tam, kde bola pod 44. !important je tu preto, ze video.css
   nastavuje .logo { min-width: 0 !important } a bez neho by sa minimum
   neuplatnilo. */
body[class] :is(.site-header, header) :is(a.logo-img-link, a.logo) {
  min-width: 44px !important;
  min-height: 44px !important;
  justify-content: center;
}

/* Fotka hero ako pas hore (do 820px). Zapina sa polom v builderi; bez triedy
   rv-hero--mbg-band sa neuplatni nic, takze existujucim strankam sa nemeni nic.
   Text sa presuva pod pas, preto sa --rv-text vracia na farby sekcie — rovnaky
   mechanizmus, aky pouziva rv-hero-mbg-color nizsie. !important je tu preto, ze
   sablony (luxury) pisu inset a height vlastnym pravidlom s rovnakou vahou. */
@media (max-width: 820px) {
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mbg-band {
    --rv-text: var(--bsc-text, #1a1a24) !important;
    --rv-text-2: var(--bsc-text-muted, var(--bsc-text, #4a4a55)) !important;
    background: var(--bsc-bg, #ffffff) !important;
    padding-top: calc(var(--rv-hero-band-h, 46vh) + 20px) !important;
    padding-bottom: 30px !important;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mbg-band .rv-hero-bg-media {
    inset: 0 0 auto 0 !important;
    height: var(--rv-hero-band-h, 46vh) !important;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mbg-band .rv-hero-bg-media > div {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, var(--bsc-bg, #ffffff) 100%) !important;
  }
  /* Sablony, ktore nad fotkou farbia text priamo (luxury: color:#ffffff), by na
     svetlom podklade pasu nechali biely text. Preto sa farba vracia tu. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mbg-band :is(.rv-h1, .rv-h1-filled, .rv-hero-text, .rv-hero-body, .rv-hero-body p) {
    color: var(--bsc-text, #1a1a24) !important;
  }
  /* Bez !important — inline farba z Dizajnu (eyebrowColor) musi vyhrat. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mbg-band :is(.rv-eyebrow, .rv-hero-eyebrow) {
    color: var(--bsc-text-muted, var(--bsc-text, #4a4a55));
  }
}

/* Hlavny nadpis stranky, ktora ziadny nadpis v blokoch nema. Vyzera, ze tam
   nie je — pre citacky obrazovky a vyhladavace tam je. Nie display:none ani
   visibility:hidden, tie ho skryju aj pred nimi. */
.cp-h1-skryty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Text NAD fotkou (do 820px). Zapina sa polom "Rozlozenie na mobile" v Hlavicke;
   bez triedy rv-hero--mstack sa neuplatni nic, takze vsetkym ostatnym tenantom
   ostava dnesny vzhlad. Plati rovnako pre jednu snimku aj pre kazdu snimku
   slidera — preto su v selektoroch aj sekcia aj .cp-sl-slide.

   Rozmery su odmerane na predlohe pri 390 px (esthetic.sk): pas 244 px pri
   sirke 390, teda pomer 390/244; odsadenie textu 29 px hore (medzera pod
   plavajucou hlavickou predlohy, nie jej 102 px padding, ktory ma v sebe
   73 px vysoku hlavicku lezitacu NAD plochou), 20 px po stranach, 42 px dole;
   nadpis -> odstavec 20 px, odstavec -> tlacidla 28 px, tlacidla vedla seba
   s rozostupom 12 px.

   !important je tu preto, ze fotku pozicuje inline style z rendereru
   (position:absolute;inset:0) a plochu sekcie takisto inline style snimky
   (background:var(--bsc-hero-plate)); inline sa inak prebit neda. Sablona
   luxury ma svoje mobilne pravidla vyradene cez :not(.rv-hero--mstack) priamo
   u seba, takze sa tu o specificitu bojovat nemusi. */
@media (max-width: 820px) {
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack,
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .cp-sl-slide {
    --rv-mstack-band: calc(100vw * 244 / 390);
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    background: var(--bsc-surface, #ffffff) !important;
    --rv-text: var(--bsc-text, #1a1a24) !important;
    --rv-text-2: var(--bsc-text-muted, var(--bsc-text, #4a4a55)) !important;
  }
  /* Fotka sa z podkladu stava samostatnym pasom POD textom. Poradie riesi
     order, nie column-reverse — v DOM su deti dve, ale v builderi pribuda
     poznamka a reverse by ju otocil tiez. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-container {
    order: 1;
    z-index: auto;
    padding-top: 29px;
    padding-bottom: 42px;
  }
  /* Text je v predlohe vycentrovany. !important je tu preto, ze sablony
     zarovnavaju nadpis a telo hero vlavo vlastnym pravidlom s vacsou vahou
     (luxury: .rv-hero:has(.rv-hero-bg-media) ...). */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack :is(.rv-container, .rv-h1, .rv-h2, .rv-h1-filled, .rv-hero-split, .rv-hero-body, .rv-hero-text, .rv-hero-eyebrow, .rv-eyebrow, .rv-hero-actions) {
    text-align: center !important;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-body {
    align-items: center !important;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-bg-media {
    order: 2;
    position: relative !important;
    inset: auto !important;
    /* Snimky slidera su rovnako vysoke podla najdlhsieho textu. Bez tohto
       by kratsia snimka skoncila pasom skor a pod nim by ostal prazdny pruh
       plochy (merane: 94 px pri druhej snimke). Pas patri na spodnu hranu. */
    margin-top: auto;
    width: 100% !important;
    height: var(--rv-mstack-band) !important;
    background-position: var(--rv-hero-bg-pos, center) !important;
  }
  /* Sipky slidera su vycentrovane na CELU sekciu, takze po presune textu nad
     fotku padli presne na riadok tlacidiel (merane: sipka 439-477, tlacidla
     417-482). Patria nad fotku, preto sa centruju na pas. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .cp-sl-arr {
    top: auto;
    bottom: calc(var(--rv-mstack-band) / 2 - 19px);
    transform: none;
  }
  /* Ziadne prekrytie — na fotke nie je text, takze stmavovat nie je co. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-bg-media > div {
    display: none !important;
  }
  /* Svetelny efekt pod textom nema co robit na ploche. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-bg-glow { display: none; }
  /* Sablony, ktore nad fotkou farbia text priamo (luxury: color:#ffffff), by
     na ploche nechali biele pismo. Rovnaky dovod ako pri rv-hero--mbg-band. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack :is(.rv-h1, .rv-h1-filled, .rv-h2, .rv-hero-text, .rv-hero-body, .rv-hero-body p) {
    color: var(--bsc-text, #1a1a24) !important;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-text {
    color: var(--bsc-text-muted, var(--bsc-text, #4a4a55)) !important;
  }
  /* Bez !important — inline farba z Dizajnu (eyebrowColor) musi vyhrat. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack :is(.rv-eyebrow, .rv-hero-eyebrow) {
    color: var(--bsc-text-muted, var(--bsc-text, #4a4a55));
    margin-bottom: 16px;
  }
  /* Zvisle medzery su z predlohy: nadpis -> odstavec 20 px,
     odstavec -> tlacidla 28 px. !important preto, ze sablona ich nastavuje
     na tych istych prvkoch vlastnym pravidlom s vacsou vahou (luxury dava
     .rv-hero-text aj .rv-hero-actions margin-top: 18px) a bez neho vysla
     medzera 38 px namiesto 28. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-h1 { margin: 0 0 20px !important; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-split { margin-top: 0 !important; gap: 0; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-text {
    margin: 0 auto 28px !important;
    max-width: 100%;
  }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0;
    width: auto;
    justify-content: center !important;
    margin-top: 0 !important;
  }
  /* Tlacidla su v predlohe VEDLA SEBA, nie pod sebou — na mobile ich inak
     platforma rozt'ahuje na 100 % sirky. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-actions :is(.rv-btn, .rv-btn-ghost, a.rv-btn, a.rv-btn-ghost) {
    width: auto;
  }
  /* Priehladne tlacidlo ma nad fotkou biele pismo (luxury si ho vynucuje pre
     hero s fotkou). Na ploche by bolo biele na svetlom — 1,17 : 1. Farba aj
     ramcek sa preto beru z tokenov tenanta, nie zo stavu "nad fotkou". */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack .rv-hero-actions :is(.rv-btn-ghost, a.rv-btn-ghost) {
    color: var(--bsc-text, #1a1a24) !important;
    border-color: color-mix(in srgb, var(--bsc-text, #1a1a24) 45%, transparent) !important;
    background: transparent !important;
  }
  /* Vizual vpravo (Split) na ploche duplikuje fotku pasu — na mobile nema kam. */
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--mstack:has(.rv-hero-bg-media) .rv-hero-visual { display: none; }
}

/* Ine pozadie na mobile a tablete (do 1024px). Bez triedy rv-hero-mbg sa neuplatni nic. */
@media (max-width: 1024px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg > .rv-hero-bg-media,
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg > .rv-hero-bg-glow { display: none; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-color { background: var(--rv-hero-mbg) !important; --rv-text: var(--rv-hero-mtext) !important; --rv-text-2: var(--rv-hero-mtext-2) !important; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image { background: #0a0a14 !important; --rv-text: #ffffff !important; --rv-text-2: rgba(255, 255, 255, 0.9) !important; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--rv-hero-mbg-img) var(--rv-hero-bg-pos, center)/cover no-repeat; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(10, 10, 20, 0.55); }
}
:is(.cp-blocks-full, .cp-page) .rv-hero-eyebrow { display: flex; align-items: center; justify-content: center; text-align: center; gap: 0.5em; margin-bottom: 24px; }
/* Toto malo od zaciatku platit na kazdy .rv-eyebrow, nie len na ten
   v hero. Sekcny eyebrow ma tie iste tri deti — hviezdicka, text,
   hviezdicka — a bez tohto ich riadok na 360 px pretiekol o 21 px
   a obe hviezdicky trcali 4 px von z rodica (merane na Pevnine). */
:is(.cp-blocks-full, .cp-page) .rv-eyebrow .rv-sparkle { flex: 0 0 auto; }
/* Text uz nerastie do sirky. Predtym mal flex-grow: 1, takze v hero roztiahol
   riadok na cely obsah (1216 px pri texte 79 px) a obe hviezdicky odtlacil
   k okrajom sekcie. So shrink 1 a min-width: 0 ostava zachovana ochrana proti
   preteceniu na uzkych displejoch, kvoli ktorej to pravidlo vzniklo. */
:is(.cp-blocks-full, .cp-page) .rv-eyebrow > span:not(.rv-sparkle) { flex: 0 1 auto; min-width: 0; text-align: center; }
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-eyebrow .rv-sparkle { display: none; }
}
:is(.cp-blocks-full, .cp-page) .rv-hero-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; margin-top: 64px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--rv-radius-lg); overflow: hidden; background: var(--rv-bg-3); border: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05) saturate(0.95); }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual-placeholder { position: relative; z-index: 3; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rv-accent); opacity: 0.6; padding: 8%; box-sizing: border-box; }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual-placeholder svg { width: 100%; height: 100%; max-width: 360px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--rv-bg-rgb, 10, 10, 15), 0.55) 100%); pointer-events: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-text { font-family: var(--rv-body); font-size: calc(18px * var(--bsc-text-scale, 1)); line-height: 1.65; color: var(--rv-text-2); margin: 0 0 36px; max-width: 560px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-text p { margin: 0 0 12px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-text p:last-child { margin-bottom: 0; }
:is(.cp-blocks-full, .cp-page) .cp-fhero-subtitle p, :is(.cp-blocks-full, .cp-page) .cp-ffeat-subtitle p, :is(.cp-blocks-full, .cp-page) .rv-courses-sub p { margin: 0 0 12px; }
:is(.cp-blocks-full, .cp-page) .cp-fhero-subtitle p:last-child, :is(.cp-blocks-full, .cp-page) .cp-ffeat-subtitle p:last-child, :is(.cp-blocks-full, .cp-page) .rv-courses-sub p:last-child { margin-bottom: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; max-width: 560px; padding-top: 36px; border-top: 1px solid var(--rv-line); }

/* ===== Štýly hero sekcie (builder Dizajn → Štýl hero) ===== */
/* fullwidth — bez vizuálu, na celú šírku, vycentrované */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-split { grid-template-columns: 1fr; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-visual { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-body { align-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-text { max-width: 680px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-actions { justify-content: center; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-stats { margin: 0 auto; }
/* fullwidth — velkorysy, plnoploshny: tmavy gradient do odtienu primarnej, velky nadpis, 70vh */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--rv-bg) 0%, color-mix(in srgb, var(--rv-accent) 24%, #05050a) 100%); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-h1 { letter-spacing: -0.02em; text-shadow: 0 2px 48px rgba(0, 0, 0, 0.55); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth .rv-hero-text { font-size: calc(20px * var(--bsc-text-scale, 1)); max-width: 640px; margin-left: auto; margin-right: auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-btn-ghost, :is(.cp-blocks-full, .cp-page) .rv-hero-style-fullwidth:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) a.rv-btn-ghost { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; }
/* minimal — bez dekorácií, kompaktné, zarovnané vľavo */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal { padding: 72px 0 80px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-bg-glow { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-split { grid-template-columns: 1fr; margin-top: 24px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-visual { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-h1 { font-size: clamp(40px, 6vw, 80px); text-align: left; margin: 8px 0 24px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-eyebrow { justify-content: flex-start; text-align: left; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-eyebrow { justify-content: flex-start; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-eyebrow > span:not(.rv-sparkle) { text-align: left; }
/* minimal — cisty, redakcny: svetle pozadie (odlisnost), tmavy text, bez uppercase, bez hviezdiciek */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal { min-height: 50vh; background: #ffffff; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-h1, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-h1-filled { font-family: var(--rv-body); font-weight: 600; font-size: clamp(34px, 4.5vw, 60px); text-transform: none; letter-spacing: -0.01em; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-h1, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-h1-filled { color: #1a1a24; text-shadow: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-text { font-size: calc(18px * var(--bsc-text-scale, 1)); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-hero-text { color: #4a4a55; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-hero-eyebrow .rv-sparkle { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-btn, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) a.rv-btn, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-btn-ghost, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) a.rv-btn-ghost { background: transparent; color: #1a1a24; border: none; box-shadow: none; border-radius: 0; padding: 6px 0; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-btn::after, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-btn-ghost::after { content: '\2192'; margin-left: 8px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-btn:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal a.rv-btn:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal .rv-btn-ghost:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-minimal a.rv-btn-ghost:hover { background: transparent; color: var(--rv-accent); transform: none; box-shadow: none; }
/* bold — accent gradient pozadie, tmavý text, vycentrované */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold { background: linear-gradient(135deg, var(--rv-accent), var(--rv-accent-2)); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold .rv-hero-bg-glow { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold .rv-hero-split { grid-template-columns: 1fr; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold .rv-hero-visual { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold .rv-hero-body { align-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
/* Farbu textu vypisujeme len vtedy, ked hero nema fotku ani svetly variant.
   Nad fotkou a vo svetlom variante urcuje farbu renderer (--rv-text podla
   overlayMode) a sablona — inak vysiel biely podnadpis na svetlom hero. */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-h1,
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-h1-filled,
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-hero-text { color: var(--rv-bg, #0a0a0f); text-shadow: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-bold .rv-hero-actions { justify-content: center; }
/* prestige — elegantné vycentrované, accent linka, väčší rozostup */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-visual { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-split { grid-template-columns: 1fr; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-body { align-items: center; text-align: center; max-width: 780px; margin: 0 auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-h1 { letter-spacing: 0.04em; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-text { color: var(--rv-text-2); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-actions { justify-content: center; }
/* prestige — elegantny, luxusny: takmer cierne pozadie s vinetou, serif nadpis (spaced caps nechane),
   svetlejsi podnadpis, len zdrzanlive ghost tlacidla s accent ramom, 80vh vertikalne v strede */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(ellipse 100% 90% at 50% 40%, #101015 0%, #070709 65%, #030304 100%); }

/* ===================================================================
   VYSKA HERO BLOKU — pole "Vyska" v builderi (data.heightMode)
   ===================================================================
   Trieda sa emituje LEN ked ma blok ulozenu hodnotu. Blok bez nej
   ziadnu triedu nedostane a vyzera presne ako doteraz, teda podla
   rv-hero-style-*. Preto sa existujucim tenantom nic nemeni.

   Jednotka je svh (small viewport height), nie vh. Na mobile sa vh
   viaze na najvacsi viewport, takze pri skrolovani, ked sa schova
   adresny riadok, hero preskoci. svh sa viaze na najmensi viewport
   a pri skrolovani sa nemeni vobec. Fallback na vh je pre prehliadace
   bez podpory svh — tam ostane dnesne spravanie.

   Padding sa prepisuje tiez, nielen min-height. Styl bold ziadny
   min-height nema, takze bez toho by nizsie hodnoty neurobili nic —
   hero by sa nezmensil pod sucet paddingov.

   Specificita je zamerne o triedu vyssia nez rv-hero-style-*, aby
   nastavenie prebilo min-height zo stylu (fullwidth 70vh, minimal
   50vh, prestige 80vh). Bez toho by pole pri tychto styloch mlcalo.
   =================================================================== */

:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-h-full {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(48px, 6vw, 96px) 0;
}
:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-h-almost {
  min-height: 90vh;
  min-height: 90svh;
  padding: clamp(40px, 5vw, 80px) 0;
}
:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-h-tall {
  min-height: 75vh;
  min-height: 75svh;
  padding: clamp(40px, 5vw, 80px) 0;
}
:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-h-medium {
  min-height: 55vh;
  min-height: 55svh;
  padding: clamp(32px, 4vw, 64px) 0;
}
:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-h-short {
  min-height: 35vh;
  min-height: 35svh;
  padding: clamp(24px, 3vw, 48px) 0;
}

:is(.cp-blocks-full, .cp-page) .rv-hero[class*="rv-hero-h-"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-bg-glow { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 5vw, 88px); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-hero-text { letter-spacing: 0.02em; max-width: 560px; margin-left: auto; margin-right: auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-hero-text { color: rgba(255, 255, 255, 0.66); }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-btn, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige a.rv-btn, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-btn-ghost, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige a.rv-btn-ghost { background: transparent; color: var(--rv-accent); border: 1px solid var(--rv-accent); box-shadow: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-btn:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige a.rv-btn:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige .rv-btn-ghost:hover, :is(.cp-blocks-full, .cp-page) .rv-hero-style-prestige a.rv-btn-ghost:hover { background: rgba(var(--rv-accent-rgb, 196, 255, 61), 0.1); color: var(--rv-accent); border-color: var(--rv-accent); transform: none; box-shadow: none; }
/* split (Split foto) — text vlavo v svojej polovici, fotka vpravo, 50/50. Nadpis + eyebrow su v DOM
   nad gridom rv-hero-split, preto grid dame na .rv-container a rv-hero-split na display:contents, aby
   sa rv-hero-body a rv-hero-visual stali polozkami toho isteho gridu. */
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto 1fr; column-gap: 64px; align-items: start; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-eyebrow { grid-column: 1; grid-row: 1; align-self: end; justify-content: flex-start; text-align: left; margin-bottom: 14px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-eyebrow { justify-content: flex-start; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-eyebrow > span:not(.rv-sparkle) { text-align: left; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-h1 { grid-column: 1; grid-row: 2; text-align: left; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; margin: 0 0 24px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-split { display: contents; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-body { grid-column: 1; grid-row: 3; align-self: start; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-visual { grid-column: 2; grid-row: 1 / 4; align-self: stretch; aspect-ratio: auto; height: 100%; min-height: 460px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-container:not(:has(.rv-hero-visual)) { grid-template-columns: 1fr; }
/* Ked ma hero vybranu Vysku, obsah sa v nej vycentruje (rv-hero-h-* dava
   sekcii flex a justify-content: center). Mriezka vnutri uz teda nesmie
   riadky nafukovat — riadky `1fr auto 1fr` vyrovnaju prvy riadok na vysku
   tela, takze nad nadpisom vznikne prazdne miesto vo vyske tela a hero
   prerastie vybranu vysku. Na /kamenarstvo to robilo 1027 px namiesto 810
   a nadpis az na 437 px od vrchu sekcie.
   Hero bez vybranej vysky si drzi dnesne spravanie, takze sa nemeni nic
   tenantom, ktori pole nepouzivaju. */
:is(.cp-blocks-full, .cp-page) .rv-hero[class*="rv-hero-h-"].rv-hero-style-split .rv-container {
  grid-template-rows: auto auto auto;
  align-content: center;
}
:is(.cp-blocks-full, .cp-page) .rv-hero[class*="rv-hero-h-"].rv-hero-style-split .rv-hero-eyebrow { align-self: auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero[class*="rv-hero-h-"].rv-hero-style-split .rv-hero-visual { align-self: center; height: auto; }
:is(.cp-blocks-full, .cp-page) .rv-stat { display: flex; flex-direction: column; padding-right: 16px; border-right: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-stat:last-child { border-right: none; padding-right: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-stats .rv-stat { padding-right: 20px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-stats .rv-stat + .rv-stat { padding-left: 20px; }
:is(.cp-blocks-full, .cp-page) .rv-hero-stats .rv-stat:last-child { padding-right: 0; }
:is(.cp-blocks-full, .cp-page) .rv-stat--text { justify-content: center; }
:is(.cp-blocks-full, .cp-page) .rv-stat-text { font-family: var(--rv-body); font-size: calc(15px * var(--bsc-text-scale, 1)); font-weight: 600; line-height: 1.35; color: var(--rv-text); }
:is(.cp-blocks-full, .cp-page) .rv-stats-band .rv-stat-text { font-size: calc(18px * var(--bsc-text-scale, 1)); }
:is(.cp-blocks-full, .cp-page) .rv-stat-value { font-family: var(--rv-display); font-size: clamp(40px, 4vw, 56px); font-weight: 400; line-height: 1; color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-stat-label { font-family: var(--rv-body); font-size: calc(12px * var(--bsc-text-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rv-text-3); margin-top: 6px; }
:is(.cp-blocks-full, .cp-page) .rv-hero:has(.rv-hero-bg-media) .rv-stat-value { color: var(--rv-text); }
:is(.cp-blocks-full, .cp-page) .rv-hero:has(.rv-hero-bg-media) .rv-stat-label { color: var(--rv-text-2); }
:is(.cp-blocks-full, .cp-page) .rv-hero:has(.rv-hero-bg-media) .rv-hero-stats, :is(.cp-blocks-full, .cp-page) .rv-hero:has(.rv-hero-bg-media) .rv-hero-stats .rv-stat { border-color: var(--rv-text-2); }
@media (min-width: 601px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero-stats:has(.rv-stat:nth-child(4)) { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
}

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero { padding: 80px 0 90px; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-split { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-visual { order: -1; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-actions { width: 100%; }
}
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-container { grid-template-columns: 1fr; grid-template-rows: none; column-gap: 0; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-eyebrow { grid-column: 1; grid-row: auto; align-self: auto; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-h1 { grid-column: 1; grid-row: auto; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-body { grid-column: 1; grid-row: auto; align-self: auto; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-style-split .rv-hero-visual { grid-column: 1; grid-row: auto; order: 0; align-self: auto; height: auto; min-height: 300px; margin-top: 24px; }
}
@media (max-width: 480px) {
  :is(.cp-blocks-full, .cp-page) .rv-container, :is(.cp-blocks-full, .cp-page) .rv-container-narrow { padding: 0 20px; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-actions { flex-direction: column; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-actions .rv-btn, :is(.cp-blocks-full, .cp-page) .rv-hero-actions .rv-btn-ghost { width: 100%; justify-content: center; }
}

/* Mobilne staty (about/hero .rv-hero-stats): desktop 3-stlpcovy grid so zvislymi border-right
   oddelovacmi sa na uzkej sirke natlaci a oddelovace vyzeraju rozbite. Na mobile stack pod seba,
   konzistentny rozostup, bez zvislych oddelovacov. tpl-trade (Blackchurch) vynechany -> ostava 1:1. */
@media (max-width: 600px) {
  body:not(.tpl-trade) :is(.cp-blocks-full, .cp-page) .rv-hero-stats { grid-template-columns: 1fr; gap: 20px; max-width: 100%; padding-top: 28px; }
  body:not(.tpl-trade) :is(.cp-blocks-full, .cp-page) .rv-hero-stats .rv-stat { padding-right: 0; padding-left: 0; border-right: none; }
}

:is(.cp-blocks-full, .cp-page) .rv-section { padding: var(--bsc-block-y, 140px) 0; background: var(--rv-bg); position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-section-alt { background: var(--rv-bg-2); border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-section-head { text-align: center; max-width: 880px; margin: 0 auto 80px; }
:is(.cp-blocks-full, .cp-page) .rv-section-intro { margin: 18px auto 0; max-width: 54ch; font-family: var(--rv-body); font-size: calc(16px * var(--bsc-text-scale, 1)); line-height: 1.7; color: var(--rv-text-2); }
:is(.cp-blocks-full, .cp-page) .rv-section-head .rv-eyebrow { justify-content: center; display: inline-flex; }

:is(.cp-blocks-full, .cp-page) .rv-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Presne styri karty: 3 + 1 osamotena vyzera zle, preto vlastny rytmus.
   KAZDE pravidlo musi byt v media query. Selektor s :has() ma vyssiu
   specifickost ako holy .rv-services-grid, takze mimo media query prebije
   aj mobilny jeden stlpec nizsie — tak sa na 390 px objavili dva stlpce
   so 161 px kartami a orezanymi nadpismi (2026-09-28). */
@media (min-width: 901px) and (max-width: 1279.98px) {
  :is(.cp-blocks-full, .cp-page) .rv-services-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  :is(.cp-blocks-full, .cp-page) .rv-services-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
:is(.cp-blocks-full, .cp-page) .rv-service-card { display: flex; flex-direction: column; background: var(--rv-bg-2); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); padding: 40px 36px; text-decoration: none; color: var(--rv-text); transition: all 0.35s ease; position: relative; overflow: hidden; min-height: 0; }
:is(.cp-blocks-full, .cp-page) .rv-section-alt .rv-service-card { background: var(--rv-bg-3); }
/* Vlastne farby, zaoblenie a tien karty z buildera (blok Sluzby). !important preto, lebo
   sablony si kartu prebijaju cez body.tpl-* selektory a volba tenanta ma vyhrat. */
:is(.cp-blocks-full, .cp-page) .rv-services--custom .rv-service-card, :is(.cp-blocks-full, .cp-page) .rv-services--custom .rv-service-card:hover { background: var(--svc-card-bg, var(--rv-bg-2)) !important; color: var(--svc-card-text, var(--rv-text)) !important; border-radius: var(--svc-card-radius, var(--rv-radius-lg)) !important; box-shadow: var(--svc-card-shadow, none) !important; }
:is(.cp-blocks-full, .cp-page) .rv-services--custom-text .rv-service-card .rv-service-card-title { color: var(--svc-card-text) !important; }
:is(.cp-blocks-full, .cp-page) .rv-services--custom-text .rv-service-card .rv-service-card-desc, :is(.cp-blocks-full, .cp-page) .rv-services--custom-text .rv-service-card .rv-service-card-price { color: var(--svc-card-text-2) !important; }
:is(.cp-blocks-full, .cp-page) .rv-services--custom-text .rv-service-card .rv-service-card-price strong { color: var(--svc-card-text) !important; }
:is(.cp-blocks-full, .cp-page) .rv-services--custom-text .rv-service-card .rv-service-card-icon { background: color-mix(in srgb, var(--svc-card-text) 10%, transparent) !important; border-color: color-mix(in srgb, var(--svc-card-text) 22%, transparent) !important; }
:is(.cp-blocks-full, .cp-page) .rv-service-card::before { content: ''; position: absolute; top: -60%; right: -40%; width: 300px; height: 300px; background: radial-gradient(circle, var(--rv-accent-glow) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
:is(.cp-blocks-full, .cp-page) .rv-service-card:hover { border-color: var(--rv-accent); transform: translateY(-6px); background: var(--rv-bg-3); }
:is(.cp-blocks-full, .cp-page) .rv-service-card:hover::before { opacity: 1; }
:is(.cp-blocks-full, .cp-page) .rv-service-card-icon { width: 72px; height: 72px; border-radius: 18px; background: var(--rv-bg-3); border: 1px solid var(--rv-line-2); margin-bottom: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-service-card-icon-ph { color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-service-card-icon-ph svg { width: 36px; height: 36px; }
:is(.cp-blocks-full, .cp-page) .rv-service-card:hover .rv-service-card-icon { border-color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-service-card-title { font-family: var(--rv-display); font-size: calc(32px * var(--bsc-text-scale, 1)); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.05; color: var(--rv-text); margin: 0 0 16px; position: relative; z-index: 1; overflow-wrap: anywhere; }
:is(.cp-blocks-full, .cp-page) .rv-service-card-desc { font-family: var(--rv-body); font-size: calc(15px * var(--bsc-text-scale, 1)); line-height: 1.65; color: var(--rv-text-2); margin: 0 0 24px; flex: 1; position: relative; z-index: 1; }
:is(.cp-blocks-full, .cp-page) .rv-service-card-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rv-body); font-size: calc(12px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-accent); margin-top: auto; position: relative; z-index: 1; }

:is(.cp-blocks-full, .cp-page) .rv-about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
:is(.cp-blocks-full, .cp-page) .rv-about-visual { position: relative; border-radius: var(--rv-radius-lg); overflow: visible; aspect-ratio: 1 / 1.1; }
:is(.cp-blocks-full, .cp-page) .rv-about-visual > img, :is(.cp-blocks-full, .cp-page) .rv-about-visual > .rv-about-visual-placeholder { width: 100%; height: 100%; border-radius: var(--rv-radius-lg); border: 1px solid var(--rv-line); background: var(--rv-bg); object-fit: cover; display: block; }
:is(.cp-blocks-full, .cp-page) .rv-about-visual-placeholder { display: flex; align-items: center; justify-content: center; color: var(--rv-accent); opacity: 0.55; padding: 8%; box-sizing: border-box; }
:is(.cp-blocks-full, .cp-page) .rv-about-visual-placeholder svg { width: 100%; height: 100%; max-width: 360px; }
:is(.cp-blocks-full, .cp-page) .rv-about-body { display: flex; flex-direction: column; align-items: flex-start; }
:is(.cp-blocks-full, .cp-page) .rv-about-body .rv-h2 { margin-bottom: 24px; }
:is(.cp-blocks-full, .cp-page) .rv-about-text { font-family: var(--rv-body); font-size: calc(17px * var(--bsc-text-scale, 1)); line-height: 1.75; color: var(--rv-text-2); margin: 0 0 40px; max-width: 600px; }

:is(.cp-blocks-full, .cp-page) .rv-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
:is(.cp-blocks-full, .cp-page) .rv-feature-card { padding: 48px 36px; background: var(--rv-bg-2); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); position: relative; overflow: hidden; transition: all 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-feature-card:hover { border-color: var(--rv-accent); transform: translateY(-4px); }
:is(.cp-blocks-full, .cp-page) .rv-feature-num { font-family: var(--rv-display); font-size: calc(72px * var(--bsc-text-scale, 1)); font-weight: 400; line-height: 0.85; color: var(--rv-accent); margin-bottom: 24px; text-shadow: 0 0 30px var(--rv-accent-glow); }
:is(.cp-blocks-full, .cp-page) .rv-feature-title { font-family: var(--rv-display); font-size: calc(26px * var(--bsc-text-scale, 1)); font-weight: 400; text-transform: uppercase; line-height: 1.1; color: var(--rv-text); margin: 0 0 16px; }
:is(.cp-blocks-full, .cp-page) .rv-feature-desc { font-family: var(--rv-body); font-size: calc(14px * var(--bsc-text-scale, 1)); line-height: 1.65; color: var(--rv-text-2); margin: 0; }

:is(.cp-blocks-full, .cp-page) .rv-feature-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
:is(.cp-blocks-full, .cp-page) .rv-feature-li { position: relative; padding-left: 26px; font-family: var(--rv-body); font-size: calc(16px * var(--bsc-text-scale, 1)); line-height: 1.7; color: var(--rv-text-2); }
:is(.cp-blocks-full, .cp-page) .rv-feature-li::before { content: ''; position: absolute; left: 4px; top: calc(0.85em - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--rv-accent); }

:is(.cp-blocks-full, .cp-page) .rv-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-card { padding: 44px 36px; background: var(--rv-bg-3); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-rating { display: flex; gap: 4px; margin-bottom: 24px; }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-rating svg { width: 18px; height: 18px; color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-quote { font-family: var(--rv-body); font-size: calc(16px * var(--bsc-text-scale, 1)); line-height: 1.7; color: var(--rv-text); margin: 0 0 28px; font-style: italic; }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-author { padding-top: 24px; border-top: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-author-name { font-family: var(--rv-body); font-size: calc(14px * var(--bsc-text-scale, 1)); font-weight: 700; color: var(--rv-text); text-transform: uppercase; letter-spacing: 0.06em; }
:is(.cp-blocks-full, .cp-page) .rv-testimonial-author-title { font-family: var(--rv-body); font-size: calc(12px * var(--bsc-text-scale, 1)); color: var(--rv-text-3); margin-top: 4px; }

:is(.cp-blocks-full, .cp-page) .rv-cta-band { background: var(--rv-accent); color: var(--rv-bg, #0a0a0f); padding: 140px 0; text-align: center; position: relative; overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band-shape, :is(.cp-blocks-full, .cp-page) .rv-cta-band::before, :is(.cp-blocks-full, .cp-page) .rv-cta-band::after { content: ''; position: absolute; border-radius: 50%; background: rgba(var(--rv-bg-rgb, 10, 10, 15), 0.08); pointer-events: none; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band::before { width: 420px; height: 420px; top: -200px; left: -100px; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band::after { width: 420px; height: 420px; bottom: -200px; right: -100px; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band-shape { width: 180px; height: 180px; top: 40px; right: 15%; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band .rv-container { position: relative; z-index: 2; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band .rv-eyebrow { justify-content: center; margin-bottom: 20px; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band .rv-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
:is(.cp-blocks-full, .cp-page) .rv-cta-band .rv-btn.rv-cta-ghost, :is(.cp-blocks-full, .cp-page) .rv-cta-band a.rv-btn.rv-cta-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.75); }
:is(.cp-blocks-full, .cp-page) .rv-cta-band .rv-btn.rv-cta-ghost:hover, :is(.cp-blocks-full, .cp-page) .rv-cta-band a.rv-btn.rv-cta-ghost:hover { background: #fff; color: var(--rv-accent); border-color: #fff; }
:is(.cp-blocks-full, .cp-page) .rv-cta-title { font-family: var(--rv-display); font-size: clamp(48px, 7vw, 112px); font-weight: 400; text-transform: uppercase; line-height: 0.92; color: var(--rv-bg, #0a0a0f); margin: 0 0 28px; letter-spacing: -0.005em; }
:is(.cp-blocks-full, .cp-page) .rv-cta-text { font-family: var(--rv-body); font-size: calc(18px * var(--bsc-text-scale, 1)); line-height: 1.65; color: rgba(var(--rv-bg-rgb, 10, 10, 15), 0.82); max-width: 680px; margin: 0 auto 44px; }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-section { padding: var(--bsc-block-y-mob, 80px) 0; }
  :is(.cp-blocks-full, .cp-page) .rv-section-head { margin-bottom: 48px; }
  :is(.cp-blocks-full, .cp-page) .rv-services-grid, :is(.cp-blocks-full, .cp-page) .rv-testimonials { grid-template-columns: 1fr; }
  :is(.cp-blocks-full, .cp-page) .rv-features { grid-template-columns: repeat(2, 1fr); }
  :is(.cp-blocks-full, .cp-page) .rv-about { grid-template-columns: 1fr; gap: 48px; }
  :is(.cp-blocks-full, .cp-page) .rv-about-visual { order: -1; }
  :is(.cp-blocks-full, .cp-page) .rv-cta-band { padding: 80px 0; }
}
@media (max-width: 480px) {
  :is(.cp-blocks-full, .cp-page) .rv-features { grid-template-columns: 1fr; }
}

:is(.cp-blocks-full, .cp-page) .rv-service-card-price { font-family: var(--rv-body); font-size: calc(12px * var(--bsc-text-scale, 1)); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-text-3); margin-bottom: 20px; position: relative; z-index: 1; }
:is(.cp-blocks-full, .cp-page) .rv-service-card-price strong { font-family: var(--rv-display); font-size: calc(28px * var(--bsc-text-scale, 1)); font-weight: 400; color: var(--rv-accent-ink, var(--rv-accent)); letter-spacing: 0; margin-left: 8px; }
:is(.cp-blocks-full, .cp-page) .rv-eyebrow-dark, :is(.cp-blocks-full, .cp-page) .rv-eyebrow-dark .rv-sparkle { color: var(--rv-bg, #0a0a0f); }

:is(.cp-blocks-full, .cp-page) .rv-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
:is(.cp-blocks-full, .cp-page) .rv-contact-card { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; background: var(--rv-bg-3); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); text-decoration: none; transition: all 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-contact-card:hover { border-color: var(--rv-accent); transform: translateY(-4px); }
:is(.cp-blocks-full, .cp-page) .rv-contact-card-label { font-family: var(--rv-body); font-size: calc(12px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-contact-card-value { font-family: var(--rv-body); font-size: calc(16px * var(--bsc-text-scale, 1)); color: var(--rv-text); }

:is(.cp-blocks-full, .cp-page) .rv-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
:is(.cp-blocks-full, .cp-page) .rv-price-card { display: flex; flex-direction: column; padding: 44px 36px; background: var(--rv-bg-2); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); position: relative; transition: all 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-price-card:hover { border-color: var(--rv-accent); transform: translateY(-6px); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured { background: var(--rv-price-hi-bg, #1a1a24); border-color: var(--rv-accent); padding: 52px 40px; transform: scale(1.04); z-index: 1; box-shadow: 0 0 0 1px var(--rv-accent), 0 24px 70px rgba(0, 0, 0, 0.35); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured:hover { transform: scale(1.04) translateY(-6px); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-price-name { color: var(--rv-price-hi-ink, #ffffff); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-price-value { color: var(--rv-price-hi-ink, #ffffff); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-price-value span { color: var(--rv-price-hi-ink-2, rgba(255, 255, 255, 0.6)); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-price-features li { color: var(--rv-price-hi-ink-2, rgba(255, 255, 255, 0.75)); border-bottom-color: var(--rv-price-hi-line, rgba(255, 255, 255, 0.12)); }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-btn { background: var(--rv-price-hi-btn-bg, #ffffff); color: var(--rv-price-hi-btn-ink, #1a1a24); box-shadow: none; }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-btn:hover { background: var(--rv-price-hi-btn-bg, #ffffff); color: var(--rv-price-hi-btn-ink, #1a1a24); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
body:not(.tpl-remeselnik) :is(.cp-blocks-full, .cp-page) .rv-price-card .rv-btn, body:not(.tpl-remeselnik) :is(.cp-blocks-full, .cp-page) .rv-price-card a.rv-btn { justify-content: center; text-align: center; }
:is(.cp-blocks-full, .cp-page) .rv-price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 999px; background: var(--rv-accent); color: var(--rv-bg, #0a0a0f); font-family: var(--rv-body); font-size: calc(11px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
:is(.cp-blocks-full, .cp-page) .rv-price-name { font-family: var(--rv-body); font-size: calc(13px * var(--bsc-text-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-text-3); margin-bottom: 16px; }
:is(.cp-blocks-full, .cp-page) .rv-price-value { font-family: var(--rv-display); font-size: clamp(48px, 5vw, 72px); font-weight: 400; line-height: 1; color: var(--rv-accent); margin-bottom: 28px; }
:is(.cp-blocks-full, .cp-page) .rv-price-value span { font-family: var(--rv-body); font-size: calc(14px * var(--bsc-text-scale, 1)); font-weight: 500; color: var(--rv-text-3); letter-spacing: 0; }
:is(.cp-blocks-full, .cp-page) .rv-price-value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
:is(.cp-blocks-full, .cp-page) .rv-price-num { font-weight: inherit; white-space: nowrap; }
:is(.cp-blocks-full, .cp-page) .rv-price-prefix { font-style: normal; font-family: var(--rv-body); font-size: calc(15px * var(--bsc-text-scale, 1)); font-weight: 500; color: var(--rv-text-3); }
:is(.cp-blocks-full, .cp-page) .rv-price-value span { white-space: nowrap; }
:is(.cp-blocks-full, .cp-page) .rv-price-card-featured .rv-price-prefix { color: var(--rv-price-hi-ink-2, rgba(255, 255, 255, 0.6)); }
:is(.cp-blocks-full, .cp-page) .rv-price-features { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; }
:is(.cp-blocks-full, .cp-page) .rv-price-features li { font-family: var(--rv-body); font-size: calc(15px * var(--bsc-text-scale, 1)); color: var(--rv-text-2); padding: 12px 0; border-bottom: 1px solid var(--rv-line); }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-contact-cards, :is(.cp-blocks-full, .cp-page) .rv-price-grid { grid-template-columns: 1fr; }
  :is(.cp-blocks-full, .cp-page) .rv-price-card-featured { transform: none; }
  :is(.cp-blocks-full, .cp-page) .rv-price-card-featured:hover { transform: translateY(-6px); }
}

:is(.cp-blocks-full, .cp-page) .rv-faq { max-width: 880px; margin: 0 auto; }
:is(.cp-blocks-full, .cp-page) .rv-faq-item { border-bottom: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; cursor: pointer; list-style: none; font-family: var(--rv-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; text-transform: uppercase; color: var(--rv-text); transition: color 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-faq-item summary::-webkit-details-marker { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-faq-item summary::after { content: '+'; font-family: var(--rv-body); font-size: calc(28px * var(--bsc-text-scale, 1)); color: var(--rv-accent); flex-shrink: 0; transition: transform 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-faq-item summary:hover { color: var(--rv-accent-ink, var(--rv-accent)); }
:is(.cp-blocks-full, .cp-page) .rv-faq-item[open] summary { color: var(--rv-accent-ink, var(--rv-accent)); }
:is(.cp-blocks-full, .cp-page) .rv-faq-item[open] summary::after { transform: rotate(45deg); }
:is(.cp-blocks-full, .cp-page) .rv-faq-answer { font-family: var(--rv-body); font-size: calc(16px * var(--bsc-text-scale, 1)); line-height: 1.7; color: var(--rv-text-2); padding: 0 0 28px; max-width: 760px; }

:is(.cp-blocks-full, .cp-page) .rv-stats-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; }
:is(.cp-blocks-full, .cp-page) .rv-stats-band .rv-stat { flex: 0 1 auto; padding: 0; border-right: none; align-items: flex-start; min-width: 140px; }
:is(.cp-blocks-full, .cp-page) .rv-stat-value-lg { font-family: var(--rv-display); font-size: clamp(48px, 6vw, 88px); font-weight: 400; line-height: 1; color: var(--rv-accent); text-shadow: 0 0 40px var(--rv-accent-glow); }

/* auto-fit s hornym stropom stopy: pri styroch polozkach vyjde styri stlpce,
   pri dvoch ostanu karty rovnako siroke a mriezka sa vycentruje — namiesto
   dvoch uzkych kariet nalepenych vlavo. */
:is(.cp-blocks-full, .cp-page) .rv-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 28px; }
:is(.cp-blocks-full, .cp-page) .rv-team-card { background: var(--rv-bg-2); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); overflow: hidden; transition: all 0.3s ease; }
:is(.cp-blocks-full, .cp-page) .rv-team-card:hover { border-color: var(--rv-accent); transform: translateY(-4px); }
:is(.cp-blocks-full, .cp-page) .rv-team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--rv-bg-3); }
:is(.cp-blocks-full, .cp-page) .rv-team-photo-ph { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--rv-accent); opacity: 0.5; background: var(--rv-bg-3); }
:is(.cp-blocks-full, .cp-page) .rv-team-photo-ph svg { width: 48px; height: 48px; }
:is(.cp-blocks-full, .cp-page) .rv-team-body { padding: 24px 28px; }
:is(.cp-blocks-full, .cp-page) .rv-team-name { font-family: var(--rv-display); font-size: calc(24px * var(--bsc-text-scale, 1)); font-weight: 400; color: var(--rv-text); margin: 0 0 4px; line-height: 1.2; }
:is(.cp-blocks-full, .cp-page) .rv-team-role { font-family: var(--rv-body); font-size: calc(13px * var(--bsc-text-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rv-accent); }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-team-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); }
}
@media (max-width: 640px) {
  :is(.cp-blocks-full, .cp-page) .rv-team-grid { grid-template-columns: minmax(0, 340px); }
}
@media (max-width: 600px) {
  :is(.cp-blocks-full, .cp-page) .rv-stats-band { gap: 28px 0; flex-direction: column; align-items: center; text-align: center; }
  :is(.cp-blocks-full, .cp-page) .rv-stats-band .rv-stat { align-items: center; min-width: 0; }
}
@media (max-width: 480px) {
  :is(.cp-blocks-full, .cp-page) .rv-team-grid { grid-template-columns: 1fr; }
}

:is(.cp-blocks-full, .cp-page) .rv-gallery-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
:is(.cp-blocks-full, .cp-page) .rv-gallery-tile { position: relative; overflow: hidden; border-radius: var(--rv-radius-lg); aspect-ratio: 1; background: var(--rv-bg-3); border: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
:is(.cp-blocks-full, .cp-page) .rv-gallery-tile:hover img { transform: scale(1.05); }
:is(.cp-blocks-full, .cp-page) .rv-gallery-tile-wide { grid-column: span 2; aspect-ratio: 2 / 1; }

:is(.cp-blocks-full, .cp-page) .rv-video-wrap { max-width: 960px; margin: 0 auto; border-radius: var(--rv-radius-lg); overflow: hidden; border: 1px solid var(--rv-line); aspect-ratio: 16 / 9; background: #000; position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
:is(.cp-blocks-full, .cp-page) .rv-video-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--rv-bg-3); color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-video-ph svg { width: 80px; height: 80px; }

:is(.cp-blocks-full, .cp-page) .rv-banner { padding: 80px 0; background: var(--rv-bg-2); border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); text-align: center; position: relative; overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-banner-media { position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-banner-media img { width: 100%; display: block; }
:is(.cp-blocks-full, .cp-page) .rv-banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: linear-gradient(0deg, rgba(var(--rv-bg-rgb, 10, 10, 15), 0.7), rgba(var(--rv-bg-rgb, 10, 10, 15), 0.3)); text-align: center; }

:is(.cp-blocks-full, .cp-page) .rv-divider { padding: 64px 0; }
:is(.cp-blocks-full, .cp-page) .rv-divider-line { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
:is(.cp-blocks-full, .cp-page) .rv-divider-line hr { border: 0; border-top: 1px solid var(--rv-line); margin: 0; }
:is(.cp-blocks-full, .cp-page) .rv-divider-dots { display: flex; gap: 12px; justify-content: center; }
:is(.cp-blocks-full, .cp-page) .rv-divider-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 12px var(--rv-accent-glow); }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-gallery-grid2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  :is(.cp-blocks-full, .cp-page) .rv-gallery-grid2 { grid-template-columns: 1fr; }
  :is(.cp-blocks-full, .cp-page) .rv-gallery-tile-wide { grid-column: auto; aspect-ratio: 1; }
}

:is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-eyebrow { color: rgba(255,255,255,0.9); }

/* ── Svetlý text na farebnom/tmavom pozadí ──────────────────
   CTA pás (rv-cta-band) má accent farbu ako pozadie a hero bold
   štýl má accent gradient — všetok text vnútri musí byť svetlý.
   stats-band a contact karty používajú theme-adaptívne pozadie
   (rv-section-alt / rv-bg-3), takže text sa prispôsobí sám. */
:is(.cp-blocks-full,.cp-page) .rv-cta-band { color: #fff; }
:is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-eyebrow { color: rgba(255,255,255,0.9); }
:is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-cta-text { color: rgba(255,255,255,0.85); }
:is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-btn { color: var(--rv-accent); background: #fff; }
:is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-btn:hover { background: rgba(255,255,255,0.9); }

:is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-hero-body { color: #fff; }
:is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-hero-body p { color: rgba(255,255,255,0.85); }
:is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-btn { color: var(--rv-accent); background: #fff; }
:is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); background: transparent; }

/* Nad fotkou a vo svetlom variante nemaju styly hero ziadnu absolutnu farbu.
   Text tam berie --rv-text / --rv-text-2, ktore renderer nastavuje inline
   podla overlayMode, takze plati aj to, co si zvolil tenant. Sablony s vlastnym
   pravidlom (body.tpl-* = 0,4,1) toto prebiju. */
:is(.cp-blocks-full,.cp-page) :is(.rv-hero-style-bold, .rv-hero-style-minimal, .rv-hero-style-fullwidth, .rv-hero-style-prestige):is(:has(.rv-hero-bg-media), .rv-hero-overlay-light) :is(.rv-hero-body, .rv-h1, .rv-h1-filled) {
  color: var(--rv-text);
}
:is(.cp-blocks-full,.cp-page) :is(.rv-hero-style-bold, .rv-hero-style-minimal, .rv-hero-style-fullwidth, .rv-hero-style-prestige):is(:has(.rv-hero-bg-media), .rv-hero-overlay-light) :is(.rv-hero-eyebrow, .rv-eyebrow, .rv-hero-eyebrow .rv-sparkle) {
  color: var(--rv-text-2, var(--rv-text));
}
:is(.cp-blocks-full,.cp-page) :is(.rv-hero-style-bold, .rv-hero-style-minimal, .rv-hero-style-fullwidth, .rv-hero-style-prestige):is(:has(.rv-hero-bg-media), .rv-hero-overlay-light) :is(.rv-hero-text, .rv-hero-body p) {
  color: var(--rv-text-2, var(--rv-text));
}
:is(.cp-blocks-full,.cp-page) :is(.rv-hero-style-bold, .rv-hero-style-minimal, .rv-hero-style-fullwidth, .rv-hero-style-prestige):is(:has(.rv-hero-bg-media), .rv-hero-overlay-light) :is(.rv-btn-ghost, a.rv-btn-ghost) {
  color: var(--rv-text);
  border-color: currentColor;
}

/* Blackchurch (trade) — jednotny tvar tlacidiel + hover kontrast fix */
.tpl-trade .rv-btn,
.tpl-trade .rv-btn-ghost { border-radius: 12px !important; }

/* biele CTA (cta-band + bold hero): na hover NESMIE zbeliet text */
.tpl-trade .rv-cta-band .rv-btn:hover,
.tpl-trade .rv-hero-style-bold .rv-btn:hover {
  background: var(--bsc-btn-bg, var(--rv-accent));
  color: var(--bsc-btn-text, #fff);
}

/* Rovnaky hover kontrast fix pre vsetky ostatne sablony (PEVNINA/default, beauty, gastro, pravnik...).
   Genericky a.rv-btn:hover (0,3,1) inak prebije farbu na var(--rv-bg) a na bielych CTA (cta-band /
   hero-style-bold) text splynie s pozadim. Vratime farbu na accent (rest-state parovanie, citatelne),
   pozadie nechavame nedotknute. tpl-trade vynechany cez :not() -> Blackchurch ostava 1:1. */
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-btn:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-cta-band a.rv-btn:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-hero-style-bold .rv-btn:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-hero-style-bold a.rv-btn:hover {
  color: var(--rv-accent);
}

/* Sekundarne/outline tlacidlo (rv-btn-ghost, napr. "Nase sluzby") na FAREBNOM hero/CTA pozadi:
   genericky ghost:hover (r.47) prehodi text aj okraj na var(--rv-accent) -> accent na accent pozadi = zmizne.
   Na farebnom pozadi drzime biely text + biely okraj + jemny biely fill (viditelna hover afordancia),
   co ladi s normal stavom (r.288 biely text/okraj). tpl-trade vynechany cez :not() -> Blackchurch 1:1. */
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-hero-style-bold .rv-btn-ghost:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-hero-style-bold a.rv-btn-ghost:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-btn-ghost:hover,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-cta-band a.rv-btn-ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,0.15);
}

/* Configurator Highlight (lib blok) — text vlavo + obrazok vpravo */
.cp-confhl{padding:80px 0;}
.cp-confhl-inner{max-width:1320px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.cp-confhl-body{display:flex;flex-direction:column;align-items:flex-start;}
.cp-confhl-eyebrow{color:var(--rv-accent);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;margin-bottom:.6rem;}
.cp-confhl-title{font-family:var(--rv-display);font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0 0 1rem;}
.cp-confhl-text{color:var(--rv-text-muted,#555);font-size:1.05rem;line-height:1.6;margin:0 0 1.5rem;max-width:520px;}
.cp-confhl-bullets{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:.6rem;}
.cp-confhl-bullets li{position:relative;padding-left:1.6rem;color:var(--rv-text,#222);}
.cp-confhl-bullets li::before{content:"";position:absolute;left:0;top:.4em;width:.7rem;height:.7rem;background:var(--rv-accent);border-radius:2px;}
.cp-confhl-cta{display:inline-block;background:var(--bsc-btn-bg, var(--rv-accent));color:var(--bsc-btn-text, #fff);padding:16px 32px;border-radius:12px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:.03em;transition:background .2s;}
.cp-confhl-cta:hover{background:var(--bsc-btn-hover-bg, var(--rv-accent-dark,var(--color-primary-dark)));}
.cp-confhl a.cp-confhl-cta,.cp-confhl a.cp-confhl-cta:hover{color:var(--bsc-btn-text, #fff);}
.cp-confhl-visual img,.cp-confhl-visual .cp-confhl-video{width:100%;height:auto;border-radius:16px;display:block;object-fit:cover;}
.cp-confhl-visual-link{display:block;cursor:pointer;}
.cp-confhl-placeholder{width:100%;aspect-ratio:4/3;background:#f0ede9;border-radius:16px;}
@media(max-width:860px){
  .cp-confhl{padding:48px 0;}
  .cp-confhl-inner{grid-template-columns:1fr;gap:32px;}
  .cp-confhl-visual{order:-1;}
}

body:not(.tpl-remeselnik) .rv-h1 { font-size: clamp(32px, 5vw, 72px); text-transform: none; line-height: 1.05; }
body:not(.tpl-remeselnik) .rv-h2 { font-size: clamp(24px, 3.5vw, 44px); text-transform: none; line-height: 1.12; }
body:not(.tpl-remeselnik) .rv-cta-title { font-size: clamp(28px, 4vw, 52px); text-transform: none; }
body:not(.tpl-remeselnik) .rv-service-card-title { font-size: calc(22px * var(--bsc-text-scale, 1)); text-transform: none; }
body:not(.tpl-remeselnik) .rv-feature-title { font-size: calc(20px * var(--bsc-text-scale, 1)); text-transform: none; }
body:not(.tpl-remeselnik) .rv-eyebrow { text-transform: none; letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .bc-site .rv-h1 { font-size: clamp(2rem, 9vw, 3.25rem); overflow-wrap: break-word; }
  .bc-site .rv-hero iframe { width: auto !important; height: 100% !important; aspect-ratio: 16 / 9 !important; min-width: 100% !important; min-height: 0 !important; max-width: none !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; object-fit: cover !important; }
  .bc-site .rv-hero video { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; min-width: 0 !important; min-height: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; }
}
@media (max-width: 600px) {
  .bc-site .rv-hero-eyebrow { flex-wrap: nowrap; justify-content: center; gap: 8px; padding: 0 16px; font-size: clamp(10px, 3vw, 13px); letter-spacing: 0.1em; max-width: 100%; }
  .bc-site .rv-hero-eyebrow .rv-sparkle { font-size: calc(13px * var(--bsc-text-scale, 1)); flex: 0 0 auto; }
}

/* ── Ornamenty (✱) na accent pozadí ────────────────────────────────
   hero-bold a CTA pás (rv-cta-band) majú accent farbu ako pozadie a text
   je biely (pôvodné správanie, nemeníme). Problém boli len ornamenty ✱,
   ktoré dedili accent farbu (var(--rv-accent)) -> na accent pozadí SPLÝVALI
   (neviditeľné, napr. na medical modrej). Zosvetlíme ich na bielu, nech
   ladia s bielym eyebrow textom a sú vždy viditeľné. Text ostáva biely.
   tpl-trade (blackchurch, živý) je vynechaný cez :not() -> ostáva 1:1. */
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-hero-style-bold:not(:has(.rv-hero-bg-media)):not(.rv-hero-overlay-light) .rv-eyebrow .rv-sparkle,
body:not(.tpl-trade) :is(.cp-blocks-full,.cp-page) .rv-cta-band .rv-eyebrow .rv-sparkle { color: rgba(255,255,255,0.9); }

/* Zastupny nahlad produktu bez fotky. Pokryva prazdnu aj mrtvu URL:
   lezi pod obrazkom, a ked sa obrazok nenacita, onerror ho skryje.
   Pouziva vypis, detail produktu aj karta pri bodke na vykrese. */
.pf-noimg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f1f2f4;
  color: #c2c7ce;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}
.pf-noimg svg { width: 38px; height: 38px; flex-shrink: 0; }
.pf-noimg-sku {
  font-size: calc(11px * var(--bsc-text-scale, 1));
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #969ca6;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esh-card-img-wrap, .esd-main-img, .hs-card-thumb-wrap, .esd-rel-img { position: relative; }
.esh-card-img-wrap img, .esd-main-img img, .hs-card-thumb-wrap img, .esd-rel-img img { position: relative; z-index: 1; }
.hs-card-thumb-wrap {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.hs-card-thumb-wrap .pf-noimg { gap: 0; padding: 0; }
.hs-card-thumb-wrap .pf-noimg svg { width: 24px; height: 24px; }
.hs-card-thumb-wrap .pf-noimg-sku { display: none; }

/* Prvky hlavicky, ktore si tenant zapina: kosik, telefon, e-mail.
   Bez zapnutia sa nevykresli nic, takze pravidla nemaju na kom pusobit. */
.site-header .header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bsc-line, #e2e8f0);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.site-header .header-cart:hover { border-color: var(--bsc-primary, #2563eb); color: var(--bsc-primary, #2563eb); }
.site-header .header-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--bsc-primary, #2563eb);
  color: var(--bsc-on-primary, #fff);
  font-size: calc(11px * var(--bsc-text-scale, 1));
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.site-header .header-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--bsc-text-scale, 1));
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header .header-contact:hover { color: var(--bsc-primary, #2563eb); }
@media (max-width: 1024px) {
  .site-header .header-contact span { display: none; }
}
/* Do 2026-09-25 sa na mobile skryval aj telefon, takze nastavenie "Kontakt
   v hlavicke" tam nerobilo nic. Telefon ostava ako dotykovy cil 44x44 vedla
   hamburgera; e-mail sa na uzky displej nevojde a ostava skryty. */
@media (max-width: 900px) {
  /* Hamburger je dotykovy ciel ako telefon vedla neho — min-*, takze vacsi
     sa nezmensi a mensi sa dotiahne na 44. */
  .site-header .menu-toggle, .site-header .bc-drawer-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .site-header .header-contact-email { display: none; }
  .site-header .header-contact-phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
  }
  .site-header .header-contact-phone svg { width: 22px; height: 22px; }
}

/* CTA v hlavicke sa nesmie brzdit o vlastnu sirku. Bez toho ho sablony ako
   gastro nechaju siroky 171px a na 320px displeji vytlacia hamburger o 50px
   mimo obrazovku. Tam, kde sa CTA zmesti, sa nic nemeni. */
.site-header .header-cta {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================================================
   Riadky, ktore sa zmestia — jedno pravidlo pre celu platformu

   Trieda chyb: dva prvky vedla seba v jednom riadku (flex alebo grid),
   ktore sa na mobile nezmestia do sirky. Prejavi sa tromi sposobmi:
   prvok vytrca z rodica, riadok je sirsi nez rodic, stranka pretecie.

   Pricina je vzdy ta ista dvojica:
   1. Polozka flexu a mriezky ma min-width: auto, teda sa nezmensi pod
      svoju automaticku minimalnu velkost. Susedne tlacidlo alebo ikonu
      preto vytlaci von z rodica.
   2. Prvok s pevnou sirkou v uzsom stlpci ostane sirsi nez stlpec.

   Doteraz sa to opravovalo po jednom mieste: .fs-input, .fmb-search-input,
   .esh-detail-btn, .chk-cart-info, .rv-hero-eyebrow > span. Tu je to raz
   pre vsetky — dnesne aj buduce.

   Rozsah: vsetci tenanti okrem managed_mode = custom (Brxa). Ten triedu
   bsc-fit-rows na <body> nedostane, takze sa ho ani jeden selektor netyka.

   Cely selektor je zabaleny v :where(), takze ma specificitu 0 a kazde
   konkretne pravidlo sablony aj builderu ho prebije bez !important.
   Bez toho zabalenia by body.bsc-fit-rows malo specificitu (0,1,1) a
   prepisalo by napr. .chk-step-line { max-width: 80px } — merane, stalo
   sa to.

   max-width: 100% NEplati na vsetko, len na prvky s vlastnou vnutornou
   sirkou: obrazky, media, tabulky a ovladacie prvky. Na vsetkom by rozbilo
   zamerne presahy cez zaporny okraj — merane na .esh-apply-bar
   (margin: 8px -16px 0), ktore sa zuzilo z 298 na 266 px.

   Vynimka: prvok, ktory ma byt zamerne sirsi nez rodic (bezici pas,
   celoobrazovkovy hero), si vypyta max-width: none — tak, ako to uz robi
   .cp-hero-slider vo video.css.
   =================================================================== */

/* min-width: 0 plati LEN na uzkych sirkach. Na desktope to bola chyba:
   polozky flexovej navigacie sa smeli zmrstit pod svoj text a sablona ma na
   nich white-space: nowrap, takze text vytiekol z ramceka a popisky sa
   zliali do seba. Merane na 1024 px u tenanta 9003 — vsetkych osem odkazov
   pretekalo (napr. "Domov" 60 px textu v 24 px ramceku) a "KONTAKT" liezol
   do vyhladavacieho pola. Bez tejto triedy 0 preteceni.
   Trieda chyb, na ktoru pravidlo vzniklo, je pritom mobilna — dva prvky
   vedla seba, ktore sa nezmestia do sirky obrazovky. Tam ostava. */
@media (max-width: 768px) {
  :where(body.bsc-fit-rows *) { min-width: 0; }
}

/* ===================================================================
   Hlavicka: polozka sa nikdy neoreze a nikdy nezmizne

   Merane na 9003 pri 1586 px: SLUZBY bolo odrezane v polovici, KONTAKT
   nebolo vidiet vobec a jeho podmenu sa preto nedalo ani otvorit. Osem
   poloziek v prirodzenej sirke (839 px) plus logo, hladanie, kosik a CTA
   potrebuju okolo 1280 px sirky navigacneho riadka.

   Skusane a merane pri 1024 px:
     min-width: auto   navigacia si drzi 839 px, kosik a CTA vypadnu z okna
     min-width: 0      polozky sa zmrstia pod svoj text a popisky sa zlejú
     zalomenie textu   nepomoze, popisky su jednoslovne
     vlastny posuv     nic sa neprekryva, ale polozky su odrezane — presne
                       to, co sa nesmie stat

   Preto pretecene polozky idu do "Viac": zostanu dosiahnutelne aj s celym
   podmenu, riadok sa neroztiahne a nic sa neoreze. Rozhoduje o tom skript
   podla nameranej sirky, nie breakpoint — pocet poloziek aj ich dlzka su
   u kazdeho tenanta ine.

   Brxa (managed_mode = custom) ma vlastnu hlavicku a .desktop-nav nema
   vobec, takze sa jej tieto pravidla netykaju.
   =================================================================== */

body.bsc-fit-rows .desktop-nav { min-width: 0; }
body.bsc-fit-rows .desktop-nav > a,
body.bsc-fit-rows .desktop-nav > .dm-mega,
body.bsc-fit-rows .desktop-nav > .dm-viac { flex: 0 0 auto; }

.desktop-nav .dm-viac { position: relative; }
.desktop-nav .dm-viac[hidden] { display: none; }

.desktop-nav .dm-viac-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.desktop-nav .dm-viac.dm-open .dm-mega-caret { transform: rotate(180deg); }

.desktop-nav .dm-viac-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  max-width: min(calc(100vw - 32px), 340px);
  max-height: min(70vh, 620px);
  overflow-y: auto;
  padding: 10px;
  background: var(--bsc-bg, #fff);
  border: 1px solid var(--bsc-line, rgba(0, 0, 0, .1));
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 320;
}
.desktop-nav .dm-viac.dm-open .dm-viac-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* V panely su polozky pod sebou a text sa spravuje ako v podmenu, nie ako
   v navigacnom riadku — sablona im inak vnuti VELKE pismena a nowrap. */
.site-header .desktop-nav .dm-viac-panel a,
.site-header .desktop-nav .dm-viac-panel .dm-viac-btn {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: calc(14px * var(--bsc-text-scale, 1)) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  line-height: 1.35;
  color: var(--bsc-text, inherit);
}
.site-header .desktop-nav .dm-viac-panel a:hover { background: var(--bsc-surface, rgba(0, 0, 0, .04)); }

/* Polozka s podmenu sa v panely rozbali na miesto — nie je kam otvarat
   dalsi plavajuci panel. Rozbali sa az vtedy, ked je panel otvoreny;
   inak by v zavretom panely stal viditelny blok, ktory tam nema co robit. */
.desktop-nav .dm-viac-panel .dm-mega { position: static; }
.desktop-nav .dm-viac-btn { min-height: 44px; }
.desktop-nav .dm-viac-panel a { min-height: 44px; display: flex; align-items: center; }
.site-header .desktop-nav .dm-viac-panel .dm-mega-trigger { font-weight: 700 !important; }
.desktop-nav .dm-viac-panel .dm-mega-caret { display: none; }
.desktop-nav .dm-viac.dm-open .dm-viac-panel .dm-mega-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: block;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0 0 6px;
  padding: 0 0 0 12px;
  background: none;
  border: none;
  box-shadow: none;
  transition: none;
}
.desktop-nav .dm-viac-panel .dm-mega-karta-obr { display: none; }
.desktop-nav .dm-viac-panel .dm-mega-karta { flex-direction: row; align-items: baseline; gap: 8px; }

:where(body.bsc-fit-rows img, body.bsc-fit-rows picture, body.bsc-fit-rows svg,
  body.bsc-fit-rows video, body.bsc-fit-rows canvas, body.bsc-fit-rows iframe,
  body.bsc-fit-rows embed, body.bsc-fit-rows object, body.bsc-fit-rows table,
  body.bsc-fit-rows input, body.bsc-fit-rows select, body.bsc-fit-rows textarea,
  body.bsc-fit-rows button) { max-width: 100%; }

/* Bezici pas je zamerne sirsi nez obrazovka — to je jeho zmysel. */
:where(body.bsc-fit-rows .bh-marquee-track, body.bsc-fit-rows .rv-marquee-track,
  body.bsc-fit-rows [data-bleed]) { max-width: none; }

/* Suhlas s cookies nesmie sadnut na mobilnu listu.
   Oba prvky su fixed na bottom: 0, ale banner ma z-index 9999 a lista 850,
   takze banner listu prekryl cely — merane na 360 px: lista 850–900,
   banner 764–900, tlacidlo Hladat sa nedalo kliknut vobec, kym navstevnik
   suhlas nezavrel. Vyska listy uz existuje ako premenna --fmb-h, takze
   sa tu nezavadza dalsie cislo. Brxa ma vlastnu listu (.rmb) a triedu
   fmb-on nedostane, takze sa jej to netyka. */
@media (max-width: 768px) {
  body.fmb-on .gdpr-banner { bottom: var(--fmb-h, 0px); }
}

/* ===================================================================
   Zaoblenie tlacidiel — jedno nastavenie pre vsetky sablony

   Zalozka Dizajn -> Tlacidla (hranate / poloble / zaoblene / kruhove)
   nastavi --bsc-btn-radius a prida na <body> triedu bsc-btn-radius.
   Ked tenant nic nenastavil, trieda nevznikne a nezmeni sa ani jedno
   tlacidlo — prazdne teda naozaj znamena dnesny vzhlad.

   Selektor je zamerne bez :where(), lebo tenantovu volbu ma presadit nad
   predvolenym border-radius sablony (.esh-detail-btn { border-radius: 8px }
   ma specificitu 0,1,0, toto pravidlo 0,2,2). Bez toho by nastavenie
   nebolo vidiet nikde inde nez v blokoch.

   Odkazy sa chytaju podla mennej konvencie (-btn, btn-, -cta), lebo tried
   tlacidiel je naprie sablonami cez sest desiatok a vypocet by pri kazdej
   novej sablone zastaral. Kontajnery ako .esd-extra-btns alebo
   .cp-cta-banner su <div>, takze sa ich substringove pravidlo netyka.

   Vynimka: ovladacie ikony, ktorych kruhovy tvar je konstrukcia, nie styl
   (zavriet, mnozstvo +/-, lupa, bodky galerie, hamburger, mobilna lista).
   Tie by hranate nastavenie zmenilo na stvorce bez toho, aby o to niekto
   ziadal.

   !important je tu z rovnakeho dovodu ako pri nastaveniach hlavicky:
   sablona pouziva !important sama (video.css: .header-cta { border-radius:
   999px !important }) a bez neho tenantova volba na CTA v hlavicke vobec
   nebola vidiet. Plati aj proti inline stylu, ktory pisu bloky.

   Brxa (managed_mode = custom) triedu ani token nedostava.
   =================================================================== */

body.bsc-btn-radius :is(
  button,
  input[type="submit"],
  input[type="button"],
  a[class*="-btn"],
  a[class*="btn-"],
  a[class*="-cta"]
):not(
  [class*="icon-btn"], [class*="qty-btn"], [class*="zoom-btn"],
  [class*="-close"], [class*="-dot"], .menu-toggle, [class*="fmb-"]
) {
  border-radius: var(--bsc-btn-radius) !important;
}

/* ===================================================================
   Nastavenia hlavicky zo zalozky H/P

   Kazde pravidlo je viazane na triedu, ktora vznikne len vtedy, ked
   tenant hodnotu naozaj nastavi. Prazdne pole nevygeneruje ani token,
   ani triedu — vzhlad ostava presne taky, aky je dnes.

   Specificita je zamerne zvysena cez body[class] a !important tam, kde
   sablony pouzivaju !important samy (video.css to robi na kazdej
   vlastnosti navigacie). Bez toho by sa nastavenie neprejavilo.

   Brxa (managed_mode = custom) triedy nedostava a .site-header nema.
   =================================================================== */

body[class].hdr-h .site-header-inner { min-height: var(--hdr-h) !important; }
/* Samotny min-height vysku len zvysuje, znizit ju nevie: pod nim drzi listu
   vertikalny padding sablony (20+20 px) a logo (41 px), takze najnizsie, co
   sa dalo dosiahnut, bolo 89 px — nastavenie 64 aj 72 davalo to iste cislo.
   Preto sa pod tou istou triedou nuluje vertikalny padding a logo sa stropuje
   na vysku listy. Horizontalny padding ostava, aby sa nezmenilo odsadenie od
   okrajov. Plati LEN ked ma tenant vysku nastavenu — bez triedy hdr-h sa
   nic z toho neaplikuje. */
body[class].hdr-h .site-header-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
body[class].hdr-h .site-header .logo-img { max-height: calc(var(--hdr-h) - 16px) !important; }

/* Pri velmi nizkej liste drzi vysku zdola obsah, nie logo. Na 9003 to bolo
   CTA tlacidlo v hlavicke s vyskou 49 px (padding 14+14 a line-height 21),
   takze nastavenie 40 aj 48 davalo rovnakych 49 px a spodok posuvnika bol
   mrtvy. Tlacidlo sa preto skaluje s listou rovnako ako logo. Vodorovny
   padding ostava, meni sa len zvisly rozmer. */
body[class].hdr-h .site-header .header-cta,
body[class].hdr-h .site-header .header-search {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: calc(var(--hdr-h) - 16px) !important;
  min-height: 0 !important;
}

html body[class][class].hdr-bg .site-header { background: var(--hdr-bg); }

/* Hlavicka ma plnu farbu bez skla a bez zmensovania pri rolovani (sklo a
   prechody padding/min-height sekali rolovanie na Androide). Sablona, ktora
   nema hlavicku na --bsc-bg, nastavi --hdr-surface (gastro: --g-dark). */
html body[class] .site-header { background: var(--hdr-surface, var(--bsc-bg, #ffffff)); }
html body[class][class].hdr-bg .site-header { background: var(--hdr-bg); }
html body[class] .site-header, html body[class] .site-header-inner { transition: none; }

/* Farby patičky z buildera (Hlavička a pätička → Pätička). Bez nastavenia
   trieda na <body> nie je a platí šablóna — preto tu nie je žiadna
   predvolená hodnota. */
/* Odstup medzi obsahom a pätičkou. Predvolene 0 — kto ho nenastaví, nemá
   zmenu. Šablóna si ho zapne tokenom `--bsc-footer-gap`. */
html body[class] main { padding-bottom: var(--bsc-footer-gap, 0px); }

html body[class][class].ftr-bg .site-footer { background: var(--ftr-bg); }
html body[class][class].ftr-text .site-footer { color: var(--ftr-text); }
html body[class][class].ftr-text .site-footer :where(p, span, li, strong, em, small, h2, h3, h4, address, a, .footer-copy, .footer-credit) { color: var(--ftr-text); }

body[class].hdr-nav-size .site-header .desktop-nav a { font-size: var(--hdr-nav-size) !important; }
body[class].hdr-nav-weight .site-header .desktop-nav a { font-weight: var(--hdr-nav-weight) !important; }
body[class].hdr-caps .site-header .desktop-nav a { text-transform: uppercase !important; }
/* Bez velkych pismen sa rusi aj prestrkovanie — bez neho nema zmysel
   a je to najdrahsia vlastnost hlavicky: pri osmich polozkach 93 px. */
body[class].hdr-no-caps .site-header .desktop-nav a { text-transform: none !important; letter-spacing: normal !important; }

/* Obe strany naraz a s !important: video.css ma na navigacii
   margin: 0 auto !important, takze nastavenie len jednej strany by
   druhu nechalo na auto a poloha by sa nezmenila. */
body[class].hdr-nav-left .site-header .desktop-nav { margin-left: 0 !important; margin-right: auto !important; }
body[class].hdr-nav-center .site-header .desktop-nav { margin-left: auto !important; margin-right: auto !important; }
body[class].hdr-nav-right .site-header .desktop-nav { margin-left: auto !important; margin-right: 0 !important; }

body[class].hdr-sticky .site-header { position: sticky !important; top: 0 !important; z-index: 200 !important; }
body[class].hdr-no-sticky .site-header { position: static !important; }

/* ===================================================================
   Bezpecne zony displeja (viewport-fit=cover)

   BaseLayout ma viewport-fit=cover, takze env(safe-area-inset-*) uz nie
   su nula: vyrez a domovsky indikator zasahuju do stranky. Sablony maju
   na .site-header vodorovny padding 0 (video 0 !important), preto sa
   inset pridava sem s !important a nic im neprepise. Zasuvka menu je
   fixna len v niektorych sablonach — skript v BaseLayoute jej da triedu
   mn-fixed a az ta dostane rozperky hore a dole; vlozene menu ostatnych
   sablon sa nemeni. Spodna rozperka berie --fmb-h, ked je zapnuta
   mobilna navigacna lista — ta ostava nad zasuvkou viditelna.
   =================================================================== */
body[class] .site-header {
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}
.mobile-nav.mn-fixed::before { content: ''; display: block; flex: 0 0 auto; height: env(safe-area-inset-top, 0px); }
.mobile-nav.mn-fixed::after { content: ''; display: block; flex: 0 0 auto; height: var(--fmb-h, env(safe-area-inset-bottom, 0px)); }
.mobile-nav.mn-fixed { border-right: env(safe-area-inset-right, 0px) solid transparent; }


/* ===================================================================
   Vyhladavanie: lupa v hlavicke + prekrytie cez celu obrazovku

   Vzor je Ravox, odmerany na 1440 px: prekrytie fixed cez cele okno,
   tmave pozadie, nadpis 32 px / 700, pole 867 x 61 px so spodnou linkou,
   prechod 0.3 s. Rovnake na vsetkych sirkach — lupa v hlavicke aj
   tlacidlo Hladat v mobilnej liste otvaraju to iste.

   Pole v hlavicke zaberalo 200 px, ktore chybali menu; lupa ma 44 px.
   Pri osmich polozkach to je rozdiel medzi "zmesti sa" a "nezmesti".

   Brxa (managed_mode = custom) .site-header nema, takze sa jej to netyka.
   =================================================================== */

.site-header .hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
.site-header .hs-btn:hover { opacity: .75; }
.site-header .hs-btn:focus-visible { outline: 2px solid var(--bsc-primary); outline-offset: 2px; border-radius: 8px; }

body.hs-lock { overflow: hidden; }

/* Modal musi byt nad chromom stranky. Lista oznamu ma z-index 9998 a pri
   otvorenom hladani cez nu presvital pas oznamu. */
.hs-ov {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
  background: var(--bsc-surface, #ffffff);
  opacity: 0;
  transition: opacity .3s ease;
}
.hs-ov.hs-open { opacity: 1; }
.hs-ov[hidden] { display: none; }

.hs-ov-x {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--bsc-text, #1a1a1a);
  cursor: pointer;
}
.hs-ov-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 8px; }

.hs-ov-in { width: min(867px, 100%); text-align: center; }

.hs-ov-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--bsc-primary);
}
.hs-ov-title {
  margin: 0 0 28px;
  font-family: var(--bsc-display, var(--bsc-font, inherit));
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bsc-text, #1a1a1a);
}

.hs-ov-form { width: 100%; }
.hs-ov-input {
  width: 100%;
  height: 61px;
  padding: 0 8px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bsc-text, #1a1a1a) 22%, transparent);
  background: none;
  color: var(--bsc-text, #1a1a1a);
  font-family: inherit;
  font-size: calc(17px * var(--bsc-text-scale, 1));
  font-weight: 600;
  box-sizing: border-box;
}
.hs-ov-input::placeholder { color: color-mix(in srgb, var(--bsc-text, #1a1a1a) 50%, transparent); }
.hs-ov-input:focus { outline: none; border-bottom-color: var(--bsc-primary); border-bottom-width: 2px; }

@media (max-width: 600px) {
  .hs-ov { padding: 20px 16px; align-items: flex-start; padding-top: 96px; }
  .hs-ov-x { top: 16px; right: 16px; }
  .hs-ov-input { height: 52px; font-size: calc(16px * var(--bsc-text-scale, 1)); }
}

/* Hlavicka na telefone ma justify-content: space-between a gap 32px.
   Pri space-between je gap len MINIMUM medzi polozkami, takze kym je
   miesto, jeho zmensenie nic nepresunie. Ked miesto nie je, riadok
   potrebuje logo 161 + lupa 44 + kosik 42 + hamburger 44 + tri medzery
   po 32 + odsadenie 64 = 451 px a hamburger vylezie von. Merane: pri
   390 px pretekala stranka o 30 px, pri 412 px o 7 px.
   Preto sa pod 480 px stiahne len minimalna medzera na 6 px (451 -> 373).
   Odsadenie 32 px ostava, takze na 380-480 px sa vizual nemeni.
   Brxa triedu bsc-fit-rows nedostava. */
@media (max-width: 480px) {
  /* !important je tu preto, ze sablona ho na tychto vlastnostiach pouziva
     tiez (video.css: gap 32px !important). */
  body.bsc-fit-rows .site-header .site-header-inner { gap: 6px !important; }
}

/* Pod 380 px nestaci ani uzsia medzera: 161 + 44 + 42 + 44 + 18 + 64 = 373
   je viac nez 320 px. Merane na 320 px: riadok mal 351 px a hamburger
   vysiel 31 px von. Namiesto skryvania lupy (bez nej by sa navstevnik
   k hladaniu nedostal, ked tenant nema mobilnu listu) sa stiahne
   odsadenie a zmensi logo. Dotykove ciele ostavaju 44 px. */
@media (max-width: 380px) {
  /* !important je tu preto, ze sablona ho na tychto vlastnostiach pouziva
     tiez (video.css: padding 20px 32px !important). Bez neho by sa uzsie
     odsadenie neprejavilo. */
  body.bsc-fit-rows .site-header .site-header-inner {
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.bsc-fit-rows .site-header .logo-img { max-width: 108px; }
  body.bsc-fit-rows .site-header .logo { min-width: 0; }
}

:is(.cp-blocks-full, .cp-page) .rv-yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
:is(.cp-blocks-full, .cp-page) .rv-yt-grid-short { grid-template-columns: repeat(4, 1fr); }
:is(.cp-blocks-full, .cp-page) .rv-yt-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
:is(.cp-blocks-full, .cp-page) .rv-yt-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--rv-radius-lg); aspect-ratio: 16 / 9; background: var(--rv-bg-3); border: 1px solid var(--rv-line); }
:is(.cp-blocks-full, .cp-page) .rv-yt-grid-short .rv-yt-thumb { aspect-ratio: 9 / 16; }
:is(.cp-blocks-full, .cp-page) .rv-yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
:is(.cp-blocks-full, .cp-page) .rv-yt-card:hover .rv-yt-thumb img { transform: scale(1.05); }
:is(.cp-blocks-full, .cp-page) .rv-yt-play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--rv-accent); background: color-mix(in srgb, var(--rv-accent) 78%, transparent); color: var(--bsc-on-primary, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, .28); transition: background .25s ease, transform .25s ease; }
:is(.cp-blocks-full, .cp-page) .rv-yt-card:hover .rv-yt-play { background: var(--rv-accent); transform: scale(1.08); }
:is(.cp-blocks-full, .cp-page) .rv-yt-play svg { width: 18px; height: 18px; margin-left: 2px; }
:is(.cp-blocks-full, .cp-page) .rv-yt-play-txt { font-family: var(--rv-display, inherit); font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
:is(.cp-blocks-full, .cp-page) .rv-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 2; }
:is(.cp-blocks-full, .cp-page) .rv-yt-playing .rv-yt-play { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-yt-playing .rv-yt-thumb img { visibility: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-yt-card[data-yt-id] { cursor: pointer; }
:is(.cp-blocks-full, .cp-page) .rv-yt-meta { display: flex; flex-direction: column; gap: 4px; }
:is(.cp-blocks-full, .cp-page) .rv-yt-title { font-family: var(--rv-display, inherit); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--rv-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-yt-card:hover .rv-yt-title { color: var(--rv-accent); }
:is(.cp-blocks-full, .cp-page) .rv-yt-date { font-size: 13px; color: var(--rv-text-2); }
:is(.cp-blocks-full, .cp-page) .rv-yt-card-ph { pointer-events: none; }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-yt-grid { grid-template-columns: repeat(2, 1fr); }
  :is(.cp-blocks-full, .cp-page) .rv-yt-grid-short { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  :is(.cp-blocks-full, .cp-page) .rv-yt-grid { grid-template-columns: 1fr; gap: 16px; }
  :is(.cp-blocks-full, .cp-page) .rv-yt-grid-short { grid-template-columns: repeat(2, 1fr); }
  :is(.cp-blocks-full, .cp-page) .rv-yt-play { left: 10px; bottom: 10px; width: 34px; height: 34px; }
  :is(.cp-blocks-full, .cp-page) .rv-yt-play svg { width: 15px; height: 15px; }
  :is(.cp-blocks-full, .cp-page) .rv-yt-play-txt { font-size: 14px; }
}

.site-footer .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px 40px; align-items: start; text-align: left; max-width: 1140px; margin: 0 auto 28px; }
.site-footer .footer-col { min-width: 0; }
.site-footer .footer-col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer .footer-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; line-height: 1.6; }
.site-footer .footer-cols .footer-about { max-width: 340px; margin: 14px 0 0; opacity: 0.8; line-height: 1.6; }
.site-footer .footer-cols .footer-socials { display: flex; gap: 16px; margin: 16px 0 0; }
.site-footer .footer-address { white-space: pre-line; }
.site-footer .footer-hours-row { display: flex; justify-content: space-between; gap: 14px; }
.site-footer .footer-hours-day { opacity: 0.75; }
.site-footer .footer-hours-time { white-space: nowrap; }
.cp-hours-vac {
  max-width: 520px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bsc-text-muted, currentColor);
}

.cp-hours-vac--now {
  font-weight: 700;
  color: var(--bsc-primary, currentColor);
}

.site-footer .footer-vacation {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}

.site-footer .footer-vacation--now {
  font-weight: 700;
  color: var(--bsc-primary, currentColor);
  opacity: 1;
}

.site-footer .footer-col-hours .footer-vacation {
  margin: 0 0 10px;
}

.site-footer .footer-hours-inline { list-style: none; padding: 0; margin: 0 auto 12px; display: flex; gap: 6px 20px; justify-content: center; flex-wrap: wrap; max-width: 720px; }
.site-footer .footer-hours-inline .footer-hours-row { display: inline-flex; justify-content: flex-start; gap: 8px; }
/* Dnesny den v hodinach: plna akcentova farba + jemny podklad z tej istej
   farby, aby bol riadok odlisitelny aj na tmavej paticke, kde samotne tucne
   pismo nevidno. --footer-accent je akcent paticky: default --bsc-primary,
   sablona s vlastnym akcentom v paticke ho prepise svojou premennou. */
.site-footer { --footer-accent: var(--bsc-primary, currentColor); }
.site-footer .footer-hours-row.footer-hours-today { font-weight: 700; color: var(--footer-accent); background: color-mix(in srgb, var(--footer-accent) 14%, transparent); padding: 3px 10px; margin: 0 -10px; border-radius: 6px; }
.site-footer .footer-hours-inline .footer-hours-row.footer-hours-today { margin: 0; }
.site-footer .footer-hours-row.footer-hours-today .footer-hours-day, .site-footer .footer-hours-row.footer-hours-today .footer-hours-time { color: inherit; opacity: 1; }
.site-footer .footer-cols + .footer-copy { border-top: 1px solid rgba(128, 128, 128, 0.25); padding-top: 20px; text-align: center; margin: 0; }
/* Copyright je JEDEN riadok: názov · web od FerkoMedia. Predtym to boli dva
   odseky pod sebou a na mobile sa rozpadli. */
.site-footer .footer-copy { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 0; }
.site-footer .footer-credit { font-size: inherit; opacity: 0.7; }
.site-footer .footer-copy-sep { opacity: 0.5; }

/* Paticka "pod sebou": to iste, co bolo v inline style, len v triedach.
   .container v selektore preto, aby trieda vyhrala nad sablonovymi
   pravidlami typu .tpl-trade .site-footer p { margin } tak, ako predtym
   vyhraval inline style. Hodnoty su 1:1. */
.site-footer .container .footer-logo--stred { width: auto; margin: 0 auto 12px; display: block; }
.site-footer .container .footer-about--stred { max-width: 520px; margin: 0 auto 16px; opacity: .8; line-height: 1.6; }
.site-footer .container .footer-contacts { margin-bottom: 8px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.site-footer .container .footer-socials--stred { margin-bottom: 12px; display: flex; gap: 16px; justify-content: center; }
.site-footer .container .footer-links--stred { margin: 0 auto 16px; max-width: 720px; }
.site-footer .container .footer-links-title { font-weight: 600; margin: 0 0 8px; }
.site-footer .container .footer-links-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap; }

/* Varianty paticky (settings.footer_variant). Spolocne pravidla: text
   najmenej 14 px, na mobile vsetko pod seba. Farby a pozadie dedia zo
   sablony (.site-footer), varianty menia len rozlozenie. */
.site-footer.footer-v :is(p, a, li, span, h4) { font-size: max(14px, 1em) !important; }
.site-footer.footer-v .footer-logo { width: auto; display: block; }
.site-footer.footer-v-minimal .footer-min { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; text-align: left; }
.site-footer.footer-v-minimal .footer-min-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-footer.footer-v-minimal .footer-min-addr { font-size: 14px; opacity: .8; }
.site-footer.footer-v-minimal .footer-name { margin: 0; font-weight: 700; text-decoration: none; color: inherit; }
.site-footer.footer-v-minimal .footer-min-links { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; }
.site-footer.footer-v-minimal .footer-min-links a { color: inherit; text-decoration: none; }
.site-footer.footer-v-minimal .footer-min-links a:hover { text-decoration: underline; }
.site-footer.footer-v-minimal .footer-min-copy { flex: 0 0 auto; text-align: right; }
.site-footer.footer-v-minimal .footer-min-copy p { margin: 0; }
.site-footer.footer-v-minimal .footer-min-copy .footer-copy { justify-content: flex-end; }
.site-footer.footer-v-contact .footer-contact-cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer.footer-v-contact .footer-col-map iframe { width: 100%; aspect-ratio: 4 / 3; min-height: 180px; border: 0; border-radius: var(--bsc-radius, 8px); display: block; }
.site-footer.footer-v-contact .footer-col-list a { color: inherit; }
.site-footer.footer-v-contact .footer-contact-cols + .footer-copy { border-top: 1px solid rgba(128, 128, 128, 0.25); padding-top: 20px; text-align: center; margin: 0; }
@media (max-width: 700px) {
  .site-footer.footer-v-minimal .footer-min { flex-direction: column; text-align: center; gap: 14px; }
  .site-footer.footer-v-minimal .footer-min-copy { text-align: center; }
  .site-footer.footer-v-minimal .footer-min-copy .footer-copy { justify-content: center; }
  .site-footer.footer-v-minimal .footer-logo { margin: 0 auto; }
  .site-footer.footer-v-contact .footer-contact-cols { grid-template-columns: 1fr; text-align: center; }
  .site-footer.footer-v-contact .footer-logo { margin-left: auto; margin-right: auto; }
  .site-footer.footer-v-contact .footer-socials { justify-content: center; }
}
.site-footer .footer-credit a { color: inherit; text-decoration: none; }
.site-footer .footer-credit a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .site-footer .footer-cols { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .site-footer .footer-cols .footer-about { max-width: none; }
  .site-footer .footer-cols .footer-socials { justify-content: center; }
  .site-footer .footer-col-brand .footer-logo { margin-left: auto; margin-right: auto; }
  .site-footer .footer-hours-row { justify-content: center; }
}


/* ===================================================================
   Zaoblenie fotiek a kariet — jedno nastavenie pre vsetky sablony

   Zalozka Dizajn -> Zaoblenie obrazkov a kariet nastavi --bsc-media-radius
   a prida na <body> triedu bsc-media-radius. Ked tenant nic nenastavi,
   trieda nevznikne a nezmeni sa ani jeden blok — prazdne znamena dnesny
   vzhlad, rovnako ako pri tlacidlach.

   !important je tu z rovnakeho dovodu ako pri tlacidlach: bloky si pisu
   border-radius inline (rad zo zalozky Dizajn) a sablony maju vlastne
   pravidla (luxury: var(--lux-radius)). Bez neho by volba nebola vidiet.

   Zoznam je vypisany menom, nie substringom: karta a fotka sa v blokoch
   volaju roznymi triedami a substring by chytil aj veci, ktore tvar drzat
   maju (avatar, bodka slidera, ikona).
   =================================================================== */
body.bsc-media-radius :is(
  .cp-fsplit-media, .cp-fsplit-visual img, .cp-fsplit-placeholder,
  .cp-ffeat-card, .cp-ffeat-img,
  .cp-ed-media, .cp-ed-media img,
  .cp-sl-slide img, .cp-sl-slide video,
  .rv-gallery-tile, .rv-gallery-tile img,
  .rv-team-card, .rv-team-photo, .rv-team-photo-ph,
  .rv-service-card,
  .rv-service-slide,
  .rv-price-card,
  .cp-prod-card, .cp-prodgrid-card
) {
  border-radius: var(--bsc-media-radius) !important;
}


/* ===================================================================
   Zarovnanie obsahu textovych blokov — Dizajn -> Zarovnanie obsahu

   Prazdna volba = vycentrovane, teda dnesny vzhlad: nevznikne trieda
   a nezmeni sa nic. Pri volbe "Dolava na hranu hero" prida BaseLayout
   triedu bsc-align-left a bloky Text, Fancy Text a Cennik zacnu na tej
   istej lavej hrane ako .rv-container (max 1320 px + 32 px, na mobile
   20 px). Sirka riadku ostava citatelna v oboch pripadoch — 70 znakov,
   nie cela stranka.
   =================================================================== */
:is(.cp-blocks-full, .cp-page) .cp-textblock-inner,
:is(.cp-blocks-full, .cp-page) .cp-ftext-inner {
  max-width: min(70ch, 100%);
}
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-textblock,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-ftext,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(.cp-pl-tabs),
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(> .cp-binner > .cp-pricelist-v2) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-textblock-inner,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-ftext-inner,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-pl-tabs,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec > .cp-binner > .cp-pricelist-v2 {
  margin-left: max(32px, calc((100% - 1320px) / 2 + 32px)) !important;
  margin-right: 32px !important;
  max-width: min(70ch, calc(100% - 64px)) !important;
  text-align: left;
}
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-pl-panel .cp-pricelist-v2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-ftext-center .cp-ftext-inner {
  align-items: flex-start;
  text-align: left;
}
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(.cp-pl-tabs) > .cp-binner > h2,
body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(> .cp-binner > .cp-pricelist-v2) > .cp-binner > h2 {
  text-align: left !important;
  margin-left: max(32px, calc((100% - 1320px) / 2 + 32px));
}
@media (max-width: 820px) {
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-textblock-inner,
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-ftext-inner,
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-pl-tabs,
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec > .cp-binner > .cp-pricelist-v2 {
    margin-left: 20px !important;
    margin-right: 20px !important;
    max-width: none !important;
  }
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(.cp-pl-tabs) > .cp-binner > h2,
  body.bsc-align-left :is(.cp-blocks-full, .cp-page) .cp-bsec:has(> .cp-binner > .cp-pricelist-v2) > .cp-binner > h2 {
    margin-left: 20px;
  }
}

/* ---- services: variant bento (Magic UI). Bez data.variant = doterajsia mriezka bez zmeny. ---- */
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 22rem; gap: 16px; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: var(--bsc-radius, 12px); background: var(--bsc-surface, var(--rv-bg-2)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--bsc-text) 3%, transparent), 0 2px 4px color-mix(in oklab, var(--bsc-text) 5%, transparent), 0 12px 24px color-mix(in oklab, var(--bsc-text) 5%, transparent); transition: transform .25s ease, box-shadow .25s ease; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--bsc-text) 4%, transparent), 0 6px 12px color-mix(in oklab, var(--bsc-text) 7%, transparent), 0 20px 36px color-mix(in oklab, var(--bsc-text) 8%, transparent); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(4) { grid-column: span 2; }
/* Bento bez jedinej fotky: riadky podla obsahu, text hore — ziadna prazdna dlazdica. Mix s fotkami
   ostava na pevnych riadkoch (mozaika), karty bez fotky v nom maju text vycentrovany. */
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento-noimg .rv-services-grid { grid-auto-rows: auto; align-items: stretch; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento-noimg .rv-service-card { justify-content: flex-start; height: auto; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento:not(.rv-services--bento-noimg) .rv-service-card--noimg { justify-content: center; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform .5s ease; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 40%, transparent 75%); pointer-events: none; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:hover .rv-service-card-media { transform: scale(1.04); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-body { position: relative; z-index: 2; padding: 20px 22px; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-title,
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-desc,
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-price,
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-price strong,
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-cta { color: #fff; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-desc { color: rgba(255, 255, 255, .85); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:not(.rv-service-card--noimg) .rv-service-card-icon { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-icon { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--bsc-bg); border: 1px solid var(--bsc-line); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-title { margin: 0 0 6px; font-size: 1.25rem; color: var(--bsc-text); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(1) .rv-service-card-title { font-size: 1.75rem; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-desc { margin: 0; color: var(--bsc-text-muted); max-width: 54ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(1) .rv-service-card-desc { -webkit-line-clamp: 3; }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-price { margin: 8px 0 0; padding: 0; border: 0; color: var(--bsc-text); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-cta { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--bsc-primary); }
@media (hover: hover) {
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card-cta { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:hover .rv-service-card-cta { opacity: 1; transform: none; }
}
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento-dark .rv-service-card { box-shadow: inset 0 -20px 80px -20px rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .1); }
:is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento-dark .rv-service-card:hover { box-shadow: inset 0 -20px 80px -20px rgba(255, 255, 255, .18), 0 0 0 1px rgba(255, 255, 255, .16); }
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-services-grid { grid-template-columns: 1fr; grid-auto-rows: 16rem; }
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(1),
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(4) { grid-column: auto; grid-row: auto; }
  :is(.cp-blocks-full, .cp-page) .rv-v.rv-services--bento .rv-service-card:nth-child(1) .rv-service-card-title { font-size: 1.25rem; }
}

/* Hero so slidmi (data.slides): sekcia je trat zdielaneho slidera (.cp-sl), kazdy slide ma
   vlastne pozadie a rovnaky obsah ako hero. Styl, vyska a prekrytie su na sekcii. */
:is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider { padding: 0; display: flex; flex-direction: column; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider > .cp-sl-track { flex: 1 1 auto; min-height: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .rv-hero-slide { position: relative; overflow: hidden; padding: 120px 0 140px; background: var(--rv-bg); display: flex; flex-direction: column; justify-content: center; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider.rv-hero-h-full .rv-hero-slide { padding: clamp(48px, 6vw, 96px) 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider.rv-hero-h-tall .rv-hero-slide { padding: clamp(40px, 5vw, 80px) 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider.rv-hero-h-medium .rv-hero-slide { padding: clamp(32px, 4vw, 64px) 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider.rv-hero-h-short .rv-hero-slide { padding: clamp(24px, 3vw, 48px) 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .rv-hero-slide > .rv-container { width: 100%; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .cp-sl-arr { z-index: 3; background: color-mix(in srgb, var(--rv-bg) 82%, transparent); color: var(--rv-text); border: 1px solid color-mix(in srgb, var(--rv-text) 18%, transparent); }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .cp-sl-arr:hover { background: var(--rv-bg); }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .cp-sl-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; padding: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .cp-sl-dot { background: color-mix(in srgb, var(--rv-text) 35%, transparent); }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider .cp-sl-dot[aria-current="true"] { background: var(--rv-text); }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider:has(.rv-hero-bg-media):not(.rv-hero-overlay-light) .cp-sl-dot { background: rgba(255, 255, 255, 0.45); }
:is(.cp-blocks-full, .cp-page) .rv-hero-slider:has(.rv-hero-bg-media):not(.rv-hero-overlay-light) .cp-sl-dot[aria-current="true"] { background: #ffffff; }
@media (max-width: 1024px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg .rv-hero-slide > .rv-hero-bg-media,
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg .rv-hero-slide > .rv-hero-bg-glow { display: none; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-color .rv-hero-slide { background: var(--rv-hero-mbg) !important; --rv-text: var(--rv-hero-mtext) !important; --rv-text-2: var(--rv-hero-mtext-2) !important; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image .rv-hero-slide { background: #0a0a14 !important; --rv-text: #ffffff !important; --rv-text-2: rgba(255, 255, 255, 0.9) !important; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image .rv-hero-slide::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--rv-hero-mbg-img) var(--rv-hero-bg-pos, center)/cover no-repeat; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-mbg-image .rv-hero-slide::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(10, 10, 20, 0.55); }
}
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider { padding: 0; }
  :is(.cp-blocks-full, .cp-page) .rv-hero-slider .rv-hero-slide { padding: 80px 0 90px; }
}

/* ===================================================================
   Telefon na sirku (360-390 px vysky)

   Lepiaca hlavicka mala 80-97 px, teda stvrtinu displeja, a pod nou
   este lista. Na sirku hlavicka nelepi (odroluje sa) a je nizsia.
   position: relative, nie static: hlavicka ma view-transition-name,
   teda vlastny stacking context, a zasuvka menu je v nej — so static
   by jej z-index 100 prestal platit a hero by zasuvku prekreslil.
   logo najviac 36 px, vnutorny padding 6 px. Plati aj pre tenantov
   s vlastnou vyskou (hdr-h) a s vynutenym lepenim (hdr-sticky), preto
   su tie selektory vypisane — inak by ich !important vyhralo.
   Fixna zasuvka menu ma hore 78 px kvoli hlavicke; na sirku staci 56.
   Hero ma zvisly padding 80-140 px — na sirku 28 px a mensie medzery
   medzi eyebrow, textom a tlacidlami.
   =================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  body[class] .site-header,
  body[class].hdr-sticky .site-header { position: relative !important; top: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  body[class] .site-header-inner,
  body[class].hdr-h .site-header-inner { min-height: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  body[class] .site-header .logo-img,
  body[class].hdr-h .site-header .logo-img { height: auto !important; max-height: 36px !important; }
  .mobile-nav.mn-fixed { padding-top: 56px !important; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero:not(.rv-hero-slider),
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-slider .rv-hero-slide { padding-top: 28px; padding-bottom: 28px; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-eyebrow { margin-bottom: 12px; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-text { margin-bottom: 20px; }
  body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-actions { margin-bottom: 24px; }
}

/* ===================================================================
   Prechody medzi strankami (cross-document view transitions)

   Bez klientskeho routera: prehliadac, ktory to vie, pri navigacii na
   tej istej domene prelne staru a novu stranku; hlavicka a mobilna
   lista maju vlastne meno, takze ostanu stat a prelina sa len obsah.
   Ostatne prehliadace pravidlo ignoruju. Kto ma obmedzeny pohyb,
   prechod nedostane.
   =================================================================== */
@view-transition { navigation: auto; }
body[class] .site-header { view-transition-name: bsc-header; }
body[class] .fmb { view-transition-name: bsc-mobile-bar; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Prvok s atributom hidden musi zmiznut aj vtedy, ked ma vlastne pravidlo
   display s vyssou specifickostou. Bez toho hladanie v katalogu aj na stranke
   odboru "skrylo" karty, ktore zostali na obrazovke. */
body[class] [hidden] { display: none !important; }

/* Ozdobny ram za hero fotkou a zvisly pruh pri texte. Obe su volitelne polia
   bloku (prazdne = vypnute), takze existujucim tenantom nepribudne nic.
   Rozmery su z originalu tdstone.sk: ram 347 x 282 s 13 px obrysom,
   pruh 47 px siroky. */
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame { position: relative; }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame::before {
  content: '';
  position: absolute;
  top: 4%;
  right: 2%;
  width: min(88%, 403px);
  aspect-ratio: 1 / 1;
  border: 13px solid var(--bsc-primary, #c4ff3d);
  z-index: 0;
  pointer-events: none;
}
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame img { position: relative; z-index: 1; }
:is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-text {
  border-left: 8px solid var(--bsc-primary, #c4ff3d);
  padding-left: 22px;
}
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame::before { top: 5%; right: 0; width: min(62%, 169px); border-width: 7px; }
  :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-text { border-left-width: 5px; padding-left: 14px; }
}

/* Nadpisik s linkou namiesto hviezdiciek (Dizajn -> Styl nadpisika).
   Bez triedy na body plati dnesny vzhlad s hviezdickami. */
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .rv-sparkle { display: none; }
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .rv-eyebrow,
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .cp-ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  /* Text sa zalomi a ciara sa zmesti alebo klesne pod text. Predtym tu bolo
     nowrap na oboch osiach a ciara mala pevnu sirku, ktora sa nevedela
     zmensit — nadpisik tak na uzkej obrazovke pretiekol von z okna a prve
     pismeno ostalo odrezane okrajom (390 px, sekcia Nahrobne kamene).
     Teraz ma riadok povolene zalomenie a ciara sa najprv zmensuje. */
  flex-wrap: wrap;
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  color: var(--rv-eb-color, var(--bsc-text-dark, var(--rv-text-2))) !important;
}
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) :is(.rv-eyebrow, .cp-ed-eyebrow)::before,
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .rv-eb-after :is(.rv-eyebrow, .cp-ed-eyebrow)::after {
  content: '';
  width: clamp(60px, 9vw, 130px);
  height: 8px;
  background: var(--bsc-primary, #c4ff3d);
  flex: 0 1 auto;
  min-width: 24px;
}
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .rv-eb-after :is(.rv-eyebrow, .cp-ed-eyebrow)::before { content: none; }
body.bsc-eyebrow-line :is(.cp-blocks-full, .cp-page) .rv-section-head .rv-eyebrow { justify-content: center; }

/* Obrysove hranate tlacidla (Dizajn -> Styl tlacidiel). */
body.bsc-btn-outline :is(.cp-blocks-full, .cp-page) :is(.rv-btn, a.rv-btn, .rv-btn-dark, .cp-ed-cta) {
  background: transparent !important;
  color: var(--bsc-text, #fff) !important;
  border: 1px solid var(--bsc-primary, #c4ff3d) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.bsc-btn-outline :is(.cp-blocks-full, .cp-page) :is(.rv-btn, a.rv-btn, .rv-btn-dark, .cp-ed-cta):hover {
  background: var(--bsc-primary, #c4ff3d) !important;
  color: var(--bsc-on-primary, #111) !important;
}
body.bsc-btn-outline :is(.cp-blocks-full, .cp-page) :is(.rv-btn-ghost, a.rv-btn-ghost) {
  border-radius: 0 !important;
}

/* Ked ma hero vizual ozdobny ram, fotka stoji na ploche stranky — bez boxu,
   obrysu, zaoblenia a stmavujuceho prechodu, ktore ma predvoleny vizual.
   Ram je stvorec vpravo a fotka lezi v nom na stred, tak ako na povodnom
   tdstone.sk/kamenarstvo (ram 403 x 403, kamen v jeho strede). Bez pevneho
   pomeru sa vizual natiahol na celu vysku hero a ram ostal maly v rohu. */
:is(.cp-blocks-full, .cp-page) .rv-hero .rv-hero-visual--frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
  align-self: center;
  overflow: visible;
}
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame::after { display: none; }

/* Volitelna velkost hero nadpisu (pole titleSize). Prazdne = dnesny vzhlad. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--title-xl .rv-h1,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--title-xl .rv-h1-filled,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero--title-xl:not(:has(.rv-hero-bg-media)) .rv-h1,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero--title-xl:not(:has(.rv-hero-bg-media)) .rv-h1-filled {
  font-size: clamp(56px, 9.7vw, 140px);
  line-height: 0.9;
  letter-spacing: 2px;
}

/* Hero so zvislym pruhom drzi text vlavo — pruh vedla vycentrovaneho odseku
   vyzera ako omyl. Plati len pri zapnutom poli accentBar. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-body {
  align-items: flex-start;
  text-align: left;
  margin: 0;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-actions { justify-content: flex-start; }
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar :is(.rv-hero-text, .rv-hero-text p, .rv-hero-body p) { text-align: left; }

/* Hero s plosnym pozadim (pole bgPlain): bez ozdobnej ziary a bez prechodu,
   plocha drzi farbu schemy. Prazdne pole = dnesny vzhlad so ziarou. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--plain { background: var(--bsc-bg, #0a0a14); }
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--plain .rv-hero-bg-glow { display: none; }
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--plain::before,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--plain::after { display: none; }

/* Fotka hero blizsie k textu a nikdy nepretecie okno. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-split { column-gap: clamp(12px, 1.6vw, 28px); }
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-visual { margin-left: clamp(-90px, -5vw, 0px); }
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame { max-width: 100%; overflow-x: clip; }

/* Nadpis sekcie vo velkosti originalu (pole titleSize na editoriali). */
body[class] :is(.cp-blocks-full, .cp-page) .cp-ed--title-xl .cp-ed-title {
  font-size: clamp(34px, 5.6vw, 80px);
  line-height: 1.0;
}

/* Fotka v ramovanom hero vizuale sa nereze: vysoke aj stvorcove obrazky
   (napr. 1500 x 1500 na podstranke) inak z boxu vidno len prúžok. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero-visual--frame img {
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  display: block;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--bar .rv-hero-visual--frame { align-self: center; }

/* Paticka so socialnymi ikonami: logo vlavo, ikony v strede, menu vpravo,
   pod tym oddelovac a kredit na stred. Varianta sa zapina v Hlavicke a paticke. */
.site-footer.footer-v-social .footer-soc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 8px 24px; }
.site-footer.footer-v-social .footer-soc-brand { justify-self: start; }
.site-footer.footer-v-social .footer-soc-icons { display: flex; gap: 12px; justify-self: center; }
.site-footer.footer-v-social .footer-soc-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: #fff; }
.site-footer.footer-v-social .footer-soc-ico svg { width: 20px; height: 20px; }
.site-footer.footer-v-social .footer-soc-fb { background: #1877f2; }
.site-footer.footer-v-social .footer-soc-ig { background: var(--bsc-primary, #c13584); }
.site-footer.footer-v-social .footer-soc-links { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; max-width: 520px; }
.site-footer.footer-v-social .footer-soc-links a { text-decoration: none; }
.site-footer.footer-v-social .footer-soc-copy { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); padding-top: 18px; text-align: center; }
.site-footer.footer-v-social .footer-soc-copy .footer-copy { margin: 0; }
@media (max-width: 820px) {
  .site-footer.footer-v-social .footer-soc { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .site-footer.footer-v-social .footer-soc-brand, .site-footer.footer-v-social .footer-soc-links { justify-self: center; justify-content: center; }
}

/* Priblizenie fotky v hero vizuale (polia Priblizenie a Stred priblizenia).
   Sluzi na fotky s velkym priehladnym okrajom — orez sa robi zobrazenim,
   subor sa nemeni. Bez poli sa nic nedeje. */
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--zoom { overflow: hidden; }
:is(.cp-blocks-full, .cp-page) .rv-hero-visual--zoom img {
  transform: scale(var(--hv-zoom, 1));
  transform-origin: var(--hv-focus, 50% 50%);
}

/* ---------- OBSAH PODSTRÁNKY V PANELI ----------
   Zapína sa v Dizajne (Obsah v paneli). Panel aj podklad berú farbu z tokenov
   tenanta, nikdy natvrdo bielu; zaoblenie ide z media_radius. Hero ostáva nad
   panelom na celú šírku, takže omrvinky v ňom zostávajú v tmavom páse. */
.cp-obsah-panel {
  /* Panel rastie so šírkou okna, text v ňom ostáva na 65-75 znakoch.
     Spodná hranica 832 px = šírka panelu v predlohe (tá nerastie vôbec),
     horná 1240 px, aby sa na veľmi širokej obrazovke neroztiahol donekonečna.
     min(100%) ho pri úzkom okne nenechá pretiecť. */
  --cp-panel-sirka: min(100%, clamp(832px, 62vw, 1240px));
  /* Plocha panelu = SVETLEJSIA z dvojice --bsc-bg / --bsc-surface. CSS ich
     porovnat nevie, ale `background-blend-mode: lighten` presne to spravi:
     prekryje dve plne plochy a nechá svetlejšiu. Pevne vybrat jednu z nich
     sa neda — v svetlych schemach je raz svetlejsia bg (luxury, default,
     lawyer), raz surface (gastro, professional, video, skola), a vo VSETKYCH
     tmavych schemach je svetlejsia surface. Panel tak ostane kartou aj v
     tmavej scheme, len tmavou — nie bielou plochou na ciernom. */
  /* Pas okolo panelu = TMAVSIA z tej istej dvojice. Stmavovat panel pevnym
     percentom cierne sa neda: v tmavej scheme je plocha uz takmer cierna a
     5,5 % cierne na nej neurobi nic (merane 31,28,26 -> 29,27,25, pomer
     1,013:1 — hrana neviditelna). Takto dostane kazda schema presne ten
     rozdiel, ktory ma v tokenoch navrhnuty. */
  background-image: linear-gradient(var(--bsc-bg, #fff), var(--bsc-bg, #fff)),
                    linear-gradient(var(--bsc-surface, #f8fafc), var(--bsc-surface, #f8fafc));
  background-blend-mode: darken;
  padding: 72px 24px clamp(48px, 7vw, 96px);
}
.cp-obsah-panel-in {
  max-width: var(--cp-panel-sirka);
  margin: 0 auto;
  /* Ta ista svetlejsia plocha, ale bez stmavenia — panel je vzdy o kusok
     svetlejsi nez pas okolo neho, takze hrana je vidno v oboch schemach. */
  background-image: linear-gradient(var(--bsc-bg, #fff), var(--bsc-bg, #fff)),
                    linear-gradient(var(--bsc-surface, #f8fafc), var(--bsc-surface, #f8fafc));
  background-blend-mode: lighten;
  border-radius: var(--bsc-media-radius, 24px);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.cp-obsah-panel-in > .cp-block-wrap + .cp-block-wrap { margin-top: 44px; }
/* Bloky v paneli nesmu kreslit vlastne pozadie sekcie — prekryli by panel a
   vyzeralo by to, ze sa po par blokoch skoncil. Plati VSEOBECNE pre kazdy
   blok s vlastnym pozadim, nie menovite pre editorial a posuvnik. `background`
   maju vacsinou v inline style (`style="…;background:var(--bsc-bg)"`),
   takze sa to inak nez cez !important prebit neda. */
.cp-obsah-panel-in .cp-bsec,
.cp-obsah-panel-in .rv-section,
.cp-obsah-panel-in .rv-section-alt,
.cp-obsah-panel-in .cp-section { background: transparent !important; }
.cp-obsah-panel-in .cp-ftext,
.cp-obsah-panel-in .rv-section,
.cp-obsah-panel-in .cp-ftext-card .cp-ftext-inner {
  padding-left: 0;
  padding-right: 0;
}
.cp-obsah-panel-in .cp-ftext { padding-top: 0; padding-bottom: 0; }
.cp-obsah-panel-in .cp-ftext-card .cp-ftext-inner {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.cp-obsah-panel-in .cp-ftext-inner,
.cp-obsah-panel-in .rv-container { max-width: 100%; }
.cp-obsah-panel-in .rv-section p { max-width: 54ch; margin-inline: auto; }

/* Jeden stupeň nadpisov v paneli + tenká linka pod nadpisom sekcie. */
.cp-obsah-panel-in .cp-ftext-title,
.cp-obsah-panel-in .rv-h2,
.cp-obsah-panel-in h2:where(:not(.cp-md-h3)) {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bsc-text, #1a1a1c) 12%, transparent);
}
.cp-obsah-panel-in .cp-ftext-text h2,
.cp-obsah-panel-in .cp-ftext-text h3 {
  font-size: 1.08rem;
  margin: 34px 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
}
.cp-obsah-panel-in .cp-ftext-text p { margin: 0 0 14px; }
.cp-obsah-panel-in .cp-ftext-text ul,
.cp-obsah-panel-in .cp-ftext-text ol { margin: 16px 0; padding-left: 26px; }
.cp-obsah-panel-in .cp-ftext-text li { margin: 0 0 10px; }

@media (max-width: 640px) {
  .cp-obsah-panel { padding: 40px 16px clamp(32px, 8vw, 56px); }
  .cp-obsah-panel-in { padding: 20px 18px; }
  .cp-obsah-panel-in > .cp-block-wrap + .cp-block-wrap { margin-top: 32px; }
}

/* Bloky, ktoré počítajú so šírkou stránky, sa v paneli musia zmestiť do neho.
   Editoriál prepne na jeden stĺpec a posuvník sa oreže na šírku panelu —
   inak text aj fotka prečnievali cez pravú hranu. */
.cp-obsah-panel-in .cp-ed { padding: 0; overflow-x: clip; }
.cp-obsah-panel-in .cp-ed .cp-binner { max-width: 100%; padding: 0; }
.cp-obsah-panel-in .cp-ed .cp-ed-grid {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 28px;
}
.cp-obsah-panel-in .cp-ed-image-right .cp-ed-body,
.cp-obsah-panel-in .cp-ed-image-left .cp-ed-body {
  grid-column: 1;
  grid-row: 2;
  max-width: 54ch;
  margin-top: 0;
}
.cp-obsah-panel-in .cp-ed-image-right .cp-ed-media,
.cp-obsah-panel-in .cp-ed-image-left .cp-ed-media { grid-column: 1; grid-row: 1; }
.cp-obsah-panel-in .cp-sl,
.cp-obsah-panel-in .cp-sl-track { max-width: 100%; }
.cp-obsah-panel-in .cp-sl { overflow: hidden; }
.cp-obsah-panel-in .cp-obsah-panel-in,
.cp-obsah-panel-in * { min-width: 0; }
/* Prekryvná druhá fotka počíta so širokým dvojstĺpcom. V úzkom paneli by
   sadla na nadpis, preto ide do toku ako bežná fotka vedľa hlavnej. */
.cp-obsah-panel-in .cp-ed-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.cp-obsah-panel-in .cp-ed-second {
  position: static;
  width: 100%;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
}
.cp-obsah-panel-in .cp-ed-main,
.cp-obsah-panel-in .cp-ed-second { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.cp-obsah-panel-in .cp-ed--frame .cp-ed-media::before { display: none; }
.cp-obsah-panel-in .cp-ed { --cp-ed-bleed: 0px; }
/* Panel je širší než riadok textu, takže textový stĺpec sa v ňom centruje ako
   celok — nadpisík, nadpis aj odseky spolu. Inak by nadpisík visel pri ľavom
   kraji a text bol inde. Zarovnanie textu sa nemení, mení sa poloha stĺpca.
   Médiá (editoriál, posuvník) ostávajú na celú šírku panelu. */
/* Trojica selektorov je tu kvôli špecificite: blocks-renderer.css má
   .cp-ftext-normal .cp-ftext-inner { max-width: 820px } s rovnakou váhou,
   a podľa poradia súborov by vyhralo ono. font-size viaže meradlo na písmo
   behu textu, nie na zdedené menšie. */
.cp-obsah-panel-in .cp-ftext-narrow .cp-ftext-inner,
.cp-obsah-panel-in .cp-ftext-normal .cp-ftext-inner,
.cp-obsah-panel-in .cp-ftext-wide .cp-ftext-inner {
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: min(100%, 32em);
  margin-inline: auto;
  align-items: stretch;
}

/* ---------- HERO SLIDER: sekcia si nesmie nechať rozloženie jednej hlavičky ----------
   Šablóny (luxury, trade) majú pravidlo .rv-hero:has(.rv-hero-bg-media), ktoré
   počíta s tým, že fotka pozadia patrí priamo sekcii: na desktope ju spraví
   flexom so zarovnaním naspodok, na mobile jej vyhradí padding-top na pás fotky.
   V režime slidera sa fotka presunie DOVNÚTRA snímok, ale :has() stále sedí na
   sekciu — a tá si nechá miesto pre pozadie, ktoré tam už nie je. Výsledkom bola
   niekoľko sto px vysoká prázdna plocha vo farbe sekcie nad pásom snímok a bodky,
   ktoré skončili mimo snímky na svetlom podklade (biele na krémovom = neviditeľné).

   Pôvodné .rv-hero.rv-hero-slider { padding: 0 } tu už bolo, ale prehrávalo na
   špecificitu: šablónové CSS sa načítava až za ravox-blocks.css. Preto :has(). */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider:has(.rv-hero-bg-media) {
  display: flex;
  align-items: stretch;
  padding: 0;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider > .cp-sl-track,
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider:has(.rv-hero-bg-media) > .cp-sl-track {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero-slider .cp-sl-slide {
  display: flex;
  align-items: flex-end;
}

/* ---------- PRAZDNA FOTKA ----------
   Na verejnom webe sa prazdna fotka nevykresli NIKDY (ziadny sivy box) —
   riesi to renderer. Toto je uz len jej podoba v builderi: klikatelne
   "Nahrat fotku", ktore otvori nahravanie pre svoje pole. Jedno pravidlo
   pre vsetky bloky — editorial, about, konfigurator, fancysplit, slider. */
.cp-media-ph.cp-media-ph,
:is(.cp-blocks-full, .cp-page) .cp-media-ph.cp-media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed currentColor;
  border-radius: 12px;
  background: rgba(128, 128, 128, 0.1);
  color: inherit;
  opacity: 0.72;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.cp-media-ph.cp-media-ph:hover,
:is(.cp-blocks-full, .cp-page) .cp-media-ph.cp-media-ph:hover { opacity: 1; background: rgba(128, 128, 128, 0.18); }
.cp-media-ph.cp-media-ph > svg,
:is(.cp-blocks-full, .cp-page) .cp-media-ph.cp-media-ph > svg { width: 30px; height: 30px; max-width: 30px; flex: none; }
.cp-media-ph.cp-media-ph > span,
:is(.cp-blocks-full, .cp-page) .cp-media-ph.cp-media-ph > span {
  font: 600 13px/1.3 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
}

/* Blok bez fotky nema preco drzat prazdnu polovicu mriezky — text dostane
   celu sirku. Prazdne miesto je ta ista chyba ako sivy box. */
:is(.cp-blocks-full, .cp-page) .rv-about--bez-fotky { grid-template-columns: 1fr; }
.cp-confhl--bez-fotky { grid-template-columns: 1fr; }

/* ---------- HERO: FOTKA CEZ NADPIS ----------
   Pole „Poloha fotky" = „Cez nadpis". Fotka stoji cez celu sirku hero a
   zasahuje za nadpis, ozdobny ram je za nou vpravo — tak, ako to ma povodny
   web tdstone.sk (tam su to dve vrstvy pozadia sekcie; u nas je to fotka
   bloku a ram z pola, takze oboje sa da menit v builderi).
   Rozmery ramu su odmerane z povodneho Landing-7.png: stvorec 538 x 532 v
   platne 1920 x 1280, teda sirka 28 %, zhora 32,8 %, sprava 6,25 %.
   Prazdne pole = dnesny vzhlad vedla textu, ostatnym tenantom sa nemeni nic.
   Na mobile sa prekryv rusi: fotka ide nad text, inak by nadpis lezal na
   kameni. */
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-container { position: relative; }
/* Mriezka stylu split ma riadky `1fr auto 1fr`, aby sa nadpis vysvisle
   vycentroval proti fotke, ktora stoji v pravom stlpci cez vsetky tri riadky.
   Pri „Cez nadpis" je fotka absolutna, teda mimo toku — ziadny riadok nedrzi
   a oba `1fr` riadky sa vyrovnaju na vysku toho, co je v nich najvyssie, teda
   na telo hero. Prvy riadok ma pritom len nadpisik, takze nad nim vznikne
   prazdne miesto presne vo vyske tela (na tdstone ~300 px). Preto riadky
   v tomto rezime velkost obsahu a nic viac. Plati len s triedou
   rv-hero--media-over, ostatnym hero blokom sa nemeni nic. */
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-container { grid-template-rows: auto auto auto; }
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-eyebrow { align-self: auto; }
/* Pri „Cez nadpis" je vysku hero urcena polom „Vyska" a obsah sa v nej
   vycentruje. Siroky odstup sekcie (sablony davaju az 76 px) pritom obsah
   nafukne nad vybranu vysku, takze na nizkom okne (700 px) hero vybehne nad
   ramec a nadpis ostane nalepeny pod hlavickou namiesto v strede. Odstup je
   tu preto mensi — obsah sa zmesti a vyska ostane ta, ktoru tenant vybral.
   Dvojita trieda je kvoli specificite voci sablonam, ktore padding prepisuju. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero--media-over.rv-hero--media-over {
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(16px, 2vw, 32px);
}
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual {
  position: absolute;
  /* Hero kontajner je v niektorych sablonach mriezka a .rv-hero-split ma
     display:contents — bez tohto by sa absolutna fotka merala len na svoj
     stlpec mriezky (596 px), nie na celu sirku. */
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual { margin-left: 0; }
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Fotka drzi pravu stranu, nie stred. Pri „Cez nadpis" je ramec fotky siroky
     cez cele hero; uzsia alebo na vysku postavena fotka sa v nom vycentrovala
     a sadla si presne na nadpis. Vpravo je to kompozicia povodneho webu —
     nadpis vlavo, fotka vpravo a prekryv len na ich hranici. Siroka fotka,
     ktora ramec vyplni, sa nepohne. */
  object-position: right center;
  filter: none;
}
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual::after { display: none; }
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-split { grid-template-columns: 1fr; }
/* Sablony si sirku hero tela prepisuju (luxury ma max-width 860px a stred),
   preto tu musi byt vyssia specifickost — inak by text tiekol pod fotku. */
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero--media-over.rv-hero--media-over .rv-hero-body {
  max-width: min(100%, 520px);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  align-items: flex-start;
}
body[class] :is(.cp-blocks-full, .cp-page) .rv-hero.rv-hero--media-over.rv-hero--media-over :is(.rv-h1, .rv-hero-eyebrow, .rv-eyebrow) {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
}
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-h1 { position: relative; z-index: 1; }
:is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual--frame::before {
  top: 32.8%;
  right: 6.25%;
  width: 28%;
  max-width: none;
  aspect-ratio: 538 / 532;
  z-index: 0;
}
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual {
    position: static;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 28px;
    z-index: 0;
  }
  :is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-body { max-width: 100%; }
  :is(.cp-blocks-full, .cp-page) .rv-hero--media-over .rv-hero-visual--frame::before { top: 28%; right: 2%; width: 34%; }
}

/* Uvodna animacia hero (pole „Úvodná animácia" = „Text prilieta zľava").
   Trvanie 2 s a krivka ease su odmerane z povodneho tdstone.sk (slideInLeft).
   Prazdne pole = ziadna animacia, takze ostatnym tenantom nepribudne nic.
   Komu system hlasi obmedzenie pohybu, tomu sa nespusti vobec. */
@keyframes rvPrichodZlava {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
:is(.cp-blocks-full, .cp-page) .rv-hero--anim-zlava :is(.rv-hero-eyebrow, .rv-h1, .rv-hero-body) {
  animation: rvPrichodZlava 2s ease;
}
@media (prefers-reduced-motion: reduce) {
  :is(.cp-blocks-full, .cp-page) .rv-hero--anim-zlava :is(.rv-hero-eyebrow, .rv-h1, .rv-hero-body) { animation: none; }
}

/* ---------- RECENZIE NA VIDEU (variant „video") ----------
   Nadpis a text vlavo, recenzie vpravo ako karusel na tmavom boxe, vsetko
   nad videom sekcie s tmavym prekryvom. Rozlozenie aj krytie prekryvu su
   z povodneho tdstone.sk (video pozadie sekcie + cierny prekryv 60 %). */
:is(.cp-blocks-full, .cp-page) .rv-revvid-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(420px, 46vw, 680px);
  display: flex;
  align-items: center;
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-media { position: absolute; inset: 0; z-index: 0; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-media > div { position: absolute; inset: 0; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-tien {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--rv-revvid-overlay, 0.6);
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 64px);
  box-sizing: border-box;
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-text { color: #fff; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-text .rv-h2 { margin: 0 0 18px; text-align: left; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-intro {
  margin: 0 0 26px;
  font-size: calc(17px * var(--bsc-text-scale, 1));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-karusel .cp-sl-slide { overflow: visible; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-karusel .cp-sl { padding-top: 34px; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-karta {
  position: relative;
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(2px);
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-uvodzovky {
  position: absolute;
  top: -0.12em;
  right: 20px;
  font-family: var(--rv-display, serif);
  font-size: clamp(64px, 7vw, 110px);
  line-height: 1;
  color: var(--bsc-primary, #e86962);
  opacity: 0.85;
  pointer-events: none;
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-citat {
  margin: 0 0 18px;
  font-style: italic;
  font-size: calc(18px * var(--bsc-text-scale, 1));
  line-height: 1.6;
  color: #fff;
}
:is(.cp-blocks-full, .cp-page) .rv-revvid-meno { display: block; color: var(--bsc-primary, #e86962); font-weight: 600; letter-spacing: 0.04em; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-mesto { display: block; color: rgba(255, 255, 255, 0.8); font-size: 15px; margin-top: 4px; }
:is(.cp-blocks-full, .cp-page) .rv-revvid-cta { display: inline-block; }
:is(.cp-blocks-full, .cp-page) .rv-reviews-cta { margin-top: clamp(28px, 3vw, 44px); text-align: center; }
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .rv-revvid-grid { grid-template-columns: 1fr; }
  :is(.cp-blocks-full, .cp-page) .rv-revvid-box { min-height: 0; }
}

/* Farba odkazov a ikon v paticke (nastavenie „Farba odkazov a ikon
   v pätičke"). Oddelena od farby textu, lebo original ma text biely a menu
   so socialnymi ikonami farebne. Prazdne nastavenie = dnesny vzhlad. */
html body[class][class].ftr-link .site-footer :is(.footer-soc-ico, .footer-soc-links a, .footer-nav a, .footer-links a, .footer-menu a, nav a) { color: var(--ftr-link); }
html body[class][class].ftr-link .site-footer :is(.footer-soc-ico, .footer-soc-links a, .footer-nav a, .footer-links a, .footer-menu a, nav a) svg { color: var(--ftr-link); }
/* Socialne ikony su inak farebne dlazdice so symbolom v bielej. Ked si tenant
   zvoli farbu ikon, dlazdica ide prec — inak by bol symbol tej istej farby
   ako podklad a ikona by zmizla (stalo sa pri Instagrame). Dotykovy ciel
   40 x 40 ostava. */
html body[class][class].ftr-link .site-footer :is(.footer-soc-ico, .footer-soc-fb, .footer-soc-ig) { background: transparent; }

/* ---------- SPOLOCNE NASTAVENIA BLOKU ----------
   Zarovnanie, sirka obsahu a velkost nadpisu z panelu bloku. Pravidla su
   zamerne vseobecne (nadpis, text, tlacidla), aby platili pre kazdy blok
   vratane tych, ktore este nevznikli. Bez nastavenia sa trieda nepridava,
   takze existujucim tenantom sa nemeni nic. */
:is(.cp-blocks-full, .cp-page) :is(.cp-b-al-left, .cp-b-al-center, .cp-b-al-right) :is(h1, h2, h3, p, .rv-h1, .rv-h2, .rv-eyebrow, .cp-ed-eyebrow, .rv-section-head, .rv-section-intro, .mf-inner, .mf-body) { text-align: inherit; }
:is(.cp-blocks-full, .cp-page) .cp-b-al-left { text-align: left; }
:is(.cp-blocks-full, .cp-page) .cp-b-al-center { text-align: center; }
/* Vycentrovany zoznam musi mat odrazku tesne pri texte. Pri predvolenom
   `outside` visi odrazka vlavo od textoveho bloku, takze pri zarovnani na
   stred ostane nalepena pri okraji a od textu ju delia desiatky pixelov —
   na mobile to vyzera ako rozsypany zoznam. Plati pre KAZDY blok, ktory ma
   zapnute zarovnanie na stred (na pocitaci aj zvlast na mobile), teda aj pre
   bloky, ktore este len pribudnu. Zoznam zarovnany vlavo sa nemeni. */
:is(.cp-blocks-full, .cp-page) .cp-b-al-center :is(ul, ol) {
  list-style-position: inside;
  padding-left: 0;
}
/* Zarovnanie na mobile plati len na mobile, inak by sa odrazky presunuli
   dovnutra aj na pocitaci, kde je blok zarovnany vlavo. Hranica je rovnaka
   ako pri samotnom zarovnani (cp-b-malu-center). */
@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .cp-b-malu-center :is(ul, ol) {
    list-style-position: inside;
    padding-left: 0;
  }
}
:is(.cp-blocks-full, .cp-page) .cp-b-al-right { text-align: right; }
:is(.cp-blocks-full, .cp-page) .cp-b-al-center :is(.rv-hero-actions, .rv-cta-actions, .rv-eyebrow, .cp-ed-eyebrow) { justify-content: center; }
:is(.cp-blocks-full, .cp-page) .cp-b-al-right :is(.rv-hero-actions, .rv-cta-actions, .rv-eyebrow, .cp-ed-eyebrow) { justify-content: flex-end; }
:is(.cp-blocks-full, .cp-page) .cp-b-al-center :is(.rv-hero-body, .cp-ed-body, .rv-cta-band .rv-container) { margin-left: auto; margin-right: auto; align-items: center; }

@media (max-width: 900px) {
  :is(.cp-blocks-full, .cp-page) .cp-b-malu-left { text-align: left; }
  :is(.cp-blocks-full, .cp-page) .cp-b-malu-center { text-align: center; }
  :is(.cp-blocks-full, .cp-page) .cp-b-malu-center :is(.rv-hero-actions, .rv-cta-actions, .rv-eyebrow, .cp-ed-eyebrow) { justify-content: center; }
  :is(.cp-blocks-full, .cp-page) .cp-b-malu-left :is(.rv-hero-actions, .rv-cta-actions, .rv-eyebrow, .cp-ed-eyebrow) { justify-content: flex-start; }
}

:is(.cp-blocks-full, .cp-page) .cp-b-w-uzka :is(.rv-container, .cp-binner, .mf-inner, .cp-ed-grid, .rv-cta-band-inner) { max-width: 880px; }
:is(.cp-blocks-full, .cp-page) .cp-b-w-siroka :is(.rv-container, .cp-binner, .mf-inner, .cp-ed-grid, .rv-cta-band-inner) { max-width: 1560px; }
:is(.cp-blocks-full, .cp-page) .cp-b-w-plna :is(.rv-container, .cp-binner, .mf-inner, .cp-ed-grid, .rv-cta-band-inner) { max-width: none; }

:is(.cp-blocks-full, .cp-page) .cp-b-h-mala :is(.rv-h1, .rv-h2, .cp-ed-title, .rv-cta-title, .mf-text, h2) { font-size: clamp(22px, 2.6vw, 34px); }
:is(.cp-blocks-full, .cp-page) .cp-b-h-velka :is(.rv-h1, .rv-h2, .cp-ed-title, .rv-cta-title, .mf-text, h2) { font-size: clamp(30px, 4.4vw, 56px); }
:is(.cp-blocks-full, .cp-page) .cp-b-h-extra :is(.rv-h1, .rv-h2, .cp-ed-title, .rv-cta-title, .mf-text, h2) { font-size: clamp(34px, 5.6vw, 80px); line-height: 1.02; }

/* Skok na kotvu ma skoncit POD lepivou hlavickou. scroll-margin na cieli sam
   nestacil — prehliadac doroloval o kus nizsie a zaciatok sekcie ostal pod
   hlavickou. scroll-padding na rolovacom prvku plati pre kazdy skok na kotvu,
   aj ked kotva nie je v bloku. --hdr-h je vlastna vyska hlavicky tenanta. */
html { scroll-padding-top: calc(var(--hdr-h, 90px) + 32px); }

/* Tlacidlo „Skryt" na zastupnej fotke. Vidno ho az pri prejdeni mysou, aby
   nerusilo — zastupne miesto ma hlavne pozyvat na nahratie fotky. */
.cp-media-ph .cp-media-ph-skry,
:is(.cp-blocks-full, .cp-page) .cp-media-ph .cp-media-ph-skry {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font: 600 11px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cp-media-ph:hover .cp-media-ph-skry,
.cp-media-ph:focus-within .cp-media-ph-skry,
:is(.cp-blocks-full, .cp-page) .cp-media-ph:hover .cp-media-ph-skry { opacity: 1; }
.cp-media-ph.cp-media-ph { position: relative; }