/*  Generated: 2026-08-19 08:53:02 */
/* ==========================================================================
   BÍBÍK, obsahové stránky
   Náš tým, profily lidí, zakladatelský příběh, testovací zahrada

   Vše je zanořené pod .bbk, aby styly nezasahovaly do zbytku aplikace.
   Bez !important, bez JavaScriptu, bez externích zdrojů.

   Rozměry jsou v px záměrně: aplikace má html { font-size: 10px },
   ale snippet se může objevit i jinde a px je proti tomu odolné.
   Velikosti písma jsou plynulé přes clamp(), takže se škálují samy.

   --------------------------------------------------------------------------
   STAV K 17. 8. 2026

   Soubor je úplný: obsahuje i odstupy bloků a varianty, které byly dosud
   psané inline v jednotlivých stránkách. Je připravený k nasazení do
   aplikace hned teď.

   Stránky v databázi mají zatím inline styly nadále. Nevadí to: hodnoty
   jsou shodné, inline zápis jen přebije stejné pravidlo odsud. Ověřeno
   pixelovým porovnáním všech 18 stránek v desktopové i mobilní šířce,
   36 snímků, největší odchylka 3 úrovně z 255 ve fotografii, což je šum
   vykreslování prohlížeče.

   Až bude soubor v aplikaci, inline styly se ze stránek odstraní a převezmou
   je pravidla níže. Modifikátory jako .bbk-lead--narrow nebo .bbk-cta--foto-*
   jsou proto zatím nevyužité; nejsou to zbytky, ale připravené náhrady.
   ========================================================================== */

