/* ============================================================================
   KARTY — FINÁL (karty-final.css) · auditkukra.sk

   Z ČOHO VYCHÁDZA
   Víťaz poroty A „Orbitálne sklo“ (23 b.): 1px gradientný okraj kreslený maskou, svetelná hrana
   pod horným okrajom vľavo hore, sklenená výplň, ikona v sklenenom čipe, krátky akcent pod nadpisom
   a cenník s okrajmi vo farbe cenovej úrovne (1 audit tyrkys / 3 audity fialová / 5 auditov zlatá).

   ČO JE PREVZATÉ ODKIAĽ A PREČO
   · A  gradientný okraj so svetelnou hranou, sklenený čip ikony, farebne kľúčovaný cenník, akcent
        pod nadpisom, svetlejší tlmený text (kontrast tela ≥ 6:1 aj nad bielymi oblakmi Zeme).
   · C  viacvrstvový tieň s tmavým 1px lemom a farebným odleskom (karta levituje, hrana ostane
        ostrá aj nad jasnou planétou), tmavšia spodná hrana, vyzdvihnutý balík NAJVÝHODNEJŠÍ —
        širší, začína vyššie, s fialovou žiarou; bez náklonu na hover a bez scale, aby sa tlačidlá
        nezväčšovali (chyba c-kupit). Tmavšia výplň pod dlhým textom (panel na /moje nad Saturnom).
   · D  väčší sekčný nadpis (20 px) s vlasovým deliacim pruhom pod ním — len pod priamym nadpisom
        karty, kde iná deliaca čiara nie je (nie vo FAQ, nie v .fbn). NEPREVZATÉ: úplne nepriehľadná
        plocha bez blur (zakryla planéty), dúhová linka na každej karte, uppercase mono popisky
        formulára a zmenený padding (menil zalomenie tlačidiel).
   · B  jemná svietiaca hrana na odporúčanej karte ako svetlo, nie rám. NEPREVZATÉ: rohové značky,
        skener, číslovanie 01/02/03, farby balíkov na hero dlaždiciach.

   ČO JE OPRAVENÉ (z „problémov“ poroty)
   · Zlatá je vyhradená balíku 5 auditov a prémiovému štítku: základný okraj je tyrkys → fialová →
     modrá, čip ikony aj akcent nadpisu sú bez zlatej.
   · Výplň rgba(9,11,25,.90) + blur 14 px na desktope, .94 bez blur na dotyku: planéty ostávajú ako
     rozostrené farebné svetlo okolo, ale pod textom už nie je opar. Vnorené cenníkové dlaždice majú
     tmavšiu výplň než karta (karta 5 auditov už nie je najsvetlejšia plocha).
   · Spodná a pravá hrana sa nestrácajú: okraj končí pri .28, zvonka je tmavý 1px lem a zvnútra
     tmavá spodná hrana.
   · Akcent patrí nadpisu, nie ikone: pod sekčným nadpisom je hairline na celú šírku s 36px
     gradientným segmentom (na /kupit teda pod celým nadpisom FB panela). Ikony v nadpisoch
     (⚔ 📈 🗂 📊) dostali rovnaký sklenený čip ako hero dlaždice — motív sa opakuje.
   · Nový jazyk prešiel aj na /kupit a /moje: balíky na /kupit majú okraj a štítok vo farbe úrovne
     (cena 5 auditov zlatá ako na cenníku), stredný balík je vyzdvihnutý; panel .fbn má okraj vo
     FB modrej, svetelnú hranu a tmavšiu výplň, dlaždice .fbn-c tmavé telo a tyrkysovú hranu.
   · Cenník: rezerva nad štítkom NAJVÝHODNEJŠÍ (padding-top mriežky), stredná karta dominuje
     (fialová .95 + žiara), tyrkys a zlatá sú tlmené, aby odporúčaný balík nestrácal odlíšenie.
   · Hover iba pri (hover: hover) and (pointer: fine); mení len tieň a opacity — nič sa neposúva,
     text sa pod kurzorom nehýbe. :focus-within rozsvieti okraj formulára aj bez myši.

   TECHNIKA
   · Načítava sa po štýloch v base.html; selektory „:root .wrap …“ (0,3,0 a viac) prebíjajú
     „html.vesmir-on .karta“ (0,2,1). !important iba na inline štýly cenníkových dlaždíc
     (border-color na /, štítok a cena balíkov na /kupit).
   · Levitácia (.levituje animuje `translate`) a vynorenie (.cakam: opacity/transform) z base.html
     fungujú ďalej: na .karta sa nepíše translate, transform ani animation a `transition` preberá
     opacity .9s / transform .9s. Vyzdvihnutie balíkov je cez záporné margins, nie transform.
   · Výkon: backdrop-filter iba raz na .karta (vnorené dlaždice bez neho); (pointer: coarse) bez blur
     a bez ťažkých tieňov; prefers-reduced-motion vypína prechody; prefers-reduced-transparency dáva
     plnú výplň; prefers-contrast: more svetlejší text a plný okraj.
   · vesmir.js po setProperty(--lev-oneskorenie) preserializuje inline štýl s medzerami
     („rgba(139, 123, 255, 0.5)“, „text-align: center“) — atribútové selektory sú v oboch tvaroch.
   · :has() (balíky na /kupit) stojí v samostatných pravidlách; prehliadač bez podpory ich preskočí
     a balíky ostanú so základným okrajom. Reportové nadpisy (.r-h2, .r-ik) sa vynechávajú.
   ============================================================================ */

