/* Školibrík obchod — shop.skolibrik.sk
-------------------------------------------------------------------------------------
The :root block below is lifted VERBATIM from 08-prototyp/app.css. It is the design
system. No shade that is not in it — a module drifted from the palette once and had to
be walked back, so the rule is absolute: if you need a colour, it is already here, or
it is a rgba() of --ink for a line, or #fff for paper.
Type is Fraunces (display) + Inter (text), the pair 09-web/index.html already loads.
Slovak for everything a customer reads; English for these comments (LANGUAGE.md). */
:root{
--cream:#FDF6EC; --cream-2:#F7E9D6; --cream-3:#F0DCC6;
--ink:#3A2A2F; --ink-2:#4A343A; --plum-d:#57273F;
--plum:#7A3B5C; --apricot:#E08A5B; --olive:#6E8B4A; --amber:#E5B84B; --rust:#C0553A; --slate:#4F7A85;
--rose:#B5527A;
--muted:#8A7566; --muted-2:#A8938A;
--line:rgba(58,42,47,.11); --line-2:rgba(58,42,47,.19);
--sh1:0 1px 2px rgba(58,42,47,.05),0 4px 14px -6px rgba(58,42,47,.10);
--sh2:0 2px 4px rgba(58,42,47,.06),0 18px 44px -18px rgba(58,42,47,.22);
--sh3:0 3px 6px rgba(58,42,47,.07),0 34px 74px -26px rgba(58,42,47,.34);
--rail:232px; --rib:0px; --r:9px;
/* shop-local, derived from the above and from nothing else */
--ease:cubic-bezier(.22,.9,.3,1);
--sirka:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
background:var(--cream);color:var(--ink);
font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
min-height:100vh;position:relative;overflow-x:hidden;
}
/* the two washes from 09-web/index.html — the shop has to feel like the same place */
body::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(760px 520px at 88% -4%, rgba(224,138,91,.15), transparent 70%),
radial-gradient(620px 460px at 4% 102%, rgba(110,139,74,.10), transparent 70%);
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.022em;line-height:1.08}
a{color:inherit;text-decoration:none}
/* height:auto is not cosmetic: without it a width/height pair in the markup wins
over a capped width and the picture stretches. That is what a stale cached copy
of this file did to the hero on 11 September. */
img{display:block;max-width:100%;height:auto}
::selection{background:var(--amber);color:var(--plum-d)}
:focus-visible{outline:2px solid var(--plum);outline-offset:2px;border-radius:4px}
.obal{position:relative;z-index:1;max-width:var(--sirka);margin:0 auto;padding:0 26px}
/* ═══ hlavička ═══════════════════════════════════════════════════════════════════════ */
.hlava{position:sticky;top:0;z-index:50;background:rgba(253,246,236,.86);
backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid transparent;
transition:border-color .25s,box-shadow .25s}
.hlava.plavajuca{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(58,42,47,.03),0 10px 30px -22px rgba(58,42,47,.4)}
.hlava-in{max-width:var(--sirka);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:20px}
.znacka{display:flex;align-items:center;gap:11px}
.znacka img{width:38px;height:38px}
.znacka b{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:600;color:var(--plum-d);
letter-spacing:-.022em}
.znacka i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--apricot);align-self:flex-start;margin-top:5px}
.hlava nav{margin-left:auto;display:flex;gap:22px;font-size:13.5px;color:var(--muted)}
.hlava nav a{border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s,border-color .18s}
.hlava nav a:hover{color:var(--plum);border-bottom-color:var(--plum)}
/* ═══ hero ═══════════════════════════════════════════════════════════════════════════ */
.hero{padding:66px 0 44px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,74px);
align-items:center}
.nadpisok{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--plum);
display:flex;align-items:center;gap:11px;margin-bottom:16px}
.nadpisok::before{content:'';width:28px;height:1.5px;background:var(--apricot);flex:none}
.hero h1{font-size:clamp(34px,5vw,60px);color:var(--plum-d);margin-bottom:20px}
.hero h1 em{font-style:italic;font-weight:300;color:var(--plum)}
.hero p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--ink-2);max-width:50ch}
.hero p b{font-weight:600;color:var(--plum-d)}
.cisla{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
.cisla div{position:relative;padding-left:15px}
.cisla div::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:1px;
background:var(--apricot);opacity:.6}
.cisla div:nth-child(2)::before{background:var(--olive)}
.cisla div:nth-child(3)::before{background:var(--plum)}
.cisla b{display:block;font-family:'Fraunces',Georgia,serif;font-size:27px;font-weight:600;line-height:1.1;
color:var(--plum-d);letter-spacing:-.017em;font-variant-numeric:tabular-nums}
.cisla span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;max-width:17ch;line-height:1.35}
/* hero — the clay hummingbird, and his shadow.
The render's own contact shadow is cut off in nastroje/hrdina.py and redrawn here,
because a baked shadow travels with the bird and a real one does not. The bird rises;
the shadow stays exactly where it is and only spreads and thins, which is what tells
the eye he has gone UP rather than simply moved. Both animations share one duration
and one easing, so they cannot drift apart. */
.hrdina{position:relative;margin:0 auto;max-width:580px}
.hrdina img{display:block;width:100%;height:auto;
animation:vznasanie 7s ease-in-out infinite;will-change:transform}
@keyframes vznasanie{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-13px) rotate(-.7deg)}
}
/* Position and size measured off the render, so it lands where the baked one was. */
.hrdina .tien{position:absolute;left:51.6%;top:106.5%;width:46%;height:9.5%;z-index:-1;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(58,42,47,.34),rgba(58,42,47,.19) 52%,
rgba(58,42,47,0) 100%);
animation:tien 7s ease-in-out infinite}
@keyframes tien{
0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
50%{transform:translate(-50%,-50%) scale(1.18);opacity:.46}
}
.hrdina .pecat{position:absolute;right:1%;bottom:2%;z-index:3;background:var(--plum-d);
color:var(--cream-2);border-radius:999px;padding:11px 19px;box-shadow:var(--sh2);
font-size:11.5px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;
gap:9px;white-space:nowrap}
.hrdina .pecat i{font-style:normal;color:var(--amber);font-weight:700;letter-spacing:.1em;
text-transform:uppercase;font-size:9.5px}
/* ═══ filtre ═════════════════════════════════════════════════════════════════════════ */
.police{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin:14px 0 26px;flex-wrap:wrap}
.police .polica,.police button{appearance:none;background:none;border:0;cursor:pointer;
font:inherit;font-size:14px;display:inline-block;text-decoration:none;
font-weight:500;color:var(--muted);padding:13px 19px 15px;border-bottom:2px solid transparent;
margin-bottom:-1px;transition:color .18s,border-color .18s;white-space:nowrap}
.police .polica:hover,.police button:hover{color:var(--ink)}
.police .polica.on,.police button.on{color:var(--plum);border-bottom-color:var(--plum);font-weight:600}
.police .polica i,.police button i{font-style:normal;font-size:12px;color:var(--muted-2);
margin-left:7px;font-variant-numeric:tabular-nums}
.police .polica.on i,.police button.on i{color:var(--plum);opacity:.6}
.filtre{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.filtre select{appearance:none;font:inherit;font-size:13px;color:var(--ink);background:var(--cream);
border:1px solid var(--line-2);border-radius:8px;padding:8px 30px 8px 12px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A7566' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;transition:border-color .15s}
.filtre select:hover{border-color:var(--muted-2)}
.pocet{font-size:12.5px;color:var(--muted);margin-bottom:22px;font-variant-numeric:tabular-nums}
/* ═══ mriežka a karta ════════════════════════════════════════════════════════════════ */
/* Five to a row at the full 1188 px measure: 5 × 208 + 4 × 20 leaves the columns at
~222 px, and auto-fill drops to four and then three as the window narrows. Everything
inside the card is set for that width — including the mark, whose small type was
redrawn at 5-up size in _spol/znamka.php rather than left to shrink into mush. */
.mriezka{display:grid;gap:26px 20px;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));
padding-bottom:56px}
/* The card is an OBJECT, not a box. The hero is a drawn mark (see _spol/znamka.php), not
a photograph of the product: it has to say what KIND of thing this is at a glance, and
a picture of a spreadsheet does not — 61 of those in a grid read as one texture. */
.karta{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:12px;box-shadow:var(--sh1);cursor:pointer;isolation:isolate;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.karta:hover{transform:translateY(-5px);box-shadow:var(--sh3);border-color:var(--line-2)}
/* the mark sits inset like a tipped-in plate, with its own hairline and shadow */
.znamka-ram{margin:10px 10px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);
box-shadow:0 1px 2px rgba(58,42,47,.05),0 10px 22px -14px rgba(58,42,47,.26);
transition:box-shadow .3s var(--ease)}
.karta:hover .znamka-ram{box-shadow:0 1px 2px rgba(58,42,47,.06),0 16px 32px -16px rgba(58,42,47,.34)}
.znamka{display:block;width:100%;height:auto}
/* the pieces lift a little on hover — enough to feel alive, not enough to be a cartoon */
.znamka .z-kod,.znamka .z-rocnik,.znamka .z-chip{
transition:transform .34s var(--ease);transform-origin:center}
.karta:hover .znamka .z-kod{transform:translateX(3px)}
.karta:hover .znamka .z-rocnik{transform:translateY(-2px) rotate(-5deg);transform-origin:306px 42px}
.karta:hover .znamka .z-chip{transform:translateX(-2px)}
.telo{padding:13px 13px 14px;display:flex;flex-direction:column;flex:1;gap:5px}
/* Two-line title, both lines in the display face: the subject leads because that is what
she scans for, the variant qualifies it because that is what she chooses between. An
eyebrow repeating the subject above the title was the first version and it inverted the
hierarchy — the biggest type said the least. */
.nazov{font-family:'Fraunces',Georgia,serif;font-size:15.5px;font-weight:600;line-height:1.2;
letter-spacing:-.016em;color:var(--ink)}
.variant{font-family:'Fraunces',Georgia,serif;font-size:13.5px;font-style:italic;font-weight:400;
line-height:1.3;letter-spacing:-.008em;color:var(--plum);margin-top:2px}
.karta[data-r="1"] .variant{color:var(--rust)}
.karta[data-r="2"] .variant{color:var(--olive)}
.variant.volny{color:var(--muted)}
.kniha{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10px;font-weight:500;
color:var(--plum-d);background:var(--cream-2);border:1px solid var(--line);border-radius:20px;
padding:3px 9px 3px 8px;line-height:1.3}
.kniha::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
.kniha.volna{color:var(--muted);background:none;border-style:dashed}
.kniha.volna::before{background:var(--olive)}
.meta{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.45}
.pata{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;
padding-top:11px;border-top:1px solid var(--line)}
.cena{font-family:'Fraunces',Georgia,serif;font-size:19.5px;font-weight:600;color:var(--plum-d);
letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1}
.cena small{font-family:'Inter',sans-serif;font-size:9.5px;font-weight:400;color:var(--muted);
display:block;margin-top:3px;letter-spacing:0}
.cena.caka{color:var(--muted-2);font-size:16px}
.btn{appearance:none;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
border:1px solid var(--plum);background:var(--plum);color:var(--cream);border-radius:8px;padding:9px 16px;
transition:background .16s,border-color .16s,transform .1s,box-shadow .2s}
.btn:hover{background:var(--plum-d);border-color:var(--plum-d);box-shadow:var(--sh1)}
.btn:active{transform:translateY(1px)}
.btn.duch{background:none;color:var(--plum);border-color:var(--line-2)}
.btn.duch:hover{background:rgba(122,59,92,.07);border-color:var(--plum);color:var(--plum-d)}
.btn.velky{font-size:15px;padding:14px 26px;border-radius:10px}
/* the card button is its own size — the grid is tight, the rest of the site is not */
.karta .btn{font-size:11.5px;padding:8px 12px;border-radius:7px}
.btn.hlavny{background:var(--apricot);border-color:var(--apricot);color:var(--plum-d)}
.btn.hlavny:hover{background:var(--amber);border-color:var(--amber);color:var(--plum-d)}
/* Last, and deliberately: a disabled button must never look clickable, whatever variant
class it also carries. This lost to .btn.hlavny on source order in the first version. */
.btn[disabled],.btn.hlavny[disabled],.btn[aria-disabled="true"]{opacity:1;cursor:default;
background:none;border-color:var(--line-2);color:var(--muted);font-weight:500;box-shadow:none}
.btn[disabled]:hover,.btn.hlavny[disabled]:hover{background:none;border-color:var(--line-2);
box-shadow:none;color:var(--muted)}
/* ═══ detail produktu ════════════════════════════════════════════════════════════════ */
.drobky{font-size:12.5px;color:var(--muted);padding:22px 0 4px;display:flex;gap:9px;align-items:center}
.drobky a:hover{color:var(--plum)}
.drobky span{opacity:.45}
.detail{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(32px,4.4vw,66px);align-items:start;padding:12px 0 70px}
.ukazka{position:sticky;top:88px}
.ukazka .velka{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;
overflow:hidden;box-shadow:var(--sh2)}
.ukazka .velka img{width:100%}
.ukazka .stitok{position:absolute;left:13px;top:13px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--plum-d);background:rgba(255,255,255,.9);border:1px solid var(--line);
border-radius:20px;padding:5px 11px;backdrop-filter:blur(3px)}
.prepinac{display:flex;gap:11px;margin-top:13px}
.prepinac button{appearance:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0;
overflow:hidden;cursor:pointer;flex:0 0 86px;box-shadow:var(--sh1);
transition:border-color .18s,transform .18s var(--ease),box-shadow .18s}
.prepinac button img{width:100%;height:62px;object-fit:cover;object-position:top left}
.prepinac button:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.prepinac button.on{border-color:var(--plum);box-shadow:0 0 0 2px rgba(122,59,92,.16),var(--sh1)}
.prepinac em{font-style:normal;display:block;font-size:9.5px;color:var(--muted);padding:4px 0 5px;
text-align:center;letter-spacing:.03em}
.d-nadpisok{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--apricot);
margin-bottom:12px}
.detail h1{font-size:clamp(27px,3.3vw,39px);color:var(--plum-d);margin-bottom:12px}
.d-pod{font-size:14.5px;color:var(--muted);margin-bottom:22px;line-height:1.55}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:26px}
.spec div{background:#fff;padding:13px 14px}
.spec b{display:block;font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:600;color:var(--plum-d);
line-height:1.15;font-variant-numeric:tabular-nums}
.spec span{display:block;font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:.05em;
text-transform:uppercase}
.popis p{font-size:15px;line-height:1.68;color:var(--ink-2);margin-bottom:13px;max-width:58ch}
.popis strong{font-weight:600;color:var(--plum-d)}
.popis .stlpce{font-size:13.5px;color:var(--muted);line-height:1.6}
/* what is in the zip — three real objects, not a bullet list */
.subory{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:26px 0}
.subor{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 13px 13px;
box-shadow:var(--sh1);transition:transform .24s var(--ease),box-shadow .24s}
.subor:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.subor svg{width:30px;height:36px;margin-bottom:9px;display:block}
.subor b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.subor span{display:block;font-size:11px;color:var(--muted);line-height:1.45}
.kup{background:var(--plum-d);color:var(--cream-2);border-radius:14px;padding:23px 25px;position:relative;
overflow:hidden;box-shadow:var(--sh2);margin-bottom:16px}
.kup::after{content:'';position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(224,138,91,.32),transparent 68%);pointer-events:none}
.kup-riadok{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
position:relative}
.kup .suma{font-family:'Fraunces',Georgia,serif;font-size:42px;font-weight:600;line-height:1;
letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.kup .suma small{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:400;
letter-spacing:0;opacity:.7;margin-top:7px}
.kup .drobne{font-size:12px;opacity:.68;margin-top:15px;line-height:1.55;position:relative;max-width:46ch}
/* NOT display:flex, and that is the whole point. It used to be, and it held one bare
text node, which flex wraps in a single anonymous item — fine everywhere except iOS.
Safari's data detector turns a written-out e-mail address into an of its own, and
that becomes a real flex item: the text before it and after it each become another
anonymous item, so one sentence laid itself out as three squeezed columns. The address
below is now a real mailto link, which also stops Safari inventing one. */
.zaruka{font-size:12.5px;color:var(--muted);line-height:1.55;
border-left:2px solid var(--line-2);padding-left:13px;margin-bottom:10px}
.zaruka a{color:var(--plum);font-weight:500;white-space:nowrap;
border-bottom:1px solid rgba(122,59,92,.3)}
.zaruka a:hover{border-bottom-color:var(--plum)}
/* ═══ pätička ════════════════════════════════════════════════════════════════════════ */
.pata-web{border-top:1px solid var(--line);margin-top:20px;padding:36px 0 46px;font-size:12.5px;
color:var(--muted);line-height:1.72;position:relative;z-index:1}
.pata-web strong{color:var(--ink-2);font-weight:600}
.pata-web a{border-bottom:1px solid transparent;transition:.18s}
.pata-web a:hover{color:var(--plum);border-bottom-color:var(--plum)}
.pata-mriezka{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.pata-web h4{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
margin-bottom:11px;font-family:'Inter',sans-serif}
.pata-web ul{list-style:none}
@media(max-width:960px){
.hero{grid-template-columns:1fr;gap:40px;padding:40px 0 30px}
.detail{grid-template-columns:1fr;gap:34px}
.ukazka{position:static}
.pata-mriezka{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){
.obal{padding:0 18px}
.hrdina{max-width:340px}
.hrdina .pecat{font-size:10.5px;padding:9px 15px;right:0;bottom:6%}
.hlava-in{padding:11px 18px}
.hlava nav{display:none}
.mriezka{grid-template-columns:1fr;gap:24px}
.subory{grid-template-columns:1fr}
.cisla{gap:20px}
}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
.karta:hover,.subor:hover{transform:none}
.hrdina img{animation:none}
}
/* ═══ objednávka, odstúpenie, právne stránky ═════════════════════════════════════════ */
.objednavka{max-width:760px;margin:0 auto;padding:26px 0 70px}
.objednavka.uzka{max-width:620px}
.objednavka h1{font-size:clamp(28px,3.4vw,40px);color:var(--plum-d);margin:6px 0 20px}
.lede{font-size:15.5px;line-height:1.66;color:var(--ink-2);margin-bottom:15px;max-width:62ch}
.lede b{color:var(--plum-d);font-weight:600}
/* the § 17 ods. 5 block: characteristics, total and duration, right above the button */
.suhrn{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
box-shadow:var(--sh1);margin-bottom:28px}
.suhrn-r{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 20px;
border-bottom:1px solid var(--line);align-items:baseline}
.suhrn-r:last-of-type{border-bottom:0}
.suhrn-r>span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted)}
.suhrn-r>b{font-size:15px;font-weight:500;color:var(--ink);line-height:1.5}
.suhrn-r>em{grid-column:2;font-style:normal;font-size:12px;color:var(--muted);margin-top:-4px}
.suhrn-r.cena-r>b{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:600;
color:var(--plum-d);letter-spacing:-.018em;font-variant-numeric:tabular-nums}
.suhrn-pozn{padding:13px 20px;background:var(--cream-2);font-size:12.5px;color:var(--ink-2);
border-top:1px solid var(--line)}
.kopirovat{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pole{display:block;margin-bottom:20px}
.pole>span{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.pole>span em{font-style:normal;font-weight:400;color:var(--muted)}
.pole input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
border:1.4px solid var(--line-2);border-radius:9px;padding:12px 14px;transition:border-color .16s,box-shadow .16s}
.pole input:hover{border-color:var(--muted-2)}
.pole input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(122,59,92,.12)}
.pole input[aria-invalid]{border-color:var(--rust)}
.chyba{display:block;font-size:12.5px;font-weight:500;color:var(--rust);margin-top:7px}
.velka-chyba{background:rgba(192,85,58,.08);border:1px solid rgba(192,85,58,.3);
border-radius:10px;padding:14px 17px;margin-bottom:22px;font-weight:400;line-height:1.55}
.sposoby{border:0;margin:0 0 22px;padding:0}
.sposoby legend{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:9px;padding:0}
.sposoby label{display:flex;gap:12px;align-items:flex-start;background:#fff;
border:1.4px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:9px;
cursor:pointer;transition:border-color .16s,box-shadow .16s}
.sposoby label:hover{border-color:var(--muted-2)}
.sposoby label:has(input:checked){border-color:var(--plum);box-shadow:0 0 0 2px rgba(122,59,92,.1)}
.sposoby input{margin-top:3px;accent-color:var(--plum);width:17px;height:17px;flex:none}
.sposoby b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.sposoby em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
line-height:1.5;margin-top:2px}
/* the two consent boxes. Never pre-ticked — § 5 ods. 2 prohibits it outright. */
.policko{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1.4px solid var(--line);
border-radius:11px;padding:15px 17px;margin-bottom:12px;cursor:pointer;
transition:border-color .16s,box-shadow .16s;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.policko:hover{border-color:var(--muted-2)}
.policko:has(input:checked){border-color:var(--olive);box-shadow:0 0 0 2px rgba(110,139,74,.1)}
.policko input{margin-top:2px;accent-color:var(--olive);width:18px;height:18px;flex:none}
.policko a{color:var(--plum);border-bottom:1px solid rgba(122,59,92,.35)}
.policko a:hover{border-bottom-color:var(--plum)}
.policko.dolezite{background:var(--cream-2);border-color:var(--line-2)}
.btn.siroky{width:100%;display:block;text-align:center;margin-top:20px}
.podtlacidlom{font-size:12.5px;color:var(--muted);margin-top:13px;line-height:1.55;text-align:center}
.upozornenie{background:var(--cream-2);border:1px solid var(--line);border-left:3px solid var(--amber);
border-radius:var(--r);padding:15px 18px;font-size:13.5px;line-height:1.62;color:var(--ink-2);
margin-bottom:26px}
.upozornenie b{color:var(--plum-d)}
.pruh{height:3px;border-radius:2px;background:var(--cream-3);overflow:hidden;margin:20px 0}
.pruh i{display:block;height:100%;width:34%;border-radius:2px;background:var(--apricot);
animation:posun 1.5s var(--ease) infinite}
@keyframes posun{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
/* generated legal pages — long-form reading, so measure and rhythm matter more than anything */
.pravny{max-width:740px;margin:0 auto;padding:30px 0 76px;font-size:15px;line-height:1.72;
color:var(--ink-2)}
.pravny h1{font-size:clamp(28px,3.4vw,40px);color:var(--plum-d);margin-bottom:26px}
.pravny h2{font-size:22px;color:var(--plum-d);margin:38px 0 12px}
.pravny h3{font-size:17px;color:var(--ink);margin:26px 0 9px}
.pravny h4{font-size:15px;color:var(--ink);margin:20px 0 7px}
.pravny p{margin-bottom:13px}
.pravny strong{color:var(--plum-d);font-weight:600}
.pravny ul{margin:0 0 15px 20px}
.pravny li{margin-bottom:6px}
.pravny hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.pravny a{color:var(--plum);border-bottom:1px solid rgba(122,59,92,.35)}
.pravny a:hover{border-bottom-color:var(--plum)}
.pravny blockquote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--plum);
border-radius:var(--r);padding:15px 19px;margin:0 0 17px;box-shadow:var(--sh1)}
.pravny blockquote p:last-child{margin-bottom:0}
.pravny code{font-size:13px;background:var(--cream-2);border-radius:4px;padding:1px 5px}
.tabulka{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:11px;
background:#fff;box-shadow:var(--sh1)}
.pravny table{border-collapse:collapse;width:100%;font-size:13.5px}
.pravny th,.pravny td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
vertical-align:top}
.pravny thead th{background:var(--cream-2);font-size:11px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pravny tbody tr:last-child td{border-bottom:0}
/* an unfilled gap has to be impossible to miss on screen, not only in the checker */
mark.doplnit{background:rgba(229,184,75,.42);color:var(--plum-d);border-radius:4px;
padding:1px 6px;font-weight:600}
@media(max-width:560px){
.suhrn-r{grid-template-columns:1fr;gap:4px}
.suhrn-r>em{grid-column:1}
}