.bbk {
  /* --- barvy převzaté z webu ------------------------------------------- */
  --bbk-primary: #00c4ed;
  --bbk-primary-ink: #0b7f9b;   /* čitelná varianta primární na světlém pozadí */
  --bbk-secondary: #f291c2;
  --bbk-ink: #1a1a1a;
  --bbk-heading: #1a1a1a;   /* barva nadpisů, v tmavém kontextu se překlápí na bílou */
  --bbk-ink-soft: #4a4a4a;
  --bbk-ink-mute: #757575;
  --bbk-line: #e4e4e4;
  --bbk-tint: #f6f7f8;
  --bbk-tint-warm: #f7f4f1;
  --bbk-dark: #101215;
  --bbk-white: #fff;

  /* --- rytmus ----------------------------------------------------------- */
  --bbk-radius: 10px;
  --bbk-radius-lg: 16px;
  --bbk-max: 1280px;
  --bbk-max-narrow: 820px;
  --bbk-gutter: 20px;
  --bbk-section-y: clamp(48px, 7vw, 104px);

  font-family: 'Poppins', sans-serif;
  color: var(--bbk-ink);
  font-size: 16px;
  line-height: 1.65;
  /* aplikace zarovnává obsahový sloupec do bloku; editorial sazba chce vlajku */
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.bbk *,
.bbk *::before,
.bbk *::after { box-sizing: border-box; }

.bbk img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Odstínění od stylů aplikace

   Aplikace stylizuje holé značky globálně:
     h1 { color:#000; font-size:3.2rem; font-weight:normal }
     h2 { color:#262626; font-size:1.8rem; margin:5px 0 }
     h3, h4 { color:#000; margin:5px 0 }
     a  { color:#1a1a1a; text-decoration:underline }
     .columnCenter p  { padding:5px 0; text-align:justify }
     .columnCenter ul, ol { padding-left:25px }
     .columnCenter li { padding:2px 0 }

   Přímé pravidlo vždy přebije dědičnost, takže bez tohoto bloku dostane
   například nadpis v tmavém CTA šedou barvu z `h2` a je nečitelný.
   Řešíme to specificitou, ne !important.
   -------------------------------------------------------------------------- */

.bbk :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.bbk :where(a) {
  color: inherit;
  text-decoration: none;
}

.bbk :where(p) { margin: 0 0 1.1em; }
.bbk :where(p):last-child { margin-bottom: 0; }
.bbk :where(ul, ol) { margin: 0; list-style: none; }

/* .columnCenter p / ul / ol / li mají specificitu (0,1,1), na tu samotné
   :where() nestačí, proto navíc [class]. Komponentní pravidla níže mají
   stejnou specificitu a jsou v souboru později, takže si své hodnoty vezmou
   zpět. */
.bbk[class] :where(p) { padding: 0; text-align: inherit; }
.bbk[class] :where(ul, ol) { padding: 0; }
.bbk[class] :where(li) { margin: 0; padding: 0; }

/* ==========================================================================
   Titulek stránky z aplikace

   H1 generuje aplikace z názvu článku a vykresluje ho jako sourozence
   TĚSNĚ PŘED naším snippetem. Nejde ovlivnit v HTML, proto ho jen zarovnáme
   a otypografujeme, aby navazoval na obsah pod ním.

   Je to jediné pravidlo mimo .bbk. Díky :has(> .bbk) se ale uplatní pouze
   na stránkách, kde náš snippet skutečně je, takže zbytek webu nechává
   beze změny. Ve starším prohlížeči bez podpory :has() se H1 vykreslí
   výchozím stylem aplikace a stránka funguje dál.
   ========================================================================== */

.columnCenter:has(> .bbk) > h1 {
  max-width: 1280px;
  margin: 0 auto 6px;
  /* na desktopu doplňuje odstup od drobečkové navigace, viz pravidlo níže */
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #1a1a1a;
  text-align: left;
}

/* Na desktopu lepil nadpis na drobečkovou navigaci: mezi jejím textem
   a prvním řádkem H1 zbývalo 14 px. Deset navíc dá nadpisu vzduch.

   Záměrně padding, ne margin: drobečková navigace nad nadpisem má vlastní
   spodní margin a svislé marginy sousedů se slévají, takže margin-top by
   se do většího z nich schoval a nebyl by vidět. Padding se neslévá.

   Na mobilu je rytmus těsnější a hlavička jiná, tam zůstává původní stav. */
@media (min-width: 900px) {
  .columnCenter:has(> .bbk) > h1 { padding-top: 28px; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.bbk-wrap {
  width: 100%;
  max-width: var(--bbk-max);
  margin-inline: auto;
  padding-inline: var(--bbk-gutter);
}

.bbk-wrap--narrow { max-width: var(--bbk-max-narrow); }

/* Textový sloupec pro dlouhé čtení. Na rozdíl od .bbk-wrap--narrow se
   nezarovnává na střed stránky, ale drží levou hranu společnou s hero
   sekcí nad sebou, jinak text „uskočí“ a stránka působí rozházeně. */
.bbk-measure { max-width: 78ch; }

/* Když je .bbk-measure přímo na .bbk-wrap, nesmí se zúžit celý kontejner:
   ten by se pak kvůli margin-inline: auto vycentroval a text by uskočil
   doprostřed. Kontejner proto zůstává široký a omezí se až jeho obsah. */
.bbk-wrap.bbk-measure { max-width: var(--bbk-max); }
.bbk-wrap.bbk-measure > * { max-width: 78ch; }

.bbk-section { padding-block: var(--bbk-section-y); }
.bbk-section--tight { padding-block: clamp(32px, 4.5vw, 64px); }
.bbk-section--tint { background: var(--bbk-tint); }
.bbk-section--warm { background: var(--bbk-tint-warm); }

.bbk-section--dark {
  background: var(--bbk-dark);
  color: var(--bbk-white);
  --bbk-heading: var(--bbk-white);
}

.bbk-section--dark .bbk-eyebrow { color: rgba(255, 255, 255, .72); }

.bbk-section--dark .bbk-lead,
.bbk-section--dark .bbk-prose,
.bbk-cta .bbk-lead,
.bbk-cta .bbk-prose { color: rgba(255, 255, 255, .78); }

/* prvky s napevno tmavým textem, které se mohou ocitnout na tmavém pozadí */
.bbk-section--dark .bbk-note,
.bbk-section--dark .bbk-quote cite,
.bbk-cta .bbk-note,
.bbk-cta .bbk-quote cite { color: rgba(255, 255, 255, .66); }

.bbk-section--dark .bbk-link,
.bbk-cta .bbk-link { color: var(--bbk-white); border-bottom-color: var(--bbk-primary); }

.bbk-section--dark .bbk-link:hover,
.bbk-cta .bbk-link:hover { color: var(--bbk-primary); }

/* ==========================================================================
   Typografie
   ========================================================================== */

.bbk-eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bbk-ink-mute);
}

.bbk-h1 {
  margin: 0 0 24px;
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--bbk-heading);
}

.bbk-h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bbk-heading);
}

.bbk-h3 {
  margin: 0 0 12px;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--bbk-heading);
}

.bbk-h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bbk-heading);
}

.bbk-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--bbk-ink-soft);
}

.bbk-prose { color: var(--bbk-ink-soft); }
.bbk-prose .bbk-h3 { margin-top: 1.6em; }
.bbk-prose .bbk-h3:first-child { margin-top: 0; }

.bbk-note {
  font-size: 14px;
  color: var(--bbk-ink-mute);
}

/* velký typografický předěl mezi sekcemi */
.bbk-break {
  text-align: center;
  padding-block: clamp(44px, 6vw, 88px);
}

.bbk-break__claim {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
}

.bbk-break__sub {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--bbk-ink-mute);
}

/* citát */
.bbk-quote {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--bbk-primary);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.01em;
}

.bbk-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--bbk-ink-mute);
}

/* ==========================================================================
   Tlačítka
   ========================================================================== */