:root {
  --kf-r: 18px;
  --kf-krivka: cubic-bezier(.2, .7, .2, 1);
  --kf-vlas: rgba(130, 165, 255, .16);                          /* hairline pod sekčným nadpisom */
  --kf-akcent: linear-gradient(90deg, #38e0ff, #8b7bff);        /* akcent nadpisu — bez zlatej */
  --kf-cip: linear-gradient(150deg, rgba(56, 224, 255, .16), rgba(139, 123, 255, .12) 68%, rgba(120, 160, 255, .08));
  --kf-hrana: linear-gradient(90deg,                            /* svetlo na hornej hrane skla (A) */
      rgba(255, 255, 255, 0) 6%,
      rgba(56, 224, 255, .55) 26%,
      rgba(255, 255, 255, .80) 42%,
      rgba(139, 123, 255, .50) 62%,
      rgba(255, 255, 255, 0) 90%);

  /* gradientné okraje: základný (bez zlatej) + sémantické / cenové úrovne */
  --kf-ring-zaklad:  linear-gradient(135deg, rgba(56, 224, 255, .72) 0%, rgba(139, 123, 255, .46) 48%, rgba(120, 160, 255, .28) 100%);
  --kf-ring-tyrkys:  linear-gradient(160deg, rgba(56, 224, 255, .55), rgba(56, 224, 255, .14) 60%, rgba(120, 160, 255, .24));
  --kf-ring-fialova: linear-gradient(160deg, rgba(139, 123, 255, .95), rgba(139, 123, 255, .42) 55%, rgba(56, 224, 255, .45));
  --kf-ring-zlata:   linear-gradient(160deg, rgba(245, 198, 93, .62), rgba(245, 198, 93, .16) 60%, rgba(120, 160, 255, .24));
  --kf-ring-fb:      linear-gradient(160deg, rgba(24, 119, 242, .75), rgba(24, 119, 242, .30) 55%, rgba(56, 224, 255, .35));
  --kf-ring-chyba:   linear-gradient(160deg, rgba(255, 125, 125, .75), rgba(255, 125, 125, .30) 60%, rgba(120, 160, 255, .24));
  --kf-ring-ok:      linear-gradient(160deg, rgba(74, 222, 128, .70), rgba(74, 222, 128, .25) 60%, rgba(120, 160, 255, .24));

  /* tiene (C): svetlá horná hrana, tmavá spodná hrana, tmavý lem, blízky ostrý, stredný, vzdialený mäkký, fialový odlesk */
  --kf-tien:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 0 0 1px rgba(3, 4, 10, .55),
    0 2px 4px rgba(0, 0, 0, .40),
    0 14px 30px -10px rgba(0, 0, 0, .55),
    0 44px 90px -30px rgba(0, 0, 0, .72),
    0 30px 70px -34px rgba(139, 123, 255, .22);
  --kf-tien-lahky:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .40),
    0 0 0 1px rgba(3, 4, 10, .50),
    0 8px 22px -10px rgba(0, 0, 0, .60);
}

