/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Bento 2 (Cenník: balíky + detailné porovnanie)
   Figma: 401:24959 (celok) / 401:24960 (obdobie+používatelia) / 401:24968
   (4 karty) / 416:13082 (CTA toggle) / 1179:69692 (kondenzovaný riadok) /
   1179:70250 (porovnávacia tabuľka). Desktop only (mobil Figma link zatiaľ
   nedodaný - responzivita nižšie je konzervatívny fallback, doladiť keď príde).

   Štítok „Odporúčané" na karte Maximum má od v1.22.13 vlnitý chvost z Figma
   assetu (image 5, node 625:28091) - dovtedy to bolo vedomé zjednodušenie na
   zaoblený badge. Detail pri `.zn-b2__ribbon` nižšie.

   OPRAVA (2026-07-22, Maroš): pozadie sekcie = rovnaká farba ako hero Cenníka
   (zenturi/pricing-calculator, --color-bg-medium #ecf2f4), nie biela - overené
   `get_variable_defs` na oboch nodoch (401:24959 aj 1179:68764), obe nesú
   "Scheme A/Background Medium":"#ecf2f4". Karty samotné ostávajú biele (border).
   Dôsledok: horný wave-sep medzi kalkulačkou a bento-2 ostáva zámerne vynechaný
   (teraz sú identické farby, netreba oddeľovač vôbec). Spodný wave-sep pred
   footrom treba prepnúť z "flip" na "navy-on-medium" (bez flipu) - ten variant
   je presne pre prechod svetlá sekcia (bg-medium) hore → tmavá dole, čo teraz
   sedí; "flip" počítal s bielym pozadím nad sebou, po tejto zmene by tam vznikla
   rovnaká tvrdá hrana ako predtým na vrchu. Over pixelovo na DDEV pred nasadením. */

.zn-b2 {
  background: var(--color-bg-medium);
  --zn-pt: var(--space-12);
  --zn-pb: var(--space-20);
  padding-inline: var(--space-16);
}
.zn-b2.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }

/* ⚠️ 1024, NIE témový `--container-max` (1280) - a NIE JE TO PREHLIADNUTIE.
   Cenník má v predlohe ZÁMERNE dve rôzne šírky riadku: hero kalkulačka
   (uzol 1179:68764) má `max-w-[1280px]` a premennú `Container/container-large`,
   ale riadok s cenovými kartami (uzol 401:24968, „div.row") má v ráme 1440
   x = 208 a šírku 1024. Karty v ňom sedia na 0/258/516/774 so šírkou 250,
   čiže 4 × 250 + 3 × 8 = 1024 presne.

   Prečo na tom záleží viac, než by sa zdalo: pri 1280 vychádza karta na 314 px
   a do posledného riadku štítkov sa vojde TRETÍ, takže „Emailing" sa prilepí
   k „Financie" a „Úlohy" namiesto toho, aby bol sám na spodku. Nie je to chyba
   lámania - štítky sa lámu `flex-wrap`-om presne ako v predlohe (druhý začína
   4 px za koncom prvého, rozptyl začiatkov 34 px, teda NIE mriežka). Overené
   vnútením 250 px v prehliadači: nezmenené CSS dá [2,2,2,2,1] ako predloha.
   Preto sa opravuje šírka riadku a do štítkov sa nesiaha.

   NEZJEDNOCUJ to s kalkulačkou na 1280 - rozišlo by to karty s predlohou. */
/* Rozostup radov je v predlohe V2 32 (lišta `16464:57351` končí na y 100, karty
   `16464:57364` začínajú na 132; rovnako karty → matica a matica → panel
   „Na mieru"). Do V2 tu bolo 24 - prestavbou sa to zjednocuje s predlohou. */
.zn-b2__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1024px;
  margin-inline: auto;
  font-family: var(--font-display);
}

/* ── Oblasť cenníka (karty → infoprúžok → matica → panel „Na mieru") ─────────
   Obal existuje kvôli prilepenému radu: je pozicovaný, takže vrstva s radom
   v ňom `inset: 0` pokryje presne tú oblasť, v ktorej má rad žiť. Rozostupy
   drží sám (32 ako predloha), lebo už nie sú položkami `.zn-b2__container`. */
.zn-b2__scope {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Položky flexu majú `min-width: auto`, takže by sa nezmenšili pod šírku obsahu
   a vodorovne scrollovateľná matica (`min-width: 660px` na mobile) by pretiekla
   celú stránku - namerané 557 px pri okne 393. `min-width: 0` to dovolí, aby ju
   udržal jej vlastný `overflow-x: auto`. */
.zn-b2__scope > * { min-width: 0; }

/* ── Infoprúžok pod kartami (16464:57371) ────────────────────────────────────
   Predloha: karty končia na y 795, prúžok začína na 811 → 16 px. Obal má 32,
   preto sa 16 uberie. */
.zn-b2__infobar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: -16px 0 0;
  padding: 0 16px;
  list-style: none;
}
.zn-b2__infobar-item {
  display: flex;
  flex: 1 1 340px;
  align-items: center;
  gap: 16px;
}
/* Ikony vo flex riadku vždy `flex-shrink: 0` - na úzkom riadku by sa inak
   scvrkli na nulu (interná konvencia). */
.zn-b2__infobar-icon { flex-shrink: 0; width: 32px; height: 32px; }
.zn-b2__infobar-text { font-size: var(--text-base); color: var(--color-text); }

