@charset "UTF-8";
/* ==========================================================================
BIOCEN.SK — CSS v6.0
Zdroj pravdy pre vsetko CSS. Nahrane v Shoptete: Nastavenia -> Subory.
Nacitane z HTML kodu v cez (musi byt POSLEDNE
v poli, aby !important prepisy prebili Shoptet styly).
Po kazdej zmene: nahrat znova a v zvysit ?v=N (inak drzi CDN cache).
========================================================================== */
/* ==========================================================================
HODNOTENIE OBCHODU — zlucene z hodnotenie-obchodu.css (4.8.2026)
Povodne to bol samostatny v . Kazda blokujuca poziadavka stoji
v simulacii Lighthouse ~750 ms bez ohladu na velkost (subor mal 0,9 kB),
preto je to teraz tu. Blok je ZAMERNE NA ZACIATKU suboru — povodne CSS sa
nacitavalo pred nasim, takze takto zostava poradie v kaskade nezmenene.
========================================================================== */
#hodnoceniobchodu .vote-wrap:not(.admin-response .vote-wrap),
.id--51 main .vote-wrap:not(.admin-response .vote-wrap),
.template-14.id--51 .rate-wrapper:not(.admin-response .vote-wrap) {
background-color: #cae0d6 !important;
border: 0px solid #cae0d6 !important;
border-radius: 8px !important;
}
#hodnoceniobchodu .shop-stat-all a {
background-color: #d89a63 !important;
color: #ffffff !important;
border-radius: 8px !important;
}
#hodnoceniobchodu .shop-stat-all a:hover {
background-color: #ffb374 !important;
color: #ffffff !important;
}
.stars .star.is-active:hover,
.stars .star.star-half:before,
.stars .star.star-on:before,
.icon-starHalf-before,
.icon-starOn-before,
.product-ratings .icon-starOff-before:hover,
.product-ratings .star-off:hover,
.star.star-half,
.star.star-on,
.rate-average,
.tursky-apollo .rate-wrapper.unveil-wrapper .rate-list .stars span.star-off::before {
color: #ECB911 !important;
}
/* ==========================================================================
MONTSERRAT — SELF-HOSTED
Súbory nahraté v Shoptete: Nastavenia → Súbory → Head_footer/
montserrat-latin-woff2.css (37,1 kB) — a-z, á é í ó ú ý ä ô, čísla, €
montserrat-latin-ext-woff2.css (69,0 kB) — č š ž ť ň ľ ŕ ď a zvyšok
Slovenčina potrebuje OBA, dohromady 106 kB. Sú to variabilné fonty, takže
jeden súbor pokrýva všetky rezy (overené: šírky sa menia podľa font-weight).
PREČO MAJÚ FONTY PRÍPONU .css:
Správca súborov v Shoptete odmieta .woff2 ("Typ súboru nie je podporovaný").
Obsah súborov je NEDOTKNUTÝ woff2 (podpis wOF2), len prípona je iná, aby
prešli nahrávaním. Prehliadaču to nevadí — pri fontoch sa Content-Type
nekontroluje, rozhoduje hint format('woff2') a samotné bajty. Overené na
text/css, application/javascript aj application/octet-stream: font sa
načíta a vykreslí správne, bez varovania v konzole.
Keby Shoptet niekedy .woff2 povolil, staci nahrat originaly a prepisat
tieto dve url + preload v head kode.
Prečo z vlastnej domény a nie z Google:
- rovnaký origin ako stránka → žiadne nové DNS/TLS pripojenie
- URL je naša, nemôže sa rozbiť pri zmene Google verzie (bolo v31)
- odpadli 3 požiadavky a 111 kB u tretích strán
- dá sa preloadovať, takže font je na disku ešte pred prvým vykreslením
unicode-range je prevzatý od Googlu — vďaka nemu si prehliadač stiahne
latin-ext len vtedy, keď stránka naozaj obsahuje č/š/ž/ť.
========================================================================== */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900; /* variabilná os wght */
font-display: swap;
src: url('https://www.biocen.sk/user/documents/upload/Head_footer/montserrat-latin-ext-woff2.css') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('https://www.biocen.sk/user/documents/upload/Head_footer/montserrat-latin-woff2.css') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
FALLBACK S ROVNAKÝMI METRIKAMI AKO MONTSERRAT
Kým sa Montserrat stiahne, text sa kreslí systémovým Arialom. Odmerané
rozdiely na 100px veľkosti: Montserrat je o 11,75 % ŠIRŠÍ, ascent 97 vs 91,
descent 25 vs 21. Preto sa pri výmene textu prelomili riadky inde a celá
stránka poskočila.
Tento @font-face nafúkne systémový Arial presne na metriky Montserratu,
takže fallback zaberá to isté miesto a výmena už stránkou nehýbe.
Čísla neupravuj naslepo — vychádzajú z merania cez canvas measureText.
========================================================================== */
/* Odmerané šírky reťazca na 100px (canvas measureText):
Montserrat 400/500/600/700 = 1779 / 1807 / 1839 / 1873
Arial normálny / tučný = 1617 / 1712
size-adjust = pomer týchto šírok. ascent/descent DELÍME tým istým pomerom,
pretože size-adjust ich potom prenásobí — bez toho vyjde ascent 108 miesto
97 (overené meraním). Tučný rez má vlastný blok, inak by boli nadpisy
o 3,5 % užšie. */
@font-face {
font-family: 'Montserrat Fallback';
font-weight: 400 500;
src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
size-adjust: 111.75%;
ascent-override: 86.8%;
descent-override: 22.37%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Montserrat Fallback';
font-weight: 600 700;
src: local('Arial Bold'), local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 109.42%;
ascent-override: 88.65%;
descent-override: 22.85%;
line-gap-override: 0%;
}
html,body,*{font-family:'Montserrat','Montserrat Fallback',sans-serif!important}
/* Mobil (do 767px) */
@media (max-width: 767px) {
.siteCookies__form { padding: 9px 12px 11px !important; }
.siteCookies__text { margin-bottom: 6px !important; }
.siteCookies__links { margin-bottom: 6px !important; }
.siteCookies__button,
.siteCookies__link { line-height: 30px !important; }
}
/* CTA BUTTONY */
body [data-testid="buttonAddToCart"]{background-color:#c48349!important;border-color:#c48349!important;color:#fff!important}
body [data-testid="buttonAddToCart"]:hover{background-color:#d89a63!important;border-color:#d89a63!important}
body #continue-order-button.btn-conversion,body .btn-conversion.next-step-forward,body #submit-order.btn-conversion.next-step-finish{background-color:#c48349!important;border-color:#c48349!important;color:#fff!important}
body #continue-order-button.btn-conversion:hover,body .btn-conversion.next-step-forward:hover,body #submit-order.btn-conversion.next-step-finish:hover{background-color:#d89a63!important;border-color:#d89a63!important}
/* TOGGLE KONTAKTY */
body span.toggle-contacts.btn-primary{background:#fff!important;border:2px solid #c48349!important;color:#c48349!important;cursor:pointer}
body span.toggle-contacts.btn-primary:hover{background:#c48349!important;color:#fff!important}
/* PDP — skryť ikony */
[data-testid="productDetailActionIcons"],.product-detail .link-icons{display:none!important}
/* HOMEPAGE — skryť Posledné hodnotenie */
body.type-index .latest-contribution-rating,body.type-index [data-testid="latestRating"]{display:none!important}
/* FLAGS / BADGES */
.flags .flag{font-family:'Montserrat','Montserrat Fallback',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:.3px!important;text-transform:uppercase!important;padding:5px 12px!important;border-radius:20px!important;line-height:1.3!important;border:none!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important;display:inline-block!important;width:auto!important;min-width:0!important;white-space:nowrap!important}
@media(min-width:768px){body.type-product .flags .flag{font-size:13px!important;padding:5px 14px!important}}
.flags .flag.flag-tip{background-color:#9B8EC4!important;color:#fff!important}
.flags .flag.flag-action{background-color:#D4829C!important;color:#fff!important}
.flags .flag.flag-new{background-color:#6BBCD1!important;color:#fff!important}
.flags .flag.flag-custom1{background-color:#E8956A!important;color:#fff!important}
/* PDP discount kruh */
body.type-product .flags.flags-extra{bottom:20px!important;left:auto!important;right:15px!important;height:auto!important}
body.type-product .flag.flag-discount{background-color:#D4829C!important;color:#fff!important;border-radius:50%!important;width:90px!important;height:90px!important;min-width:90px!important;min-height:90px!important;max-width:90px!important;max-height:90px!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;white-space:normal!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;border:none!important;overflow:hidden!important;box-sizing:border-box!important}
body.type-product .flag.flag-discount .price-standard,body.type-product .flag.flag-discount .price-save{color:#fff!important;font-size:13px!important;display:block!important;text-align:center!important}
body.type-product .flag.flag-discount .price-standard span{color:#fff!important;text-decoration:line-through!important}
/* FOOTER */
footer,#footer,.site-footer{--color-primary:#003B3D;--primary:#003B3D;--brand-primary:#003B3D;--button-bg:#003B3D;--button-primary-bg:#003B3D;--color-primary-hover:#004B4D;--primary-hover:#004B4D;--button-hover-bg:#004B4D;background-color:#CAE0D6!important}
footer a,#footer a,.site-footer a{color:#003B3D}
footer a:hover,#footer a:hover,.site-footer a:hover{color:#004B4D}
footer h4 span,#footer h4 span,.site-footer h4 span{color:#003B3D!important}
body footer .btn,body footer button,body #footer .btn,body #footer button,body footer [class*="btn--primary"],body #footer [class*="btn--primary"]{background-color:#003B3D!important;border-color:#003B3D!important;color:#FBFBFB!important}
body footer .btn:hover,body footer button:hover,body #footer .btn:hover,body #footer button:hover{background-color:#004B4D!important;border-color:#004B4D!important}
.custom-footer__onlinePayments .biocen-pay-logos{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;align-items:center;margin:8px 0 0}
.custom-footer__onlinePayments .biocen-pay-logos img{width:auto;object-fit:contain}
.custom-footer__onlinePayments p.text-center{margin-bottom:0}
/* Product images */
body .p .image img,body .p .p-image img,body .products .image img,body .products .p-image img,body .product .image img,body .product .p-image img,body .p-main-image img,body .p-main-image picture img,body .p-thumbnails a img,body .p-thumbnails-wrapper a img,body .gallery-cell img,body .swiper-slide img{display:block!important;border-radius:20px!important;margin:0 auto!important}
/* ANNOUNCEMENT BAR */
.site-msg.information{padding:8px 0!important}
.site-msg.information .text{font-size:16px!important;letter-spacing:.4px!important;text-transform:none!important;font-weight:500!important;line-height:1.3!important}
@media(max-width:640px){.site-msg.information{padding:6px 0!important}.site-msg.information .text{font-size:12px!important;letter-spacing:.2px!important}}
/* MOBILE — announcement bar nad bannerom (nie cez neho) */
@media(max-width:767px){
.site-msg.information{position:relative!important;top:auto!important;z-index:1!important}
.banner,.banners-row,.main-banner,.top-banner,.homepage-banner,.banner-homepage,.main-slider,.swiper-container,[class*="banner-top"],[class*="top-banner"],[class*="main-banner"]{margin-top:0!important;padding-top:0!important}
main,#content,.content-wrapper,.page-wrapper{margin-top:0!important}
}
/* PDP — USP benefit banner: menej whitespace */
/* desktop + all: 40px -> 16px, picture bez vertikalneho marginu */
body.type-product .benefit-banners-full-width .benefitBanner.position--benefitProduct{margin:16px 0!important}
body.type-product .benefit-banners-full-width .benefitBanner__picture{margin:0 16px!important}
/* mobil: este tesnejsie */
@media(max-width:767px){
body.type-product .benefit-banners-full-width .benefitBanner.position--benefitProduct{margin:8px 0!important}
}
/* USP BANNER V PÄTIČKE (#bcu2) — presunuté z footer kódu */
#bcu2{line-height:0;padding:0 10px 10px}
#bcu2 img{display:block;width:100%;height:auto;aspect-ratio:3200/386}
@media(max-width:767px){#bcu2 img{aspect-ratio:1200/780}}
body.ordering-process #bcu2{padding:16px 0 24px}
/* === ZÁKAZNÍCKA LINKA === */
:root{--bc-hl-c:#003B3D;--bc-hl-c-h:#004B4D;--bc-hl-mut:#5C7674;--bc-hl-bg:#CAE0D6}
/* fotka v kruhu — spoločné pre desktop, mobil aj pätičku */
.bc-hl-ph{flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--bc-hl-bg);display:inline-flex;align-items:center;justify-content:center;line-height:0}
.bc-hl-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%;display:block}
.bc-hl-ph--fallback svg{width:52%;height:52%;color:var(--bc-hl-c)}
/* --- DESKTOP (≥768px) — vzor BrainMarket --- */
a.bc-hl-desk{display:none}
@media(min-width:768px){
#header .navigation-tools{display:flex!important;align-items:center;min-height:52px}
a.bc-hl-desk{display:inline-flex!important;align-items:center;gap:10px;text-decoration:none!important;color:inherit}
.bc-hl-ph--desk{width:46px;height:46px}
.bc-hl-desk__txt{display:block;line-height:1.2}
.bc-hl-desk__num{display:block;font-size:19px;font-weight:700;letter-spacing:.2px;white-space:nowrap;color:var(--bc-hl-c)}
.bc-hl-desk__hrs{display:block;margin-top:2px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--bc-hl-mut)}
a.bc-hl-desk:hover .bc-hl-desk__num{color:var(--bc-hl-c-h);text-decoration:underline}
}
@media(min-width:768px) and (max-width:991px){
.bc-hl-ph--desk{width:40px;height:40px}
.bc-hl-desk__num{font-size:16px}
.bc-hl-desk__hrs{font-size:11.5px}
}
/* --- MOBIL (≤767px) — vzor Andos --- */
.bc-hl-btn,.bc-hl-pop{display:none}
@media(max-width:767px){
#header .header-top{position:relative} /* kotva pre bublinu — Shoptet to má tiež, toto je len pojistka */
.bc-hl-btn{display:flex;align-items:center;justify-content:center;width:50px;height:60px;padding:0;margin:0;border:0;background:none;color:#161616;cursor:pointer}
.bc-hl-btn svg{width:23px;height:23px}
.bc-hl-btn[aria-expanded="true"]{color:var(--bc-hl-c)}
.bc-hl-pop{display:block;position:absolute;top:100%;left:8px;right:8px;z-index:1002;margin-top:9px;
padding:14px 16px 15px;background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18);
opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.bc-hl-pop[hidden]{display:none}
.bc-hl-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.bc-hl-pop::before{content:"";position:absolute;top:-6px;left:var(--bc-caret,70%);width:16px;height:16px;background:#fff;border-radius:3px;transform:translateX(-50%) rotate(45deg)}
.bc-hl-pop__ttl{margin:0 0 10px!important;padding-right:26px;font-size:15px;font-weight:700;line-height:1.25;color:#161616}
.bc-hl-pop__row{display:flex;align-items:center;gap:12px}
.bc-hl-ph--pop{width:52px;height:52px}
.bc-hl-pop__num{display:block;font-size:19px;font-weight:700;line-height:1.2;color:var(--bc-hl-c)!important;text-decoration:none!important}
.bc-hl-pop__hrs{display:block;margin-top:1px;font-size:12.5px;color:var(--bc-hl-mut)}
.bc-hl-pop__mail{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--bc-hl-c)!important;text-decoration:none!important}
.bc-hl-pop__close{position:absolute;top:5px;right:5px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:#8A8A8A;font-size:22px;line-height:1;cursor:pointer}
.bc-hl-pop__close:hover{background:#F2F2F2}
}
/* veľmi úzke displeje — aby sa ikony zmestili do riadku */
@media(max-width:374px){
#header .navigation-buttons>*{width:42px!important}
#header .site-name img{max-width:104px!important}
}
/* --- PÄTIČKA — fotka + dostupnosť --- */
.custom-footer__contact .contact-box.bc-hl-fbox{display:flex;align-items:flex-start;gap:14px}
.custom-footer__contact .contact-box.bc-hl-fbox>ul{flex:1 1 auto;min-width:0;margin-top:0}
.bc-hl-ph--foot{width:64px;height:64px;margin-top:4px;background:#fff}
li.bc-hl-hours{font-size:13px!important;font-weight:500!important;color:#3F5C5A!important;line-height:1.4!important}
/* ==========================================================================
COOKIE MODAL — puvodne biocen-cookie-modal.css (zlucene 3.8.2026)
Patri k biocen-cookie-modal.js. Musi zostat na KONCI suboru.
========================================================================== */
/* ---------- 1. zámok scrollu pod modálom ---------- */
html.bc-cc-lock,
html.bc-cc-lock body {
overflow: hidden !important;
overscroll-behavior: none !important;
}
/* Shoptet modál "Nastavenia cookies" (colorbox) musí byť NAD prekrytím */
html.bc-cc-lock #cboxOverlay,
html.bc-cc-lock #colorbox {
z-index: 2147483040 !important;
}
/* Okno nastavení je vyššie ako mobilná obrazovka (~1100 px) a colorbox sa
spolieha na scroll dokumentu — ten je ale zamknutý, takže sa k tlačidlám
"Potvrdiť moje voľby" / "Všetko vypnuté" nedalo dostať. Preto z #colorbox
robíme samostatný scrollovateľný kontejner na výšku obrazovky.
margin:auto na wrapperi = vystredené, keď sa vojde, a nikdy neodrezané.
POZOR na .cookies-visible: #colorbox je v DOM stále, len s inline
display:none. Bez tejto triedy by display:flex!important to none prebilo
a nad stránkou by visela neviditeľná vrstva so z-indexom 2147483040, ktorá
zhltne všetky kliky. Triedu .cookies-visible pridáva Shoptet pri otvorení
okna nastavení a pri zatvorení ju odoberá. */
html.bc-cc-lock.cookies-visible #colorbox {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
display: flex !important;
padding: 16px 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Geometriu okna si držíme sami. ColorBox si ju najprv nameria (inline
9999px) a potom ~675 ms animuje šírku aj pozíciu — bez tohto zafixovania
sa okno po otvorení viditeľne posúva a mení veľkosť. */
html.bc-cc-lock.cookies-visible #cboxWrapper {
position: relative !important;
top: auto !important;
left: auto !important;
margin: auto !important;
width: calc(100% - 24px) !important;
max-width: 700px !important;
height: auto !important;
}
html.bc-cc-lock.cookies-visible #cboxContent,
html.bc-cc-lock.cookies-visible #cboxLoadedContent,
html.bc-cc-lock.cookies-visible .colorbox-html-content {
width: auto !important;
height: auto !important;
max-height: none !important;
}
/* Plynulé otvorenie: kým ColorBox nedoplní obsah, okno je skryté — inak je
~300 ms na obrazovke len samotné biele tlačidlo "zavrieť", ktoré sa hýbe.
Triedu bc-cc-cbox-loading nasadzuje a odoberá biocen-cookie-modal.js. */
#cboxWrapper {
transition: opacity .22s ease;
}
html.bc-cc-cbox-loading #cboxWrapper {
opacity: 0 !important;
}
/* pôvodná lišta – skrytá, v DOM zostáva ako príznak "súhlas ešte nebol daný" */
.siteCookies.js-siteCookies.bc-cc-source {
display: none !important;
}
/* ---------- 1b. potlačenie bliknutia natívnej lišty ----------
Natívna lišta sa vykreslí hneď pri parsovaní HTML, náš skript ju presúva až
po ňom → bez tohto ju vidno bliknúť. Triedu bc-cc-pending nasadzuje inline
skript v ; modál ju po zložení odstráni a lištu už drží .bc-cc-source.
Keby sa modál vôbec nenačítal, ten istý inline skript triedu po 2,5 s zmaže
a zobrazí sa pôvodná lišta — návštevník nikdy nezostane bez voľby. */
html.bc-cc-pending .siteCookies.js-siteCookies {
visibility: hidden !important;
}
/* ---------- 2. prekrytie = jemné začiernenie webu ---------- */
.bc-cc-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483030;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(0, 34, 35, .60);
-webkit-backdrop-filter: blur(3px) saturate(115%);
backdrop-filter: blur(3px) saturate(115%);
opacity: 0;
animation: bcCcFade .30s ease forwards;
}
.bc-cc-overlay.bc-cc-closing {
animation: bcCcFadeOut .22s ease forwards;
pointer-events: none;
}
/* ---------- 3. biela karta ----------
!important na padding/margin/line-height je tu zámerne: prebíja staré
pravidlá pre .siteCookies__* v inline CSS v aj v šablóne. */
.bc-cc-overlay .siteCookies__form {
display: block !important;
position: relative;
box-sizing: border-box; /* nezavisime na globalnom border-box zo Shoptetu */
width: 100% !important;
max-width: 470px !important;
margin: auto !important;
padding: 32px 32px 26px !important;
background: #fff;
border: 0;
border-radius: 20px;
box-shadow: 0 30px 70px rgba(0, 29, 30, .30), 0 2px 8px rgba(0, 29, 30, .10);
text-align: center;
font-family: Montserrat, 'Montserrat Fallback', sans-serif;
opacity: 0;
transform: translateY(16px) scale(.97);
animation: bcCcPop .42s cubic-bezier(.2, .9, .25, 1) .10s forwards;
}
.bc-cc-overlay .siteCookies__form:focus {
outline: none;
}
/* ---------- 4. ikona + titulok ---------- */
.bc-cc-overlay .bc-cc__icon {
width: 58px;
height: 58px;
margin: 0 auto 16px !important;
border-radius: 50%;
background: #CAE0D6;
display: flex;
align-items: center;
justify-content: center;
font-size: 29px;
line-height: 1 !important;
box-shadow: 0 0 0 8px rgba(202, 224, 214, .35);
}
.bc-cc-overlay .bc-cc__title {
margin: 0 0 10px !important;
padding: 0 !important;
font-family: inherit;
font-size: 22px;
line-height: 1.25 !important;
font-weight: 700;
color: #003B3D;
letter-spacing: -.01em;
text-align: center;
}
/* ---------- 5. texty ---------- */
.bc-cc-overlay .siteCookies__content {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
flex: none;
text-align: center;
}
.bc-cc-overlay .siteCookies__text {
margin: 0 0 6px !important;
padding: 0 !important;
font-size: 14px;
line-height: 1.62 !important;
color: #5C6B68;
text-align: center;
}
.bc-cc-overlay .siteCookies__text a {
color: #003B3D;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.bc-cc-overlay .bc-cc__benefit {
margin: 0 0 22px !important;
padding: 0 !important;
font-size: 13px;
line-height: 1.55 !important;
color: #8A9895;
}
/* pôvodný obal odkazu "Nastavenie" nepotrebujeme (tlačidlo presúvame) */
.bc-cc-overlay .siteCookies__links {
display: none !important;
}
/* ---------- 6. tlačidlá ---------- */
.bc-cc-overlay .siteCookies__buttonWrap {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
flex: none;
}
/* primárne CTA – Súhlasím */
.bc-cc-overlay .siteCookies__button.js-cookiesConsentSubmit[value="all"] {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-width: 0;
min-height: 56px !important;
height: auto !important;
margin: 0 0 10px !important;
padding: 15px 22px !important;
background: #C48349;
color: #fff;
border: 0;
border-radius: 12px;
font-family: inherit;
/* 19px NEZNIŽOVAŤ: biela na #C48349 má kontrast 3,14:1, čo WCAG uznáva len
pri veľkom texte (≥18,66px pri bold). Pri 16px to Lighthouse hlási ako
nedostatočný kontrast. Alternatíva by bola stmaviť brandovú farbu. */
font-size: 19px;
font-weight: 700;
line-height: 1.2 !important;
letter-spacing: .005em;
text-transform: none;
cursor: pointer;
box-shadow: 0 10px 22px rgba(196, 131, 73, .34);
transition: background .18s ease, transform .15s ease, box-shadow .2s ease;
}
.bc-cc-overlay .siteCookies__button.js-cookiesConsentSubmit[value="all"]:hover {
background: #B3733C;
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(196, 131, 73, .40);
}
.bc-cc-overlay .siteCookies__button.js-cookiesConsentSubmit[value="all"]:active {
transform: translateY(0);
box-shadow: 0 6px 14px rgba(196, 131, 73, .30);
}
/* sekundárny riadok – Odmietnuť všetko | Nastavenia */
.bc-cc-overlay .bc-cc__row {
display: flex !important;
gap: 8px;
width: 100%;
margin: 0 0 14px !important;
}
.bc-cc-overlay .bc-cc__ghost,
.bc-cc-overlay .bc-cc__row .siteCookies__link {
flex: 1 1 0;
display: flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 0;
min-height: 46px !important;
height: auto !important;
margin: 0 !important;
padding: 12px 10px !important;
background: #fff;
color: #4B5A57;
border: 1.5px solid #E3E9E7;
border-radius: 12px;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
line-height: 1.2 !important;
text-align: center;
text-decoration: none;
text-transform: none;
cursor: pointer;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bc-cc-overlay .bc-cc__ghost:hover,
.bc-cc-overlay .bc-cc__row .siteCookies__link:hover {
background: #F6FAF9;
border-color: #003B3D;
color: #003B3D;
text-decoration: none;
}
/* "Pokračovať bez personalizácie" — najmenej výrazná voľba: iba malý
podčiarknutý text, žiadne tlačidlo, rovnako na mobile aj desktope */
.bc-cc-overlay .bc-cc__decline {
display: inline-block;
width: auto !important;
max-width: 100%;
min-height: 0 !important;
height: auto !important;
margin: 4px auto 0 !important;
padding: 6px 4px !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
font-family: inherit;
font-size: 11.5px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
/* #6B7876 = kontrast 4,59:1 na bielej. Svetlejšie odtiene (napr. #A8B2B0
s 2,17:1) Lighthouse hlási ako nedostatočný kontrast. Nenápadnosť drží
veľkosť 11,5px a podčiarknutie, nie farba. */
color: #6B7876 !important;
text-decoration: underline !important;
text-underline-offset: 2px;
text-transform: none !important;
cursor: pointer;
}
.bc-cc-overlay .bc-cc__decline:hover {
color: #5C6B68 !important;
}
.bc-cc-overlay .bc-cc__note {
margin: 0 !important;
padding: 0 !important;
font-size: 11.5px;
line-height: 1.5 !important;
color: #A3AFAC;
}
.bc-cc-overlay button:focus-visible {
outline: 3px solid rgba(0, 59, 61, .35);
outline-offset: 2px;
}
/* ---------- 7. mobil ---------- */
@media (max-width: 767px) {
.bc-cc-overlay {
padding: 16px 14px;
}
.bc-cc-overlay .siteCookies__form {
max-width: 430px !important;
padding: 26px 20px 22px !important;
border-radius: 18px;
}
.bc-cc-overlay .bc-cc__icon {
width: 52px;
height: 52px;
margin-bottom: 14px !important;
font-size: 26px;
}
.bc-cc-overlay .bc-cc__title {
font-size: 19.5px;
}
.bc-cc-overlay .siteCookies__text {
font-size: 13.5px;
}
.bc-cc-overlay .siteCookies__button.js-cookiesConsentSubmit[value="all"] {
min-height: 54px !important;
font-size: 19px; /* nezmenšovať — dôvod pri základnom pravidle */
}
.bc-cc-overlay .bc-cc__row {
gap: 7px;
}
.bc-cc-overlay .bc-cc__ghost,
.bc-cc-overlay .bc-cc__row .siteCookies__link {
padding: 12px 6px !important;
font-size: 12.5px;
}
}
/* nízke displeje / mobil na ležato — karta zostáva v strede, len kompaktnejšia
(pri veľmi vysokom obsahu sa overlay scrolluje, margin:auto zabráni odrezaniu) */
@media (max-height: 560px) {
.bc-cc-overlay .siteCookies__form {
padding: 20px 20px 18px !important;
}
.bc-cc-overlay .bc-cc__icon {
width: 42px;
height: 42px;
margin-bottom: 10px !important;
font-size: 21px;
box-shadow: none;
}
.bc-cc-overlay .bc-cc__title {
font-size: 18px;
}
.bc-cc-overlay .bc-cc__benefit {
margin-bottom: 16px !important;
}
}
/* ---------- 8. animácie ---------- */
@keyframes bcCcFade {
to { opacity: 1; }
}
@keyframes bcCcFadeOut {
to { opacity: 0; }
}
@keyframes bcCcPop {
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.bc-cc-overlay,
.bc-cc-overlay .siteCookies__form {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* okno nastavení sa odkryje bez prechodu (skrytie počas načítania zostáva) */
#cboxWrapper {
transition: none !important;
}
}
/* ---------- 9. doladenie natívneho modálu "Nastavenia cookies" ---------- */
.cookiesSetting__form {
font-family: Montserrat, 'Montserrat Fallback', sans-serif;
}
.cookiesSetting__title {
color: #003B3D !important;
font-weight: 700 !important;
}
.cookiesSetting__button.cookiesSetting__button--green,
.cookiesSetting__button.js-cookieAccept {
background: #C48349 !important;
border-color: #C48349 !important;
color: #fff !important;
border-radius: 10px !important;
font-weight: 700 !important;
}
.cookiesSetting__button.cookiesSetting__button--green:hover,
.cookiesSetting__button.js-cookieAccept:hover {
background: #B3733C !important;
border-color: #B3733C !important;
}
.cookiesSetting__button:not(.cookiesSetting__button--green) {
border-radius: 10px !important;
}