/* ---------------------------------------------------------------------------
   1. Hlavná karta — tmavé sklo s hrúbkou, prevažne nepriehľadné
   --------------------------------------------------------------------------- */
:root .wrap .karta {
  --kf-vypln: rgba(9, 11, 25, .90);
  --kf-ring: var(--kf-ring-zaklad);
  --kf-rgb: 56, 224, 255;                                       /* farba hover žiary */
  --muted: #9ea7cb;                                             /* tlmený text: ≥ 6:1 aj nad oblakmi */
  --border: rgba(130, 165, 255, .16);                           /* inline deliace linky o odtieň zreteľnejšie */
  position: relative;
  isolation: isolate;                                           /* pseudo-prvky so z-index:-1 ostanú v karte */
  border: 1px solid rgba(120, 160, 255, .12);                   /* záloha pod gradientným okrajom */
  border-radius: var(--kf-r);
  background:
    radial-gradient(70% 45% at 88% 100%, rgba(139, 123, 255, .09), rgba(139, 123, 255, 0) 70%),
    var(--kf-vypln);
  backdrop-filter: blur(14px) saturate(1.2);                    /* jediné rozmazanie na kartu */
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--kf-tien), var(--kf-tien-extra, 0 0 0 0 transparent);
  /* box-shadow je náš; opacity + transform preberáme z .levituje v base.html, aby vynorenie fungovalo */
  transition: box-shadow .45s ease, opacity .9s ease, transform .9s var(--kf-krivka);
}

/* 1px gradientný okraj: pseudo-prvok prekrýva presne pásik border-u, maska z neho nechá len rám */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :root .wrap .karta::before,
  :root .wrap #cennik .grid2 > div::before,
  :root .wrap .fbn::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--kf-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .88;
    pointer-events: none;
    transition: opacity .45s ease;
  }
}

/* svetelná hrana pod horným okrajom + jemný lesk v hornej štvrtine */
:root .wrap .karta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    var(--kf-hrana) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 28%);
  pointer-events: none;
  opacity: .9;
  transition: opacity .45s ease;
}

/* karty so sémantickým inline okrajom: okraj v tej istej farbe (oba tvary zápisu, viď vesmir.js) */
:root .wrap .karta[style*="139,123,255"],
:root .wrap .karta[style*="139, 123, 255"] {
  --kf-ring: var(--kf-ring-fialova);
  --kf-rgb: 139, 123, 255;
  --kf-tien-extra: 0 0 0 1px rgba(139, 123, 255, .16), 0 26px 64px -24px rgba(139, 123, 255, .50), 0 0 36px -10px rgba(139, 123, 255, .14);
}
:root .wrap .karta[style*="24,119,242"],
:root .wrap .karta[style*="24, 119, 242"] { --kf-ring: var(--kf-ring-fb); --kf-rgb: 24, 119, 242; }
:root .wrap .karta[style*="245,198,93"],
:root .wrap .karta[style*="245, 198, 93"] { --kf-ring: var(--kf-ring-zlata); --kf-rgb: 245, 198, 93; }
:root .wrap .karta[style*="255,125,125"],
:root .wrap .karta[style*="255, 125, 125"] { --kf-ring: var(--kf-ring-chyba); --kf-rgb: 255, 125, 125; }
:root .wrap .karta[style*="74,222,128"],
:root .wrap .karta[style*="74, 222, 128"] { --kf-ring: var(--kf-ring-ok); --kf-rgb: 74, 222, 128; }