.bbk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bbk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--bbk-radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.bbk-btn--primary {
  background: var(--bbk-primary);
  border-color: var(--bbk-primary);
  color: #04222a;
}

/* světlejší tyrkysová by pod bílým textem neměla dostatečný kontrast,
   proto se na hover ztmaví */
.bbk-btn--primary:hover,
.bbk-btn--primary:focus-visible {
  background: var(--bbk-primary-ink);
  border-color: var(--bbk-primary-ink);
  color: var(--bbk-white);
}

.bbk-btn--ghost {
  background: transparent;
  border-color: var(--bbk-ink);
  color: var(--bbk-ink);
}

.bbk-btn--ghost:hover,
.bbk-btn--ghost:focus-visible { background: var(--bbk-ink); color: var(--bbk-white); }

.bbk-section--dark .bbk-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.bbk-section--dark .bbk-btn--ghost:hover { background: #fff; color: var(--bbk-dark); }

/* textový odkaz se šipkou */
.bbk-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bbk-ink);
  border-bottom: 2px solid var(--bbk-primary);
  padding-bottom: 2px;
}

.bbk-link:hover { color: #007e99; }

.bbk :focus-visible {
  outline: 2px solid var(--bbk-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   Výpis specializací a badge
   ========================================================================== */

/* Souvislý řádek oddělený tyrkysovou tečkou. Stejný zápis, jaký klient
   používá v podkladech: „Autosedačky · Bezpečnost dětí · Cybex“.
   Zabere málo místa a snese i dlouhý výčet. */
.bbk-spec {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bbk-ink-soft);
}

.bbk .bbk-spec li { display: inline; }

.bbk .bbk-spec li:not(:last-child)::after {
  /* oddělovač visí na konci předchozí položky přes pevnou mezeru,
     aby po zalomení řádku nikdy nezačínal nový řádek tečkou */
  content: " ·";
  margin-right: 5px;
  color: var(--bbk-primary);
  font-size: 1.7em;
  font-weight: 700;
  line-height: 0;
  vertical-align: -.06em;
}

.bbk-section--dark .bbk-spec,
.bbk-cta .bbk-spec { color: rgba(255, 255, 255, .78); }

.bbk-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bbk-primary);
  color: #04222a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* nad hero stojí H1 z aplikace, proto shora jen malý odstup */
.bbk-hero { padding-block: clamp(10px, 1.6vw, 20px) var(--bbk-section-y); }

/* hero, na které hned navazuje text na stejném pozadí, jinak mezi nimi
   vznikne dvojité odsazení a díra přes půl obrazovky */
.bbk-hero--flush { padding-bottom: clamp(20px, 2.6vw, 36px); }

.bbk-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.bbk-hero__figure { margin: 0; }

.bbk-hero__figure img {
  width: 100%;
  border-radius: var(--bbk-radius-lg);
}

.bbk-hero__claim {
  margin: 0 0 22px;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.3;
  font-weight: 500;
}

@media (min-width: 900px) {
  .bbk-hero__grid { grid-template-columns: 1fr 1fr; }
  .bbk-hero__grid--60 { grid-template-columns: 6fr 4fr; }
}

/* Na mobilu má po nadpisu následovat fotografie a teprve pak text: nadpis
   stránky dodává aplikace nad snippetem, takže se čte H1, obrázek, perex.
   Rozsah je omezený shora, jinak by pravidlo přebilo i desktop, kde má
   zůstat pořadí podle HTML (text vlevo, fotografie vpravo). */
@media (max-width: 899px) {
  .bbk-hero__grid--media-first > .bbk-hero__figure { order: -1; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.bbk-trust {
  display: grid;
  gap: 1px;
  background: var(--bbk-line);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius);
  overflow: hidden;
}

.bbk-trust__item {
  background: var(--bbk-white);
  padding: 24px 22px;
}

.bbk-trust__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.bbk-trust__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bbk-ink-mute);
}

@media (min-width: 620px) { .bbk-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bbk-trust { grid-template-columns: repeat(5, 1fr); } }

/* ==========================================================================
   Lidé, velké profily vedení
   ========================================================================== */

.bbk-lead-people {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

@media (min-width: 900px) { .bbk-lead-people { grid-template-columns: repeat(2, 1fr); } }

.bbk-feature__figure { margin: 0 0 24px; }

.bbk-feature__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bbk-radius-lg);
  background: var(--bbk-tint);
}

.bbk-feature__name {
  margin: 0 0 4px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.015em;
}

.bbk-feature__nick {
  display: block;
  margin: 2px 0 0;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  color: var(--bbk-primary-ink);
}

.bbk-feature__role {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bbk-primary-ink);
}

.bbk-feature__text { color: var(--bbk-ink-soft); }

.bbk-feature .bbk-quote { margin: 22px 0; }

.bbk-feature .bbk-spec { margin: 20px 0 0; }

