/* SLAVKOF_DIZAJN_MANUAL_v4.5.33_2026.11.10_KOPIA-040 | kópia pre: web designmanual.slavkof.sk a interná kópia | vlastník SLAVKOF a.s. */
:root{
  --brown:#5E573E; --beige:#A4956F;
  --graphite:#454646; --stone:#7C7A7A;
  --emerald:#3F5B56; --sage:#749A91;
  --navy:#415262; --steel:#748DA6;
  --black:#010101; --white:#FFFFFF;
  --bg:#EFE5D9; --panel:#FFFFFF;
  --ink:#1B1B1B; --muted:#6C6A66; --line:#DAD6CF;
  --tex-cream:none; --tex-brown:none;
  --serif:'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --sans:'Open Sans', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased}
body::before{content:''; position:fixed; inset:0; z-index:-2; background-color:var(--bg); background-image:var(--tex-cream); background-repeat:repeat; background-size:1110px 660px; }
body::after{content:''; position:fixed; inset:0; z-index:-1; background:radial-gradient(120% 80% at 50% 0%, #ffffff40, #00000012); pointer-events:none}
h1,h2,h3{margin:0; font-weight:400}
h1{font-family:var(--serif); font-size:clamp(2.6rem,7vw,5rem); letter-spacing:.06em; line-height:1.02}
h2{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.15rem); letter-spacing:.05em}
h3{font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.01em}
p{margin:0 0 1rem; max-width:none}
a{color:var(--emerald)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}

.shell{display:grid; grid-template-columns:258px minmax(0,1fr)}
.side{position:sticky; top:0; height:100vh; overflow:auto; background:var(--brown) var(--tex-brown) center/cover; color:#fff; padding:1.6rem 1.2rem; box-shadow:inset -14px 0 24px -22px #000}
.side .logo{width:150px; margin-bottom:.35rem}
.side .sub{font-size:.7rem; letter-spacing:.18em; color:#ffffffab; margin-bottom:1.6rem}
.nav{list-style:none; margin:0; padding:0}
.nav a{display:block; padding:.4rem .55rem; border-radius:4px; color:#ffffffb0; text-decoration:none; font-size:.87rem}
.nav a:hover{color:#fff; background:#ffffff1f}
.nav a.active{color:#241B10; background:var(--sage)}
main{max-width:1240px}
section{padding:3.5rem clamp(1.1rem,3vw,3rem); border-bottom:1px solid #00000014}
.sec-title{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem}
.sec-title .no{font-family:var(--serif); color:var(--beige); font-size:1rem}

.bar{position:sticky; top:0; z-index:30; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.65rem clamp(1.1rem,3vw,3rem); background:#F3F1EBE8; backdrop-filter:blur(8px); border-bottom:1px solid #00000018}
.btn{font:inherit; font-size:.82rem; padding:.4rem .8rem; border-radius:2px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.on{background:var(--emerald); border-color:var(--emerald); color:#fff}
.btn.dark{background:var(--black); border-color:var(--black); color:#fff}
.bar .sp{flex:1}
:focus-visible{outline:2px solid var(--emerald); outline-offset:2px}

/* hero */
.hero{padding:1.7rem clamp(1.1rem,3vw,3rem) 1.3rem; background:transparent; color:var(--ink); position:relative; display:grid; grid-template-columns:minmax(260px,.85fr) minmax(280px,1.15fr); gap:clamp(1rem,3vw,2.6rem); align-items:start; border-bottom:1px solid #00000014}
.hero img.mark{width:min(240px,80%); display:block; margin-bottom:.5rem}
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.05; margin:.5rem 0 .4rem; letter-spacing:.02em}
.hero .frame{display:inline-block; padding:.25rem .85rem; border:1px solid #00000026; border-radius:100px; font-family:var(--serif); font-size:.82rem; letter-spacing:.1em; color:var(--ink)}
.hero p{color:var(--ink-soft); margin:0; max-width:64ch; font-size:.95rem}
.hero .meta{margin-top:.7rem; font-size:.7rem; letter-spacing:.12em; color:var(--muted)}

/* generic grids */
.grid{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:1.15rem}
.card h3{margin-bottom:.5rem}
.card ul{margin:0; padding-left:1.05rem; color:var(--muted); font-size:.9rem}
.card li{margin-bottom:.3rem}
.card.no{border-top:3px solid #A8342A}
.card.yes{border-top:3px solid var(--emerald)}

/* asset tiles */
.tile{background:var(--panel); border:1px solid var(--line); border-radius:3px; overflow:hidden; display:flex; flex-direction:column}
.tile .stage{display:grid; place-items:center; padding:1.4rem 1rem; min-height:132px; transition:background .18s}
.tile .stage img{max-width:100%; max-height:88px; object-fit:contain}
.tile .foot{border-top:1px solid var(--line); padding:.55rem .7rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; min-width:0}
.tile .foot .nm{flex:1 1 100%; min-width:0; margin-bottom:.15rem}
.tile .foot .nm{font-size:.78rem; line-height:1.3}
.tile .foot .nm code{display:block; color:var(--muted); font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:copy}
.mini{font:inherit; font-size:.72rem; padding:.25rem .5rem; border:1px solid var(--line); background:transparent; border-radius:2px; cursor:pointer; text-decoration:none; color:var(--ink); white-space:nowrap}
.mini:hover{border-color:var(--ink)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; align-items:center}
.chip{font:inherit; font-size:.78rem; padding:.3rem .7rem; border-radius:100px; border:1px solid var(--line); background:var(--panel); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem}
.chip i{width:11px; height:11px; border-radius:50%; border:1px solid #00000022; display:inline-block}
.chip.on{background:var(--black); color:#fff; border-color:var(--black)}
.search{font:inherit; font-size:.85rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:100px; background:var(--panel); min-width:170px}

/* clear space */
.cs{background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; padding:clamp(1.5rem,5vw,3.5rem)}
.cs .wrap{position:relative; padding:clamp(28px,6vw,54px); outline:1px dashed var(--sage)}
.cs .wrap img{display:block; width:min(340px,60vw)}
.cs .x{position:absolute; font-family:var(--serif); font-size:.8rem; color:var(--sage)}
.cs .x.t{top:6px; left:50%; transform:translateX(-50%)}
.cs .x.b{bottom:6px; left:50%; transform:translateX(-50%)}
.cs .x.l{left:6px; top:50%; transform:translateY(-50%)}
.cs .x.r{right:6px; top:50%; transform:translateY(-50%)}

/* misuse */
.mis{background:var(--panel); border:1px solid var(--line); overflow:hidden}
.mis .fr{height:118px; display:grid; place-items:center; padding:1rem; position:relative; overflow:hidden}
.mis .fr img{max-width:78%; max-height:64px}
.mis cap, .mis figcaption{display:block; border-top:1px solid var(--line); padding:.5rem .7rem; font-size:.8rem; color:var(--muted)}
.mis figcaption::before{content:'✕'; color:#A8342A; font-weight:700; margin-right:.4rem}
figure{margin:0}
.f-stretch img{transform:scaleX(1.45)}
.f-rotate img{transform:rotate(-11deg)}
.f-gradient{background:linear-gradient(120deg,#7b3fa0,#e0553c)}
.f-lowcon{background:var(--sage)}
.f-lowcon img{opacity:.55}
.f-photo{background:repeating-linear-gradient(45deg,#8a8f7d,#8a8f7d 14px,#6f7565 14px,#6f7565 28px)}
.f-shadow img{filter:drop-shadow(6px 8px 5px #00000070)}

/* palette */
.sw{background:var(--panel); border:1px solid var(--line); overflow:hidden}
.sw .fill{height:104px; cursor:pointer; position:relative; box-shadow:inset 0 0 0 1px #0000001a}
.sw .fill::after{content:'kopírovať'; position:absolute; left:.6rem; bottom:.5rem; font-size:.68rem; letter-spacing:.1em; opacity:0; transition:opacity .15s; color:#fff; mix-blend-mode:difference}
.sw .fill:hover::after{opacity:1}
.sw .info{padding:.65rem .75rem; font-size:.76rem; color:var(--muted)}
.sw .info b{display:block; font-family:var(--serif); font-weight:500; font-size:.92rem; letter-spacing:.05em; color:var(--ink); margin-bottom:.2rem}
.ramp{display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); margin-top:.75rem}
.ramp div{height:34px; display:grid; place-items:center; font-size:.6rem; color:#ffffffcc}
.ramp-wrap{margin-top:1.5rem}
.ramp-label{font-size:.78rem; color:var(--muted); margin-bottom:.25rem}

.contrast{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; align-items:end; margin-top:1.5rem}
.contrast label{display:block; font-size:.76rem; color:var(--muted); margin-bottom:.25rem}
.contrast select{width:100%; font:inherit; font-size:.85rem; padding:.4rem; border:1px solid var(--line); background:var(--panel)}
#cPrev{padding:1rem; border:1px solid var(--line); font-family:var(--serif); letter-spacing:.06em}
.badge{display:inline-block; font-size:.7rem; padding:.1rem .5rem; border:1px solid currentColor; border-radius:100px; margin-right:.3rem}
.ok{color:#1B6E3C}.bad{color:#A8342A}

/* typography */
.spec{background:var(--panel); border:1px solid var(--line); padding:1.2rem; margin-bottom:.7rem; display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:1rem}
.spec .note{font-size:.72rem; color:var(--muted); border-left:1px solid var(--line); padding-left:.9rem}
.t1{font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.06; letter-spacing:.045em}
.t2{font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.15}
.t3{font-weight:600; font-size:1.32rem}
.t4{font-size:1.05rem; font-weight:300}
.alpha{font-family:var(--serif); font-size:1.02rem; letter-spacing:.14em; line-height:1.9; word-spacing:.2em}
.alpha.sans{font-family:var(--sans); font-weight:400; letter-spacing:.08em}

/* mockups */
.mock{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.vizitka{aspect-ratio:85/55; background:var(--brown); color:#fff; padding:1.3rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.vizitka img.lg{width:52%}
.vizitka .det{font-size:.68rem; letter-spacing:.06em; line-height:1.7; position:relative; z-index:2}
.vizitka .el{position:absolute; right:14px; bottom:14px; width:74px; opacity:.9}
.hlav{aspect-ratio:210/148; background:#fff; border:1px solid var(--line); padding:1.3rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.hlav img.lg{width:38%}
.hlav .lines{height:52%; background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 13px); margin:1rem 0}
.hlav .ft{font-size:.6rem; color:var(--muted); letter-spacing:.08em}
.hlav .el{position:absolute; right:18px; top:18px; width:52px; opacity:.75}

/* downloads */
.pkg{background:var(--panel); border:1px solid var(--line); padding:1rem 1.2rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; line-height:1.85; color:var(--muted); overflow:auto}
.link-row{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.5rem}
.link-row input{font:inherit; font-size:.8rem; padding:.35rem .55rem; border:1px solid var(--line); border-radius:2px; min-width:230px; flex:1; display:none}
body.edit .link-row input{display:block}
[data-edit-text]{border-radius:2px}
body.edit [data-edit-text]{background:#A4956F24; outline:1px dashed var(--beige); cursor:text}

table{width:100%; border-collapse:collapse; font-size:.88rem; background:var(--panel); border:1px solid var(--line)}
th,td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:600; font-size:.8rem; background:#00000006}
tr:last-child td{border-bottom:0}

.toast{position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%,150%); background:var(--black); color:#fff; padding:.55rem 1.1rem; font-size:.83rem; transition:transform .22s; z-index:60}
.toast.show{transform:translate(-50%,0)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; padding:1rem}
  .nav{display:flex; overflow:auto; gap:.3rem}
  .nav a{white-space:nowrap}
  .side .logo{width:112px}
  .spec{grid-template-columns:1fr}
  .spec .note{border-left:0; border-top:1px solid var(--line); padding:.6rem 0 0}
}
@media print{
  .side,.bar,.mini,.chip{display:none}
  body{background:#fff}
  section{break-inside:avoid}
}

/* ---------- hodnosti / segmenty ---------- */
.rank{display:grid; grid-template-columns:96px minmax(0,1fr); gap:1rem; align-items:center;
  background:var(--panel); border:1px solid var(--line); padding:.9rem 1rem}
.rank .sig{display:grid; place-items:center}
.rank .sig img{width:78px; height:78px; object-fit:contain}
.rank .lat{font-family:var(--serif); font-size:1.12rem; letter-spacing:.06em}
.rank .lat span{font-family:var(--sans); font-size:.9rem; letter-spacing:0; color:var(--muted)}
.rank .meta{display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin:.25rem 0 .3rem}
.pill{display:inline-block; font-size:.68rem; letter-spacing:.12em; padding:.16rem .6rem; border-radius:100px; border:1px solid currentColor}
.pill.primus{color:#3F5B56}
.pill.amicus{color:#5E573E}
.pill.mimo{color:#5C5A56}
.rank .det{font-size:.85rem; color:var(--muted)}
.legalbox{background:#FFF; border:1px solid var(--line); border-left:3px solid var(--beige); padding:1rem 1.1rem; font-size:.85rem; color:var(--muted)}
.legalbox .btn{margin-top:.6rem}

/* ---------- e-mail podpis ---------- */
.sig-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.2rem; align-items:start}
.sig-prev{background:#fff; border:1px solid var(--line); padding:1.4rem}
.sig-form{background:var(--panel); border:1px solid var(--line); padding:1rem}
.sig-form label{display:block; font-size:.74rem; color:var(--muted); margin:.55rem 0 .2rem}
.sig-form input{width:100%; font:inherit; font-size:.85rem; padding:.4rem .55rem; border:1px solid var(--line); background:#fff}
.sig-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
@media (max-width:900px){ .sig-wrap{grid-template-columns:1fr} }

/* ---------- hlavičkový papier podľa predlohy ---------- */
.a4{aspect-ratio:210/297; background:#fff; border:1px solid var(--line); position:relative;
  padding:0; overflow:hidden; box-shadow:0 18px 40px -34px #000}
.a4 .lh-rot{position:absolute; top:4.04%; right:-2.96%; width:24%; aspect-ratio:1}
.a4 .lh-rot img{position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%) rotate(90deg)}
.a4 .lh-foot{position:absolute; left:5.71%; bottom:4.04%; font-size:.62rem; line-height:1.7; display:block; white-space:nowrap}
.a4 .lh-foot b{color:#749A91; letter-spacing:.02em}
.a4 .lh-foot .k{color:#749A91}
.a4 .lh-foot a{color:#1B1B1B}
.a4 .lh-trio{position:absolute; right:5.71%; bottom:4.04%; width:3.7%}
.a4 .pg{position:absolute; right:12.5%; bottom:5%; font-size:.6rem; color:#7C7A7A}

/* ---------- podpis ---------- */
.sig-prev table{border-collapse:collapse; background:none; border:0; width:auto}
.sig-prev td{border:0; padding:0; vertical-align:top}
.sig-tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.8rem}

/* ---------- fotogaléria ---------- */
.gal{position:relative; background:#0F0D0A; border:1px solid var(--line); overflow:hidden}
.gal .stagew{position:relative; aspect-ratio:16/9; display:grid; place-items:center; background:#0F0D0A}
.gal .stagew img{width:100%; height:100%; object-fit:contain; display:block}
.gal .cap{position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem;
  background:linear-gradient(transparent,#000000cc); color:#fff; font-size:.85rem; display:flex; gap:.75rem; align-items:center}
.gal .cap .n{margin-left:auto; font-size:.75rem; color:#ffffffb0; white-space:nowrap}
.gal .nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  border:1px solid #ffffff5c; background:#00000059; color:#fff; font-size:1.1rem; cursor:pointer; display:grid; place-items:center}
.gal .nav:hover{background:#000000a6}
.gal .prev{left:12px} .gal .next{right:12px}
.gal .full{position:absolute; top:12px; right:12px; border:1px solid #ffffff5c; background:#00000059; color:#fff;
  font-size:.72rem; padding:.3rem .7rem; border-radius:100px; cursor:pointer}
.thumbs{display:flex; gap:.4rem; overflow:auto; padding:.6rem 0 .2rem}
.thumbs button{flex:0 0 auto; width:104px; height:66px; padding:0; border:1px solid var(--line); background:#fff; cursor:pointer; overflow:hidden}
.thumbs button img{width:100%; height:100%; object-fit:cover; display:block}
.thumbs button.on{outline:2px solid var(--emerald); outline-offset:-2px; border-color:var(--emerald)}
.lightbox{position:fixed; inset:0; z-index:80; background:#0B0A08F2; display:none; place-items:center; padding:2.5rem}
.lightbox.open{display:grid}
.lightbox img{max-width:96vw; max-height:82vh; object-fit:contain}
.lightbox .lb-cap{position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; color:#fff; font-size:.85rem}
.lightbox .lb-close{position:absolute; top:1rem; right:1.2rem; border:1px solid #ffffff5c; background:#00000059;
  color:#fff; font-size:.8rem; padding:.35rem .8rem; border-radius:100px; cursor:pointer}
.lightbox .nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid #ffffff5c; background:#00000059; color:#fff; font-size:1.2rem; cursor:pointer}
.lightbox .prev{left:1.2rem} .lightbox .next{right:1.2rem}


/* ---------- univerzálny popup na celú obrazovku ---------- */
main img, .sw, .a4, .sig-prev, .rank, .cs, .mis, .typespec, .altcard, .tile, .icon-cell{cursor:zoom-in}
main a img, .side img{cursor:inherit}
.ulb{position:fixed; inset:0; z-index:120; background:#14100BF2; display:none;
  grid-template-rows:1fr auto; padding:clamp(1rem,3vw,2.5rem)}
.ulb.on{display:grid}
.ulb-stage{display:grid; place-items:center; overflow:auto; min-height:0}
.ulb-stage img{width:min(92vw,1500px); height:auto; max-height:82vh; object-fit:contain;
  background:#fff; box-shadow:0 34px 70px -40px #000}
.ulb-stage img.transparent{background:
  linear-gradient(45deg,#00000012 25%,transparent 25%,transparent 75%,#00000012 75%),
  linear-gradient(45deg,#00000012 25%,transparent 25%,transparent 75%,#00000012 75%) 12px 12px,#fff;
  background-size:24px 24px}
.ulb-node{transform-origin:center center; background:transparent}
.ulb-node .chip::after, .ulb-node .fill::after{display:none !important}
.ulb-node .mini, .ulb-node .editrow{display:none !important}
.ulb-bar{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:center;
  padding-top:1rem; color:#F3F1EBCC; font-size:.85rem}
.ulb-bar .name{font-family:var(--serif); letter-spacing:.05em; font-size:1rem; color:#fff}
.ulb-bar .n{opacity:.6; font-size:.78rem}
.ulb-btn{font:inherit; font-size:.8rem; padding:.35rem .85rem; border-radius:100px;
  border:1px solid #ffffff45; background:transparent; color:#fff; cursor:pointer; text-decoration:none}
.ulb-btn:hover{border-color:#fff}
.ulb-more{display:flex; gap:.5rem; flex-wrap:wrap}
.ulb-more[hidden]{display:none}
.ulb .x{position:absolute; top:.9rem; right:1.2rem; background:none; border:0; color:#fff;
  font-size:1.7rem; line-height:1; cursor:pointer}
.ulb .step{position:absolute; top:50%; transform:translateY(-50%); background:#ffffff1a; border:0;
  color:#fff; font-size:1.8rem; padding:.35rem .85rem; cursor:pointer}
.ulb .step.prev{left:.8rem} .ulb .step.next{right:.8rem}
.ulb .step[hidden]{display:none}
@media (max-width:700px){ .ulb-stage img{max-height:66vh} }

/* ---------- sociálne siete ---------- */
.socgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem}
.soc{background:var(--panel); border:1px solid var(--line); padding:1rem 1.1rem; display:grid;
  grid-template-columns:54px minmax(0,1fr); gap:.9rem; align-items:start}
.soc .ic{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:0; background:var(--sage)}
.soc .ic svg{display:block}
.soc .ic svg{width:28px; height:28px; fill:#fff}
.soc h3{margin:0 0 .15rem}
.soc .handle{font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--muted)}
.soc .bio{font-size:.85rem; color:var(--muted); margin:.45rem 0 .3rem}
.soc .row{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin-top:.35rem}
.iconset{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; margin-top:1rem}
.iconset .cell{background:var(--panel); border:1px solid var(--line); padding:.9rem .5rem; text-align:center}
.iconset .cell .badge{width:46px; height:46px; margin:0 auto .45rem; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:0; border:0}
.iconset .cell .badge svg{display:block}
.iconset .cell svg{width:24px; height:24px}
.iconset .cell small{display:block; font-size:.7rem; color:var(--muted); margin-bottom:.35rem}

/* ---------- podpis ---------- */
.sig-form .fieldrow{display:grid; grid-template-columns:22px minmax(0,1fr); gap:.5rem; align-items:end}
.sig-form .fieldrow input[type=checkbox]{width:auto; margin:0 0 .55rem}
.sig-prev hr{border:0; border-top:1px solid rgba(63,91,86,.22); margin:.5rem 0}
.sig-form .grp{margin-top:.9rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.72rem;
  letter-spacing:.12em; color:var(--muted); text-transform:uppercase}

/* ---------- dvojúrovňové menu ---------- */
.navgrp{margin-bottom:.9rem}
.navgrp > .ghead{display:flex; align-items:center; gap:.5rem; width:100%; background:none; border:0;
  color:#ffffffc4; font-family:var(--serif); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .4rem; cursor:pointer; text-align:left}
.navgrp > .ghead:hover{color:#fff}
.navgrp > .ghead .num{color:var(--sage); font-size:.72rem}
.navgrp > .ghead .arw{margin-left:auto; font-size:.7rem; opacity:.6; transition:transform .18s}
.navgrp.closed > .ghead .arw{transform:rotate(-90deg)}
.navgrp ul{list-style:none; margin:.15rem 0 0; padding:0 0 0 .55rem; border-left:1px solid #ffffff2e}
.navgrp.closed ul{display:none}

/* ---------- komunikačné línie ---------- */
const LINES = [
  {key:'blue', name:'Modrá línia', who:'Firemní zákazníci - kongres, incentíva, firemné pobyty, partneri a dodávatelia',
   main:'#415262', soft:'#748DA6', logo:'blue',
   tone:'Oficiálny, uhladený, vecný. Píšeme v množnom čísle za spoločnosť, vykáme, vety sú krátke a bez ozdôb. Žiadne emotikony, žiadne rovnice ani vyznania. Vždy uvádzame konkrétny parameter: kapacitu, termín, cenu, kontaktnú osobu.',
   yes:['Ponuku pripravíme do dvoch pracovných dní.','Kongresová sála pre 500 osôb, deliaca stena, tlmočnícke kabíny.','Cena je uvedená bez DPH a platí do 31. 3. 2027.','Radi vám priestory ukážeme osobne.','Storno podmienky sú súčasťou zmluvy o poskytnutí služieb.'],
   no:['Žiadne oslovenie „ahoj" a „ty".','Bez emotikonov a hovorových skratiek.','Bez superlatívov typu „najlepší v Tatrách".','Bez claimov o divočine - tie patria do retailu.']},
  {key:'beige', name:'Hnedá línia', who:'Retail - individuálni hostia, pobyty, wellness, gastronómia, darčekové poukazy',
   main:'#5E573E', soft:'#A4956F', logo:'beige',
   tone:'Osobný, teplý, konkrétny. Vykáme, ale hovoríme ľudsky. Píšeme o zážitku a o tom, čo hosť uvidí a ochutná. Emotikony najviac dva, rovnice a claimy o divočine sú vítané.',
   yes:['Ráno nad hranicou lesa, večer v saune.','Dve noci s raňajkami a vstupom do wellness od 189 €.','Izbu s výhľadom na Slavkovský štít si vyberiete pri rezervácii.','Prídete autom? Parkovanie je v cene.','Divočina za dverami, komfort v izbe.'],
   no:['Bez odborného žargónu z kongresovej ponuky.','Bez tvrdení o výnose či investícii.','Bez zľavových výkričníkov a odpočtov typu „posledná šanca".']},
  {key:'tyrk', name:'Zelená línia', who:'Spoločné pre všetky skupiny - značka, web, podpis, hlavičkový papier, sociálne siete',
   main:'#3F5B56', soft:'#749A91', logo:'tyrk',
   tone:'Neutrálny, pokojný, značkový. Hovoríme o mieste a o hoteli ako celku, nie o konkrétnej ponuke. Toto je jazyk, ktorý znesie obe skupiny naraz.',
   yes:['Nová kapitola hotela pod Slavkovským štítom.','Grand Resort vo Vysokých Tatrách.','Alpská atmosféra, tatranské srdce.','Otvárame v roku 2027.','Sledujte prípravy na slavkof.sk'],
   no:['Bez cenníkov a konkrétnych ponúk.','Bez porovnávania s konkurenciou.','Bez detských a hravých prvkov.']}
];
const FINBY = {}; (A.finalLogos||[]).forEach(l=>FINBY[l.key]=l);
function opacityRow(hex){
  return '<div class="opacity-row">' + [100,80,60,40,25,12].map(o=>
    `<div style="background:${hex}; opacity:${o/100}">${o}%</div>`).join('') + '</div>';
}
$('#lineWrap').innerHTML = LINES.map(l=>`
  <div class="line" style="border-top-color:${l.main}">
    <h3 style="color:${l.main}">${l.name}</h3>
    <div class="who">${l.who}</div>
    <div class="cols">
      <div>
        <div class="lg" style="background:${l.key==='tyrk'?'#FFFFFF':'#FFFFFF'}">
          <img src="${FINBY[l.logo] ? FINBY[l.logo].png : ''}" alt="Logo ${l.name}">
        </div>
        <p class="tiny muted" style="margin-top:.4rem">Logo ${l.name.toLowerCase()} - ${l.main} / trojuholníky ${l.soft}</p>
      </div>
      <div>
        <p class="tiny muted" style="margin:0 0 .3rem">Úrovne krytia hlavnej farby</p>
        ${opacityRow(l.main)}
        <p class="tiny muted" style="margin:.5rem 0 .3rem">Doplnková farba</p>
        ${opacityRow(l.soft)}
      </div>
      <div>
        <p class="tiny muted" style="margin:0 0 .4rem">Tlačidlá</p>
        <div class="btnset">
          <span class="bt solid" style="background:${l.main}">Rezervovať</span>
          <span class="bt outline" style="border-color:${l.main}; color:${l.main}">Zistiť viac</span>
          <span class="bt ghost" style="color:${l.soft}">Prevziať podklady</span>
        </div>
        <p class="tiny muted" style="margin:.7rem 0 .3rem">Prvky značky</p>
        <div style="display:flex; gap:.5rem; align-items:flex-end">
          ${['hora','strom','voda'].map((s,i)=>{
            const EKEY = {blue:'blue', beige:'brown', tyrk:'tyrk'};
            const ck = EKEY[l.key] || 'tyrk';
            const e=(A.elements||[]).find(x=>x.shape===s && x.ckey===ck);
            return e ? `<img src="${e.svg||e.src}" alt="${s}" style="height:${34+i*4}px; filter:none; opacity:${1-i*0.25}">` : '';
          }).join('')}
        </div>
        <p class="tiny muted" style="margin-top:.35rem">Prvky sa v línii používajú v jej farbe s krytím 100 / 75 / 50 %.</p>
      </div>
    </div>
    <div class="voice">
      <div><strong style="font-size:.9rem">Jazyk</strong><p class="tiny muted" style="margin:.2rem 0 0">${l.tone}</p></div>
      <div><strong style="font-size:.9rem; color:#1B6E3C">Hovoríme</strong>
        <div class="samples">${l.yes.map(s=>`<button type="button">${s}</button>`).join('')}</div></div>
      <div><strong style="font-size:.9rem; color:#A8342A">Nehovoríme</strong>
        <ul>${l.no.map(s=>`<li>${s}</li>`).join('')}</ul></div>
    </div>
  </div>`).join('');
document.addEventListener('click', e=>{
  const b = e.target.closest('#lineWrap .samples button');
  if(b) copy(b.textContent.trim(), 'Skopírované');
});

/* ---------- moody ---------- */
const PH_ = A.photos || [];
const ph = n => (PH_[n % Math.max(1,PH_.length)] || {}).src || '';
const signOf = latin => (A.signs||[]).find(s=>s.latin===latin && s.variant==='kruh');
const elOf = (shape,ck) => (A.elements||[]).find(e=>e.shape===shape && e.ckey===ck);
const HD = A.handDrawn || {};

const MOODS = [
  {id:'formal', name:'Formálny / oficiálny', tag:'Modrá línia', color:'#415262',
   canvas:`<img class="bg" src="${ph(3)}" alt=""><div class="veil" style="background:linear-gradient(90deg,#12233Bdd 0 46%,#12233B55 100%)"></div>
     <div class="txt" style="left:0; top:0; width:52%"><div class="h">Kongres pod Slavkovským štítom</div><div class="s">500 miest · 12 sál · parkovanie v cene</div></div>
     <img class="lg" style="left:5%; bottom:7%; width:30%" src="${(FINBY.white||{}).png||''}" alt="">`,
   layout:'Striktná mriežka, text vľavo v tretine plochy, logo v ľavom dolnom rohu. Fotografia nikdy nie je prekrytá prvkami značky.',
   prvky:'Bez prvkov a bez signs. Jediná grafika je logo a plná farebná plocha s krytím 85 %.',
   text:'Titulok maximálne šesť slov, podtitulok s číslami. Bez otáznikov a výkričníkov.'},
  {id:'uvolneny', name:'Uvoľnený', tag:'Hnedá a zelená línia', color:'#5E573E',
   canvas:`<img class="bg" src="${ph(11)}" alt=""><div class="veil" style="background:linear-gradient(0deg,#2A1F14cc 0 38%,#2A1F1400 75%)"></div>
     <div class="txt" style="left:0; bottom:0; width:80%"><div class="h">Ráno v horách + večer v spa = SLAVKOF<span class="stars">★★★★★</span></div><div class="s">Dve noci s raňajkami od 189 €</div></div>
     <img class="el" style="right:6%; top:8%" src="${(elOf('strom','beige')||{}).src||''}" alt="">
     <img class="el" style="right:14%; top:16%; width:8%; opacity:.65" src="${(elOf('hora','beige')||{}).src||''}" alt="">`,
   layout:'Text dole na plnej šírke, fotografia na celú plochu, prvky voľne v pravom hornom rohu v dvoch veľkostiach.',
   prvky:'Prvky značky v hnedej, krytie 100 a 65 %. Signs sa nepoužívajú.',
   text:'Rovnice a vyznania zo sekcie Manuál textov. Najviac dva emotikony.'},
  {id:'priatelsky', name:'Priateľský', tag:'Všetky línie', color:'#3F5B56',
   canvas:`<img class="bg" src="${ph(21)}" alt=""><div class="veil" style="background:linear-gradient(90deg,#1D2B2755 0 60%,#1D2B2700 100%)"></div>
     <img class="sign" style="left:12%; top:14%; width:30%; background:#fff; border-radius:50%" src="${(signOf('Ursus')||{}).src||''}" alt="">
     <div class="txt" style="right:0; bottom:0; width:62%; text-align:right"><div class="h">Medveď je náš sused. Vy ste hosť.</div><div class="s">Sprievodca po okolí každý štvrtok o 9.00</div></div>`,
   layout:'Fotografia zvieraťa alebo hosťa, sign prekrýva hlavu zvieraťa presne v osi. Text vpravo dole, zarovnaný doprava.',
   prvky:'Sign z orientačného systému v bielom kruhu, priemer 30 % šírky. Prvky značky sa nepoužívajú súčasne so signom.',
   text:'Prvá osoba množného čísla, jedna veta s humorom. „Divočina je náš sused."'},
  {id:'rodinny', name:'Rodinný', tag:'Hnedá línia', color:'#A4956F',
   canvas:`<img class="bg" src="${ph(30)}" alt=""><div class="veil" style="background:linear-gradient(0deg,#2A1F14bb 0 30%,#2A1F1400 70%)"></div>
     <div class="txt" style="left:0; bottom:0; width:70%"><div class="h">Dve izby, jedny dvere, žiadne dohadovanie</div><div class="s">Rodinné apartmány s prepojením · deti do 6 rokov zdarma</div></div>
     <img class="sign" style="right:7%; top:10%; width:20%; background:#fff; border-radius:50%" src="${(signOf('Lynx')||{}).src||''}" alt="">
     <img class="el" style="right:26%; top:22%; width:8%" src="${(elOf('voda','beige')||{}).src||''}" alt="">`,
   layout:'Fotografia s ľuďmi, text dole vľavo, sign a jeden prvok vpravo hore ako pár.',
   prvky:'Sign zvieraťa v kruhu plus jeden prvok značky. Vždy len jedno zviera na materiál.',
   text:'Konkrétna výhoda pre rodinu v titulku, podrobnosti v podtitulku. Bez zdrobnenín.'},
  {id:'detsky', name:'Detský', tag:'Hnedá línia · detský klub', color:'#749A91',
   canvas:`<div class="veil" style="background:#F3EDE1"></div>
     <div class="txt" style="left:0; top:6%; width:70%; color:#2A1F14"><div class="h" style="color:#2A1F14">Rysí klub</div><div class="s" style="color:#3F5B56">Pre malých objaviteľov od 4 do 12 rokov</div></div>
     <div style="position:absolute; left:6%; bottom:8%; display:flex; gap:6%; align-items:flex-end; width:88%">
       <img style="width:22%; opacity:.95" src="${(HD.hora||{}).png||''}" alt="">
       <img style="width:24%" src="${(HD.strom||{}).png||''}" alt="">
       <img style="width:18%" src="${(HD.voda||{}).png||''}" alt="">
       <img style="width:22%; border-radius:50%; background:#fff" src="${(signOf('Lynx')||{}).src||''}" alt="">
     </div>`,
   layout:'Svetlá plocha namiesto fotografie, text hore, kreslené prvky v rade dole ako na tabuli.',
   prvky:'Prvky značky prekreslené od ruky - rovnaké tvary, ale nedokonalá čiara. Sign zvieraťa zostáva pôvodný, aby dieťa spoznalo ten istý symbol ako na dverách izby.',
   text:'Krátke vety, oslovenie „ty". Názvy klubov podľa zvierat: Rysí klub, Sokolia škola, Medvedia raňajka.'},
  {id:'kontroverzny', name:'Kontroverzný', tag:'Hnedá línia · kampane', color:'#010101',
   canvas:`<img class="bg" src="${ph(44)}" alt=""><div class="veil" style="background:#0F1512aa"></div>
     <div class="txt" style="left:0; top:22%; width:78%"><div class="h" style="font-size:1.35rem">Alpy majú lepší marketing.<br>Tatry majú 140× viac cicavcov.</div><div class="s">Zdroj: podklady projektu SLAVKOF<span class="stars">★★★★★</span></div></div>
     <img class="lg" style="right:5%; bottom:7%; width:26%" src="${(FINBY.white||{}).png||''}" alt="">`,
   layout:'Tmavá fotografia, text na dvoch riadkoch s obratom v druhom, logo v pravom dolnom rohu. Zdroj vždy pod textom.',
   prvky:'Bez prvkov a signs - pracuje len text a fotografia.',
   text:'Prvá veta priznáva niečo súperovi, druhá otáča. Každé číslo musí mať zdroj: 25× vyššia hustota endemitov, 250× viac hniezdiacich vtákov, 140× viac cicavcov, 30× viac dolín, 10× viac plies, 4× viac vodopádov.'}
];
$('#moodGrid').innerHTML = MOODS.map(m=>`
  <div class="mood">
    <div class="canvas">${m.canvas}</div>
    <div class="body">
      <span class="tag" style="color:${m.color}">${m.tag}</span>
      <h3>${m.name}</h3>
      <dl>
        <dt>Layout</dt><dd>${m.layout}</dd>
        <dt>Prvky</dt><dd>${m.prvky}</dd>
        <dt>Text</dt><dd>${m.text}</dd>
      </dl>
    </div>
  </div>`).join('');

/* ---------- manuál textov ---------- */
.copyblock{margin-bottom:1.4rem}
.copyblock h3{margin-bottom:.35rem}
.copyblock p.small{margin-bottom:.5rem}
.copychips{display:flex; flex-wrap:wrap; gap:.4rem}
.copychips button{font:inherit; font-size:.82rem; text-align:left; padding:.35rem .7rem; border-radius:100px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer; color:var(--ink)}
.copychips button:hover{border-color:var(--ink)}

/* ---------- karty s logami ---------- */
.altgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem}
.altcard{background:var(--panel); border:1px solid var(--line)}
.altcard .stage{display:grid; place-items:center; padding:1.6rem 1.2rem; min-height:150px}
.altcard .stage img{max-width:100%; max-height:96px; object-fit:contain}
.altcard .foot{border-top:1px solid var(--line); padding:.6rem .75rem; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap}
.altcard .foot b{flex:1 1 100%; margin-bottom:.1rem}
.altcard .foot b{font-family:var(--serif); font-weight:500; letter-spacing:.05em; font-size:.9rem; flex:1}

/* ---------- menu ---------- */
#nav{display:block}
#nav a{display:block; padding:.36rem .55rem; border-radius:4px; color:#ffffffb8; text-decoration:none; font-size:.85rem}
#nav a:hover{color:#fff; background:#ffffff1f}
#nav a.active{color:#241B10; background:var(--sage)}

/* ---------- komunikačné línie ---------- */
.line{background:var(--panel); border:1px solid var(--line); border-top-width:5px; padding:1.2rem 1.3rem; margin-bottom:1.2rem}
.line h3{font-family:var(--serif); font-weight:500; letter-spacing:.05em; font-size:1.15rem; margin-bottom:.15rem}
.line .who{font-size:.85rem; color:var(--muted); margin-bottom:.9rem}
.line .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem}
.line .lg{display:grid; place-items:center; padding:.9rem; border:1px solid var(--line); background:#fff; min-height:96px}
.line .lg img{max-width:100%; max-height:56px}
.opacity-row{display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line)}
.opacity-row div{height:34px; display:grid; place-items:center; font-size:.6rem; color:#ffffffd0}
.btnset{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.bt{font:inherit; font-size:.82rem; padding:.5rem 1rem; border-radius:999px; border:1px solid transparent; cursor:default}
.bt.solid{color:#fff}
.bt.outline{background:transparent}
.bt.ghost{background:transparent; border-color:transparent; text-decoration:underline}
.voice{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin-top:.9rem}
.voice ul{margin:.2rem 0 0; padding-left:1rem; font-size:.85rem; color:var(--muted)}
.voice li{margin-bottom:.25rem}
.samples{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem}
.samples button{font:inherit; font-size:.8rem; padding:.3rem .7rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; cursor:pointer; color:var(--ink)}
.samples button:hover{border-color:var(--ink)}

/* ---------- moody ---------- */
.moods{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.1rem}
.mood{background:var(--panel); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column}
.mood .canvas{position:relative; aspect-ratio:16/10; overflow:hidden; background:#DED6C8}
.mood .canvas img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mood .canvas .veil{position:absolute; inset:0}
.mood .canvas .txt{position:absolute; padding:1rem 1.1rem; color:#fff}
.mood .canvas .txt .h{font-family:var(--serif); font-size:1.2rem; line-height:1.15; letter-spacing:.03em}
.mood .canvas .txt .s{font-size:.75rem; opacity:.85; margin-top:.25rem}
.mood .canvas .lg{position:absolute; width:34%}
.mood .canvas .sign{position:absolute; width:26%; filter:drop-shadow(0 2px 6px #0006)}
.mood .canvas .el{position:absolute; width:11%}
.mood .body{padding:.9rem 1rem}
.mood .body h3{font-family:var(--serif); font-weight:500; letter-spacing:.05em; font-size:1.05rem; margin-bottom:.2rem}
.mood .tag{display:inline-block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.15rem .55rem;
  border-radius:999px; border:1px solid currentColor; margin-bottom:.5rem}
.mood .body p{font-size:.85rem; color:var(--muted); margin:0 0 .5rem}
.mood .body dl{margin:0; font-size:.82rem}
.mood .body dt{font-weight:600; margin-top:.4rem}
.mood .body dd{margin:0; color:var(--muted)}

/* ---------- fotobanka a formáty ---------- */
.fmtbar{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.fmtbar img{width:74px; height:44px; object-fit:cover; border:2px solid transparent; cursor:pointer}
.fmtbar img.on{border-color:var(--emerald)}
.fmtgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; align-items:end}
.fmt{background:var(--panel); border:1px solid var(--line)}
.fmt .frame{position:relative; display:block; width:100%; padding:0; border:0; border-radius:0; overflow:hidden; background:#DED6C8; max-height:440px}
.fmt .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.fmt .frame img{width:100%; height:100%; object-fit:cover; display:block}
.fmt .safe{position:absolute; inset:8%; border:1px dashed #ffffff9c; pointer-events:none}
.fmt .meta{padding:.5rem .6rem; display:flex; gap:.4rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.fmt .meta b{font-size:.8rem}
.fmt .meta span{font-size:.7rem; color:var(--muted)}

/* ---------- šírka textu ---------- */
main p, main li, main .legalbox, main .bd-note{max-width:none}
.sec-title p{max-width:none}

/* ---------- fotobanka v manuáli ---------- */
.bankgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.7rem; align-items:start}
.bankcard{background:var(--panel); border:1px solid var(--line); overflow:hidden}
.bankcard img{width:100%; display:block; object-fit:cover; cursor:zoom-in; background:#DED6C8}
.bankcard .m{padding:.4rem .55rem; font-size:.7rem; color:var(--muted); display:flex; gap:.3rem .5rem; flex-wrap:wrap}
.bankcard .m b{color:var(--ink); font-weight:600}
.bankcard .a{padding:0 .55rem .55rem; display:flex; gap:.3rem; flex-wrap:wrap}

/* ================= dlaždicový režim: 3D plasticita ================= */
:root{--tilt:6deg;--lift:14px}

/* prehľadová mriežka sekcií */
.hub{padding:clamp(1.6rem,3vw,2.6rem) clamp(1.1rem,3vw,3rem) 2.6rem}
.hub h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 .3rem}
.hub p.sub{color:var(--muted);margin:0 0 1.4rem;font-size:.95rem}
.hubgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.1vw,1rem);perspective:1400px}
.hubtile{position:relative;grid-column:span 3;aspect-ratio:4/3;border-radius:6px;overflow:visible;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
  box-shadow:0 10px 24px -18px #14100B66}
.hubtile.w6{grid-column:span 6}
.hubtile.w4{grid-column:span 4}
.hubtile:hover{transform:translateY(calc(-1*var(--lift))) rotateX(3deg) rotateY(-4deg) scale(1.02);
  box-shadow:0 34px 60px -26px #14100B77}
.hubtile .plate{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#DED6C8}
.hubtile .plate img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .plate img{transform:scale(1.06)}
.hubtile .veil{position:absolute;inset:0;border-radius:6px;background:linear-gradient(0deg,#14100Bd8 0 34%,#14100B18 72%)}
.hubtile .pop{position:absolute;right:6%;top:-11%;width:30%;z-index:3;pointer-events:none;
  filter:drop-shadow(0 16px 26px #14100B66);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .pop{transform:translateY(-10px) rotate(-3deg)}
.hubtile .inl{position:absolute;left:8%;top:12%;width:44%;z-index:3;filter:drop-shadow(0 10px 20px #14100B66)}
.hubtile .cap{position:absolute;left:0;bottom:0;padding:1rem 1.1rem;color:#F6F1E7;z-index:2}
.hubtile .cap .n{font-size:.68rem;letter-spacing:.2em;color:#F6F1E7a0}
.hubtile .cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(1rem,1.5vw,1.35rem);margin:.25rem 0 0;line-height:1.15}
@media (max-width:1100px){ .hubtile{grid-column:span 4} .hubtile.w6{grid-column:span 8} }
@media (max-width:760px){ .hubtile,.hubtile.w6,.hubtile.w4{grid-column:span 12;aspect-ratio:16/9} }

/* 3D plasticita existujúcich dlaždíc */
#logoGrid, #signGrid, #elGrid, #finGrid, #prevGrid, #altGrid, .bankgrid{perspective:1200px}
.tile, .altcard, .bankcard{transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  transform-style:preserve-3d; box-shadow:0 8px 18px -16px #14100B55}
.tile:hover, .altcard:hover, .bankcard:hover{transform:translateY(-8px) rotateX(2.5deg) rotateY(-3deg);
  box-shadow:0 26px 44px -24px #14100B66; z-index:2}
.tile .stage, .altcard .stage{overflow:visible}
.tile .stage img, .altcard .stage img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tile:hover .stage img{transform:translateY(-10%) scale(1.10)}
.altcard:hover .stage img{transform:translateY(-8%) scale(1.06)}
.bankcard{overflow:hidden}


/* ---------- fotobanka v manuáli (štýl samostatnej fotobanky) ---------- */
.pbfilters{display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0 1.1rem}
.pbrow{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.pbrow > b{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:92px}
.pbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem;align-items:start}
.pbcard{background:var(--panel);border:1px solid var(--line);overflow:hidden;border-radius:4px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;box-shadow:0 8px 18px -16px #14100B55}
.pbcard:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px #14100B66}
.pbcard img{width:100%;display:block;object-fit:cover;cursor:zoom-in;background:#DED6C8}
.pbcard .m{padding:.5rem .6rem;font-size:.72rem;color:var(--muted);display:flex;gap:.3rem .55rem;flex-wrap:wrap}
.pbcard .m b{color:var(--ink);font-weight:600}
.pbcard .a{padding:0 .6rem .6rem;display:flex;gap:.3rem;flex-wrap:wrap}

.pblb{position:fixed;inset:0;background:#14100BF4;display:none;grid-template-rows:1fr auto;
  padding:clamp(.8rem,2vw,1.6rem);z-index:120}
.pblb.on{display:grid}
.pblb .stage{overflow:auto;min-height:0;padding:0 clamp(.5rem,2vw,2rem);display:flex;justify-content:center}
.pblb .stage .in{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:.3rem 0 1rem;margin:auto;max-width:min(1500px,92vw)}
.pblb img#pbImg{max-width:min(1500px,92vw);max-height:64vh;width:auto;object-fit:contain;background:#fff;
  box-shadow:0 26px 52px -32px #000}
.pblb .fmts{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem;max-width:min(1500px,92vw);
  justify-content:center;align-items:flex-start;margin:0 auto}
.pblb .fmt{flex:0 0 168px;background:#fff;border:1px solid #ffffff22;border-radius:4px;overflow:hidden}
.pblb .fmt .fr{position:relative;overflow:hidden;background:#DED6C8}
.pblb .fmt .fr img{width:100%;height:100%;object-fit:cover;display:block}
.pblb .fmt .safe{position:absolute;inset:8%;border:1px dashed #ffffffa8}
.pblb .fmt .mm{padding:.35rem .5rem;font-size:.7rem;display:flex;justify-content:space-between;align-items:center;gap:.3rem}
.pblb .bar{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:.9rem;
  color:#F3EDE1cc;font-size:.85rem}
.pblb .bar b{font-family:var(--serif);color:#fff;letter-spacing:.04em}
.pblb .btn{font:inherit;font-size:.8rem;padding:.35rem .9rem;border-radius:999px;border:1px solid #ffffff4d;
  background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.pblb .btn:hover{border-color:#fff}
.pblb .x{position:absolute;top:.7rem;right:1.1rem;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer}
.pblb .nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1f;border:0;color:#fff;
  font-size:1.7rem;padding:.3rem .8rem;cursor:pointer}
.pblb .prev{left:.7rem}.pblb .next{right:.7rem}

/* ---------- prehľadové dlaždice: prepracovaný vzhľad ---------- */
.hub{padding:clamp(2rem,4vw,3.4rem) clamp(1.1rem,3vw,3rem) 3rem}
.hub .head{display:flex;align-items:baseline;gap:1rem;flex-wrap:nowrap;margin-bottom:1.3rem}
.hub h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;margin:0;letter-spacing:.01em;white-space:nowrap}
.hub p.sub{color:var(--muted);margin:0;max-width:none;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.3vw,1.2rem);perspective:1600px}
.hubtile{position:relative;grid-column:span 3;aspect-ratio:4/5;border-radius:10px;overflow:visible;cursor:pointer;
  background:transparent;border:0;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.hubtile.w6{grid-column:span 6;aspect-ratio:16/11}
.hubtile.w4{grid-column:span 4;aspect-ratio:1/1}
.hubtile .plate{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#2A2721;
  box-shadow:0 18px 40px -26px #14100B99, inset 0 1px 0 #ffffff26;transition:box-shadow .5s}
.hubtile:hover .plate{box-shadow:0 44px 70px -30px #14100Baa, inset 0 1px 0 #ffffff33}
.hubtile .plate img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.94) contrast(1.03)}
.hubtile:hover .plate img{transform:scale(1.09)}
.hubtile .veil{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(0deg,#0E0B08e8 0 26%,#0E0B0866 52%,#0E0B0800 78%)}
.hubtile .rim{position:absolute;inset:0;border-radius:10px;pointer-events:none;border:1px solid #ffffff1f}
.hubtile .pop{position:absolute;right:5%;top:-13%;width:38%;z-index:4;pointer-events:none;
  filter:drop-shadow(0 22px 26px #0E0B0899);transform:rotate(-2deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .pop{transform:translateY(-14px) rotate(1.5deg) scale(1.04)}
.hubtile .inl{position:absolute;left:7%;top:11%;width:42%;z-index:4;filter:drop-shadow(0 14px 22px #0E0B0899)}
.hubtile .cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;color:#F6F1E7;z-index:3}
.hubtile .cap .n{font-size:.66rem;letter-spacing:.26em;color:#F6F1E799}
.hubtile .cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.5rem);
  margin:.3rem 0 0;line-height:1.1;text-shadow:0 2px 18px #0E0B0866}
.hubtile .cap .go{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.74rem;
  letter-spacing:.1em;color:#F6F1E7;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.hubtile:hover .cap .go{opacity:1;transform:none}
@media (max-width:1100px){ .hubtile{grid-column:span 6} .hubtile.w6{grid-column:span 12} }
@media (max-width:700px){ .hubtile,.hubtile.w6,.hubtile.w4{grid-column:span 12;aspect-ratio:4/3} }


/* ---------- bočné menu: plná farba, zbalené ---------- */
.side{background:#3B2E22 !important; background-image:none !important}
.navgrp > .ghead{color:#F0E7D8cc}
.navgrp > .ghead:hover{color:#fff}
#nav a{color:#EFE3D2b0}
#nav a:hover{color:#fff;background:#ffffff14}
#nav a.active{color:#2A2118;background:var(--sage)}

/* ---------- dlaždicové menu ---------- */
.hub{padding:clamp(2rem,4vw,3.4rem) clamp(1.1rem,3vw,3rem) 3rem}
.hubgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.3vw,1.1rem);perspective:1600px}
.hubtile{position:relative;grid-column:span 4;aspect-ratio:16/11;border-radius:26px;cursor:pointer;border:0;
  overflow:hidden;transform-style:preserve-3d;background:#2A2721;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
  box-shadow:0 16px 34px -24px #14100B99, inset 0 1px 0 #ffffff1f}
.hubtile:hover{box-shadow:0 40px 62px -28px #14100Baa, inset 0 1px 0 #ffffff2e}
.hubtile .art{position:absolute;left:0;right:0;top:6%;bottom:38%;display:grid;place-items:center;overflow:visible}
.hubtile .art img{max-width:56%;max-height:52%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .art img{transform:scale(1.07) translateY(-4px)}
.hubtile .cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.3rem 1.15rem;z-index:3;color:#F6F1E7;border-radius:0 0 26px 26px;
  background:linear-gradient(0deg,#0E0B08ee 0 46%,#0E0B0899 74%,#0E0B0800 100%)}
.hubtile .cap .n{font-size:.64rem;letter-spacing:.24em;color:#F6F1E799}
.hubtile .cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(1rem,1.35vw,1.28rem);margin:.25rem 0 0;line-height:1.12}
.hubtile .cap .go{display:block;margin-top:.35rem;font-size:.72rem;letter-spacing:.1em;color:#F6F1E7;opacity:0;
  transform:translateY(5px);transition:opacity .35s,transform .35s}
.hubtile:hover .cap .go{opacity:1;transform:none}
.hubtile.grp{aspect-ratio:16/10;grid-column:span 4}
.hubtile.grp .art{background:radial-gradient(120% 100% at 30% 0%, #ffffff18, transparent 60%)}
.hubtile.grp .count{position:absolute;top:.9rem;right:1rem;font-size:.7rem;letter-spacing:.1em;color:#F6F1E7a0;z-index:3}
.hubback{display:none;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;background:none;border:0;
  color:var(--muted);cursor:pointer;margin-bottom:.9rem;padding:0}
.hubback:hover{color:var(--ink)}
@media (max-width:1100px){ .hubtile,.hubtile.grp{grid-column:span 6} }
@media (max-width:700px){ .hubtile,.hubtile.grp{grid-column:span 12;aspect-ratio:16/9} }

/* medailón so zvieraťom */
.hubtile .med{width:36%;aspect-ratio:1;border-radius:50%;background:#F6F1E7;display:grid;place-items:center;
  box-shadow:0 16px 30px -18px #0E0B08cc, inset 0 0 0 1px #0000000f;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .med{transform:scale(1.06) translateY(-4px)}
.hubtile .med img{width:84%;max-width:none;max-height:none}
.hubtile.grp .meds{display:flex;align-items:center;justify-content:center}
.hubtile.grp .meds .med{width:26%;margin-left:-5%;box-shadow:0 14px 26px -16px #0E0B08cc}
.hubtile.grp .meds .med:first-child{margin-left:0}

/* dlaždicové kompozície bez fotografií */
.art .sw{display:flex;width:74%;height:38%;border-radius:4px;overflow:hidden;box-shadow:0 10px 20px -14px #000}
.art .sw i{flex:1}
.art .ramp{display:flex;width:74%;height:26%;border-radius:3px;overflow:hidden}
.art .aa{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);color:#F6F1E7;letter-spacing:.04em}
.art .aa small{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.24em;color:#F6F1E7a0;margin-top:.2rem}
.art .rows{display:flex;gap:.4rem;align-items:flex-end}
.art .rows i{display:block;width:14px;border-radius:2px;background:#F6F1E7}
.art .dot{width:64px;height:64px;border-radius:50%;background:#F6F1E7}
.art .mini-a4{width:34%;aspect-ratio:210/297;background:#fff;border-radius:2px;position:relative;box-shadow:0 12px 24px -14px #000}
.art .mini-a4 span{position:absolute;left:12%;bottom:10%;width:52%;height:5%;background:#749A91;border-radius:1px}
.art .mini-a4 em{position:absolute;right:10%;top:9%;width:8%;height:36%;background:#749A91;border-radius:1px}
.art .chipset{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;max-width:78%}
.art .chipset b{font:600 .68rem/1 var(--body);letter-spacing:.1em;color:#F6F1E7;border:1px solid #F6F1E755;
  border-radius:999px;padding:.32rem .6rem}
.art .icons{display:flex;gap:.5rem}
.art .icons span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#F6F1E7}
.art .icons svg{width:18px;height:18px}
.art .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:66%}
.art .mosaic i{aspect-ratio:1;background:#F6F1E733;border-radius:2px}
.art .mosaic i:nth-child(2){background:#F6F1E766}
.art .mosaic i:nth-child(5){background:#F6F1E7aa}

/* ---------- lightbox fotobanky: čitateľná lišta ---------- */
.pblb .bar{background:#0E0B08;border-radius:999px;padding:.5rem 1rem;margin:0 auto;max-width:min(1500px,92vw)}
.pblb .bar span{color:#F3EDE1b0}

.hero .left{min-width:0}
.hero .right{padding-top:.25rem}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }
@media (max-width:900px){ .hub .head{flex-wrap:wrap} .hub h2,.hub p.sub{white-space:normal} }

/* ---------- zaoblenie a plasticita kariet (ako v príručke) ---------- */
.tile, .altcard, .bankcard, .pbcard, .sw, .rank, .fmt, .cs, .mis, .typespec, .soc, .iconset .cell,
.line, .mood, .a4, .sig-prev, .card, .legalbox, .panel{border-radius:14px; overflow:hidden}
.tile, .altcard, .pbcard, .bankcard{background:var(--panel); border:1px solid var(--line)}
.tile .stage, .altcard .stage{border-radius:14px 14px 0 0}
.tile .foot, .altcard .foot{border-radius:0 0 14px 14px}
.sw .fill{border-radius:14px 14px 0 0}
.mini, .chip, .btn{border-radius:999px}
.tile:hover, .altcard:hover, .pbcard:hover{box-shadow:0 26px 44px -24px #14100B66}
table{border-radius:14px; overflow:hidden}


.navtoggle{display:none}
  .hero img.mark{width:min(190px,64%)}
}


/* ================= mobil (finálne prepisy) ================= */
.navtoggle{display:none}
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:clip}
  .shell{grid-template-columns:1fr !important}
  .side{position:sticky !important; top:0; z-index:40; height:auto !important; width:auto !important;
    padding:.7rem .9rem !important; display:grid !important; grid-template-columns:auto 1fr auto;
    align-items:center; gap:.5rem}
  .side .logo{width:104px}
  .side .sub{display:none}
  #nav{grid-column:1 / -1; display:none; max-height:60vh; overflow:auto}
  .side.open #nav{display:block}
  .navtoggle{display:inline-flex !important; align-items:center; justify-self:end;
    font:inherit; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
    background:#ffffff1a; color:#F0E7D8; border:1px solid #ffffff33; border-radius:999px;
    padding:.4rem .8rem; cursor:pointer}
  .shell > *{min-width:0}
  main{max-width:100% !important; width:100%; min-width:0; overflow-x:clip}
  .bar{max-width:100%; overflow-x:auto}
  section, .hub, .hero, .grid, .altgrid, .bankgrid, .pbgrid, .mock, .sig-wrap{min-width:0}
  .hero > *, .hub > *{min-width:0}
  img{max-width:100%}
  section, .hub, .hero{padding-left:1rem !important; padding-right:1rem !important}
  .hero{grid-template-columns:1fr !important; gap:.8rem !important}
  .hero p, .hero .lede{max-width:none !important}
  .hub .head{flex-wrap:wrap !important}
  .hub h2, .hub p.sub{white-space:normal !important}
  .hub h2{font-size:1.45rem !important}
  .hubgrid{grid-template-columns:1fr !important}
  .hubtile, .hubtile.grp, .hubtile.w4, .hubtile.w6{grid-column:auto !important; aspect-ratio:16/9 !important}
  .sec-title{flex-direction:column; align-items:flex-start; gap:.15rem}
  .grid, .g2, .g3, .altgrid, .socgrid, .moods, .mock, .voice, .line .cols, .sig-wrap{grid-template-columns:1fr !important}
  #logoGrid, #signGrid, #elGrid, #finGrid, #prevGrid, .bankgrid, .pbgrid, .iconset, .fmtgrid{
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr)) !important}
  table{display:block; overflow-x:auto; white-space:nowrap}
  .chips, .pbrow{overflow-x:auto; flex-wrap:nowrap}
  .bar{flex-wrap:wrap; gap:.4rem; padding:.5rem .8rem}
  .a4 .lh-foot{white-space:normal; font-size:.5rem}
  .pblb, .ulb{padding:.6rem}
  .pblb .fmts{justify-content:flex-start}
  .pblb .nav, .ulb .step{padding:.2rem .5rem; font-size:1.3rem}
}
@media (max-width:520px){
  #logoGrid, #signGrid, #elGrid, #finGrid, #prevGrid, .bankgrid, .pbgrid, .iconset, .fmtgrid{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) !important}
  .hero img.mark{width:min(180px,62%)}
  .hub h2{font-size:1.25rem !important}
}

/* ---------- hlavičkový papier na mobile ---------- */
@media (max-width:900px){
  .mock{display:grid; grid-template-columns:1fr !important; gap:1rem}
  .mock > div{min-width:0}
  .a4{max-width:340px; margin:0 auto; width:100%}
  .a4 .lh-foot{font-size:.46rem; line-height:1.55; white-space:nowrap}
  .a4 .pg{font-size:.5rem}
  .mock table, .mock p{max-width:100%}

  /* plávajúci hamburger vpravo hore */
  .side{position:static !important; padding:.7rem .9rem !important;
    grid-template-columns:auto 1fr !important}
  .navtoggle{position:fixed !important; top:.7rem; right:.7rem; z-index:60;
    background:#3B2E22 !important; color:#F0E7D8 !important; border:1px solid #ffffff33 !important;
    box-shadow:0 10px 22px -12px #14100Bcc; padding:.55rem .9rem !important}
  .side.open #nav{display:block; position:fixed; top:3.5rem; right:.7rem; left:.7rem; z-index:59;
    background:#3B2E22; border-radius:16px; padding:.7rem .6rem; max-height:72vh; overflow:auto;
    box-shadow:0 26px 50px -22px #14100Bd0}
}

/* ---------- opravené chipy ---------- */
.chip{white-space:nowrap; flex:0 0 auto; line-height:1.25; padding:.34rem .8rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem; min-height:0}
.chips{display:flex; gap:.4rem; align-items:center}
@media (max-width:900px){
  .chips, .pbrow{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:.35rem}
  .chips::-webkit-scrollbar, .pbrow::-webkit-scrollbar{display:none}
  .chip{font-size:.76rem; padding:.32rem .7rem}
  .inp, .search{min-width:150px}
}

/* ---------- plávajúca navigácia sekcií ---------- */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--sage),var(--emerald)); transition:width .12s linear}
.secnav{position:fixed; top:4.2rem; left:.6rem; z-index:60; width:min(58vw,268px);
  background:#F6F1E7f2; color:#2A2118; border:1px solid #00000018; border-radius:16px;
  padding:.5rem .7rem; box-shadow:0 18px 36px -22px #14100B80; backdrop-filter:blur(6px);
  display:none}
.secnav.on{display:block}
.secnav .row{display:flex; align-items:center; gap:.45rem; width:100%; text-align:left;
  background:none; border:0; color:#5C544A; font:inherit; font-size:.8rem; line-height:1.25;
  padding:.22rem 0; cursor:pointer; min-height:1.5rem}
.secnav .row span.t{overflow:hidden; white-space:nowrap; flex:1; min-width:0}
.secnav .cur, .secnav .row span.t{position:relative}
.secnav .scroller{display:inline-block; white-space:nowrap; will-change:transform}
.secnav .scroller.run{animation:secroll var(--dur,9s) linear infinite}
@keyframes secroll{
  0%,12%{transform:translateX(0)}
  88%,100%{transform:translateX(calc(-1 * var(--shift,0px)))}
}
.secnav .row:hover{color:#2A2118}
.secnav .arw{opacity:.55; font-size:.85rem; width:.9rem; flex:0 0 auto}
.secnav .cur{font-family:var(--serif); font-size:.95rem; letter-spacing:.02em; color:#2A2118;
  padding:.3rem 0; margin:.1rem 0; border-top:1px solid #00000014; border-bottom:1px solid #00000014;
  white-space:nowrap; overflow:hidden; min-height:1.7rem; display:flex; align-items:center}
@media (min-width:901px){ .secnav{display:none !important} }
@media (max-width:900px){
  body.hasnav .chips, body.hasnav .pbrow{scroll-padding-top:0}
  main{padding-top:0}
  .secnav{max-width:min(60vw,250px)}
  /* aby plávajúce prvky neprekrývali obsah pri prvom riadku sekcie */
  main section{scroll-margin-top:4.6rem}
}

/* ================= kruhové dlaždicové menu ================= */
.hubgrid{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:clamp(1rem,2.4vw,2rem) !important; perspective:1200px; justify-items:center; align-items:start}
.hubtile{position:relative !important; grid-column:auto !important; aspect-ratio:auto !important;
  width:100%; max-width:190px; background:transparent !important; border:0 !important;
  box-shadow:none !important; border-radius:0 !important; overflow:visible !important;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover{transform:translateY(-8px)}
.hubtile .disc{position:relative; width:100%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 22px 34px -18px #14100Bb0, inset 0 2px 0 #ffffff40, inset 0 -14px 26px -14px #00000055;
  transition:box-shadow .45s, transform .45s cubic-bezier(.2,.7,.2,1)}
.hubtile:hover .disc{box-shadow:0 34px 46px -20px #14100Bc0, inset 0 2px 0 #ffffff55, inset 0 -16px 28px -14px #00000066;
  transform:scale(1.03)}
.hubtile .disc::after{content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(120% 90% at 32% 12%, #ffffff34, transparent 58%); pointer-events:none}
.hubtile .disc img{width:66%; height:auto; filter:drop-shadow(0 8px 12px #14100B44)}
.hubtile .lbl{text-align:center; line-height:1.15}
.hubtile .lbl .n{display:block; font-size:.6rem; letter-spacing:.24em; color:var(--muted); margin-bottom:.16rem}
.hubtile .lbl h3{font-family:var(--serif); font-weight:500; font-size:clamp(.9rem,1.15vw,1.05rem);
  margin:0; color:var(--ink); letter-spacing:.03em;
  text-shadow:0 1px 0 #ffffffcc, 0 2px 0 #ffffff88, 0 3px 4px #14100B33, 0 6px 10px #14100B22}
.hubtile .lbl .cnt{display:block; margin-top:.2rem; font-size:.66rem; color:var(--muted)}
.hubtile .lbl .go{display:block; margin-top:.15rem; font-size:.66rem; letter-spacing:.1em; color:var(--emerald);
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s}
.hubtile:hover .lbl .go{opacity:1; transform:none}
@media (max-width:900px){
  .hubgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) !important; gap:1rem !important}
  .hubtile{max-width:150px}
  .hubtile .lbl h3{font-size:.85rem}
}

/* ================= menu ako na mobile aj na desktope ================= */
.shell{grid-template-columns:1fr !important}
.side{position:static !important; height:auto !important; width:auto !important; padding:0 !important;
  background:transparent !important; border:0 !important}
.side .logo, .side .sub{display:none !important}
main{max-width:min(1240px,100%) !important; width:100%; margin:0 auto; min-width:0; overflow-x:clip}
.navtoggle{display:inline-flex !important; position:fixed !important; top:.7rem; right:.7rem; z-index:70;
  align-items:center; gap:.4rem; font:inherit; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  background:#3B2E22 !important; color:#F0E7D8 !important; border:1px solid #ffffff33 !important;
  border-radius:999px; padding:.55rem 1rem !important; cursor:pointer;
  box-shadow:0 12px 26px -14px #14100Bcc}
#nav{display:none}
.side.open #nav{display:block; position:fixed; top:3.6rem; right:.7rem; z-index:69;
  width:min(92vw,320px); background:#3B2E22; border-radius:16px; padding:.7rem .6rem;
  max-height:76vh; overflow:auto; box-shadow:0 30px 56px -22px #14100Bd8}
.side.open #nav a{color:#EFE3D2c0}
.side.open #nav a:hover{color:#fff; background:#ffffff14}
.secnav{display:none}
.secnav.on{display:block !important}
@media (min-width:901px){ .secnav{width:min(24vw,300px)} }

/* ---------- ovládanie veľkosti písma ---------- */
.zoomctl{position:fixed; top:.7rem; right:8.6rem; z-index:70; display:inline-flex; align-items:center; gap:.15rem;
  background:#3B2E22; border:1px solid #ffffff33; border-radius:999px; padding:.28rem .3rem;
  box-shadow:0 12px 26px -14px #14100Bcc}
.zoomctl button{font:inherit; font-size:.9rem; line-height:1; color:#F0E7D8; background:none; border:0;
  width:1.9rem; height:1.9rem; border-radius:999px; cursor:pointer}
.zoomctl button:hover{background:#ffffff1f}
.zoomctl .val{min-width:2.9rem; text-align:center; font-size:.68rem; letter-spacing:.06em; color:#F0E7D8b0}
@media (max-width:900px){ .zoomctl{right:.7rem; top:3.7rem; padding:.24rem .28rem}
  .zoomctl button{width:1.75rem; height:1.75rem; font-size:.85rem}
  .zoomctl .val{min-width:2.6rem; font-size:.64rem} }

/* ---------- prilepený pás dlaždíc ---------- */
.hub{position:static; background:transparent; transition:padding .25s, box-shadow .25s}
.hub.mini{position:fixed; top:0; left:0; right:0; z-index:50;
  padding:.45rem clamp(.7rem,2vw,1.4rem); background:#F2EADFf2; backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -22px #14100B99; border-bottom:1px solid #00000012}
.hub.mini .hubgrid{display:flex !important; flex-wrap:nowrap; gap:.45rem; overflow-x:auto;
  padding:0 15rem .15rem 0; scrollbar-width:none}
.hub.mini .hubgrid::-webkit-scrollbar{display:none}
.hub.mini .hubtile{flex:0 0 auto; width:auto; max-width:none; flex-direction:row; align-items:center;
  gap:.45rem; padding:.22rem .7rem .22rem .25rem; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:0 6px 14px -12px #14100B66}
.hub.mini .hubtile:hover{transform:translateY(-2px)}
.hub.mini .disc{width:2rem; height:2rem; aspect-ratio:1; box-shadow:inset 0 1px 0 #ffffff55}
.hub.mini .disc img{width:74%}
.hub.mini .lbl{text-align:left}
.hub.mini .lbl .n, .hub.mini .lbl .cnt, .hub.mini .lbl .go{display:none}
.hub.mini .lbl h3{font-size:.78rem; letter-spacing:.04em; text-shadow:none; white-space:nowrap}
.hub.mini + section, .hub.mini ~ section{scroll-margin-top:5rem}
.hubback{margin-bottom:.6rem}
.hub.mini .hubback{margin:0 .6rem 0 0; font-size:.72rem; white-space:nowrap}
@media (max-width:900px){ .hub{top:0} .hub.mini{padding:.4rem .6rem}
  .hub.mini .hubgrid{padding-right:6.5rem}
  .secnav{top:6.6rem} }

/* ---------- zarovnanie prilepeného pásu a bočnej navigácie ---------- */
.hub.mini{padding:.5rem 0 !important; border-radius:0}
.hub.mini .hubgrid{max-width:min(1240px,100%); margin:0 auto;
  padding:0 clamp(.7rem,2vw,1.2rem) .1rem 17.5rem !important}
.secnav{top:.55rem !important; left:calc(50% - min(620px,50%)); width:min(16.5rem,42vw)}
.secnav .cur{font-size:.88rem}
.secnav .row{font-size:.76rem}
@media (max-width:1100px){
  .hub.mini .hubgrid{padding-left:1rem !important}
  .secnav{left:.6rem; top:4.6rem !important; width:min(58vw,268px)}
}

/* ---------- mobil: rovnaké okraje ako stránka, pravidelná mriežka ---------- */
@media (max-width:900px){
  section, .hub, .hero{padding-left:1rem !important; padding-right:1rem !important}
  #logoGrid, #signGrid, #elGrid, #finGrid, #prevGrid, #altGrid, .bankgrid, .pbgrid, .iconset, .fmtgrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.7rem !important; align-items:stretch}
  #logoGrid .tile, #signGrid .tile, #elGrid .tile, #finGrid .altcard, #prevGrid .altcard,
  .bankgrid .bankcard, .pbgrid .pbcard{width:100%; margin:0}
  .tile .stage, .altcard .stage{min-height:96px; padding:.9rem}
  .tile .foot, .altcard .foot{padding:.5rem .6rem}
  .hub.mini{padding:.4rem 0 !important}
  .hub.mini .hubgrid{padding:0 .7rem .1rem !important}
}
@media (max-width:420px){
  #logoGrid, #signGrid, #elGrid, #finGrid, #prevGrid, .bankgrid, .pbgrid, .iconset{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* hviezdičky ako horné asterisky */
.stars{font-size:.62em;line-height:0;vertical-align:.62em;letter-spacing:.06em;font-family:inherit;white-space:nowrap;}

/* ================= DIZAJN MANUÁL 2.0 – zarovnanie pásu, bočnej navigácie a mobilu ================= */
:root{ --pad:clamp(1.1rem,3vw,3rem); --page:1240px }

/* jednotné okraje pre celú stránku */
section, .hub, .hero, .bar{ padding-left:var(--pad); padding-right:var(--pad) }

/* riadok prilepeného pásu: bočná navigácia + dlaždice v jednej línii, na šírku stránky */
.hubrow{ display:contents }
.hub.mini{ padding:.45rem 0 !important; border-radius:0 }
.hub.mini .hubrow{ display:flex !important; align-items:center; gap:.6rem;
  width:100%; max-width:var(--page); margin:0 auto; padding:0 var(--pad) }
.hub.mini .hubgrid{ display:flex !important; flex:1 1 auto; min-width:0; flex-wrap:nowrap;
  gap:.45rem; overflow-x:auto; scrollbar-width:none; max-width:none;
  margin:0 !important; padding:0 !important }
.hub.mini .hubback{ margin:0 !important; flex:0 0 auto }

/* bočná navigácia v prilepenom páse – kompaktná pilulka na tej istej úrovni ako dlaždice */
.hub.mini .secnav{ position:static !important; top:auto !important; left:auto !important;
  display:flex !important; align-items:center; gap:.1rem; flex:0 0 auto;
  width:auto !important; max-width:min(15rem,34vw); padding:.16rem .3rem;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 14px -12px #14100B66; backdrop-filter:none }
.hub.mini .secnav .row{ width:auto; flex:0 0 auto; padding:.1rem .22rem; min-height:0 }
.hub.mini .secnav .row span.t{ display:none }
.hub.mini .secnav .arw{ width:auto; font-size:.9rem; opacity:.7 }
.hub.mini .secnav .cur{ border:0; margin:0; padding:0 .3rem; font-size:.8rem;
  min-height:0; max-width:10rem; overflow:hidden }

/* mimo prilepeného pásu ostáva bočná navigácia vľavo, zarovnaná na okraj stránky */
body:not(.hubmini) .secnav{ top:4.6rem !important;
  left:max(var(--pad), calc(50% - var(--page)/2 + var(--pad))) !important;
  width:min(17rem,58vw) !important }

/* ---------- mobil: rovnaké okraje ako stránka + pravidelná mriežka log ---------- */
@media (max-width:900px){
  :root{ --pad:1rem }
  section, .hub, .hero, .bar{ padding-left:var(--pad) !important; padding-right:var(--pad) !important }
  .hub.mini{ padding:.4rem 0 !important }
  .hub.mini .hubrow{ padding:0 var(--pad); gap:.45rem }
  .hub.mini .hubgrid{ padding:0 !important }
  .hub.mini .secnav{ max-width:9.5rem; padding:.14rem .25rem }
  .hub.mini .secnav .cur{ max-width:6.2rem; font-size:.74rem }
  .hub.mini .lbl h3{ font-size:.74rem }

  /* kruhové dlaždice: pravidelné stĺpce, žiadne rozhádzané polohy */
  .hub .hubgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:1.1rem .6rem !important; justify-items:stretch !important; align-items:start }
  .hub .hubtile{ max-width:none !important; width:100%; gap:.5rem }
  .hub .hubtile .disc{ width:100%; max-width:104px; margin:0 auto }
}
@media (max-width:430px){
  .hub .hubgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
  .hub .hubtile .disc{ max-width:118px }
}

/* ================= 2.0b – pravé ovládacie prvky v páse ================= */
:root{ --edge:max(var(--pad), calc(50% - var(--page)/2 + var(--pad))) }

/* mimo pásu: zarovnané na okraj stránky, nie na okraj okna */
body:not(.hubmini) .secnav{ left:var(--edge) !important }
body:not(.hubmini) .navtoggle{ right:var(--edge) !important }
body:not(.hubmini) .zoomctl{ right:calc(var(--edge) + 7.9rem) !important }

/* v páse: zoom aj Menu sú súčasťou riadku, na pravom okraji stránky */
.hub.mini .zoomctl, .hub.mini .navtoggle{
  position:static !important; top:auto !important; right:auto !important;
  flex:0 0 auto; margin:0 !important; box-shadow:none }
.hub.mini .zoomctl{ padding:.16rem .24rem; gap:.1rem }
.hub.mini .zoomctl button{ width:1.72rem; height:1.72rem; font-size:.84rem }
.hub.mini .zoomctl .val{ min-width:2.5rem; font-size:.66rem }
.hub.mini .navtoggle{ padding:.4rem .95rem !important; font-size:.72rem }
.hub.mini .zoomctl{ margin-left:auto !important }

/* jednotná výška všetkých prvkov v páse */
.hub.mini .secnav, .hub.mini .hubtile, .hub.mini .zoomctl, .hub.mini .navtoggle{
  min-height:2.5rem; align-self:center }

@media (max-width:900px){
  /* na mobile ostávajú zoom a Menu plávajúce – v páse im rezervujeme miesto */
  .hub.mini .hubrow{ padding-right:5.9rem }
  body:not(.hubmini) .zoomctl{ right:var(--edge) !important }
}

/* ================= 2.0c – stabilná šírka pilulky, žiadne poskakovanie pásu ================= */
.hub.mini .secnav{ width:14rem !important; max-width:14rem !important; min-width:14rem;
  justify-content:space-between; overflow:hidden }
.hub.mini .secnav .row{ flex:0 0 1.4rem; width:1.4rem; justify-content:center; padding:.1rem 0 }
.hub.mini .secnav .cur{ flex:1 1 auto; min-width:0; max-width:none !important;
  text-align:center; white-space:nowrap; overflow:hidden }
@media (max-width:900px){
  .hub.mini .secnav{ width:8.8rem !important; max-width:8.8rem !important; min-width:8.8rem }
  .hub.mini .secnav .cur{ font-size:.72rem }
}
@media (max-width:520px){
  .hub.mini .secnav{ width:6.8rem !important; max-width:6.8rem !important; min-width:6.8rem }
}

/* ================= 2.0d – zjednotenie výšok a tvarov v prilepenom páse ================= */
.hub.mini .hubrow{ align-items:center }
.hub.mini .secnav, .hub.mini .hubtile, .hub.mini .hubback,
.hub.mini .zoomctl, .hub.mini .navtoggle{
  height:2.4rem !important; min-height:0 !important; align-self:center; box-sizing:border-box }

/* navigačná pilulka: rovnaký tvar ako dlaždice, pevná šírka bez veľkých medzier */
.hub.mini .secnav{ width:11.5rem !important; max-width:11.5rem !important; min-width:11.5rem;
  padding:0 .25rem !important; gap:0; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 14px -12px #14100B66 }
.hub.mini .secnav .row{ flex:0 0 1.2rem; width:1.2rem; height:100%; padding:0 }
.hub.mini .secnav .arw{ font-size:.8rem; opacity:.55 }
.hub.mini .secnav .cur{ font-size:.78rem; letter-spacing:.02em; padding:0 .15rem }

/* tlačidlo Späť ako rovnaká pilulka */
.hub.mini .hubback{ display:inline-flex !important; align-items:center; padding:0 .85rem !important;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 14px -12px #14100B66; font-size:.74rem; color:var(--ink) }

/* dlaždice: disk zladený s výškou riadku */
.hub.mini .hubtile{ padding:0 .75rem 0 .2rem !important }
.hub.mini .disc{ width:1.9rem !important; height:1.9rem !important }
.hub.mini .zoomctl button{ width:1.6rem; height:1.6rem }

@media (max-width:900px){
  .hub.mini .secnav{ width:8.4rem !important; max-width:8.4rem !important; min-width:8.4rem }
  .hub.mini .secnav .cur{ font-size:.72rem }
  .hub.mini .secnav, .hub.mini .hubtile, .hub.mini .hubback,
  .hub.mini .zoomctl, .hub.mini .navtoggle{ height:2.25rem !important }
  .hub.mini .disc{ width:1.75rem !important; height:1.75rem !important }
}
@media (max-width:520px){
  .hub.mini .secnav{ width:6.6rem !important; max-width:6.6rem !important; min-width:6.6rem }
}

/* ================= 2.0e – mobilná optimalizácia pásu ================= */
@media (max-width:900px){
  /* plávajúca navigácia sekcií na mobile prekážala – nahrádzajú ju dlaždice */
  .secnav, .secnav.on{ display:none !important }

  /* kompaktný zoom bez percenta, vedľa tlačidla Menu (nie pod ním) */
  .zoomctl .val{ display:none !important }
  .zoomctl button{ width:1.5rem !important; height:1.5rem !important; font-size:.8rem }
  body:not(.hubmini) .navtoggle{ top:.7rem !important; right:var(--edge) !important;
    padding:.34rem .7rem !important; font-size:.68rem }
  body:not(.hubmini) .zoomctl{ top:.7rem !important; right:calc(var(--edge) + 4.6rem) !important;
    padding:.16rem .2rem }
  .bar{ padding-right:10.5rem !important }

  /* pás: len kruhy bez popiskov, aby bolo vidieť všetkých šesť naraz */
  .hub.mini .hubrow{ padding-right:var(--pad) !important; gap:.35rem }
  .hub.mini .hubgrid{ gap:.3rem !important; justify-content:flex-start }
  .hub.mini .hubtile{ padding:.1rem !important; border-radius:999px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important }
  .hub.mini .hubtile .lbl{ display:none !important }
  .hub.mini .disc{ width:1.9rem !important; height:1.9rem !important }
  .hub.mini .hubback{ padding:0 .55rem !important; font-size:.68rem }
  .hub.mini .zoomctl{ margin-left:auto !important; padding:.16rem .2rem !important }
  .hub.mini .navtoggle{ padding:.34rem .7rem !important; font-size:.68rem }
  .hub.mini .secnav{ display:none !important }
}

/* ================= 2.0f – späť bez tlačidla v páse, všetky dlaždice vždy viditeľné ================= */
.hub.mini .hubback{ display:none !important }
.hub.mini .hubgrid{ overflow:hidden !important; flex-wrap:nowrap; justify-content:flex-start }
.hub.mini .hubtile{ flex:0 1 auto; min-width:0 }
.hub.mini .hubtile .lbl{ min-width:0; overflow:hidden }
.hub.mini .lbl h3{ overflow:hidden; text-overflow:ellipsis }

/* keď sa popisky prestanú zmestiť, zostanú len kruhy – nikdy sa neoreže žiadna dlaždica */
@media (max-width:1200px){
  .hub.mini .hubtile .lbl{ display:none !important }
  .hub.mini .hubtile{ padding:.1rem !important; border-radius:999px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important }
  .hub.mini .hubgrid{ gap:.35rem !important }
}

/* ================= 2.0g – mobilný pás s popiskami (nie holé kruhy) ================= */
@media (max-width:900px){
  .hub.mini .hubtile{ flex:0 0 auto; padding:0 .7rem 0 .2rem !important; border-radius:999px !important;
    background:#fff !important; border:1px solid var(--line) !important;
    box-shadow:0 6px 14px -12px #14100B66 !important; scroll-snap-align:start }
  .hub.mini .hubtile .lbl{ display:block !important; text-align:left }
  .hub.mini .lbl h3{ font-size:.74rem; white-space:nowrap }
  .hub.mini .lbl .n, .hub.mini .lbl .cnt, .hub.mini .lbl .go{ display:none !important }
  .hub.mini .hubgrid{ overflow-x:auto !important; overflow-y:hidden !important; gap:.4rem !important;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity }
  .hub.mini .disc{ width:1.75rem !important; height:1.75rem !important }
}

/* ================= 2.0h – úvodná hlavička pod plávajúcim ovládaním ================= */
.hero{ padding-top:4.4rem !important }
@media (max-width:900px){ .hero{ padding-top:4rem !important } }

/* ================= 2.0i – jednotný pás dlaždíc v oboch dokumentoch ================= */
.hub.mini .hubtile, .phub.mini .ptile{ flex:0 0 auto !important; min-width:auto !important }
.hub.mini .lbl, .phub.mini .lbl{ overflow:visible !important; min-width:auto !important }
.hub.mini .lbl h3, .phub.mini .lbl h3{ overflow:visible !important; text-overflow:clip !important;
  white-space:nowrap; font-size:.78rem }
.hub.mini .hubgrid, .phub.mini .phubgrid{ overflow-x:auto !important; overflow-y:hidden !important;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity }
.hub.mini .hubgrid::-webkit-scrollbar, .phub.mini .phubgrid::-webkit-scrollbar{ display:none }
.hub.mini .hubtile, .phub.mini .ptile{ scroll-snap-align:start }

/* popisky ostávajú viditeľné na každej šírke – pás sa v prípade potreby posúva */
@media (max-width:1200px){
  .hub.mini .hubtile .lbl, .phub.mini .ptile .lbl{ display:block !important; text-align:left }
  .hub.mini .hubtile, .phub.mini .ptile{ padding:0 .7rem 0 .2rem !important; border-radius:999px !important;
    background:#fff !important; border:1px solid var(--line,#DCD5C8) !important;
    box-shadow:0 6px 14px -12px #14100B66 !important }
  .hub.mini .lbl h3, .phub.mini .lbl h3{ font-size:.76rem }
  .hub.mini .disc, .phub.mini .disc{ width:1.85rem !important; height:1.85rem !important }
}

/* ================= 2.0j – pás ako karta v šírke stránky ================= */
.hub.mini, .phub.mini{ background:transparent !important; box-shadow:none !important;
  border-bottom:0 !important; backdrop-filter:none !important; padding:.5rem 0 !important;
  pointer-events:none }
.hub.mini .hubrow, .phub.mini .wrap{ pointer-events:auto;
  background:#F6F1E7f2; backdrop-filter:blur(8px); border:1px solid #00000016; border-radius:16px;
  box-shadow:0 18px 36px -26px #14100B90 }
.hub.mini .hubrow{ padding:.3rem var(--pad) !important; max-width:var(--page); margin:0 auto }
.phub.mini .wrap{ padding:.3rem 22px !important; max-width:min(1680px,95vw) !important }
@media (max-width:900px){
  .hub.mini .hubrow, .phub.mini .wrap{ border-radius:14px }
  .hub.mini .hubrow{ padding:.28rem .6rem !important }
  .phub.mini .wrap{ padding:.28rem .6rem !important }
}

/* hlavy na dlaždiciach vyplnia koliesko */
.hubtile .disc img, .ptile .disc img{ width:94% !important; height:auto }
.hub.mini .disc img, .phub.mini .disc img{ width:94% !important }

/* ================= 2.0k – navigácia sekcií späť na mobile, zhodný pás, hlavička ================= */
/* pilulka s prechodom medzi sekciami je aj na mobile – ale len v páse, nie plávajúca cez obsah */
@media (max-width:900px){
  .hub.mini .secnav, .phub.mini .psec{ display:flex !important;
    width:6.4rem !important; max-width:6.4rem !important; min-width:6.4rem }
  .hub.mini .secnav .cur, .phub.mini .psec .cur{ font-size:.68rem; max-width:4.4rem }
  .hub.mini .secnav .row, .phub.mini .psec .row{ flex:0 0 1rem; width:1rem }
}

/* pás v oboch dokumentoch úplne rovnaký */
.hub.mini .hubtile, .phub.mini .ptile{
  background:#fff !important; border:1px solid #DCD5C8 !important;
  box-shadow:0 6px 14px -12px #14100B66 !important; border-radius:999px !important;
  padding:0 .75rem 0 .2rem !important; gap:.45rem }
.hub.mini .lbl h3, .phub.mini .lbl h3{
  font-family:'Cinzel','Trajan Pro',serif !important; font-weight:500 !important;
  font-size:.78rem !important; color:#1B1B1B !important; letter-spacing:.04em; text-shadow:none }
.hub.mini .lbl .n, .hub.mini .lbl .cnt, .hub.mini .lbl .go,
.phub.mini .lbl .n, .phub.mini .lbl .go{ display:none !important }
.hub.mini .disc, .phub.mini .disc{ width:1.95rem !important; height:1.95rem !important }

/* hlavička: logo na úrovni pravého ovládania */
.hero{ padding-top:.7rem !important }
.hero .right{ padding-top:3.4rem }
@media (max-width:900px){
  .hero .right{ padding-top:0 }
  .hero img.mark{ width:min(200px,52%) !important }
}

/* ================= 2.0m – plávajúca navigácia sekcií preč, ostáva len v páse ================= */
body:not(.hubmini) .secnav, body:not(.hubmini) .secnav.on,
body:not(.phubmini) .psec, body:not(.phubmini) .psec.on{ display:none !important }

/* ================= 2.0n – pás v šírke stránky s bočným odsadením ================= */
.hub.mini .hubrow{
  width:min(var(--page), calc(100% - 2 * var(--pad))) !important;
  max-width:min(var(--page), calc(100% - 2 * var(--pad))) !important;
  margin:0 auto !important; padding:.3rem .55rem !important }
.phub.mini .wrap{
  width:min(1680px, calc(95vw - 2 * var(--ppad))) !important;
  max-width:min(1680px, calc(95vw - 2 * var(--ppad))) !important;
  margin:0 auto !important; padding:.3rem .55rem !important }
@media (max-width:900px){
  .hub.mini .hubrow{ width:calc(100% - 1.2rem) !important; max-width:calc(100% - 1.2rem) !important;
    padding:.28rem .45rem !important }
  .phub.mini .wrap{ width:calc(100% - 1.2rem) !important; max-width:calc(100% - 1.2rem) !important;
    padding:.28rem .45rem !important }
}

/* ================= 2.0o – pravé ovládanie stojí na mieste ================= */
.zoomctl, .navtoggle, .pzoom, .pmenu{ top:.7rem !important }
.hub.mini .zoomctl, .hub.mini .navtoggle, .phub.mini .pzoom, .phub.mini .pmenu{
  position:fixed !important; margin:0 !important }

/* ================= 2.0p – rovnaká výška ovládania, adaptívny pás ================= */
.zoomctl, .navtoggle, .pzoom, .pmenu{
  position:fixed !important; top:.7rem !important; margin:0 !important;
  height:2.4rem !important; box-sizing:border-box;
  display:inline-flex !important; align-items:center; justify-content:center; line-height:1 }
.navtoggle, .pmenu{ padding:0 1.05rem !important; font-size:.72rem !important }
.zoomctl, .pzoom{ padding:0 .35rem !important; gap:.1rem }
.zoomctl button, .pzoom button{ width:1.7rem !important; height:1.7rem !important; font-size:.85rem }
.zoomctl .val, .pzoom .val{ min-width:2.6rem; font-size:.66rem }

/* keď sa nezmestí všetko, ustúpi najprv pilulka sekcií, potom popisky dlaždíc */
.hub.mini.nopill .secnav, .phub.mini.nopill .psec{ display:none !important }
.hub.mini.nolabel .hubtile .lbl, .phub.mini.nolabel .ptile .lbl{ display:none !important }
.hub.mini.nolabel .hubtile, .phub.mini.nolabel .ptile{
  padding:.1rem !important; border-radius:999px !important }

/* ================= 2.0q – pravé tlačidlá ležia na karte pásu ================= */
.zoomctl, .navtoggle, .pzoom, .pmenu{ z-index:60 !important }
.hub.mini .hubrow, .phub.mini .wrap{ padding-left:.55rem !important }

/* ================================================================
   PÁS DLAŽDÍC – finálne, jediné platné pravidlá (prepisujú všetko vyššie)
   ================================================================ */
:root{
  --bar-w:min(1240px, calc(100vw - 28px));      /* šírka karty pásu */
  --bar-gap:max(14px, calc((100vw - min(1240px, calc(100vw - 28px))) / 2));
  --bar-pad:.55rem;                              /* vnútorné odsadenie karty */
  --btn-zoom:8.4rem;                             /* pevná šírka ovládania písma */
  --btn-menu:5.6rem;                             /* pevná šírka tlačidla Menu */
  --btn-space:calc(var(--btn-zoom) + var(--btn-menu) + .8rem);
}

/* pruh je priehľadný, viditeľná je len karta v riadku */
.hub.mini, .phub.mini{
  position:fixed !important; top:0; left:0; right:0; z-index:50;
  background:transparent !important; box-shadow:none !important; border:0 !important;
  backdrop-filter:none !important; padding:.5rem 0 !important; pointer-events:none }
.hub.mini .hubrow, .phub.mini .wrap{
  pointer-events:auto; display:flex !important; align-items:center; gap:.45rem;
  width:var(--bar-w) !important; max-width:var(--bar-w) !important; margin:0 auto !important;
  padding:.3rem var(--bar-pad) !important;
  padding-right:calc(var(--bar-pad) + var(--btn-space)) !important;
  background:#F6F1E7f2; backdrop-filter:blur(8px); border:1px solid #00000016;
  border-radius:16px; box-shadow:0 18px 36px -26px #14100B90 }

/* pruh dlaždíc */
.hub.mini .hubgrid, .phub.mini .phubgrid{
  display:flex !important; flex:1 1 auto; min-width:0; flex-wrap:nowrap; gap:.45rem;
  margin:0 !important; padding:0 !important; max-width:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none;
  -webkit-overflow-scrolling:touch }
.hub.mini .hubgrid::-webkit-scrollbar, .phub.mini .phubgrid::-webkit-scrollbar{ display:none }

/* dlaždica – bez 3D efektu, ktorý ju v páse vysúval z riadku */
.hub.mini .hubtile, .phub.mini .ptile{
  transform:none !important; flex:0 0 auto !important; align-self:center;
  height:2.4rem !important; min-height:0 !important; box-sizing:border-box;
  display:flex !important; flex-direction:row !important; align-items:center; gap:.45rem;
  padding:0 .75rem 0 .2rem !important; margin:0 !important;
  background:#fff !important; border:1px solid #DCD5C8 !important; border-radius:999px !important;
  box-shadow:0 6px 14px -12px #14100B66 !important; cursor:pointer }
.hub.mini .disc, .phub.mini .disc{
  width:1.95rem !important; height:1.95rem !important; flex:0 0 auto;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important;
  display:grid !important; place-items:center; overflow:hidden }
.hub.mini .disc img, .phub.mini .disc img{ width:94% !important; height:auto !important; display:block }
.hub.mini .lbl, .phub.mini .lbl{ display:block !important; text-align:left; overflow:visible !important }
.hub.mini .lbl h3, .phub.mini .lbl h3{
  font-family:'Cinzel','Trajan Pro',serif !important; font-weight:500 !important;
  font-size:.78rem !important; color:#1B1B1B !important; letter-spacing:.04em;
  margin:0 !important; white-space:nowrap; overflow:visible !important; text-shadow:none }
.hub.mini .lbl .n, .hub.mini .lbl .cnt, .hub.mini .lbl .go,
.phub.mini .lbl .n, .phub.mini .lbl .go{ display:none !important }
.hub.mini .hubback{ display:none !important }

/* pilulka s prechodom medzi sekciami */
.hub.mini .secnav, .phub.mini .psec{
  display:flex !important; position:static !important; align-items:center; align-self:center;
  flex:0 0 auto; order:-1; width:11.5rem !important; max-width:11.5rem !important;
  height:2.4rem !important; min-height:0 !important; box-sizing:border-box;
  padding:0 .25rem !important; margin:0 !important; gap:0;
  background:#fff; border:1px solid #DCD5C8; border-radius:999px;
  box-shadow:0 6px 14px -12px #14100B66; backdrop-filter:none }
.hub.mini .secnav .row, .phub.mini .psec .row{
  flex:0 0 1.2rem; width:1.2rem; height:100%; padding:0; justify-content:center; min-height:0 }
.hub.mini .secnav .row span.t, .phub.mini .psec .row span.t{ display:none }
.hub.mini .secnav .cur, .phub.mini .psec .cur{
  flex:1 1 auto; min-width:0; max-width:none !important; border:0; margin:0; padding:0 .15rem;
  font-size:.78rem; min-height:0; text-align:center; white-space:nowrap; overflow:hidden }

/* pevné ovládanie vpravo – vždy na tom istom mieste, na karte pásu */
.zoomctl, .navtoggle, .pzoom, .pmenu{
  position:fixed !important; top:.8rem !important; z-index:60 !important; margin:0 !important;
  height:2.4rem !important; box-sizing:border-box;
  display:inline-flex !important; align-items:center; justify-content:center; line-height:1 }
.navtoggle, .pmenu{ width:var(--btn-menu) !important; padding:0 !important; font-size:.72rem !important;
  right:calc(var(--bar-gap) + var(--bar-pad)) !important }
.zoomctl, .pzoom{ width:var(--btn-zoom) !important; padding:0 .3rem !important; gap:.1rem;
  right:calc(var(--bar-gap) + var(--bar-pad) + var(--btn-menu) + .4rem) !important }
.zoomctl button, .pzoom button{ width:1.7rem !important; height:1.7rem !important; font-size:.85rem }
.zoomctl .val, .pzoom .val{ min-width:2.4rem; font-size:.66rem }

@media (max-width:900px){
  :root{
    --bar-w:calc(100vw - 20px); --bar-gap:10px; --bar-pad:.45rem;
    --btn-zoom:5.4rem; --btn-menu:4.4rem;
    --btn-space:calc(var(--btn-zoom) + var(--btn-menu) + .7rem);
  }
  .zoomctl .val, .pzoom .val{ display:none !important }
  .zoomctl button, .pzoom button{ width:1.5rem !important; height:1.5rem !important }
  .hub.mini .secnav, .phub.mini .psec{ width:7rem !important; max-width:7rem !important }
  .hub.mini .lbl h3, .phub.mini .lbl h3{ font-size:.74rem !important }
}
:root{ --bar-max:1240px }

/* ================= OPRAVA: šírka bez zvislého posuvníka + jedna poloha tlačidiel ================= */
.hub.mini .hubrow, .phub.mini .wrap{
  width:min(var(--bar-max), calc(100% - 28px)) !important;
  max-width:min(var(--bar-max), calc(100% - 28px)) !important;
  margin:0 auto !important }

/* rovnaká poloha v oboch stavoch – prepisuje staršie pravidlá s vyššou špecificitou */
body .navtoggle, body:not(.hubmini) .navtoggle, .hub.mini .navtoggle,
body .pmenu, body:not(.phubmini) .pmenu, .phub.mini .pmenu{
  right:calc(max(14px, (100% - var(--bar-max)) / 2) + var(--bar-pad)) !important;
  top:.8rem !important; position:fixed !important }
body .zoomctl, body:not(.hubmini) .zoomctl, .hub.mini .zoomctl,
body .pzoom, body:not(.phubmini) .pzoom, .phub.mini .pzoom{
  right:calc(max(14px, (100% - var(--bar-max)) / 2) + var(--bar-pad) + var(--btn-menu) + .4rem) !important;
  top:.8rem !important; position:fixed !important }

/* ================= MOBIL – finálne nastavenie pásu (posledné platné) ================= */
@media (max-width:700px){
  /* na úzkej obrazovke by ovládanie písma zabralo polovicu pásu – prehliadač má vlastné */
  .zoomctl, .pzoom{ display:none !important }

  :root{ --bar-pad:.4rem; --btn-menu:4.2rem; --btn-space:calc(var(--btn-menu) + .5rem) }

  .hub.mini, .phub.mini{ padding:.4rem 0 !important }
  .hub.mini .hubrow, .phub.mini .wrap{
    width:calc(100% - 20px) !important; max-width:calc(100% - 20px) !important;
    margin:0 auto !important; gap:.35rem;
    padding:.25rem var(--bar-pad) !important;
    padding-right:calc(var(--bar-pad) + var(--btn-space)) !important;
    border-radius:14px }

  body .navtoggle, body:not(.hubmini) .navtoggle, .hub.mini .navtoggle,
  body .pmenu, body:not(.phubmini) .pmenu, .phub.mini .pmenu{
    right:calc(10px + var(--bar-pad)) !important; top:.62rem !important;
    width:var(--btn-menu) !important; height:2.2rem !important; font-size:.68rem !important }

  .hub.mini .hubtile, .phub.mini .ptile{ height:2.2rem !important; padding:0 .6rem 0 .15rem !important }
  .hub.mini .disc, .phub.mini .disc{ width:1.8rem !important; height:1.8rem !important }
  .hub.mini .lbl h3, .phub.mini .lbl h3{ font-size:.72rem !important }

  .hub.mini .secnav, .phub.mini .psec{
    width:5.6rem !important; max-width:5.6rem !important; height:2.2rem !important;
    padding:0 .18rem !important }
  .hub.mini .secnav .row, .phub.mini .psec .row{ flex:0 0 .95rem; width:.95rem }
  .hub.mini .secnav .cur, .phub.mini .psec .cur{ font-size:.66rem }
}

/* ================= MOBIL – ovládanie veľkosti písma späť, kompaktné ================= */
@media (max-width:700px){
  :root{ --btn-zoom:3.7rem; --btn-space:calc(var(--btn-menu) + var(--btn-zoom) + .85rem) }

  .zoomctl, .pzoom{ display:inline-flex !important }
  .zoomctl .val, .pzoom .val{ display:none !important }
  .zoomctl button[data-z="0"], .pzoom button[data-z="0"]{ display:none !important }
  .zoomctl button, .pzoom button{ width:1.5rem !important; height:1.5rem !important; font-size:.82rem }

  body .zoomctl, body:not(.hubmini) .zoomctl, .hub.mini .zoomctl,
  body .pzoom, body:not(.phubmini) .pzoom, .phub.mini .pzoom{
    right:calc(10px + var(--bar-pad) + var(--btn-menu) + .35rem) !important;
    top:.62rem !important; width:var(--btn-zoom) !important; height:2.2rem !important;
    padding:0 .18rem !important; gap:.05rem }

  .hub.mini .hubrow, .phub.mini .wrap{
    padding-right:calc(var(--bar-pad) + var(--btn-space)) !important }
}

/* ================= MOBIL – pás na plnú šírku, bez zbytočnej rezervy ================= */
@media (max-width:700px){
  .hub.mini .hubrow, .phub.mini .wrap{
    width:calc(100% - 16px) !important; max-width:calc(100% - 16px) !important;
    margin:0 auto !important;
    padding:.25rem .4rem !important;
    padding-right:calc(.4rem + var(--btn-menu) + var(--btn-zoom) + 1rem) !important }
  .hub.mini .hubgrid, .phub.mini .phubgrid{ gap:.35rem !important }
  .hub.mini .secnav, .phub.mini .psec{ width:5.2rem !important; max-width:5.2rem !important }
  .hub.mini .secnav .cur, .phub.mini .psec .cur{ font-size:.64rem }
}

.hub, .phub, .hub.mini, .phub.mini{ transition:none !important }

/* ================= MOBIL v3 – priestor pre dlaždice ================= */
@media (max-width:700px){
  /* pilulka sekcií zaberala 83 px z 374 – na mobile ju nahrádzajú dlaždice a Menu */
  .hub.mini .secnav, .phub.mini .psec{ display:none !important }

  /* Menu ako ikona, zoom len A− / A+ */
  .navtoggle, .pmenu{ width:2.7rem !important; font-size:0 !important; padding:0 !important }
  .navtoggle::before, .pmenu::before{ content:'\2630'; font-size:1.05rem; line-height:1 }
  .zoomctl, .pzoom{ width:3.5rem !important; padding:0 .15rem !important }
  .zoomctl button, .pzoom button{ width:1.45rem !important; height:1.45rem !important }

  :root{ --btn-menu:2.7rem; --btn-zoom:3.5rem; --btn-space:calc(var(--btn-menu) + var(--btn-zoom) + .7rem) }
  .hub.mini .hubrow, .phub.mini .wrap{
    padding-right:calc(.4rem + var(--btn-space)) !important }
}

/* .side je položka gridu so z-index:40 – vytvárala stacking context a tlačidlá
   v nej sa nedostali nad kartu pásu; z-index musí byť auto */
.side{ z-index:auto !important }

@media (max-width:700px){
  /* ikona namiesto slova – vyššia špecificita než skoršie pravidlo s font-size */
  body .navtoggle, body .pmenu,
  body:not(.hubmini) .navtoggle, body:not(.phubmini) .pmenu,
  .hub.mini .navtoggle, .phub.mini .pmenu{ font-size:0 !important; padding:0 !important;
    width:2.7rem !important; overflow:hidden }
  body .navtoggle::before, body .pmenu::before{ content:'\2630'; font-size:17px; line-height:1 }
}

@media (max-width:700px){
  /* pilulka s prechodom medzi sekciami zostáva aj na mobile, len užšia */
  .hub.mini .secnav, .phub.mini .psec{
    display:flex !important; width:5rem !important; max-width:5rem !important;
    min-width:5rem !important; padding:0 .15rem !important }
  .hub.mini .secnav .row, .phub.mini .psec .row{ flex:0 0 .85rem; width:.85rem }
  .hub.mini .secnav .arw, .phub.mini .psec .arw{ font-size:.7rem }
  .hub.mini .secnav .cur, .phub.mini .psec .cur{ font-size:.6rem; padding:0 .1rem }
}

/* prvky a karty v mriežke: rovnaká výška, zarovnané tlačidlá */
#elGrid, #logoGrid, #signGrid, #finGrid, #prevGrid, #altGrid{ align-items:stretch !important }
#elGrid .tile, #logoGrid .tile, #signGrid .tile{ height:100% }
.tile{ display:flex; flex-direction:column }
.tile .stage{ flex:1 1 auto }
.tile .foot{ margin-top:auto; align-items:flex-start }
.tile .foot .nm{ min-height:2.5em; display:block }

/* mriežka prvkov: zoradené po tvaroch, menšie dlaždice, viac stĺpcov */
@media (min-width:901px){
  #elGrid{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)) !important; gap:.6rem !important }
}
#elGrid .elgh{ grid-column:1 / -1; margin:.9rem 0 .1rem; font-family:var(--disp,'Cinzel',serif);
  font-weight:500; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#6B6257) }
#elGrid .elgh:first-child{ margin-top:0 }
#elGrid .tile .stage{ min-height:76px !important; padding:.6rem !important }
#elGrid .tile .stage img{ max-height:52px !important }
#elGrid .tile .foot{ padding:.4rem .5rem !important }
#elGrid .tile .foot .nm{ min-height:0; font-size:.72rem }
#elGrid .tile .foot .nm code{ font-size:.62rem }
#elGrid .tile .foot .mini{ font-size:.66rem; padding:.15rem .5rem }

/* ================= fotobanka: posuvník verzus šípky, zatriedenie ================= */
.pblb .stage{ padding-left:clamp(3rem,6vw,4.6rem) !important; padding-right:clamp(3rem,6vw,4.6rem) !important;
  scrollbar-width:none; -ms-overflow-style:none }
.pblb .stage::-webkit-scrollbar{ width:0; height:0; display:none }
.pblb .nav{ z-index:5 }
.pblb .prev{ left:clamp(.4rem,1.4vw,1rem) } .pblb .next{ right:clamp(.4rem,1.4vw,1rem) }
.pblb .fmts{ scrollbar-width:thin }
@media (max-width:700px){
  .pblb .stage{ padding-left:2.2rem !important; padding-right:2.2rem !important }
}
/* režim úpravy zatriedenia */
.pbedit{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 .6rem }
.pbcard select.catsel{ font:inherit; font-size:.72rem; padding:.2rem .35rem; border:1px solid var(--line);
  border-radius:4px; background:var(--panel); color:var(--ink); max-width:100% }
.pbcard.changed{ box-shadow:0 0 0 2px #B8860B88 }

/* ================= vlastný odkaz pre každú sekciu ================= */
.seclink{ display:inline-flex; align-items:center; gap:.3rem; margin-left:.5rem; padding:.1rem .5rem;
  border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted);
  font-family:var(--sans,inherit); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; vertical-align:.35em; opacity:0; transition:opacity .18s, border-color .18s, color .18s }
h2:hover .seclink, h3:hover .seclink, .seclink:focus, .seclink.done{ opacity:1 }
.seclink:hover{ border-color:var(--ink); color:var(--ink) }
.seclink.done{ border-color:#3F5B56; color:#3F5B56 }
.hubtile .seclink, .ptile .seclink{ display:none !important }
@media (hover:none){ .seclink{ opacity:.55 } }
@media print{ .seclink{ display:none } }

/* ================= aktívna dlaždica v prilepenom páse ================= */
.hub.mini .hubtile.active, .phub.mini .ptile.active{
  background:#14100B !important; border-color:#14100B !important;
  box-shadow:0 10px 20px -12px #14100Baa !important }
.hub.mini .hubtile.active .lbl h3, .phub.mini .ptile.active .lbl h3{
  color:#F6F1E7 !important; font-weight:700 !important }
.hub.mini .hubtile.active .disc, .phub.mini .ptile.active .disc{
  box-shadow:0 0 0 2px #F6F1E7aa }
.hub.mini .hubtile.active .n, .phub.mini .ptile.active .n{ color:#F6F1E7aa !important }

/* ================= kluby a hodnosti ================= */
.hsub{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:2rem 0 .5rem }
.tblwrap{ overflow-x:auto; margin:.6rem 0 1rem }
.rtab{ width:100%; border-collapse:collapse; font-size:.86rem; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; overflow:hidden }
.rtab th, .rtab td{ padding:.5rem .7rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap }
.rtab thead th{ background:#3F5B56; color:#F4EFE6; font-size:.74rem; letter-spacing:.04em; text-align:right }
.rtab thead th:first-child, .rtab th[scope="row"]{ text-align:left }
.rtab th[scope="row"] b{ display:block; font-family:var(--serif); font-weight:500; letter-spacing:.04em }
.rtab th[scope="row"] span{ display:block; font-size:.72rem; color:var(--muted) }
.partnergrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.8rem; margin:.8rem 0 1rem }
.partnercard{ border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:.9rem 1rem;
  display:flex; gap:.8rem; align-items:flex-start }
.partnerico img{ width:62px; height:62px; display:block }
.partnerlv{ margin:0; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.partnercard h4{ margin:.1rem 0 0; font-family:var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:.04em }
.partnersk{ margin:0; font-size:.78rem; color:var(--muted) }
.partnerpct{ margin:.35rem 0 .1rem; font-size:1.25rem; font-weight:700; color:#3F5B56 }
.partnervol{ margin:0; font-size:.78rem }
.partnervol span{ display:block; font-size:.68rem; color:var(--muted) }
.partnernote{ margin:.4rem 0 0; font-size:.76rem; line-height:1.5; color:var(--muted) }
.partnerrules{ border:1px solid var(--line); border-left:4px solid #3F5B56; border-radius:10px;
  background:var(--panel); padding:.8rem 1rem; margin-bottom:1rem }
.partnerrules p{ margin:.25rem 0; font-size:.85rem; line-height:1.6 }

/* karta Salmo na jednom riadku aj s dlhším popisom */
.rank .meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem }
.rank .meta strong{ white-space:nowrap }
.rank .det{ line-height:1.55 }

/* ================= profily sociálnych sietí - mriežka kariet ================= */
#socGrid.socgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:16px; align-items:stretch }
#socGrid .soc{ grid-template-columns:54px minmax(0,1fr); align-items:start; height:100% }
#socGrid .soc .ic{ width:54px; height:54px; align-self:start; flex:0 0 auto }
#socGrid .soc > div{ align-self:stretch }
#socGrid .soc > *{ min-width:0 }
#socGrid .soc > div{ display:flex; flex-direction:column; min-width:0 }
#socGrid .soc h3, #socGrid .soc .handle{ overflow-wrap:anywhere; word-break:break-word }
#socGrid .soc .bio, #socGrid .soc .tiny{ overflow-wrap:anywhere }
#socGrid .soc .row{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding-top:.6rem }
#socGrid .soc .row{ gap:6px }
#socGrid .soc .row .mini{ white-space:nowrap; font-size:.66rem;
  padding:.28rem .55rem; flex:0 1 auto; min-width:0 }
@media (max-width:640px){
  #socGrid.socgrid{ grid-template-columns:1fr !important }
}

@media (min-width:641px){
  #socGrid.socgrid{ grid-template-columns:repeat(auto-fit,minmax(288px,1fr)) !important }
}

/* ================= sada ikon sociálnych sietí ================= */
#iconSet{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:12px !important; align-items:stretch }
#iconSet .cell{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.45rem; padding:.9rem .6rem }
#iconSet .cell .badge{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; line-height:0; flex:0 0 auto; border:0 }
#iconSet .cell svg{ width:30px; height:30px; display:block }
@media (max-width:760px){
  #iconSet{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important }
}

.toast:empty{ display:none !important }