/* FITBOY – kritické CSS proti poskakování stránky (CLS) + drobné úpravy vzhledu. NÁVRH, nenasazeno.
 * Verze 2 (26. 9. 2026): návrh z 24. 9. + ověřené úpravy (detail produktu, cookie lišta, pozadí Newsletteru)
 * + opravy tří slabin (pojistka rezerv, pruh dopravy na 360 px, odkaz „Zobrazit celý popis“ v kategorii)
 * + text cookie lišty na mobilu systémovým písmem (jinak se po načtení Geologicy přeléval).
 * Patří k tomu dvě změny v Záhlaví: řez 700 v Kunešově odkazu na Google Fonts a řádek se skriptem detailu
 * hned za odkazem na tento soubor (viz zahlavi-zapati-radky.txt).
 * Patří do Záhlaví JEDNÍM řádkem, úplně na konec (za Kunešovy řádky), aby platilo už při prvním vykreslení
 * a přebilo Kunešův pkUpravy.css:
 *   <link rel="stylesheet" href="/user/documents/upload/fitboy-critical.css?v2">
 * Pravidla pro podkategorie, karusel a pás značek jsou kopie toho, co dnes vkládají fitboy-category.js /
 * fitboy-homepage.js / fitboy-heureka.js až po načtení stránky, jen navázaná na třídy šablony (type-category,
 * type-index). Skripty zůstávají beze změny – jejich vlastní <style> se jen přidá navrch (stejná pravidla).
 * Když se v těchto skriptech změní vzhled, je potřeba upravit i tento soubor (test to pozná). */

/* ---------- pojistka pro rezervovaná místa ----------
 * Rezerva = prázdné místo pro blok, který skript vloží až po vykreslení. Zmizí sama, jakmile skript blok vloží.
 * Kdyby skript nedoběhl vůbec, rezerva se po 10 s sama zavře (a skrytá tlačítka se ukážou).
 * Odpočet NEběží od začátku načítání (dřív 5 s), ale až od chvíle, kdy prohlížeč dočte HTML k našim skriptům
 * v Zápatí (nebo k prvku #screen-reader-announcer hned za nimi). Do té doby skripty běžet ani nemohou.
 * Na pomalém připojení se tak rezerva nezavře dřív, než mohl skript doběhnout – dřív to dělalo dvojí poskočení
 * (rezerva zmizela a hned nato skript blok vložil). */