.bbk-feature .bbk-link { margin-top: 20px; }

/* ==========================================================================
   Lidé, karty
   ========================================================================== */

.bbk-people {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}

@media (min-width: 640px) { .bbk-people--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .bbk-people--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .bbk-people--2 { grid-template-columns: repeat(2, 1fr); } }

.bbk-person { display: flex; flex-direction: column; }

.bbk-person__figure { margin: 0 0 18px; }

.bbk-person__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bbk-radius-lg);
  background: var(--bbk-tint);
}

.bbk-person__name {
  margin: 0 0 3px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.bbk-person__nick {
  display: block;
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--bbk-primary-ink);
}

.bbk-person__role {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bbk-ink-mute);
}

.bbk-person__hook {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.bbk-person__text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bbk-ink-soft);
}

.bbk-person .bbk-spec { margin-bottom: 16px; }

.bbk-person .bbk-link { margin-top: auto; align-self: flex-start; }

/* široká varianta pro sklad a logistiku */
.bbk-person--wide {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--bbk-white);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius-lg);
}

.bbk-person--wide .bbk-person__figure { margin: 0; }

.bbk-person--wide .bbk-person__figure img { border-radius: var(--bbk-radius); }

@media (min-width: 700px) {
  .bbk-person--wide { grid-template-columns: 260px 1fr; }
}

.bbk-people--wide { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }

/* Fotografie a jméno na hubu odkazují na profil. Fotka je pro odečítač
   obrazovky skrytá a mimo tabulátor, protože stejný cíl nesou i jméno
   a odkaz „Celý profil“; jinak by uživatel procházel tři stejné odkazy
   po sobě. */
.bbk-person__figure a,
.bbk-feature__figure a {
  display: block;
  border-radius: inherit;
}

.bbk-person__figure img,
.bbk-feature__figure img { transition: opacity .2s ease; }

.bbk-person__figure a:hover img,
.bbk-feature__figure a:hover img { opacity: .86; }

.bbk-person__name a,
.bbk-feature__name a { color: inherit; }

.bbk-person__name a:hover,
.bbk-feature__name a:hover { color: var(--bbk-primary-ink); }

/* ==========================================================================
   E-E-A-T dlaždice
   ========================================================================== */

.bbk-facts {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--bbk-line);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius);
  overflow: hidden;
}

.bbk-facts__item {
  margin: 0;
  padding: 22px 20px;
  background: var(--bbk-white);
}

.bbk-facts__term {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
}

.bbk-facts__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bbk-ink-mute);
}

@media (min-width: 640px) { .bbk-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bbk-facts { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Koláž fotografií
   ========================================================================== */

.bbk-collage {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

.bbk-collage figure { margin: 0; }

.bbk-collage img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bbk-radius);
  background: var(--bbk-tint);
}

.bbk-collage__caption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--bbk-ink-mute);
}

.bbk-collage__wide { grid-column: span 2; }

/* Dvousloupcová varianta pro užší kontext (koláž vedle textu). Všechny
   dlaždice mají stejný poměr, takže mřížka nikde nenechává prázdné místo. */
.bbk-collage--2 { grid-template-columns: repeat(2, 1fr); }
.bbk-collage--2 .bbk-collage__wide { grid-column: auto; }

@media (min-width: 760px) {
  .bbk-collage { grid-template-columns: repeat(3, 1fr); }
  .bbk-collage__wide { grid-column: span 2; }
  .bbk-collage--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Blok o autorství obsahu
   ========================================================================== */

.bbk-authorbox {
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--bbk-white);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius-lg);
}

.bbk-authorbox__title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
}

.bbk-meta {
  display: grid;
  gap: 10px 24px;
  margin: 0;
}

.bbk-meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bbk-line);
}

.bbk-meta div:last-child { border-bottom: 0; padding-bottom: 0; }

.bbk-meta dt {
  min-width: 160px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bbk-ink-mute);
}

.bbk-meta dd { margin: 0; font-size: 14.5px; }

/* ==========================================================================
   Timeline, zakladatelský příběh
   ========================================================================== */

.bbk-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--bbk-line);
}

.bbk .bbk-timeline__item {
  position: relative;
  padding: 0 0 clamp(30px, 3.5vw, 46px) clamp(24px, 3vw, 40px);
}

.bbk-timeline__item:last-child { padding-bottom: 0; }

.bbk-timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bbk-primary);
}

.bbk-timeline__year {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bbk-heading);
}

.bbk-timeline__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
}

.bbk-timeline__text { color: var(--bbk-ink-soft); font-size: 15.5px; }

/* ==========================================================================
   Karty přesvědčení / číslované
   ========================================================================== */

.bbk-beliefs {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bbk-line);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius);
  overflow: hidden;
  counter-reset: bbk-belief;
}

