:root {
--white:#FFF;
--black:#222; /* default body text */
--black-strong:#111; /* headings */
	
--brand-50: #E6F5F1; /* very light bg tint */
--brand-100:#D2EFE6;
--brand-200:#BFE5D8; /* borders / subtle accents */
--brand-300:#8FD4BF;
--brand-400:#33A883; /* secondary accent */
--brand-500:#019467; /* PRIMARY */
--brand-600:#017A56; /* hover / active */
--brand-700:#016247;
--brand-800:#014A38;
--brand-900:#0B2F26;

--gray-50: #FAFAFA;
--gray-100:#F7F7F7; /* subtle background */
--gray-200:#EEEEEE;
--gray-300:#E5E5E5; /* borders */
--gray-400:#CFCFCF;
--gray-500:#A3A3A3;
--gray-600:#777777; /* muted text */
--gray-700:#555555; /* secondary text */
--gray-800:#333333;

--warning-500:#94012E;

--filter-white:invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(104%) contrast(101%);
--filter-black:invert(0%) sepia(0%) saturate(86%) hue-rotate(154deg) brightness(51%) contrast(73%);
--filter-brand:invert(37%) sepia(85%) saturate(673%) hue-rotate(119deg) brightness(96%) contrast(99%);
}

/* uni */
html, body {height:100%}
body, h1, h2, h3, p, ul, ol, menu, li, table, td, th, form, iframe, hr, dl, dt, dd, dfn {margin:0; padding:0; -webkit-text-size-adjust:none; /* kvuli zvetsovani na mobilech */}
h1, h2, h3 {margin:0 0 1rem; font-weight:600; line-height:1.2}
h1 {margin-bottom:1.5rem; font-size:min(6vw, 225%); color:var(--black-strong)}
h1 a {display:block}
h2 {font-size:150%; color:var(--black-strong)}
h3 {font-size:125%}
img, iframe {border:0}
img {object-fit:cover; object-position:50%}
hr {display:block; height:1px; margin:1em 0; border:0; background:rgba(128,128,128,.6)}
.fc0, .fc9, .fc18, .fc {clear:both}
.fc0, .fc9, .fc18 {float:none; overflow:hidden; width:100%; font-size:0; height:0; line-height:0}
.fc9 {font-size:100%; height:1em}
.fc18 {font-size:100%; height:2em}
.jsp .h0 {height:0; overflow:hidden}
.jsp .vybal {border-bottom:1px dashed; cursor:pointer}
.h {display:none}
.jsp .jsp-block {display:block}
.counters, .print, .jsp .cc {position:absolute; top:-9999rem; left:-9999rem}
.fl {float:left}
.fr {float:right}
.tac {text-align:center}
.tar {text-align:right}
.vh {visibility:hidden}
b, .b {font-weight:600}
.cell {display:table-cell}
a {color:var(--brand-500)}
@media (hover:hover) {
a:hover {color:var(--brand-600)}
}
.gray {color:gray}

/* layout */
body {position:relative; line-height:1.5; font-family:"Poppins", sans-serif; color:var(--black); background:var(--white)}

.content-out {padding:0 clamp(1rem, 4vw, 3rem)}
.content {container-type:inline-size; max-width:120rem; margin:0 auto}