/* ---------------------------------------------------------------------------
   2. Nadpisy — väčší sekčný nadpis s hairline a gradientným segmentom (D + A);
      dlaždice v mriežke iba krátky segment; reportové nadpisy (.r-h2) sa vynechávajú
   --------------------------------------------------------------------------- */
:root .wrap .karta > h2:not(.r-h2) {
  position: relative;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
:root .wrap .karta > h2:not(.r-h2)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;                                                 /* sedí v spodnom margine (18px), nič neposúva */
  height: 2px;
  pointer-events: none;
  background:
    var(--kf-akcent) left top / 36px 2px no-repeat,
    linear-gradient(var(--kf-vlas), var(--kf-vlas)) left bottom / 100% 1px no-repeat;
}
:root .wrap .karta[style*="text-align:center"] > h2:not(.r-h2)::after,
:root .wrap .karta[style*="text-align: center"] > h2:not(.r-h2)::after,
:root .wrap .karta > h2[style*="text-align:center"]:not(.r-h2)::after,
:root .wrap .karta > h2[style*="text-align: center"]:not(.r-h2)::after {
  background-position: center top, left bottom;
}
/* dlaždice (hero, /skus): kompaktný nadpis, len krátky akcent, bez hairline */
:root .wrap .grid2 > .karta > h2 {
  font-size: 16px;
  letter-spacing: 0;
}
:root .wrap .grid2 > .karta > h2::after {
  right: auto;
  bottom: -5px;
  width: 28px;
  border-radius: 2px;
  background: var(--kf-akcent);
}

/* ikona dlaždice v sklenenom čipe (A) */
:root .wrap .grid2 > .karta > div[aria-hidden="true"]:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  line-height: 1;
  border-radius: 15px;
  background: var(--kf-cip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(120, 160, 255, .16);
}
/* ten istý čip pre ikony v nadpisoch (⚔ 📈 🗂 📊) — inline štýlované ikony (FB „f“) a report sa nechávajú */
:root .wrap .karta h2 > span[aria-hidden="true"]:not([style]):not(.r-ik),
:root .wrap .fbn h3 > span[aria-hidden="true"]:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -7px;
  background: var(--kf-cip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(120, 160, 255, .16);
}
:root .wrap .fbn h3 > span[aria-hidden="true"]:first-child { margin-right: 0; }   /* h3 je flex s gap */

/* ---------------------------------------------------------------------------
   3. Cenník na / — tri dlaždice s inline border/radius/padding, farebne kľúčované;
      stredná (NAJVÝHODNEJŠÍ) vyzdvihnutá cez margins (C), bez transform
   --------------------------------------------------------------------------- */
:root .wrap #cennik > .grid2 { padding-top: 10px; }            /* rezerva pre štítok nad vyzdvihnutou kartou */
:root .wrap #cennik .grid2 > div {
  --kf-ring: var(--kf-ring-tyrkys);
  --kf-rgb: 56, 224, 255;
  position: relative;
  isolation: isolate;
  border-color: transparent !important;                        /* inline okraj → nahradí ho gradientný rám */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 32%),
    linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 24%),
    rgba(5, 6, 14, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .40),
    0 16px 36px -18px rgba(0, 0, 0, .65);
  transition: box-shadow .45s ease;
}
:root .wrap #cennik .grid2 > div:nth-child(2) {
  --kf-ring: var(--kf-ring-fialova);
  --kf-rgb: 139, 123, 255;
  margin: -6px -4px 0;                                          /* širšia, začína vyššie (dlaždice nelevitujú) */
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(139, 123, 255, .16), rgba(139, 123, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 32%),
    rgba(6, 7, 18, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 0 0 1px rgba(139, 123, 255, .16),
    0 24px 56px -20px rgba(0, 0, 0, .80),
    0 26px 64px -22px rgba(139, 123, 255, .50),
    0 0 36px -8px rgba(139, 123, 255, .16);
}
:root .wrap #cennik .grid2 > div:nth-child(3) {
  --kf-ring: var(--kf-ring-zlata);
  --kf-rgb: 245, 198, 93;
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  /* bez masky: plný okraj v tej istej farbe */
  :root .wrap .karta { border-color: rgba(120, 160, 255, .24); }
  :root .wrap #cennik .grid2 > div { border-color: rgba(56, 224, 255, .28) !important; }
  :root .wrap #cennik .grid2 > div:nth-child(2) { border-color: rgba(139, 123, 255, .60) !important; }
  :root .wrap #cennik .grid2 > div:nth-child(3) { border-color: rgba(245, 198, 93, .45) !important; }
}