.bbk .bbk-beliefs__item {
  padding: 26px 24px;
  background: var(--bbk-white);
  counter-increment: bbk-belief;
}

.bbk-beliefs__item::before {
  content: counter(bbk-belief);
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bbk-primary-ink);
}

.bbk-beliefs__title { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.bbk-beliefs__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bbk-ink-mute); }

@media (min-width: 680px) { .bbk-beliefs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bbk-beliefs { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Mapa expanze
   ========================================================================== */

.bbk-markets {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbk .bbk-markets__item {
  flex: 1 1 190px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--bbk-radius);
}

.bbk-markets__phase {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bbk-primary);
}

.bbk-markets__codes { font-size: 19px; font-weight: 600; letter-spacing: .04em; }
.bbk-markets__names { margin: 6px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .62); }

/* ==========================================================================
   Povrchy, testovací zahrada
   ========================================================================== */

.bbk-surfaces {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}

.bbk .bbk-surfaces__item {
  padding: 20px 18px;
  background: var(--bbk-white);
  border: 1px solid var(--bbk-line);
  border-radius: var(--bbk-radius);
}

.bbk-surfaces__name {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bbk-surfaces__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bbk-ink-mute); }

@media (min-width: 700px) { .bbk-surfaces { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bbk-surfaces { grid-template-columns: repeat(6, 1fr); } }

/* ==========================================================================
   Sekvence kroků

   Varianta B, vybraná klientem 17. 8. 2026. Prošly jsme šest návrhů na
   testovací stránce build/test/varianty-sekvence.html.

   Kroky se sázejí jako souvislá věta ve velikosti perexu, oddělená lomítkem
   v primární barvě. Žádné rámečky, čísla ani osy: sekvence se chová jako text,
   ne jako grafika, a nepřetahuje pozornost od okolního obsahu. Funguje stejně
   při čtyřech i devíti krocích a na mobilu se jen přirozeně zalomí.
   ========================================================================== */

.bbk-route {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.7;
  color: var(--bbk-ink);
}

.bbk .bbk-route__step { display: inline; }

.bbk .bbk-route__step:not(:last-child)::after {
  /* oddělovač visí na konci předchozího kroku přes pevnou mezeru, aby po
     zalomení řádku nikdy nezačínal nový řádek lomítkem */
  content: " /";
  margin-right: 6px;
  color: var(--bbk-primary);
  font-weight: 600;
}

/* začátek a konec sekvence nesou její smysl, proto plná váha písma */
.bbk-route__step--edge { font-weight: 600; }

/* ==========================================================================
   Velká čísla
   ========================================================================== */

.bbk-stats {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
}

.bbk-stats__value {
  display: block;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
}

.bbk-stats__label {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .68);
}

@media (min-width: 900px) { .bbk-stats { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Galerie
   ========================================================================== */

.bbk-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

.bbk-gallery figure { margin: 0; }

.bbk-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bbk-radius);
  background: var(--bbk-tint);
}

.bbk-gallery figcaption { margin: 8px 0 0; font-size: 13px; color: var(--bbk-ink-mute); }

.bbk-gallery__lead { grid-column: 1 / -1; }
.bbk-gallery__lead img { aspect-ratio: 21 / 9; }

@media (min-width: 860px) { .bbk-gallery { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FAQ, bez JavaScriptu
   ========================================================================== */

.bbk-faq { border-top: 1px solid var(--bbk-line); }

.bbk-faq__item { border-bottom: 1px solid var(--bbk-line); }

.bbk-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.bbk-faq__q::-webkit-details-marker { display: none; }

.bbk-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--bbk-ink-mute);
}

.bbk-faq__item[open] .bbk-faq__q::after { content: "\2212"; }

.bbk-faq__a {
  padding: 0 0 22px;
  max-width: 75ch;
  font-size: 15px;
  color: var(--bbk-ink-soft);
}

/* ==========================================================================
   Závěrečné CTA
   ========================================================================== */

.bbk-cta {
  position: relative;
  padding: clamp(40px, 6vw, 84px) clamp(24px, 4vw, 64px);
  border-radius: var(--bbk-radius-lg);
  background: var(--bbk-dark);
  color: var(--bbk-white);
  --bbk-heading: var(--bbk-white);
  overflow: hidden;
}

.bbk-cta--photo { background: var(--bbk-dark) center / cover no-repeat; }

.bbk-cta--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 18, 21, .55), rgba(16, 18, 21, .82));
}

.bbk-cta__inner { position: relative; max-width: 62ch; }

.bbk-cta__title {
  margin: 0 0 16px;
  font-size: clamp(25px, 3.4vw, 42px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
}

.bbk-cta__text { color: rgba(255, 255, 255, .8); }

.bbk-cta .bbk-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.bbk-cta .bbk-btn--ghost:hover { background: #fff; color: var(--bbk-dark); }

.bbk-cta__note { margin: 18px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Prodejna
   ========================================================================== */

.bbk-store {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.bbk-store__figure { margin: 0; }

.bbk-store__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bbk-radius-lg);
}

.bbk-hours { margin: 20px 0 0; display: grid; gap: 4px; max-width: 320px; }

.bbk-hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--bbk-line);
  font-size: 14.5px;
}