/* ── Panel „Na mieru" pod maticou (16464:57755, 1024 × 95) ───────────────────
   Na mobile ho nahrádza karta v stohu (`.zn-b2__card--custom`), viď responzívnu
   sekciu - markup je dvakrát a vždy je viditeľná práve jedna vetva. */
.zn-b2__custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.zn-b2__custom-info { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 8px 16px; }
.zn-b2__custom-name {
  margin: 0;
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-secondary);
}
.zn-b2__custom-desc { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.zn-b2__custom-action { display: flex; align-items: center; gap: 24px; padding-right: 16px; }
.zn-b2__custom-price {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-secondary);
  white-space: nowrap;
}
/* Šírka tlačidla je v predlohe 144 px a text sa nesmie lámať. */
.zn-b2__custom-cta { width: auto; min-width: 144px; margin: 0; }

/* ── Obdobie + počet používateľov (401:24960) ── */
.zn-b2__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Obdobie + mena vľavo v jednej skupine (Figma 1446:55094: Tabs + dropdown, gap 16) */
.zn-b2__bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.zn-b2__periods {
  display: flex;
  align-items: flex-start;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
.zn-b2__period {
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.zn-b2__period.is-active { border-color: var(--color-border); font-weight: var(--weight-medium); }

/* ── Mena (Figma 1446:55084: textový odkaz s chevronom, bez rámu) ──
   Otvára sa klikom; menu je malá biela karta pod tlačidlom. */
.zn-b2__currency { position: relative; }
.zn-b2__currency-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
}
.zn-b2__currency-chevron { flex-shrink: 0; transition: transform var(--transition-base); }
.zn-b2__currency-toggle[aria-expanded="true"] .zn-b2__currency-chevron { transform: rotate(180deg); }
.zn-b2__currency-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 88px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(16, 101, 122, .15);
}
.zn-b2__currency-menu[hidden] { display: none; }
.zn-b2__currency-option {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-xs, 4px);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.zn-b2__currency-option:hover { background: var(--color-bg-medium); }
.zn-b2__currency-option.is-active { font-weight: var(--weight-semibold); }

.zn-b2__seats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zn-b2__seats-label { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-black); white-space: nowrap; }

.zn-b2__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 152px;
  height: 48px;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.zn-b2__step { display: flex; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
.zn-b2__step:disabled { opacity: .4; cursor: not-allowed; }
.zn-b2__seats-count { flex: 1 0 0; min-width: 0; text-align: center; font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-text-secondary); }

.zn-b2__seats-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  max-width: 264px;
}
.zn-b2__seats-info svg { flex-shrink: 0; color: var(--color-text-secondary); }

/* ── 4 cenové karty (401:24968) ── */
/* Predloha V2 (16464:57364): prázdny stĺpec + 4 balíky, teda 5 × 198,4 s medzerou
   8 v šírke 1024. Prvý stĺpec je prázdny, aby rad balíkov sadol na tú istú
   päťstĺpcovú mriežku ako matica pod ním. */
.zn-b2__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  gap: 8px;
}
/* Prezentačná medzera - bez obsahu, len drží prvý stĺpec mriežky. */
.zn-b2__cards-spacer { display: block; }

.zn-b2__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px;
  overflow: hidden;
}
/* Rám zvýraznenej karty = klasický `border`, a to zámerne (Maroš 2026-08-03):
   horný rám musí byť SÚVISLÁ čiara cez celú šírku karty a štítok začína tesne pod ňou.
   Práve preto tu NEsmie byť trik s `inset` tieňom a štítkom na `top: 0` — v1.22.17 ho
   skúsila (aby štítok lícoval s vonkajšou hranou) a rám sa tým v strede prerušil.
   S `border`-om je `top: 0` štítku = padding box, teda presne vnútorná hrana rámu:
   nula medzery, žiadne prekrytie a hrúbka sa nikde nezosilní. Naviazané na `border`,
   takže pri zmene hrúbky sa štítok posunie sám (žiadna magická konštanta). */
.zn-b2__card--featured {
  border: 2px solid var(--color-primary-dark);
  box-shadow: 0 20px 24px -4px rgba(178, 95, 0, .1), 0 8px 8px -4px rgba(178, 95, 0, .05);
  background:
    linear-gradient(90deg, rgba(253, 233, 180, .1), rgba(253, 233, 180, .1)),
    var(--color-bg);
}

/* Štítok „Odporúčané" = zástavka s vlnitou spodnou hranou, NIE pilulka.
   Figma 625:28091 → Tag (0:65) 140x30.125: telo `Frame 273` 140x24 (bg #ffb703,
   text 14 SemiBold, pt 3 / px 10, BEZ radiusu) + `image 5` 140x6.125 = vlnitý
   chvost, samostatný raster (pomer 2560/112). Tag je absolútny, vodorovne v strede
   a `top: 0` ho posadí na VNÚTORNÚ hranu rámu — horný rám tak ostáva súvislou
   neprerušenou čiarou cez celú šírku karty (Maroš 2026-08-03) a medzi ňou a vrchom
   štítku nie je medzera. Obe ikony po stranách textu sú vo Figme hidden.
   Text je `Scheme A/Accent/Black` = #000, NIE --color-text #023047 (dve rôzne
   čierne, interné poznámky).
   `min-width` namiesto fixných 140: Figma má text „Odporúčané" na 140 s rezervou,
   ale dlhší label od klienta sa nesmie orezať - štítok dorastie a chvost s ním. */