header {position:sticky; top:0; z-index:999; margin:0 auto; border-bottom:1px solid var(--gray-300); background:var(--white); transition:box-shadow .2s ease}
header.is-stuck {box-shadow:0 0 1rem rgba(0,0,0,.25)}
header.is-stuck, .sph header {border-bottom-color:transparent}
header .content {display:flex; align-items:center; flex-wrap:wrap; gap:0 1em; max-width:120rem; padding:1rem 0} 
.logo, .logo:hover {display:flex; align-items:center; gap:.5em; margin:0; font-weight:800; font-size:min(200%, 5.6vw); line-height:1.2; text-decoration:none; color:inherit}
.logo:before {content:''; display:block; width:1.875em; height:1.875em; background:url('/admin/style/snp-logo.svg') no-repeat 50% 50% / contain; filter:var(--filter-black)}
.logo h1, .logo span {display:block; margin:0; font-weight:inherit; font-size:100%; line-height:inherit; color:inherit}
.logo small {display:block; font-weight:600; font-size:62.5%; text-transform:uppercase; color:var(--brand-500)}
.box-quick {flex:0 0 100%; display:flex; gap:0 1.25em; overflow:auto hidden; scrollbar-width:thin; padding-top:1em; line-height:1.2; white-space:nowrap}
.box-quick h3 {margin:0 0 0 auto; font-weight:600; font-size:100%; line-height:inherit}
@container (width < 46rem){
.box-quick {transition:padding-top .25s ease, opacity .25s ease, font-size .25s ease}
header.is-stuck .box-quick {padding-top:0; opacity:0; font-size:0}
}
@container (width > 46rem){
.box-quick {flex:1; flex-direction:column; align-items:flex-end; margin-left:auto; padding-top:0}
.box-quick h3 {margin:0}
}

footer {color:var(--white); background:var(--black); box-shadow:0 15rem 0 var(--black), 0 30rem 0 var(--black), 0 45rem 0 var(--black), 0 60rem 0 var(--black)}
footer .content {display:flex; align-items:flex-start; flex-wrap:wrap; gap:2em; max-width:120rem; padding:2rem 0} 
footer a {color:var(--white)}
footer a:hover {color:var(--brand-100)}
footer .logo:before {filter:var(--filter-white)}
footer h3 {margin:0 0 .5rem; font-size:112.5%; color:var(--brand-500)}
footer dl > div {display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 1.5em; margin:0 0 .5em; font-size:112.5%; line-height:1.25}
footer dd {margin-left:auto; font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums}
.boxes-out {display:grid; grid-template-columns:1fr; gap:2rem clamp(1rem, 8vw, 6rem); margin:auto}
@container (width > 44rem) {.boxes-out {grid-template-columns:repeat(2, 1fr)}}
.box-opening-info {max-width:23em; margin:.75em auto 0; font-size:87.5%; text-align:center}
.box-links {flex:0 0 100%; display:flex; justify-content:center; flex-wrap:wrap; gap:0}
.box-links li {display:block}
.box-links a {display:block; padding:0 .5em}
#copyright {flex:0 0 100%; font-size:75%; line-height:1.25; text-align:center}

#clame {padding:0}
#clame .content {position:relative; display:flex; align-items:flex-end; aspect-ratio:5/1; max-width:120rem; margin:0 auto; color:var(--white); background:var(--brand-500) url('https://www.posazavi.net/admin/style/snp-content.jpg') no-repeat 50% 88% / auto 330%}
#clame .content dfn {max-width:30em; margin:1em clamp(1rem, 4vw, 3rem); font-weight:800; font-style:normal; font-size:clamp(.875rem, 3cqw, 2rem); color:inherit; text-shadow:0 0 .2em var(--black)}

#btnkat {position:sticky; bottom:-.5rem; z-index:99; display:block; margin:0 0 .5rem; padding:1rem 1rem 1.5rem; text-align:center;}
#btnkat:before {content:''; position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(.125rem); backdrop-filter:blur(.125rem); filter:blur(.125rem)}
#btnkat a {position:relative; z-index:2; display:block; width:fit-content; margin:0 auto; padding:.5em 1.5em; border:1px solid var(--brand-600); font-weight:600; font-size:clamp(1.125rem, 2vw, 1.75rem); line-height:1.25; text-decoration:none; text-transform:uppercase; color:var(--white); background:var(--brand-500)}
@media (hover:hover) {
#btnkat a:hover {background:var(--brand-600)}
}

main {}
main .content {padding:2rem 0}