.bbk-hours dt { color: var(--bbk-ink-mute); }
.bbk-hours dd { margin: 0; font-weight: 500; }

@media (min-width: 900px) { .bbk-store { grid-template-columns: 5fr 6fr; } }

/* ==========================================================================
   Profil osoby, hlavička
   ========================================================================== */

/* Na mobilu jde nejdřív jméno a role, teprve pak fotografie: identita
   člověka je důležitější než snímek. Na desktopu se fotka přesune vlevo
   a text se rozdělí nad ni a pod ni, aby vpravo nezůstávalo prázdno. */
.bbk-profile__grid {
  display: grid;
  gap: 22px clamp(26px, 4vw, 52px);
  align-items: start;
  grid-template-areas:
    "id"
    "photo"
    "body";
}

.bbk-profile__id { grid-area: id; }
.bbk-profile__figure { grid-area: photo; }
.bbk-profile__body { grid-area: body; }

@media (min-width: 880px) {
  .bbk-profile__grid {
    grid-template-columns: 4fr 7fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "photo id"
      "photo body";
    align-content: start;
  }
}

.bbk-profile__figure { margin: 0; }

.bbk-profile__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bbk-radius-lg);
  background: var(--bbk-tint);
}

/* Na desktopu se výška textu vedle fotky liší člověk od člověka, zatímco
   fotka v poměru 4:5 má výšku pevnou. Vznikalo tak vpravo prázdné místo.
   Fotka se proto protáhne na výšku textového sloupce; ořez drží horní část
   snímku, aby zůstala hlava v záběru. Dolní mez brání tomu, aby u krátkého
   textu vznikl z portrétu úzký pruh. Na mobilu zůstává poměr 4:5. */
@media (min-width: 880px) {
  .bbk-profile__figure {
    align-self: stretch;
    position: relative;
    min-height: 420px;
  }

  /* Snímek je vyjmutý z toku schválně: kdyby výšku určoval on, sloupec by
     se natáhl podle něj a dohadovali bychom se s mřížkou dokola. Takhle
     výšku určí text a fotka ji jen vyplní. */
  .bbk-profile__figure img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 22%;
  }
}

.bbk-profile__nick {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--bbk-primary-ink);
}

.bbk-profile__role {
  margin: 0 0 20px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--bbk-ink-mute);
}

.bbk-profile__back { margin-bottom: 22px; }


/* ==========================================================================
   Drobnosti
   ========================================================================== */

.bbk-hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--bbk-line);
}

.bbk-center { text-align: center; }
.bbk-center .bbk-actions { justify-content: center; }
.bbk-center .bbk-lead { margin-inline: auto; max-width: 68ch; }

.bbk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bbk * { transition: none; }
}

/* ==========================================================================
   ODSTUPY BLOKŮ

   Do 17. 8. 2026 byly zapsané inline u každého bloku v každé stránce.
   Odstup ale nepatří k prvku samotnému, nýbrž ke dvojici sousedů: perex
   a text pod ním potřebují jinou mezeru než nadpis a mřížka pod ním.
   Proto se řeší sousedním selektorem, ne obecným margin-top.

   Vše je zabalené v :where(), takže selektor má specificitu pouhého .bbk.
   Konkrétnější pravidla komponent (.bbk-feature .bbk-spec a spol.) si tím
   pádem drží přednost a nic se jimi nepřebíjí.
   ========================================================================== */

/* text navazující na perex */
.bbk :where(.bbk-lead) + :where(.bbk-prose) { margin-top: 18px; }

/* poznámka pod tlačítky */
.bbk :where(.bbk-actions) + :where(.bbk-note) { margin-top: 16px; }

/* specializace a citace pod souvislým textem */
.bbk :where(.bbk-prose, .bbk-quote) + :where(.bbk-spec) { margin-top: 22px; }
.bbk :where(.bbk-prose) + :where(.bbk-quote) { margin-top: 24px; }

/* mřížky a seznamy po nadpisu, perexu, textu nebo tlačítkách */
.bbk :where(.bbk-h2, .bbk-lead, .bbk-prose, .bbk-actions, .bbk-surfaces, .bbk-markets)
   + :where(.bbk-facts, .bbk-beliefs, .bbk-trust, .bbk-surfaces,
            .bbk-gallery, .bbk-collage, .bbk-route, .bbk-markets,
            .bbk-table-wrap) { margin-top: 36px; }