.zn-b2__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  min-width: 140px;
  padding: 3px 10px 0;
  background: var(--color-primary);
  color: var(--color-black);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;                             /* 14 x 1.5 = 21 → telo 3 + 21 = 24 */
  text-align: center;
  white-space: nowrap;
}
/* Chvost: asset nesie len TVAR, farbu dáva maska z tokenu - žltá tela a vlnky sa
   tak nemôžu rozísť (rovnaký mechanizmus ako .zn-fdark__squiggle). */
.zn-b2__ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  aspect-ratio: 2560 / 112;                     /* Figma image 5 */
  background: var(--color-primary);
  -webkit-mask: url('../../../assets/img/ribbon-tail.png') 0 0 / 100% 100% no-repeat;
  mask: url('../../../assets/img/ribbon-tail.png') 0 0 / 100% 100% no-repeat;
}
/* Štítok je v markupe každej karty (aj Na mieru), viditeľný len na zvýraznenej -
   „Odporúčané" putuje za balíkom zvoleným v kalkulačke (JS prehadzuje --featured). */
.zn-b2__card .zn-b2__ribbon { display: none; }
.zn-b2__card--featured .zn-b2__ribbon { display: block; }

/* Odsadenie nadpisu zhora: Figma meria od hornej hrany OBSAHU karty (Top Info y=0)
   a dáva 24 pre bežnú kartu (Balik-Flexi 625:28090) a 30 pre zvýraznenú so štítkom
   (Balik-Komplet 625:28091). Karta tu má navyše vlastný `padding: 6px`, ktorý sa
   k tomu pripočítava — preto sa od Figma hodnoty odratáva (24-6=18, 30-6=24).
   Bez toho bol nadpis o 6px nižšie a pri zvýraznenej karte nedosadal na chvost
   štítku (medzera 5.875 namiesto Figma prekryvu 0.125).
   Pozn.: `pricing-compare` má ten istý štítok, ale karta tam vlastný padding nemá,
   takže si drží holé 24/30 — hodnoty sa zámerne nezhodujú. */
/* V2 (16464:57367/57368/57369): Top Info má `pt-[26px]` a ŽIADNY vodorovný
   padding - názvy balíkov sú `whitespace-nowrap` a pri 24 px po stranách sa
   „Fakturácia Plus" do stĺpca 198,4 nezmestí. Zvýraznená karta má v predlohe
   `pt-[32px] px-[24px]` (miesto pre štítok „Odporúčané"). */
.zn-b2__card-top { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 26px 0 8px; text-align: center; }
.zn-b2__card--featured .zn-b2__card-top { padding: 32px 24px 8px; }