/* ---------------------------------------------------------------------------
   4. Balíky na /kupit — tie isté farby úrovní ako v cenníku; hero dlaždice na / ich nedostanú
      (rozlíšenie: balík má priamo v sebe tlačidlo). Pravidlá s :has() stoja samostatne.
   --------------------------------------------------------------------------- */
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(1) { --kf-ring: var(--kf-ring-tyrkys); }
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(3) { --kf-ring: var(--kf-ring-zlata); --kf-rgb: 245, 198, 93; }
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(2) { margin-top: -5px; margin-left: -4px; margin-right: -4px; }
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(2) > .mono:first-child { color: var(--violet) !important; }
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(3) > .mono:first-child { color: var(--gold) !important; }
:root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(3) > .mono:first-child + div { background: none !important; color: var(--gold) !important; }

/* ---------------------------------------------------------------------------
   5. Facebook blok na landingu (.fb-blok) — svetelná deliaca hrana namiesto sivej čiary (A)
   --------------------------------------------------------------------------- */
:root .wrap .fb-blok { position: relative; }
:root .wrap .fb-blok::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;                                                   /* prekryje inline border-left */
  width: 1px;
  background: linear-gradient(180deg, rgba(56, 224, 255, .65), rgba(139, 123, 255, .45) 55%, rgba(139, 123, 255, 0));
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   6. Panel overených dát na /moje (.fbn) a jeho dlaždice (.fbn-c) — ten istý jazyk,
      bez druhého rozmazania; vnorené bloky formulára dostanú svetelnú hranu
   --------------------------------------------------------------------------- */
:root .wrap .fbn {
  --kf-ring: var(--kf-ring-fb);
  position: relative;
  isolation: isolate;
  border-color: rgba(24, 119, 242, .28);
  background:
    linear-gradient(180deg, rgba(24, 119, 242, .10), rgba(24, 119, 242, .03) 50%, rgba(5, 6, 14, .40));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .40),
    0 14px 36px -20px rgba(0, 0, 0, .55);
}
:root .wrap .fbn .fbn-c {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 55%), rgba(5, 6, 14, .50);
  border-color: rgba(56, 224, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px -10px rgba(0, 0, 0, .60);
}
:root .wrap form.karta > div[role="alert"],
:root .wrap form.karta > div[style*="56,224,255"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------------------------------------------------------------------------
   7. Hover / focus — len s kurzorom; mení iba tieň a opacity, nič sa neposúva
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  :root .wrap .karta:hover {
    box-shadow:
      var(--kf-tien),
      var(--kf-tien-extra, 0 0 0 0 transparent),
      0 0 0 1px rgba(var(--kf-rgb), .07),
      0 0 64px -12px rgba(var(--kf-rgb), .20);
  }
  :root .wrap .karta:hover::before,
  :root .wrap .karta:hover::after { opacity: 1; }

  :root .wrap #cennik .grid2 > div:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      inset 0 -1px 0 rgba(0, 0, 0, .40),
      0 16px 36px -18px rgba(0, 0, 0, .65),
      0 22px 50px -20px rgba(var(--kf-rgb), .30);
  }
  :root .wrap #cennik .grid2 > div:nth-child(2):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 -1px 0 rgba(0, 0, 0, .45),
      0 0 0 1px rgba(139, 123, 255, .24),
      0 24px 56px -20px rgba(0, 0, 0, .80),
      0 28px 70px -22px rgba(139, 123, 255, .60),
      0 0 40px -8px rgba(139, 123, 255, .22);
  }
  :root .wrap #cennik .grid2 > div:hover::before { opacity: 1; }
}
:root .wrap .karta:focus-within::before { opacity: 1; }        /* formulár „počúva“ aj bez myši */