.bbk :where(.bbk-h2, .bbk-lead, .bbk-quote) + :where(.bbk-people, .bbk-timeline) { margin-top: 40px; }
.bbk :where(.bbk-h2) + :where(.bbk-faq) { margin-top: 32px; }

/* shrnující věta pod mřížkou */
.bbk :where(.bbk-facts, .bbk-surfaces) + :where(.bbk-lead) { margin-top: 32px; }

/* text nebo poznámka navazující na mřížku */
.bbk :where(.bbk-facts, .bbk-beliefs, .bbk-trust, .bbk-surfaces, .bbk-gallery,
            .bbk-collage, .bbk-markets, .bbk-table-wrap)
   + :where(.bbk-prose, .bbk-note) { margin-top: 36px; }

/* --- kontextové výjimky ---------------------------------------------------
   Sevřenější sekce a karty profilu mají vlastní, těsnější rytmus. */

.bbk-section--tight :where(.bbk-h2) + :where(.bbk-facts) { margin-top: 28px; }
.bbk-section--tight :where(.bbk-prose) + :where(.bbk-quote) { margin: 28px 0; }
.bbk-profile__body :where(.bbk-prose) + :where(.bbk-quote) { margin: 22px 0 0; }
.bbk-hero__grid--60 :where(.bbk-prose) + :where(.bbk-spec) { margin-top: 24px; }

/* uvnitř karet si odstupy řídí komponenta sama */
.bbk-person .bbk-spec { margin: 0 0 16px; }

/* Karty mají vlastní bílé pozadí, proto si musí držet i vlastní barvu textu.
   V .bbk-section--dark by jinak zdědily bílou a jejich nadpis by zmizel. */
.bbk :where(.bbk-facts__item, .bbk-beliefs__item, .bbk-trust__item,
            .bbk-surfaces__item) { color: var(--bbk-ink); }

/* odkaz „dál" pod odstavcem */
.bbk-morelink { margin-top: 28px; }

/* ==========================================================================
   MODIFIKÁTORY
   Varianty, které dřív visely inline. Každá říká záměr, ne hodnotu.
   ========================================================================== */

/* užší míra pro perex a delší souvislý text */
.bbk-lead--narrow { max-width: 62ch; }
.bbk-prose--narrow { max-width: 70ch; }
.bbk-prose--left { text-align: left; }

/* karty pod sebou místo do mřížky, když je text delší */
.bbk-trust--stack { grid-template-columns: 1fr; }

/* položka přes celou šířku, aby v mřížce nezůstala prázdná buňka */
.bbk-beliefs__item--full,
.bbk-facts__item--full { grid-column: 1 / -1; }

/* .bbk-measure omezuje šířku textu; na fotky a mřížky se to nevztahuje */
.bbk-wrap.bbk-measure > :where(figure, .bbk-gallery, .bbk-collage) { max-width: none; }

/* samostatná fotografie přes celou šířku sekce */
.bbk-figure { margin: 36px 0 0; }
.bbk-figure img { width: 100%; border-radius: var(--bbk-radius-lg); }
.bbk-figure figcaption { margin-top: 10px; }

/* banner nad úvodním textem stránky */
.bbk-hero__figure--banner { margin: 0 0 clamp(28px, 3.4vw, 44px); }

/* mapka není fotografie: nesmí se ořezávat ani natahovat na poměr stran */
.bbk-store__figure--map img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--bbk-white);
}

/* citace na tmavém fotografickém pozadí */
.bbk-cta .bbk-quote { border-color: var(--bbk-primary); color: var(--bbk-white); }

/* ==========================================================================
   FOTOGRAFIE V ZÁVĚREČNÝCH CTA
   Adresa snímku je vlastnost té které stránky, ne obsah odstavce, proto má
   každá varianta vlastní modifikátor a v HTML nezůstává style atribut.
   ========================================================================== */

.bbk-cta--foto-zahrada { background-image: url('/data-central/img/zahrada/travnik-alej.jpg'); }
.bbk-cta--foto-budova  { background-image: url('/data-central/img/zahrada/travnik-budova.jpg'); }
.bbk-cta--foto-areal   { background-image: url('/data-central/img/prodejna/areal-shora.jpg'); }
.bbk-cta--foto-sedacka { background-image: url('/data-central/img/test-autosedacek-02.jpg'); }