.zn-b2__card-name {
  margin: 0;
  font-style: italic;
  font-weight: 580;
  /* V2: názov balíka je „Heading/H6-A", teda Size/H6 = 20 (overené
     `get_variable_defs` na 16464:57367 - JSX síce odkazuje na `--size/h4`,
     ale aplikovaný textový štýl je H6-A a H4 sa rozlíši na 32).
     Rozhodol WRAP TEST proti predlohe: pri 32 px sa „Fakturácia Plus" v stĺpci
     198,4 láme na dva riadky, predloha ju má na jednom - pri 20 px sedí.
     Do V2 tu bolo `--text-4xl` (karty boli široké 250). */
  font-size: var(--text-2xl);
  line-height: 1.4;
  /* Figma „Heading/H4-A" hlási `letterSpacing: -1`, ale je to PERCENTO, nie pixely:
     export textového uzla 416:14264 (Size/H4 = 32) dáva `tracking-[-0.32px]`,
     −0,32 / 32 = −1 %. Predošlý komentár tu tvrdil „-1 (nie -0.32)" - to bolo
     práve to zlé čítanie. `em` drží pomer aj pri mobilnom Size/H4 = 24 (−0,24)
     a pri fluidnom `--text-4xl` (26 → 32). NEVRACAJ na px. */
  letter-spacing: -0.01em;
  color: var(--color-secondary);
}
.zn-b2__card-desc { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
/* Dvojfarebný popis zvýraznenej karty - detail a zdôvodnenie ako v `pricing-compare`. */
.zn-b2__card-desc strong { font-weight: var(--weight-semibold); }
.zn-b2__card--featured .zn-b2__card-desc strong { color: var(--color-text); }

.zn-b2__hr { width: 100%; height: 1px; margin: 0; border: 0; background: #dbdbdb; }

.zn-b2__price { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 8px 0 0; text-align: center; }
.zn-b2__price-amount {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 -6px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: 1.1;                             /* Heading/H3 (625:28088) - dedené 1.5 bolo zlé */
  color: var(--color-primary-dark);
}
.zn-b2__price-amount--sm { font-size: var(--text-4xl); }
.zn-b2__price-cur { font-size: var(--text-3xl); font-weight: var(--weight-medium); }
.zn-b2__price-suffix { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.zn-b2__price-custom {
  display: flex; align-items: center; justify-content: center;
  height: 59px; margin: 0; width: 100%;
  font-size: var(--text-3xl); font-weight: var(--weight-medium); color: var(--color-secondary); text-align: center;
}

.zn-b2__cta {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% - 16px); margin: 12px 8px 0;
  height: 48px; padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-text); text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Výplň CTA sa viaže na zvýraznenú kartu (nie na serverovú triedu) - keď JS
   presunie „Odporúčané" za balíkom z kalkulačky, žlté tlačidlo ide s ním. */
.zn-b2__card--featured .zn-b2__cta,
.zn-b2__recap-card--featured .zn-b2__cta { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-black); }
.zn-b2__cta:hover { border-color: var(--color-text); box-shadow: 0 2px 4px -2px rgba(19,91,108,.05), 0 4px 8px -2px rgba(19,91,108,.15); }
.zn-b2__cta--sm { height: 40px; margin-top: 8px; }

/* Popisok CTA v prilepenom rade sa na úzkych stĺpcoch láme na dva riadky.
   ⚠️ Meranie z výšky to NEODHALÍ - tlačidlo má pevných 40 px, takže druhý riadok
   z neho vytečie von; rozhoduje počet riadkových obdĺžnikov textu
   (`Range.getClientRects()`).

   Vo V2 má rad PÄŤ stĺpcov namiesto štyroch, takže je stĺpec užší na VŠETKÝCH
   šírkach - pri 1440 má karta radu 185,6 px a tlačidlo vnútri 121,6 px, kým
   „Vyskúšať zadarmo" potrebuje pri 16 px semibold 131,06 px. Do V2 stačilo
   pásmo 768-899.98, teraz pravidlo platí od 768 nahor.

   Predloha drží tlačidlo na `w-full` vnútri 8px odsadenia a jeho text má
   `whitespace-nowrap`, čiže sa lámať nemá vôbec; zruší sa preto odsadenie
   (+16 px) a zúži vodorovný padding (+24 px). Text je centrovaný, takže sa to
   inak než zmestením neprejaví. */
@media (min-width: 768px) {
  .zn-b2__recap .zn-b2__cta {
    width: 100%;
    margin-inline: 0;
    padding-inline: 4px;
  }
}
/* Pod ~1024 sa popisok na jeden riadok nezmestí ani pri nulovom paddingu:
   pri 768 má stĺpec radu 118,4 px a tlačidlo vnútri 94,4, kým „Vyskúšať zadarmo"
   potrebuje pri 16 px 131,06 (pri 14 px 114,7). Namerané jeden riadok od 1024.
   Tlačidlo preto v tomto pásme prestáva mať PEVNÚ výšku - dva riadky sa doň
   zmestia namiesto toho, aby z neho vytiekli. Skracovať popisok by bola zmena
   obsahu, zmenšovať písmo pod 14 px nečitateľnosť. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .zn-b2__recap .zn-b2__cta {
    height: auto;
    min-height: 40px;
    padding-block: 6px;
    font-size: var(--text-sm);
    line-height: 1.2;
  }
}

/* ── Peppol na karte (predloha V2, 16464:57367-57370) ────────────────────────
   Sadzba + režim platby + rozbaľovacia kalkulačka. Sumu za Peppol ukazuje blok
   SAMOSTATNE - k cene balíka sa zámerne nepripočítava, kým to Ján nepotvrdí. */
.zn-b2__peppol {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  /* Bez vodorovného paddingu - predloha ho na kartách Flexi a Maximum nemá
     (`py-[8px]`) a riadok so sadzbou sa nesmie lámať, viď `nowrap` nižšie. */
  padding: 8px 0;
}
.zn-b2__peppol-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: center;
}
/* Predloha má text sadzby `whitespace-nowrap` - na dva riadky sa lámať nemá. */
.zn-b2__peppol-price { white-space: nowrap; }
.zn-b2__peppol-rate .zn-b2__info-ico { flex-shrink: 0; color: var(--color-text-secondary); }
.zn-b2__peppol-mode {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--color-text-secondary);
  text-align: center;
}
.zn-b2__peppol-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  cursor: pointer;
}
.zn-b2__peppol-chevron { flex-shrink: 0; transition: transform var(--transition-base); }
.zn-b2__peppol-toggle[aria-expanded="true"] .zn-b2__peppol-chevron { transform: rotate(180deg); }
.zn-b2__peppol-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
}
.zn-b2__peppol-calc[hidden] { display: none; }
.zn-b2__peppol-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 128px;
  height: 40px;
  padding: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input, 12px);
}
.zn-b2__peppol-step {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.zn-b2__peppol-step[disabled] { opacity: .4; cursor: default; }
.zn-b2__peppol-qty {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}
.zn-b2__peppol-qty-value { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.5; }
.zn-b2__peppol-qty-unit  { font-size: var(--text-xs); line-height: 1.2; }
.zn-b2__peppol-sum {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.zn-b2__peppol-sum-sign,
.zn-b2__peppol-sum-cur   { font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: 1.4; }
.zn-b2__peppol-sum-value { font-style: italic; font-weight: var(--weight-medium); font-size: var(--text-xl); line-height: 1.4; }

/* ── Zľava v popisku ročnej záložky (predloha V2 16464:57351) ───────────────
   Dve triedy kvôli poradiu načítania: `components.css` ide PO blokovom CSS. */
.zn-b2__period .zn-b2__period-discount { margin-left: 4px; color: var(--color-primary-dark); }
.zn-b2__period.is-active .zn-b2__period-discount { font-weight: var(--weight-medium); }

/* ⚠️ VODOROVNÝ PADDING KOMPENZUJE HRÚBKU RÁMU KARTY - preto 7, nie 8, a na
   zvýraznenej 6. Predloha (401:24968) má ľavú hranu tohto bloku 14 px od hrany
   karty na VŠETKÝCH kartách. U nás sa k nej skladajú tri veci: rám karty +
   `padding: 6px` karty + tento padding. Figma kreslí stroke DOVNÚTRA, takže jej
   šírku obsahu neuberá; CSS `border` áno. Bez kompenzácie vychádzalo 15 px na
   bežnej karte a 16 na zvýraznenej (tá má rám 2 px), takže zvýraznená mala pre
   štítky 218 px namiesto 222 - a lámala sa inak než predloha.
   Rám karty sa NEDÁ prehodiť na `inset box-shadow` (rozhodnutie 2026-08-03:
   štítok „Odporúčané" na `top: 0` musí sedieť na vnútornej hrane rámu, inak sa
   horný rám v strede preruší), preto sa kompenzuje tu. Pri zmene hrúbky rámu
   treba tieto hodnoty prepočítať. */
.zn-b2__modules { width: 100%; padding: 16px 7px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.zn-b2__card--featured .zn-b2__modules { padding-inline: 6px; }
/* Doľava na VŠETKÝCH kartách - aj na prvej, aj na zvýraznenej. Odmerané
   z rastra uzla 401:24968: ľavá hrana riadku je +14 px v karte širokej 250
   (5,6 %) na karte 1 („Funkcie v balíku"), na karte 2 (celá veta) aj na
   zvýraznenej karte 3 - centrovanie by ju posunulo na +77 px (31 %).
   Výnimka pre `:first-child` a `--featured` tu bola od prvého commitu bloku,
   nestál za ňou vyriešený problém. Pri `--featured` navyše putovala za
   zvýraznením z kalkulačky, takže ten istý riadok bol raz vľavo a raz v strede. */
.zn-b2__modules-title { margin: 0; width: 100%; min-height: 42px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); text-align: left; }

/* Štítky sú napakované doľava, nie centrované. Pri plnom riadku je to
   nerozlíšiteľné - rozdiel robí až nedoplnený riadok. V rastri uzla 401:24968
   začína KAŽDÝ riadok štítkov na +14 px, teda na ľavej hrane kontajnera, vrátane
   posledného, kde je „Emailing" sám (karty 1 aj 2). S `center` bol ten posledný
   štítok odsadený o +81,8 px pri 1440 a +105,3 px pri 393.

   Počet štítkov v riadku je ZÁMERNE pohyblivý - je to wrap, NIE mriežka, a
   prerobiť to na pevné dva stĺpce by bola chyba. Odmerané z rastrov: desktop
   predloha (401:24968, karta 250 px) dá 2 v riadku, mobilná (1179:67936, karta
   361 px) dá 3 - tá istá komponenta, len širšia karta. Medzera je v oboch
   rovných 4 px a štítky si držia vlastnú šírku (13 rôznych hodnôt, 68-128 px),
   takže sa do stĺpca nerozťahujú. Kontrola: keď sa karte vnúti šírka predlohy
   250 px, toto CSS dá presne 2,2,2,2,1 s „Emailing" samotným - teda to isté čo
   predloha.

   Práve na tomto meraní stojí šírka riadku hore (`.zn-b2__container` = 1024,
   nie témových 1280): dovtedy vychádzala karta 314 px a do posledného riadku
   sa vošiel tretí štítok. Ak sa sem niekto vráti preto, že „Emailing" nie je
   sám na spodku, chyba NIE JE tu - pozri šírku kontajnera. */
/* Medzery v predlohe: `gap-[4px_10px]` (riadok 4, stĺpec 10). */
.zn-b2__tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; width: 100%; }
/* ⚠️ RÁM IDE CEZ `inset box-shadow`, NIE `border` - a je to dôležité pre ŠÍRKU.
   Figma kreslí stroke DOVNÚTRA, CSS `border` box rozširuje, takže `border: 1px`
   robil každý štítok o 2 px širší než v predlohe. Pri dvoch v riadku sú to 4 px
   navyše a to stačilo na iné zalomenie: karta Flexi mala „Dochádzka +" samu na
   riadku, kým predloha má všade po dvoch. (Druhých ~9 px pridáva to, že máme
   správne „Dochádzka", kým predloha má preklep „Dochádza" - text nemeníme.)
   `box-shadow` kreslí ten istý 1px rám, rešpektuje `border-radius` a do šírky
   sa nepočíta. Farbu rámu menia varianty cez `--zn-b2-ring`, nie cez
   `border-color`. NEVRACAJ na `border`. */
.zn-b2__tag {
  --zn-b2-ring: var(--color-disabled);
  display: inline-flex; align-items: center; gap: 4px;
  /* Vodorovný padding 10 = hodnota z predlohy (`px-[10px]`).
     Do V2 tu bolo 8 ako jediná vedomá odchýlka: predloha mala na karte Flexi
     v kontajneri 222 px riadok „Dochádza + / ERP +" na nulovú rezervu a naše
     správne „Dochádzka" je o 7,23 px širšie, takže dvojica pretekala.
     Vo V2 je stĺpec balíka 198,4 namiesto 250 a kontajner štítkov ~168, takže
     sa v predlohe lámu štítky TAK ČI TAK po jednom na riadok - dôvod pre
     odchýlku zanikol a padding sa vracia na hodnotu predlohy. */
  height: 32px; padding: 4px 10px;
  background: var(--color-bg);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--zn-b2-ring);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-disabled);
}
.zn-b2__tag-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* „+" glyf = Figma Icon/Main #ffb703 = žltá (Tag 625:23996), nie teal. */
.zn-b2__tag-add { flex-shrink: 0; color: var(--color-primary); }