@keyframes fbcrit-off{to{height:0;margin:0;display:none}}
@keyframes fbcrit-on{to{visibility:visible}}
body{--fbcrit-run:paused}
body:has(script[src*="/upload/fitboy-"],#screen-reader-announcer){--fbcrit-run:running}

/* ---------- všechny stránky, mobil: pruh „DOPRAVA ZDARMA…“ ----------
 * V 16px se po načtení písma Geologica zalomí na 2 řádky (36 → 56 px) a posune celou stránku o 20 px.
 * 13px se vejde na jeden řádek od 375 px (iPhone). Český text potřebuje v Geologice 13px 311 px,
 * na 360 px je místo jen 308 px → do 374 px 12px (vejde se od 340 px, slovenský od 330 px).
 * Pod 340 px se nevejde ani 12px: pruh má rovnou výšku dvou řádků, aby po načtení písma nevyrostl. */
@media (max-width:767px){.site-msg.information{font-size:13px!important;letter-spacing:-.1px;padding-left:6px!important;padding-right:26px!important}}
@media (max-width:374px){.site-msg.information{font-size:12px!important}}
@media (max-width:339px){.site-msg.information{min-height:56px}}

/* ---------- všechny stránky, mobil: drobečková navigace na jeden řádek ----------
 * Po načtení ikonového písma (domeček) se „Domů / Sušené a lyofilizované ovoce / Sušené ovoce“ zalomí
 * ze 2 na 3 řádky (80 → 110 px) a posune celou stránku. Jeden posuvný řádek = pevná výška a o ~50 px
 * víc místa pro produkty. Na počítači beze změny. */
@media (max-width:767px){
.breadcrumbs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
.breadcrumbs::-webkit-scrollbar{display:none}
.breadcrumbs>span{flex:0 0 auto}
}

/* ---------- kategorie, všechny šířky: místo pro odkaz „Zobrazit celý popis“ ----------
 * Kunešův pkUpravy.js po načtení stránky vloží pod zkrácený popis kategorie odkaz „Zobrazit celý popis“,
 * ale jen když je popis delší než 68 px. Odkaz zabere 38 px a posune podkategorie i produkty dolů
 * (na mobilu CLS 0,03–0,2). CSS neumí změřit délku textu, ale umí poznat, že text přetéká: animace
 * navázaná na posuvník popisu (animation-timeline) se použije, jen když je co posouvat. Popis pak dostane
 * spodní okraj 68 px místo 30 px – přesně tolik, kolik potom zabere odkaz. Jakmile skript odkaz vloží,
 * pravidlo přestane platit. Prohlížeče, které to neumí (starší Safari, Firefox), zůstanou u dnešního chování. */
@keyframes fbcrit-perex{from,to{margin-bottom:68px}}
@supports (animation-timeline:scroll()){
.type-category .category-top:not(:has(>.category-perex__more))>.category-perex{animation:fbcrit-perex linear both;animation-timeline:scroll(self)}
}

/* ---------- kategorie, mobil: podkategorie v pásu, filtry schované ---------- */
@media (max-width:767px){
.type-category .category-top ul.subcategories{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;overflow-y:hidden;gap:10px;margin:6px -10px 14px!important;padding:2px 10px 6px!important;scrollbar-width:none}
.type-category .category-top ul.subcategories::-webkit-scrollbar{display:none}
.type-category .category-top ul.subcategories:before,.type-category .category-top ul.subcategories:after{display:none!important;content:none!important}
.type-category .category-top ul.subcategories>li{flex:0 0 92px!important;width:92px!important;max-width:92px!important;min-height:0!important;padding:0!important;margin:0!important;float:none!important}
.type-category .category-top ul.subcategories>li>a{display:block!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;text-align:center;text-decoration:none!important;color:#333}
.type-category .category-top ul.subcategories .image{display:block!important;width:92px!important;height:66px!important;margin:0 0 6px!important;padding:0!important;border-radius:10px;overflow:hidden;background:#f5f2e9}
.type-category .category-top ul.subcategories .image img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.type-category .category-top ul.subcategories .text{display:block!important;padding:0!important;margin:0!important;font-size:13px!important;line-height:1.25!important;white-space:normal!important;word-break:break-word}
.type-category #filters-wrapper:not(.fbc-open) .filters-wrapper{display:none!important}
/* místo pro tlačítko „Filtrovat“, než ho skript vloží */
.type-category #filters-wrapper:not(:has(.fbc-toggle)):before{content:"";display:block;height:47px;margin:0 0 10px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
}

/* ---------- úvod, mobil: karusel bannerů, rezervy pro vkládané bloky ---------- */
@media (max-width:767px){
.type-index #content .banners-row:not(.footer-banners){display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-left:0!important;margin-right:0!important;padding:0!important;gap:10px}
.type-index #content .banners-row:not(.footer-banners)::-webkit-scrollbar{display:none}
.type-index #content .banners-row:not(.footer-banners)>.col-sm-4,.type-index #content .banners-row:not(.footer-banners) .next-to-carousel-banners{display:contents!important}
.type-index #content .banners-row:not(.footer-banners)>.col-sm-8,.type-index #content .banners-row:not(.footer-banners) .banner-wrapper{flex:0 0 100%;width:100%!important;max-width:100%!important;padding:0!important;margin:0!important}
.type-index #content .banners-row:not(.footer-banners) .carousel-inner{min-height:0!important}
.type-index #content .banners-row:not(.footer-banners) img{display:block;width:100%;height:auto;border-radius:8px}
/* Heureka pruh nahoře (fitboy-heureka.js, order -4): 53 px + 12 px */
.type-index #content:not(:has(.fbhr--home)):before{content:"";display:block;order:-4;height:65px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
/* tečky karuselu (36 px) + Oblíbené kategorie + Nejprodávanější (669 px) */
.type-index #content:not(:has(.fbhome--cats)):after{content:"";display:block;order:-2;height:705px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
.type-index #content .footer-banners{display:flex!important;flex-wrap:nowrap!important;gap:10px;overflow-x:auto;scrollbar-width:none;margin:2px -10px 24px!important;padding:2px 10px 6px!important}
.type-index #content .footer-banners>.footer-banner{flex:0 0 108px!important;width:108px!important;max-width:108px!important;margin:0!important;padding:0!important}
.type-index #content .footer-banners .footer-banner>a{display:flex!important;align-items:center;justify-content:center;height:68px;padding:8px;border:1px solid #ece6d8;border-radius:10px;background:#fff}
.type-index #content .footer-banners .footer-banner img{max-width:100%!important;max-height:46px!important;width:auto!important;height:auto!important}
.type-index #content .footer-banners .footer-banner:last-child a{background:#f5f2e9;border-color:#e6dfcd;color:#3d2210!important;font-size:13px;font-weight:600;line-height:1.2;text-align:center}
}
/* ---------- úvod, počítač: rezerva pro Oblíbené kategorie + Nejprodávanější, pás značek ---------- */
@media (min-width:768px){
.type-index #content:not(:has(.fbhome--cats)):after{content:"";display:block;order:-2;height:894px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
.type-index #content .footer-banners{display:flex!important;flex-wrap:nowrap!important;gap:10px;overflow-x:auto;margin:6px 0 30px!important;padding:2px 0 6px!important}
.type-index #content .footer-banners>.footer-banner{flex:1 0 132px!important;width:auto!important;max-width:200px!important;margin:0!important;padding:0!important}
.type-index #content .footer-banners .footer-banner>a{display:flex!important;align-items:center;justify-content:center;height:80px;padding:10px;border:1px solid #ece6d8;border-radius:10px;background:#fff}
.type-index #content .footer-banners .footer-banner img{max-width:100%!important;max-height:58px!important;width:auto!important;height:auto!important}
.type-index #content .footer-banners .footer-banner:last-child a{background:#f5f2e9;border-color:#e6dfcd;color:#3d2210!important;font-size:14px;font-weight:600;line-height:1.2;text-align:center}
}

/* ---------- detail produktu: blok s názvem, cenou a košíkem ----------
 * Konečný vzhled se nemění. Pravidla jen drží místo pro věci, které skripty vkládají až po vykreslení:
 *  a) Šablona má v HTML nejdřív pravý sloupec (název, cena) a teprve za ním fotku. Když prohlížeč
 *     vykreslí stránku dřív, než HTML s fotkou dorazí, na počítači se pravý sloupec na chvíli roztáhne
 *     přes celou šířku a pak skočí doprava. Na mobilu stojí nahoře místo fotky a pak spadne o 600–900 px dolů.
 *     Počítač: sloupec rovnou na své místo vpravo.
 *     Mobil a tablet na výšku (do 991 px): sloupec počká, až je v HTML celý blok s fotkou včetně náhledů
 *     (tj. až za ním začne další část stránky).
 *     Jakmile je načtená patička stránky (#footer), pravidla přestanou platit, takže sloupec se ukáže vždy.
 *  b) Řádek s hvězdičkami pod názvem (fitboy-product-detail.js), jen u produktů s hodnocením:
 *     počítač 23 px, mobil 37 px.
 *  c) Box s hodnocením z Heureky pod dostupností (fitboy-heureka.js): 49 px + mezera 12 px.
 *  d) Tlačítka Tisk / Zeptat se / Hlídat / Sdílet se ukážou až spolu s tlačítkem „Přidat do oblíbených“.
 *     Doplněk dkLab ho vkládá před ně, takže by jinak uskočila o 204 px doprava.
 * Pojistka viz začátek souboru (10 s od dočtení HTML k našim skriptům). Rezerva se zavírá úplně (display:none),
 * jinak by v šedém boxu zůstalo 10 px navíc (mezera mezi řádky boxu). */
body:not(:has(#footer)) .p-detail-inner:not(:has(>.p-image-wrapper))>.p-data-wrapper{display:none}
@media (max-width:991px){body:not(:has(#footer)) .p-detail-inner:not(:has(+ *))>.p-data-wrapper{display:none}}
@media (min-width:1200px){body:not(:has(#footer)) .p-detail-inner:not(:has(>.p-image-wrapper))>.p-data-wrapper{display:flex;flex-grow:0;margin-left:50%}}
@media (min-width:992px){body:not(:has(#footer)) .wide .p-detail-inner:not(:has(>.p-image-wrapper))>.p-data-wrapper{display:flex;flex-grow:0;margin-left:50%}}
.p-detail-inner-header:has(.stars-wrapper .star-on):not(:has(.fbp-rating))::after{content:"";display:block;height:23px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
.p-detail-inner-header-mobile:has(.stars-wrapper .star-on):not(:has(.fbp-rating))::after{content:"";display:block;height:37px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
#product-detail-form .p-to-cart-block:has(>.availability-wrapper):not(:has(.fbhr--detail))::after{content:"";flex:0 0 100%;height:49px;margin-top:12px;animation:fbcrit-off 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}
.p-data-wrapper:not(:has(#dkLabFavouriteDiv)) .social-buttons-wrapper{visibility:hidden;animation:fbcrit-on 0s 10s forwards;animation-play-state:var(--fbcrit-run,paused)}

/* ---------- cookie lišta (Shoptet .siteCookies) ----------
 * Nic se neskrývá ani nepřidává: stejný text s odkazem „zde“, tlačítka „Nastavení“ a „Souhlasím“.
 * POČÍTAČ (od 768 px)
 * 1) Poskočení o 22 px chvíli po načtení: skript Klaviya (vyskakovací formuláře) si dodatečně
 *    načte písmo Geologica i v tučném řezu 700. Tlačítko „Souhlasím“ se tím o 3 px rozšíří,
 *    sloupec s textem o 3 px zúží a český text se zalomí ze 2 na 3 řádky. Lišta je přichycená
 *    ke spodnímu okraji okna, takže vyroste nahoru. Řešení: text má místo na 3 řádky rovnou.
 *    Navíc mezera mezi textem a tlačítkem 16 px místo 30 px: český text se tak vejde na 2 řádky se
 *    starým i novým písmem (sloupec 492 px, hranice je 479–481 px) a slovo „zde.“ už nepřeskakuje
 *    na třetí řádek. Místo na třetí řádek zůstává jako pojistka (lišta 178 px na CZ i SK).
 * 2) Po posunutí stránky Shoptet lištu roztáhne z karty 670 px na celou šířku okna a při návratu
 *    nahoru ji zase zúží (animace 0,4 s). Google to počítá jako poskakování, ~0,05 za každý směr.
 *    Řešení: lišta zůstane i po posunutí kartou 670 px. */
@media (min-width:768px){
.siteCookies__text{min-height:66px;margin-right:16px}
.siteCookies--bottom.siteCookies--scrolled{left:50%;margin-left:-335px;width:670px;background-color:transparent;box-shadow:none}
.siteCookies--bottom.siteCookies--scrolled .siteCookies__form{box-shadow:0 0 30px rgba(27,25,57,.5)}
}
/* MOBIL (do 767 px): kompaktní lišta, zabírá 135 px místo dnešních 239–261 px (asi 1/6 obrazovky místo 1/3)
 * – text 14 px místo 16 px, SYSTÉMOVÝM PÍSMEM telefonu (to, které má telefon v Nastavení, zprávách atd.),
 *   ne písmem Geologica. Proč: Geologica dorazí až chvíli po prvním vykreslení. Když dorazí, text lišty
 *   se přelije na jiné řádky a odkaz „zde“ přeskočí z konce řádku na začátek dalšího (o ~290 px do strany).
 *   Google pak celé poskočení v tom okamžiku (např. nadpis produktu, který se ve stejnou chvíli zalomí)
 *   počítá podle nejdelšího skoku – na detailu SK při 412 px to dělalo 0,25 místo 0,03.
 *   Systémové písmo je v telefonu hned, takže se text nikdy nepřelévá;
 * – „Nastavení“ a „Souhlasím“ vedle sebe, stejně široká i vysoká (44 px, doporučená velikost pro prst),
 *   písmo Geologica jako dnes; barvy zůstávají jako dnes (od Shoptetu a Kuneše);
 * – text má místo na 3 řádky (na telefonech užších než 350 px na 4), takže lišta má vždy stejnou výšku. */
@media (max-width:767px){
.siteCookies__form{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;padding:12px}
.siteCookies__content,.siteCookies__buttonWrap{display:contents}
.siteCookies__text{grid-column:1/-1;margin:0 0 10px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:19px;font-weight:400;min-height:57px}
.siteCookies__text a{font-family:inherit}
.siteCookies__links{margin:0;width:auto}
.siteCookies__link,.siteCookies__button{box-sizing:border-box;display:block;width:100%;height:44px;margin:0;padding:0 6px;border:2px solid var(--cookies-notice-color);border-radius:4px;font-size:15px;line-height:40px;white-space:nowrap}
/* když v adminu zapnete „Zobrazit tlačítko odmítnout vše na cookie liště“, Shoptet přidá tlačítko
   „Odmítnout“ (value="reject"): pak jsou všechna tři vedle sebe a stejně velká */
.siteCookies__form:has(.siteCookies__button[value="reject"]){grid-template-columns:repeat(3,1fr);column-gap:8px}
.siteCookies__form:has(.siteCookies__button[value="reject"]) :is(.siteCookies__link,.siteCookies__button){font-size:14px;padding:0 4px}
}
@media (max-width:349px){
.siteCookies__text{min-height:76px}
.siteCookies__form:has(.siteCookies__button[value="reject"]) :is(.siteCookies__link,.siteCookies__button){font-size:13px;padding:0 2px}
}
/* Místo pod stránkou, dokud je lišta vidět: konec stránky (v objednávce tlačítko „Pokračovat“)
 * jde posunout nad lištu. Po souhlasu Shoptet lištu odstraní a místo samo zmizí.
 * Když Shoptet lištu dočasně schová (atribut hidden – na mobilu při otevřeném okně košíku), místo se také nepřidá.
 * Otevřené menu lištu neschovává, místo pak zůstává. Na detailu na mobilu to přebije i místo pro lepící
 * pruh „Do košíku“ (78 px z fitboy-detail-mobile.js) – lišta je vyšší a pruh stejně zakrývá. */
@media (min-width:768px){
body:has(>.js-siteCookies.siteCookies--bottom:not([hidden])){padding-bottom:178px}
html:has(>body>.js-siteCookies.siteCookies--bottom:not([hidden])){scroll-padding-bottom:188px}
}
@media (max-width:767px){
body:has(>.js-siteCookies:not([hidden])){padding-bottom:135px}
html:has(>body>.js-siteCookies:not([hidden])){scroll-padding-bottom:145px}
}
@media (max-width:349px){
body:has(>.js-siteCookies:not([hidden])){padding-bottom:154px}
html:has(>body>.js-siteCookies:not([hidden])){scroll-padding-bottom:164px}
}
/* košík a objednávka na počítači a tabletu na šířku: od 992 px je tlačítko „Pokračovat“ vpravo v postranním
 * panelu, který jede se stránkou. Karta lišty uprostřed ho při šířkách 992–1366 px částečně zakrývá.
 * Na stránkách košíku a objednávky (třída ordering-process) se proto karta posune k levému okraji. */
@media (min-width:992px){
.ordering-process .siteCookies--bottom,.ordering-process .siteCookies--bottom.siteCookies--scrolled{left:15px;margin-left:0}
}

/* ---------- všechny stránky: pozadí bloku „Newsletter“ v patičce ----------
 * Kunešův obrázek newsletter-bg.png (1800×211 px, 116 kB) se dnes stahuje na každé stránce, na mobilu i na počítači.
 * CZ: původní pravidlo je v Kunešově pkUpravy.css (blok banneru č. 52 = „footer-newsletter“).
 * SK: původní pravidlo je přímo v obsahu banneru „footer-newsletter“ v adminu (blok č. 80), odkazuje na CZ obrázek.
 * !important přebije obě místa, takže prohlížeč původní PNG vůbec nestáhne.
 * Světle šedá barva pod obrázkem na všech šířkách je stejná jako plocha obrázku, takže ji normálně není vidět.
 *   Vidět je jen tehdy, když se obrázek ještě načítá nebo chybí (třeba když JPG ještě není nahraný).
 * Mobil: je vidět jen prostředek obrázku, který je celý jednolitě světle šedý (#F7F7F7) → obrázek vůbec nedáváme.
 * Počítač a tablet: stejný obrázek jako JPG (stejné rozměry, 13 kB místo 116 kB).
 * Soubor newsletter-bg.jpg musí být ve Správci souborů (upload/) na CZ i na SK. */
#footer .custom-footer>div.custom-footer__banner52::before,#footer .custom-footer>div.custom-footer__banner80::before{background-color:#f7f7f7}
@media (max-width:767px){#footer .custom-footer>div.custom-footer__banner52::before,#footer .custom-footer>div.custom-footer__banner80::before{background-image:none!important}}
@media (min-width:768px){#footer .custom-footer>div.custom-footer__banner52::before,#footer .custom-footer>div.custom-footer__banner80::before{background-image:url(/user/documents/upload/newsletter-bg.jpg?v1)!important}}

/* ---------- objednávka, krok „Doprava a platba“, mobil: zhuštěný seznam doprav a plateb ----------
 * Dřív to vkládal fitboy-checkout.js až po vykreslení → seznam se zkrátil z ~1 300 na ~670 px a celá
 * stránka pod ním poskočila (CLS až 0,43). V hlavičce platí hned. Logo dopravce vedle ceny, menší písmo,
 * menší odsazení. Na chování Shoptetu (výběr, odběrná místa, kombinace doprava × platba) se nesahá. */
@media (max-width:767px){
.in-krok-1 #order-form .radio-wrapper{padding-top:2px!important;padding-bottom:2px!important}
.in-krok-1 #order-form .radio-wrapper>label{display:flex!important;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:0!important;padding-top:7px!important;padding-bottom:7px!important;margin-bottom:0!important}
.in-krok-1 #order-form .radio-wrapper .payment-info{flex:1 1 0;min-width:0;padding-right:0!important}
.in-krok-1 #order-form .radio-wrapper .shipping-billing-name{font-size:14px!important;line-height:1.3!important}
.in-krok-1 #order-form .radio-wrapper .payment-logo{order:2;flex:0 0 auto;display:flex!important;align-items:center;margin:0!important;padding:0!important;position:static!important;width:auto!important;height:auto!important}
.in-krok-1 #order-form .radio-wrapper .payment-logo img{max-height:18px!important;max-width:44px!important;width:auto!important;height:auto!important;margin:0!important}
.in-krok-1 #order-form .radio-wrapper .payment-shipping-price{order:3;flex:0 0 auto;position:static!important;margin:0!important;white-space:nowrap}
.in-krok-1 #order-form .radio-wrapper .sublabel,.in-krok-1 #order-form .radio-wrapper .payment-info>span{font-size:13px!important;line-height:1.3!important;margin:2px 0 0!important}
}