/* ==========================================================================
   KOMPATIBILITA S OBALEM KONTAKTNÍ STRÁNKY

   Presenter Front:Kontakt vkládá obsah stránky do #contactUsNoticeContent
   a aplikace v tom obalu stylizuje značky přes ID:

     #contactUsNoticeContent h2     { margin:0 0 5px; padding:7px;
                                      clear:both; background-color:#f4f4f4 }
     #contactUsNoticeContent a      { color:#000 }
     #contactUsNoticeContent strong { color:#000 }

   Specificita s ID je (1,0,1) a přebije každou naši třídu. Bez tohohle bloku
   by měl každý nadpis šedý pruh a odsazení, tlačítka i odkazy by zčernaly.

   Odstínění je proto stejné jako to globální výš v souboru, jen zopakované
   s ID v selektoru. Zůstává zanořené pod .bbk, takže mimo náš snippet
   nesahá. Protože má (1,1,0), přebilo by i naše komponenty; pár hodnot se
   pod ním vrací zpět se stejnou vahou plus třídou, tedy (1,2,0).

   DOČASNÉ. Po faceliftu kontaktní stránky nemá blok KONTAKT
   v core/css/stylesheet.css co stylizovat: .kontakt-block, .left, .right
   ani .prodejna_img_out už v obsahu nejsou. Jakmile ta mrtvá pravidla
   z aplikace zmizí, smaže se celý tenhle blok.
   ========================================================================== */

#contactUsNoticeContent .bbk :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  clear: none;
  background: none;
}

#contactUsNoticeContent .bbk :where(a, strong) { color: inherit; }

/* V mobilní části responsive-stylesheet.css je navíc
   #contactUsNoticeContent p { text-align: center }, kvůli čemu se celá
   stránka na telefonu vycentrovala. Naše sazba je zarovnaná na prapor. */
#contactUsNoticeContent .bbk :where(p) { text-align: inherit; }

/* vrácení hodnot, které by odstínění výš přebilo */
#contactUsNoticeContent .bbk .bbk-h1 { margin: 0 0 24px; }
#contactUsNoticeContent .bbk .bbk-h2 { margin: 0 0 20px; }
#contactUsNoticeContent .bbk .bbk-h3 { margin: 0 0 12px; }
#contactUsNoticeContent .bbk .bbk-h4 { margin: 0 0 8px; }

#contactUsNoticeContent .bbk .bbk-link { color: var(--bbk-ink); }
#contactUsNoticeContent .bbk .bbk-link:hover { color: #007e99; }

#contactUsNoticeContent .bbk .bbk-btn--primary { color: #04222a; }
#contactUsNoticeContent .bbk .bbk-btn--primary:hover,
#contactUsNoticeContent .bbk .bbk-btn--primary:focus-visible { color: var(--bbk-white); }

#contactUsNoticeContent .bbk .bbk-btn--ghost { color: var(--bbk-ink); }
#contactUsNoticeContent .bbk .bbk-btn--ghost:hover,
#contactUsNoticeContent .bbk .bbk-btn--ghost:focus-visible { color: var(--bbk-white); }

#contactUsNoticeContent .bbk .bbk-person__name a:hover { color: var(--bbk-primary-ink); }

/* Historická fotografie u položky timeline. Snímky z archivu mají různý poměr
   stran, výřez 3:2 je srovná do jedné řady, aby časová osa nepodskakovala. */
.bbk-timeline__figure { margin: 16px 0 0; }

.bbk-timeline__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bbk-radius);
  background: var(--bbk-tint);
}

.bbk-timeline__figure figcaption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--bbk-ink-mute);
}

/* ==========================================================================
   TABULKA

   První komponenta, která pracuje s <table>. Ceník dopravy potřebuje
   porovnávat hodnoty po sloupcích, což karty neumí: zákazník chce vidět
   ceny jednotlivých dopravců pod sebou a rozhodnout se.

   Aplikace má vlastní .table-pages, ale ta má šedé pozadí a pevné šířky
   sloupců po třetinách. Sem se nehodí, proto vlastní komponenta laděná
   na stejné tokeny jako zbytek stylu.

   Na úzkém displeji se tabulka nesmršťuje do nečitelných sloupců, ale
   posouvá se vodorovně uvnitř vlastního obalu. Stránka se proto nikdy
   nerozjede do strany.
   ========================================================================== */

.bbk-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.bbk-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.bbk .bbk-table :where(th, td) {
  padding: 14px 18px 14px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bbk-line);
}

.bbk .bbk-table :where(th, td):last-child { padding-right: 0; }

/* záhlaví se sází jako nadnadpis, aby nekřičelo */
.bbk-table thead th {
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bbk-ink-mute);
  border-bottom-color: var(--bbk-ink);
}

/* první sloupec je záhlaví řádku, drží se na jednom řádku */
.bbk-table tbody th {
  font-weight: 600;
  color: var(--bbk-heading);
  white-space: nowrap;
}

.bbk-table tbody td { color: var(--bbk-ink-soft); }

/* zvýrazněná hodnota uvnitř buňky */
.bbk-table tbody :where(th, td) strong { color: var(--bbk-ink); font-weight: 600; }

.bbk-table tbody tr:last-child :where(th, td) { border-bottom: 0; }

@media (max-width: 700px) {
  .bbk-table { font-size: 14px; }
  .bbk .bbk-table :where(th, td) { padding: 12px 14px 12px 0; }
}