.zn-b2__tag--included { --zn-b2-ring: var(--color-primary-dark); color: var(--color-text); }
.zn-b2__tag--addable  { --zn-b2-ring: var(--color-secondary-light); color: var(--color-text-secondary); }
/* Modulová ikona = Figma Secondary Dark #1b8098 (main) + Secondary Light #8ecae6 (soft). */
.zn-b2__tag--addable .zn-b2__tag-icon { --zn-ico-main: var(--color-secondary-dark); --zn-ico-soft: var(--color-secondary-light); }

/* Klikací príplatkový tag (Flexi „vyskladaj si balík") - button, nie span. */
button.zn-b2__tag { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.zn-b2__tag--addable:hover { --zn-b2-ring: var(--color-secondary); }
/* Zaklikaný = pripočítaný k cene: teal rám + jemné pozadie, „+" ostáva ako indikátor. */
.zn-b2__tag--addable.is-selected {
  --zn-b2-ring: var(--color-secondary);
  background: rgba(33, 158, 188, .08);
  color: var(--color-text);
}
.zn-b2__tag--addable.is-selected .zn-b2__tag-add { transform: rotate(45deg); }
.zn-b2__tag--excluded { --zn-b2-ring: var(--color-disabled); color: var(--color-disabled); }
.zn-b2__tag--excluded .zn-b2__tag-icon { --zn-ico-main: var(--color-disabled); --zn-ico-soft: #dfe4e6; }

.zn-b2__card-footer { margin: 8px 0 0; padding: 8px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-align: left; }

/* ── CTA "Zobraziť detailné porovnanie" (416:13082) ── */
.zn-b2__toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
}
.zn-b2__toggle-chevron { color: #222; transition: transform var(--transition-base); }
.zn-b2__toggle[aria-expanded="true"] .zn-b2__toggle-chevron { transform: rotate(180deg); }

/* ── Detail: kondenzovaný riadok (1179:69692) + tabuľka (1179:70250) ── */
.zn-b2__detail { display: flex; flex-direction: column; gap: 8px; }
.zn-b2__detail[hidden] { display: none; }

/* ⚠️ Rad SEDÍ NA MRIEŽKE MATICE, NIE KARIET. V predlohe to nie je tá istá
   mriežka: karty majú 5 × 198,4 s medzerou 8 a bez vonkajšieho paddingu (stredy
   99,2 / 305,6 / 512 / 718,4 / 924,8), matica 5 × 185,6 s medzerou 16 a
   paddingom 16 (stredy 108,8 / 310,4 / 512 / 713,6 / 915,2) - rozdiel stredov
   je až 9,6 px. Rad je hlavičkou MATICE, takže kopíruje jej hodnoty; pri mriežke
   kariet by sa so stĺpcami tabuľky rozišiel. */
.zn-b2__recap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding-inline: 16px;
}
/* Kondenzovaný riadok sa pri scrolle tabuľkou prilepí pod header (vzor
   Flowii/Cloudtalk „col legend"). Header sa pri scrolle dole schováva
   (.site-header.is-hidden) - fixný top by vtedy nechal nad recapom presvitať
   pás riadkov, preto `--zn-b2-recap-top` priebežne nastavuje JS na skutočnú
   spodnú hranu headera (skrytý header = 0, návrat pri scrolle hore = recap sa
   zvezie s ním; transition kopíruje animáciu headera). 95px fallback = navbar
   bez JS. Podklad = farba sekcie, aby riadky nepresvitali medzerami gridu.
   Header sa schováva na VŠETKÝCH šírkach (`main.js` to nepodmieňuje šírkou) a
   `--zn-b2-recap-top` sa preto dopočítava aj na tablete (namerané 66px = výška
   tamojšieho headera, oproti 88/95 na desktope) - sticky tu teda nepotrebuje
   zvláštne zaobchádzanie.
   Od 768 nahor, nie až od 1200: dovtedy tu bola hranica 1200 s odôvodnením, že
   „na užších šírkach je recap 1 stĺpec a prilepený by zakryl celú obrazovku".
   To platilo, ale bola to vlastnosť pravidla nižšie, nie šírky - recap si sám
   prepínal `grid-template-columns: 1fr`, hoci riadky tabuľky ostávali
   štvorstĺpcové. Prilepený 1 stĺpec by zabral 545 z 768 px výšky (71 %) a
   stĺpce by aj tak neukazoval. Po zrušení toho prepisu (viď responzívnu sekciu)
   je recap štvorstĺpcový už od 768 a sticky dáva zmysel v celom pásme.
   Pod 768 ostáva `display: none` - tam hlavičku robí `.zn-b2__row--head`. */
@media (min-width: 768px) {
  .zn-b2__recap {
    position: sticky;
    top: var(--zn-b2-recap-top, 95px);
    z-index: 5;
    background: var(--color-bg-medium);
    /* Odsadenie hore aj dole rovnakou technikou: `padding` roztiahne PODKLAD
       (aby popod prilepený recap nepresvitali riadky tabuľky) a záporný `margin`
       vráti prvok na pôvodnú pozíciu v toku, takže nescrollovaný stav vyzerá
       nezmenene. Hore to pribudlo preto, že `--zn-b2-recap-top` nastavuje JS
       presne na spodnú hranu headera - bez paddingu sa karty prilepia natesno
       pod navigáciu a pôsobí to stlačene. */
    padding-top: 16px;
    margin-top: -16px;
    padding-bottom: 8px;
    margin-bottom: -8px;                        /* gap rodiča 8 sa nepripočíta druhýkrát */
    transition: top var(--transition-base);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Rekapitulácia sa ukazuje AŽ PRILEPENÁ (Ján, Figma komentár 25. 9.,
   uzol 16464:57326 - vzor cloudtalk.io/pricing)
   ══════════════════════════════════════════════════════════════════════════
   Dovtedy stála pod kartami ako druhý viditeľný rad s tými istými balíkmi
   a pôsobila ako duplicita. V predlohe v toku NIE JE: v novšom ráme
   (16464:57364 končí na y 1015, matica 16464:57380 začína na 1047) ide pod
   kartami rovno infoprúžok a matica; starší rám 401:24959 ten rad ešte mal
   (1179:69692), ale komentár ho ruší.

   Preto sa rekapitulácia vyberá z toku do vrstvy `.zn-b2__recap-layer`:
   `position: absolute; inset: 0` nad maticou. Vrstva nie je flex položkou
   `.zn-b2__detail`, takže nezaberá miesto ANI nepridáva jeho `gap` - a keďže
   siaha po celú výšku matice, sticky prvok v nej má presne ten istý rozsah
   ako predtým (na konci matice sa vysunie rovnako ako dnes).

   `pointer-events` sa na vrstve vypína a na samotnej rekapitulácii zapína
   späť, aby prekrytie nezobralo kliky riadkom matice pod ňou.

   ⚠️ Režim zapína JS triedou `zn-b2--recap-auto`, NIE je to CSS default:
   bez JS (alebo bez `IntersectionObserver`) sa `is-stuck` nikdy nepridá,
   takže by rekapitulácia ostala trvalo neviditeľná a matica by na desktope
   prišla o jedinú viditeľnú hlavičku stĺpcov (`.zn-b2__row--head` je tam
   `zn-sr-only`). Bez triedy teda ostáva všetko ako predtým.

   Skrytý stav je `visibility: hidden`, nie len `opacity: 0` - tlačidlá vnútri
   sa tým vyradia z poradia tabulátora aj z čítačky (`opacity: 0` by ich tam
   nechalo a fokus by skákal do neviditeľného pruhu). `visibility` sa dá
   animovať diskrétne: pri nábehu preskočí na `visible` hneď, pri odchode až
   na konci prechodu, takže sa fade nezareže. */
@media (min-width: 768px) {
  /* Od 768 nahor je „Na mieru" široký panel POD maticou, takže karta v stohu
     odchádza (predloha V2 `16464:57755` vs `16464:57814`). */
  .zn-b2__card--custom { display: none; }

  .zn-b2__recap-layer { position: relative; }

  /* Rozsah radu je CELÁ oblasť cenníka (karty → panel „Na mieru"), nie už len
     matica: vo V2 sú karty vysoké ~795 px a rad sa má ukázať hneď, ako z okna
     odíde CENA, nie až nad maticou (dodatok k Jánovmu komentáru 25. 9.). */
  .zn-b2--recap-auto .zn-b2__scope { position: relative; }
  .zn-b2--recap-auto .zn-b2__recap-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .zn-b2--recap-auto .zn-b2__recap {
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base), top var(--transition-base);
  }
  .zn-b2--recap-auto .zn-b2__recap.is-stuck { opacity: 1; visibility: visible; }

  /* Sentinel pre `IntersectionObserver` - NIE je to bod, ale celé pásmo, v ktorom
     je rekapitulácia prilepená: začína na lepiacej čiare a končí na spodku matice.
     Observer ho sleduje proti zmrštenému koreňu (`rootMargin` nechá z okna len
     tenký prúžok pri hornom okraji), takže „prienik" = „pásmo prekrýva horný okraj
     okna" = „prilepené". Vďaka tomu je každý prechod ZMENOU stavu prieniku a
     callback padne aj pri skoku (kotva, obnova pozície, rýchly švih).

     ⚠️ Prečo nie 1px sentinel na vrchu matice: „nad oknom" a „pod oknom" sú pre
     observer ten istý stav (neprekrýva sa, pomer 0), takže pri skoku cez celé
     pásmo naraz callback vôbec nepríde a rekapitulácia sa neukáže. Namerané -
     skok z vrchu stránky rovno za maticu nechal triedu nenastavenú.

     Začiatok je o 1px pod lepiacou čiarou, aby sa trieda nikdy nenastavila skôr,
     než prvok naozaj drží; koniec `inset-block-end: 0` = spodok matice, takže za
     ňou trieda spadne sama. Posun berie tú istú premennú ako sticky, takže sa
     s ním drží aj keď sa header schová alebo vráti - observer sa neprestavuje. */
  .zn-b2__recap-sentinel {
    position: absolute;
    /* Vrch pásma = spodok ceny v kartách, posunutý NAHOR o lepiacu čiaru.
       Observer sleduje prúžok pri hornom okraji okna (y ≈ 0), takže posunom
       pásma sa spúšťač presunie presne na hlavičku webu: prienik nastane, keď
       `spodok ceny - výška hlavičky ≤ 0`, teda keď cena prejde pod hlavičku.
       `--zn-b2-sticky-start` dopočítava JS z kotvy `.zn-b2__price-end` (meria sa
       RAZ pri načítaní a pri resize, nie pri scrolle). */
    inset-block-start: calc(var(--zn-b2-sticky-start, 0px) - var(--zn-b2-recap-top, 95px));
    /* Spodok pásma = spodok obalu, teda za panelom „Na mieru" rad zmizne. */
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 1px;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zn-b2--recap-auto .zn-b2__recap { transition: none; }
}
.zn-b2__recap-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px; padding-top: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.zn-b2__recap-card--featured { border: 2px solid var(--color-primary-dark); box-shadow: 0 20px 24px -4px rgba(178,95,0,.1), 0 8px 8px -4px rgba(178,95,0,.05); }
/* `line-height`/`letter-spacing` sa PRIPÍNAJÚ na triedu, nededia sa z tagu:
   nadpis klesol z h4 na h3 (spolu s kartami vyššie, aby nevznikla preskočená
   úroveň), ale vizuálne má ostať rovnaký. Dovtedy ich dával globálny
   `h4 { line-height: 1.3; letter-spacing: -0.01em }` - bez nich namerané
   26px → 22px a -0.2px → normal. */
.zn-b2__recap-name {
  margin: 0;
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-secondary);
}
/* 1. stĺpec kondenzovaného riadku je prázdny (zarovnanie s label stĺpcom tabuľky) */
.zn-b2__recap::before { content: ""; }

/* ── Tabuľka funkcií (div-based "table" - group headers + riadky) ── */
.zn-b2__table { display: flex; flex-direction: column; gap: 8px; }
/* 5 stĺpcov podľa V2 (`16464:57392`): popis + 4 balíky, v šírke 1024 každý 185,6
   s medzerou 16 a paddingom 16 po stranách. */
.zn-b2__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: center;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--color-border);
}
.zn-b2__row--group {
  /* Figma "Tab Predel" = --scheme-a/background-light = BIELA, nie bg-medium
     (over 2026-07-22: po zmene pozadia sekcie na bg-medium by inak skupinová
     hlavička splynula s pozadím a zmizla - bola to chyba už predtým, teraz
     len viditeľnejšia). */
  padding: 6px 16px;
  background: var(--color-bg);
  border-bottom: 0;
  border-radius: var(--radius-base);
}
.zn-b2__cell { display: flex; align-items: center; justify-content: center; min-height: 36px; }
.zn-b2__cell--label { justify-content: flex-start; text-align: left; }