#katalog {position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1.5rem 2rem; padding:0}
@container (width > 80rem) {#katalog {grid-template-columns:repeat(4,1fr)}}
@container (width > 100rem) {#katalog {grid-template-columns:repeat(5,1fr)}}
.items li {container-type:inline-size; display:block; line-height:1.4; margin:0; padding:0; text-align:center; overflow:hidden}
.items br {display:none}
.items a {position:relative; display:block; text-decoration:none; color:inherit; font-size:max(.875rem, 5cqw)}
.items span {position:relative; display:block}
.items em {position:absolute; top:.75em; right:0; padding:.25em .75em; font-style:normal; font-weight:400; font-size:75%; color:#FFF; background:#333}
.items .n {color:#0F0} /*novinka*/
.items .v {color:#0FF} /*pripravujeme*/
.items .p {color:#F00} /*prodano*/
.items .z {color:#FF0} /*zamluveno*/
.items .l {} /*hledame, aktualni poptavka */
.items .w {color:#CF0} /*stavime*/
.items img {display:block; width:100%; height:auto; aspect-ratio:4/3}
.items a:hover em {background:#111}
.items strong {display:block; padding:.25em 0 0; white-space:nowrap; font-weight:800; font-size:112.5%}
.items a:hover strong {text-decoration:underline}

section.text, aside.thumbs-out {max-width:50rem; margin:0 auto}

.info, .text p.info {border:solid var(--brand-200); border-width:1px 0; font-weight:600; padding:.5em; color:var(--brand-500); background-color:var(--gray-100); text-align:center}
.text p, .text table, .text ul {margin:0 0 1rem; font-weight:300; font-size:112.5%}
.text ul {padding:0 0 0 1.5em}
.text ul ul {margin-bottom:0; font-size:100%}
.text li {margin-bottom:1rem}
.text .opener {display:grid; font-weight:400; font-size:125%}
.text .misto {margin:0 0 1em; color:var(--black-strong); font-weight:600; font-size:137.5%; text-align:right}
.text img {max-width:100%}
.text .obr {position:relative; width:100%; margin:0 0 1rem; text-align:center; font-weight:600}
@container (width > 46em) {.text .obr {float:left; width:40%; margin:0 2em 1em 0}}
.text .obr a {position:relative; display:block; overflow:hidden}
.text .obr img {display:block; width:100%; height:auto; margin:0; aspect-ratio:4/3}
.text .obr p {clear:both; margin:0; font-size:100%}
.text .obr .nic {position:absolute; top:.75em; right:0; padding:.25em .75em; font-weight:600; line-height:1.25; color:#FFF; background:#333}
.text .obr .n {color:#000; background:#6F6}
.text .obr .v {color:#000; background:#F60}
.text .obr .z {color:#000; background:#FF6}
.text .obr .p {color:#000; background:#F66}
.text .obr .l {color:#000; background:#9FF}
.text .obr .w {color:#000; background:#CF6}
.text .obr .cena {margin-top:-.25em; padding:.75em 0 .5em; font-weight:600; color:var(--brand-800); background:var(--brand-50)}
.text .obr .cena:empty, .text .obr .p ~ .cena {display:none}

.table-out {width:100%; margin:0 0 1rem; overflow:auto hidden}
.tab {margin:0 auto; background-color:var(--gray-100); border-collapse:collapse; border:0}
.tab td {height:auto; padding:.25em .5em; line-height:1.25; white-space:nowrap; vertical-align:top}

.text p.cite {margin:2em 0 3em; padding:1em 1em 0 1.5em; border-left:.25rem double var(--brand-500)}
.text p.cite em {display:block; text-align:right}

.aktualne {text-align:right; font-size:87.5%}
.aktualne, .aktualne a {color:#999}

.galerie {overflow:hidden}
#foto {position:relative; max-height:600px; margin:0 auto 1rem}
#foto .prev, #foto .next {position:absolute; top:0; z-index:1; width:50%; height:100%}
#foto .prev {left:0}
#foto .next {right:0}
#foto b {position:absolute; top:.75rem; width:1.25em; text-align:center; font-weight:400; font-size:200%; line-height:1.25; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(.125rem); backdrop-filter:blur(.125rem); cursor:pointer}
@media (hover:hover) {
#foto b {opacity:.25}
#foto a:hover b {opacity:1}
}
#foto .prev b {left:.75rem}
#foto .next b {right:.75rem}
#foto a {display:block; width:100%; height:100%; text-decoration:none}
#foto img {display:block; width:100%; height:auto; max-height:inherit; object-fit:contain}

.thumbs {display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:0; margin:-.125rem}
.thumbs a {display:block; border:.125rem solid transparent; text-decoration:none; overflow:hidden}
.thumbs a:hover img {/*transform:scale(1.04)*/}
.thumbs br {display:none}
.thumbs img {display:block; width:100%; height:auto; aspect-ratio:4/3; /*transition:transform .4s ease*/}

#sitemap h2 {font-size:125%}
#sitemap h3 {margin:0; font-weight:600; font-size:112.5%}
#sitemap li {clear:both; margin-bottom:1em}
#sitemap li li {position:relative; min-height:70px; padding-left:102px}
#sitemap .thumbs {position:absolute; top:0; left:0; z-index:1; display:block}
#sitemap img {width:88px; height:66px}

.b-box {max-width:50rem; margin:2rem auto 0; text-align:left}
.b-box h2 {margin:0 0 .5rem; font-weight:600; font-size:125%}
.b-box li {list-style:none; margin:0 0 .5em; padding-left:1.5em; font-weight:300; font-size:112.5%; line-height:1.6}
.b-box li:before {content:''; display:inline-block; vertical-align:top; width:1.5em; height:1.6em; margin-left:-1.5em; background:url('/admin/style/snp-logo.svg') no-repeat 0 .25em / 1em 1em; filter:var(--filter-brand)}

#mailform {width:100%; height:20.25em; margin:0; padding:0}
.jsp #mailform {height:16em}
.mail {padding:1px; text-align:left; line-height:1.25}
.mail input, .mail textarea, .mail button {width:100%; margin:0; padding:.5em .75em; border:1px solid var(--gray-300); font-size:1rem; line-height:1.25; font-family:inherit; box-sizing:border-box; outline:none}
.mail textarea {height:7.5em; line-height:1.5; overflow:auto; resize:none}
.mail input:focus, .mail textarea:focus {border-color:var(--gray-400)}
.mail button {width:fit-content; margin-left:auto; padding:.5em 1.5em; border:1px solid var(--brand-600); font-weight:600; color:var(--white); background:var(--brand-500)}
.mail button:hover {background:var(--brand-600)}
.mail label {display:block; margin:0 0 .25em; font-size:75%; text-transform:uppercase; color:var(--gray-700)}
.out-inp, .out-txa {position:relative; margin:0 0 .5em} 
.out-btn {text-align:right}
.warning.warning input, .warning.warning textarea {border-color:var(--warning-500)}
.warning label {visibility:hidden}
#warning {position:absolute; top:0; left:0; z-index:1; display:none; width:100%; font-size:75%; text-transform:uppercase; color:var(--warning-500); background:var(--white)}
.message {text-align:center}
.message h2 {margin:1em 0; font-weight:600; font-size:150%}
.message h2.t {color:var(--brand-500)}
.message h2.f {color:var(--warning-500)}
.message p {margin:1em 0 0}

/* vyjimky */
.hledame .thumbs-out, .reference .thumbs-out {display:none}

@media print {
/*
body {max-width:700px; color:#000; background:none}
#luccin-box, #logo img, .noprint, .cc, #catchword, #date, .col-b, .counters {display:none}
body {margin:0; text-align:left; font-family:"Times New Roman", Times, serif}
header, #logo, #content, .content-in, .col-a, #footer {float:none; width:100%; margin:0; padding:0; border:0; color:#000; background:none}
#header {position:relative; height:auto; margin:0 0 1.5em; background:none}
#logo, .print {position:static; color:#000; text-decoration:none}
#logo span, .print {display:block}
#galerie-vypis img {margin:0; border:0}
*/
}