/* ---------------------------------------------------------------------------
   8. Dotykové zariadenia — bez rozmazania a ťažkých tieňov (batéria), hutnejšia výplň
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  :root .wrap .karta {
    --kf-vypln: rgba(9, 11, 25, .94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--kf-tien-lahky), var(--kf-tien-extra, 0 0 0 0 transparent);
  }
  :root .wrap .karta[style*="139,123,255"],
  :root .wrap .karta[style*="139, 123, 255"] {
    --kf-tien-extra: 0 0 0 1px rgba(139, 123, 255, .16), 0 10px 28px -12px rgba(139, 123, 255, .35);
  }
  :root .wrap #cennik .grid2 > div {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .40);
  }
  :root .wrap #cennik .grid2 > div:nth-child(2) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      inset 0 -1px 0 rgba(0, 0, 0, .45),
      0 0 0 1px rgba(139, 123, 255, .16),
      0 12px 30px -12px rgba(139, 123, 255, .40);
  }
  :root .wrap .fbn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .40); }
  :root .wrap .fbn .fbn-c { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
}

/* ---------------------------------------------------------------------------
   9. Mobil — celá šírka, menšie zaoblenie, žiadne vyzdvihnutie v jednom stĺpci, FB blok delený zhora
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root .wrap .karta { border-radius: 14px; }
  :root .wrap .karta > h2:not(.r-h2) { font-size: 18px; }
  :root .wrap .grid2 > .karta > h2 { font-size: 16px; }
  :root .wrap .grid2 > .karta > div[aria-hidden="true"]:first-child { width: 44px; height: 44px; border-radius: 13px; }
  :root .wrap #cennik > .grid2 { padding-top: 4px; }
  :root .wrap #cennik .grid2 > div:nth-child(2) { margin: 0; }
  :root .wrap main > .grid2 > .karta:has(> a.btn):nth-child(2) { margin-top: 0; margin-left: 0; margin-right: 0; }
  /* base.html tu mení border-left na border-top — hrana sa otočí na vodorovnú */
  :root .wrap .fb-blok::before {
    top: -1px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(56, 224, 255, .65), rgba(139, 123, 255, .45) 55%, rgba(139, 123, 255, 0));
  }
}

/* ---------------------------------------------------------------------------
   10. Prístupnosť — obmedzený pohyb, obmedzená priehľadnosť, vyšší kontrast, tlač
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root .wrap .karta,
  :root .wrap .karta::before,
  :root .wrap .karta::after,
  :root .wrap #cennik .grid2 > div,
  :root .wrap #cennik .grid2 > div::before,
  :root .wrap .fbn::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .wrap .karta {
    --kf-vypln: rgb(10, 12, 26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root .wrap .karta {
    --kf-vypln: rgb(8, 10, 22);
    --muted: #b6bdd8;
    --kf-vlas: rgba(130, 165, 255, .30);
  }
  :root .wrap .karta::before,
  :root .wrap #cennik .grid2 > div::before,
  :root .wrap .fbn::before { opacity: 1; }
}
@media print {
  :root .wrap .karta,
  :root .wrap #cennik .grid2 > div,
  :root .wrap .fbn { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root .wrap .karta::before,
  :root .wrap .karta::after,
  :root .wrap #cennik .grid2 > div::before,
  :root .wrap .fbn::before { display: none; }
}