.zn-b2__row .zn-b2__cell--label { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--color-black); }
.zn-b2__row--group .zn-b2__cell--label { font-size: var(--text-2xl); font-weight: var(--weight-medium); color: var(--color-black); }

.zn-b2__icon { display: block; }
.zn-b2__icon--yes { --zn-ico-face: var(--color-success-light); --zn-ico-line: var(--color-success-dark); }
.zn-b2__icon--no  { --zn-ico-face: var(--color-error-light);   --zn-ico-line: var(--color-error); }
.zn-b2__icon circle { fill: var(--zn-ico-face); stroke: var(--zn-ico-line); }
.zn-b2__icon path   { stroke: var(--zn-ico-line); }

.zn-b2__cell-text { font-size: var(--text-base); color: var(--color-text); }
.zn-b2__cell .zn-b2__info-ico { flex-shrink: 0; margin-left: 4px; color: var(--color-text-secondary); }
.zn-b2__cell:has(.zn-b2__cell-text) { gap: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONZIVITA (konzervatívny fallback - mobil Figma link zatiaľ nedodaný)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .zn-b2__cards { grid-template-columns: repeat(2, 1fr); }
  /* Recap si tu ZÁMERNE necháva základné `1fr repeat(3, 1fr)`: riadky tabuľky
     pod ním ostávajú štvorstĺpcové (riadok nižšie), takže jednostĺpcový recap
     by na ne nesadol a prilepený by zabral väčšinu výšky tabletu. */
  .zn-b2__row, .zn-b2__row--group { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 767.98px) {
  .zn-b2 { padding-inline: 16px; }
  .zn-b2.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; }
  .zn-b2__bar { flex-direction: column; align-items: stretch; }
  .zn-b2__seats { flex-direction: column; align-items: stretch; }
  .zn-b2__cards { grid-template-columns: 1fr; }
  /* Prázdny stĺpec má zmysel len pri mriežke zarovnanej s maticou. */
  .zn-b2__cards-spacer { display: none; }
  /* „Na mieru" je na mobile karta v stohu (predloha V2 `16464:57814`), panel pod
     maticou sa skrýva - viditeľná je vždy práve jedna z dvoch vetiev markupu. */
  .zn-b2__custom { display: none; }
  .zn-b2__infobar { flex-direction: column; gap: 16px; padding-inline: 0; }
  /* Cenové boxy na mobile PREČ (Dominik vo vlákne ku komentáru #18): v jednom
     stĺpci z nich boli tri vysoké karty nad maticou a cena sa do nich nezmestila.
     Rolu hlavičky stĺpcov preberá `.zn-b2__row--head` nižšie. Desktop (≥768) sa
     nedotýka - tam je rekapitulácia sticky a je hlavičkou aj cenníkom naraz. */
  .zn-b2__recap { display: none; }
  /* Aj nosnú vrstvu - v „auto" režime je mimo toku, ale bez JS by ostala flex
     položkou `.zn-b2__detail` a pridala by jeho 8px `gap` nad maticu. */
  .zn-b2__recap-layer { display: none; }
  .zn-b2__table { overflow-x: auto; }
  .zn-b2__row, .zn-b2__row--group { grid-template-columns: 140px repeat(4, 100px); min-width: 660px; }
  /* Hlavička z `zn-sr-only` späť do toku. DVE triedy zámerne: `components.css` sa
     načítava PO blokovom CSS, takže jednotriedne pravidlo by `.zn-sr-only` prehralo. */
  .zn-b2__row.zn-b2__row--head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .zn-b2__row--head .zn-b2__cell { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-black); }
}