má v adminu inline `margin: 18px 0`, což přebilo auto-margins * čteného sloupce (max-width:800px) → blok padal doleva a video bylo o 169 px vlevo * od středu textu. Vráceno auto-margins přes !important. Týká se jen body.type-post.) * Předchozí: 2026-08-25 (v16 – homepage banner „Jak ušetřit při nákupu?": zarovnané sloupce * slev (.bs-amt v textu banneru, admin Doplňkové bannery) + řádky vlevo i na mobilu.) * Předchozí: 2026-07-12 (v15 – info stránky type-page: obsah VLEVO, obrázky/ikony na střed, * VIDEA vlevo (fix: :has(iframe) přebíjí re-center :has(img), který video-
chytal).) * Obsah: UX opravy košíku (#70). Blogová typografie (#73) zůstává v Zápatí. * 2026-07-09: mini-košík šedý rámeček (border-color transparent) + větší mezera * balení↔název. „100 ks" na jeden řádek řeší espeon-cart.js (miniCartNbsp). * 2026-07-09 (v4): REVERT carousel „Vyzkoušej mě" – všechna pravidla na ten button * odstraněna, tlačítko zpět do původního (theme) stavu dle přání uživatele. * Nasazení + rollback: viz DEPLOY.md. PO UPLOADU BUMPNI ?v v Záhlaví! * ------------------------------------------------------------------------- */ /* === Mini-košík (hover popup): rozložení řádku ========================= */ /* PŮVODNÍ funkční verze (potvrzená uživatelem v dry-runu, než jsme šli na jiný úkol). Pevné šířky sloupců + menší font přerozdělí řádek tak, že „balení" je odsazené, „g" u gramáže i „ZDARMA" zůstanou na svém řádku a název nenaráží do jednotky. Třídy popupu: .cart-widget .cart-widget-product-image/-amount/-unit + .cart-widget-inner. (Nezaměňovat s třídami STRÁNKY košíku .p-name/.p-price.) */ @media (min-width: 992px) { .cart-widget .cart-widget-inner { font-size: 13px; line-height: 1.35; } .cart-widget .cart-widget-product-image { width: 52px; } .cart-widget .cart-widget-product-amount { width: 60px; padding: 0 4px; } .cart-widget .cart-widget-product-unit { width: 50px; white-space: nowrap; padding: 0 2px 0 8px; } /* padding-left = větší mezera mezi „balení" a názvem produktu (přání uživatele). */ .cart-widget .cart-widget-product-name { font-size: 11.5px; line-height: 1.3; text-wrap: pretty; padding-left: 16px; } } /* Tlačítko košíku (toggle): potlačit ŠEDÝ RÁMEČEK, který theme přidává na hover/focus-visible/aktivní stav. Diagnóza: toggle nemá base border ani border ze stavových tříd; předchozí override resetoval jen outline + box-shadow, NE `border` → rámeček je border(-color) na :hover/:focus-visible. Přidán reset border-color: transparent (bez layout shiftu). Cílí JEN na toggle tlačítko, NE na popup .cart-widget (jeho rámeček dropdownu je chtěný a zůstává). */ a[data-testid="headerCart"], a[data-testid="headerCart"]:hover, a[data-testid="headerCart"]:focus, a[data-testid="headerCart"]:focus-visible, a[data-testid="headerCart"]:active, a.cart-count.toggle-window, a.cart-count.toggle-window:hover, a.cart-count.toggle-window:focus, a.cart-count.toggle-window:focus-visible, a.cart-count.toggle-window:active { border-color: transparent !important; box-shadow: none !important; outline: none !important; } /* === Košík: rekapitulace objednávky (checkout) ========================= */ /* „balení" nesmí narážet do svislé přepážky (přetok buňky). */ .order-summary .cart-item-amount { padding: 8px 6px; } .order-summary .cart-item-amount .unit-value { font-size: 13px; white-space: nowrap; } /* === Košík: slevový kupón sbalený do odkazu ============================ */ /* Velké prázdné pole „Vložit slevový kupón" → decentní odkaz „Mám slevový kód", který se přes JS (espeon-cart.js) rozbalí na místě. */ .espeon-coupon-toggle { display: inline-flex; align-items: center; gap: 6px; color: #732382; text-decoration: underline; cursor: pointer; font-weight: 600; font-size: 14px; margin: 2px 0 6px; } .espeon-coupon-toggle:before { content: "%"; font-weight: 700; } /* === Produkt: hláška o dopravě zdarma =================================== */ .espeon-prod-freeship { display: inline-block; margin: 6px 0; font-size: 13px; font-weight: 600; color: #2e7d32; } .espeon-prod-freeship:before { content: "🚚 "; } /* === Checkout: bezpečnostní microcopy u platby ========================= */ .espeon-pay-trust { margin: 4px 0 10px; font-size: 13px; color: #555; } /* === Košík: informace o nákladech (nad tlačítkem Pokračovat) =========== */ .espeon-cost-info { margin: 10px 0; padding: 10px 12px; background: #f6f0f8; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #444; } .espeon-cost-info b { color: #2e7d32; } .espeon-return { margin-top: 6px; font-size: 12px; color: #777; } .espeon-reg-vp { margin: 4px 0 0 24px; font-size: 12px; color: #732382; } /* === Košík: Uložit na později ========================================== */ .espeon-sfl-link { display: inline-block; margin-right: 12px; font-size: 12px; color: #732382; text-decoration: underline; cursor: pointer; } .espeon-saved { margin: 16px 0; padding: 12px 14px; border: 1px solid #ead9ee; border-radius: 8px; } .espeon-saved-h { margin: 0 0 8px; font-size: 15px; } .espeon-saved-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #f0e6f3; } .espeon-saved-item img { width: 40px; height: 40px; object-fit: contain; } .espeon-saved-name { flex: 1; font-size: 13px; } .espeon-saved-add { font-size: 13px; color: #732382; font-weight: 600; white-space: nowrap; } .espeon-sfl-del { color: #999; text-decoration: none; font-size: 18px; line-height: 1; } /* === Mobil: souhrn + hlavní CTA nalepené dole (Baymard mobile) ========= */ /* Aby cena a tlačítko Pokračovat zůstaly viditelné při scrollu na telefonu. */ @media (max-width: 600px) { .cart-summary .next-step, .cart-summary .next-step--cart { position: sticky; bottom: 0; z-index: 20; background: #fff; padding: 8px 0; box-shadow: 0 -2px 8px rgba(0,0,0,.08); } } /* === Blog článek (desktop): tabulka + „Doporučený výběr" na šířku textu ===== Čtený sloupec článku má max-width 800px (vycentrovaný auto-margins). Tabulka ani box doporučení tento cap nedědily → breakout na plnou šířku .text (1378px), takže na širokém monitoru přetékaly VLEVO i VPRAVO mimo text (nahlášeno + změřeno: text 800px/left553 vs tabulka 1378px/left264). Cap 800px + auto-margins je srovná přesně s textovým sloupcem (800px/left553 na všech šířkách; fixní čtený sloupec). Ověřeno měřením na článku 134. */ .news-item-detail .text table, .news-item-detail .es-article-picks { max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; } /* Tabulka: hodnotové buňky na střed (jako hlavička) + zalomení místo přetečení. */ .news-item-detail .text table td { text-align: center !important; } .news-item-detail .text table td, .news-item-detail .text table th { word-break: break-word; } /* Doporučený výběr k článku: 2×2 dlaždice (vždy 4 karty – doplněno v snippetu) do 800px + text 12pt + standardní nadpis (custom 17px → 16px = default h3 webu). Snippet: .es-article-pick-*. */ .es-article-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .es-article-pick-card { padding: 13px !important; } .es-article-pick-card p, .es-article-pick-note, .es-article-pick-link { font-size: 12pt !important; } .es-article-pick-card h3 { font-size: 16px !important; } /* Autor / odborný garant box (#espeon-author-box, snippet v Záhlaví): sjednotit s „Doporučeným výběrem" – šířka textu (800px, vycentrováno) + text 12pt. Box má inline styly → !important (datum span má inline font-size:13px). */ #espeon-author-box { max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; font-size: 12pt !important; } #espeon-author-box span { font-size: 12pt !important; } /* === Homepage: kategoriové dlaždice „podle povolání" (jen mobil) ============== Dlouhé labely (Potravinářství, Salony krásy) se na ÚZKÝCH telefonech nevešly do 3-sloupcové dlaždice (calc(100%/3-10px)) při fixních 14px a lámaly se; na širším telefonu (Martin) OK → proto to každý viděl jinak. FLUIDNÍ velikost (clamp, NE fixní px) label zmenší přesně o kolik třeba jen na telefonech; tablet/desktop (6 sloupců/18px od 920px) beze změny. hyphens:auto = kdyby přeteklo i tak, zalomí čistě (html lang=cs). Zdroj stylu = dklab style_dklab.min.css (.welcome .categories__title); náš override je načten po něm, takže vyhrává. Nejdelší label „Průmysl a servis" byl i s clampem na hraně (2px rezerva) → navíc zmenšíme MEZERU mezi dlaždicemi z 10px na 6px (dlaždice o ~4px širší, místa je dost), čímž se nejdelší label vejde na 1 řádek napříč 320–430px (ověřeno měřením klonu do pevné šířky). Container margin -3px drží zarovnání s -6px součtem margin dlaždic. OVĚŘIT NA REÁLNÝCH TELEFONECH (mobilní render nejde reprodukovat v automatizaci). Reroll: smazat tento blok + bump ?v (záloha backups/espeon-custom-css-2026-07-10/live-v11.css). */ @media (max-width: 600px) { .welcome .categories__title { font-size: clamp(11px, 3.4vw, 14px); hyphens: auto; } .welcome .categories__in { margin: -3px; } .welcome .categories__item { width: calc(100% / 3 - 6px); margin: 3px; } } /* === Nadpisové bannery .articleHead → jen text-nadpis =========================== Stránky /vyber-rukavic/ a podstránky /o-nas/ (jak-rosteme, pomahame, tym, videa) mají nadpisy v `
` (na /vyber-rukavic/ + articleHeadSmall) s FIALOVÝM
gradientovým boxem (radial-gradient, bílý text, velký padding). Uživatel chce banner
pryč, nechat jen text jako nadpis. Třída .articleHead je JEN na těchto 5 stránkách
(jinde na webu se nepoužívá – ověřeno crawlem), takže obecný selektor je bezpečný
(pozor: /vyber-rukavic/ NENÍ v .news-item-detail, proto cílíme p.articleHead obecně).
Titul () = fialová #732382, podtitulek = šedá, vycentrováno, bez pozadí.
Fluidní titul (clamp) ať se dlouhé „JAKÉ RUKAVICE POTŘEBUJETE?" nezalomí zle na mobilu.
Ověřeno živě na /vyber-rukavic/, /o-nas/tym/, /o-nas/videa/. */
p.articleHead {
background: none !important;
color: #555 !important;
padding: 0 !important;
margin: 8px 0 24px !important;
min-height: 0 !important;
text-align: center !important;
font-size: 18px !important;
line-height: 1.4 !important;
border-radius: 0 !important;
}
p.articleHead strong {
display: inline-block;
margin-bottom: 4px;
color: #732382 !important;
font-size: clamp(22px, 5vw, 30px) !important;
line-height: 1.2 !important;
}
/* /vyber-rukavic/ je STRÁNKA (má vlastní černý H1 „Pomocník s výběrem rukavic"), takže
fialový „JAKÉ RUKAVICE POTŘEBUJETE?" je navíc → menší podnadpis zarovnaný VLEVO (page-style,
jako doprava-a-platba). Cílíme jen variantu .articleHeadSmall (jen na této stránce); o-nas
(.articleHead bez Small) zůstává vycentrovaný. */
p.articleHead.articleHeadSmall {
text-align: left !important;
margin: 4px 0 18px !important;
}
p.articleHead.articleHeadSmall strong {
font-size: 20px !important;
}
/* === Info stránky (type-page) – sjednotit obsah VLEVO (vzor doprava-a-platba) =======
Textové/informační stránky (doprava-a-platba, reklamace, obchodní podmínky, ochrana
údajů, slevy, časté dotazy, velkoobchod, kontakty, testujeme/tvoříme/natáčíme, postup,
vyber-rukavic) mají rozházené inline text-align:center/justify na nadpisech i textu
(nadpisy bývají i v centrovaných to matchovalo → center), proto je NÁSLEDNÝM pravidlem :has(iframe)
vracíme zpět vlevo (stejná/vyšší specificita + pozdější pořadí → vyhrává; ověřeno live).
Scope `body.type-page` = přesně info stránky (produkty=type-category/detail, blog=
type-post(s), homepage=type-index → netýká se). Pozn.: /o-nas/ je type-posts (zvlášť). */
body.type-page .content-inner,
body.type-page .content-inner * {
text-align: left !important;
}
body.type-page .content-inner p:has(img),
body.type-page .content-inner div:has(> img):not(.captcha-image),
body.type-page .content-inner span:has(> img) {
text-align: center !important;
}
body.type-page .content-inner p:has(iframe),
body.type-page .content-inner div:has(iframe),
body.type-page .content-inner span:has(iframe) {
text-align: left !important;
}
/* === „?" ikony u nadpisů (.news-item) – ODSTRANIT + blog nadpis center na mobilu ===
dklab CSS dává před nadpisy v .news-item „?" ikonu (Font Awesome question-circle
\f059, ::before). Je na blog výpisu (a.title) i na FAQ/textových stránkách (h2 –
reklamace, časté dotazy…) a dělá nepořádek → uživatel je chce pryč všude. content:none
je odstraní úplně. Navíc na MOBILU vycentrujeme nadpisy karet blog výpisu (a.title;
FAQ h2 necháváme vlevo). Desktop beze změny (nadpis vpravo u obrázku, jak je).
Ověřit na reálném telefonu (mobilní render nejde v automatizaci). */
.news-item > .text > a.title::before,
.news-item > .text > h2::before,
.news-item > .text > h2.active::before {
content: none !important;
display: none !important;
margin-right: 0 !important;
}
@media (max-width: 767px) {
.news-item > .text > a.title {
text-align: center !important;
}
}
/* === Homepage banner „Jak ušetřit při nákupu?": zarovnané sloupce slev =======
Řádky „Nad 2 000 Kč -> Sleva 4 %" skákaly (různá šířka částek). Částky jsou
v textu banneru (admin Doplňkové bannery) obalené a tady
dostanou pevnou šířku -> šipky i Slevy jsou pod sebou. Číslo a Kč drží
nezlomitelné mezery přímo v textu. Mobil obsah centroval -> řádky vlevo. */
.banner-save__col .bs-amt { display: inline-block; min-width: 13.5ch; }
.banner-save__col { text-align: left; }
/* === BLOG (type-post): VIDEA na střed čteného sloupce ==================== v17
Problém (nahlášeno 2026-09-03, ověřeno live 1280 px): video v článku vypadalo
zarovnané doleva. Příčina NENÍ text-align – ten je v adminu inline `center` a
funguje. Čtený sloupec článku má max-width:800px + margin-left/right:auto, ale
video- má v adminu inline `margin: 18px 0`, které auto-margins PŘEBIJE →
800px blok sedí flush vlevo (left 71 px místo 240 px) a video je tak o 169 px
vlevo od středu textu, i když je uvnitř svého bloku vycentrované.
Fix: vrátit auto-margins (stylesheet !important vyhrává nad inline bez !important).
Text-align:center je pojistka pro odstavce, kde ho admin nemá.
Scope: jen blogové články (body.type-post) → info stránky (type-page) mají videa
ZÁMĚRNĚ vlevo (přání uživatele, pravidlo výše) a tohle na ně nesahá.
Nedotčeno: články s vlastním wrapperem .es-art-wrap (už byly na středu; ověřeno
before/after 0 px posun), mobil (390 px: sloupec je full-width, before=after),
karta .es-artrel-wrap, obrázkové odstavce.
Rollback: smazat tento blok / vrátit v Záhlaví na espeon-custom-2026-08-25-v16.css. */
body.type-post .news-item-detail .text p:has(iframe) {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* === 2026-09-28 (v20): boční widgety vlevo nesmí překrývat text ===========
Proužky Zboží.cz (#espeon-zbozi, náš snippet) a Heureka „Ověřeno zákazníky"
(#hw-…left > #heurekaTableft) jsou fixně u levého okraje, 36 px široké.
Šablona má 4 rozvržení (od 768 / 992 / 1200 / 1440 px) a v každém začíná
obsah (šířka okna − K) / 2 od kraje — změřeno 28. 9. plynulým zužováním okna,
vzorec sedí na pixel: K = 722 / 946 / 1152 / 1392 px. Při zužování se tak
obsah v každém rozvržení postupně přiblíží k okraji až pod proužky
(překryv až 13 px na 768–800, 994–1022, 1200–1228 a 1440–1470 px). */
/* A) 768 px a víc: obsah odsunout PLYNULE jen o tolik, kolik chybí do 60 px
od kraje. 60, ne méně: mřížka produktů, drobečky a menu začínají o 20 px
vlevo od textu (záporný okraj) — i jejich okraje musí zůstat za proužky
(36 px). Kde je místa dost, přidá se 0 → na většině šířek
se nic nemění a nevzniká žádný nový skok. Všechny kontejnery (hlavička, menu,
drobečky, obsah, patička) se posunou stejně, takže logo a nadpis dál lícují.
Výchozí padding kontejnerů je ve všech 4 rozvrženích 20 / 0 px (ověřeno). */
@media (min-width: 768px) { :root { --esp-k: 722px; } }
@media (min-width: 992px) { :root { --esp-k: 946px; } }
@media (min-width: 1200px) { :root { --esp-k: 1152px; } }
@media (min-width: 1440px) { :root { --esp-k: 1392px; } }
@media (min-width: 768px) {
:root { --esp-e: max(0px, calc(60px - (100vw - var(--esp-k)) / 2)); }
.user-action > .container,
.top-navigation-bar > .container,
#header > .container,
.overall-wrapper > .breadcrumbs-wrapper,
.hp-blog > .container, /* banner „Jak vybrat / Děláme to jinak" */
#footer > .footer-bottom,
body > .container { padding-left: calc(20px + var(--esp-e)) !important; }
.overall-wrapper > .content-wrapper,
#footer > .footer-rows { padding-left: var(--esp-e) !important; }
}
/* Patička (sloupce Kontakt / O rukavicích…) není na 768–1199 px vycentrovaná
jako zbytek stránky — jde přes celou šířku a sloupce začínají 27–36 px od
kraje (stará vada, i ve v17). Tady tedy pevné minimum, ať text začíná
za proužky (≥ 51 px); nad 1199 px je patička vycentrovaná a stačí blok A. */
@media (min-width: 768px) and (max-width: 1199px) {
#footer > .footer-rows { padding-left: max(var(--esp-e), 24px) !important; }
}
/* A2) Tři videa v popisu kategorie jsou inline iframy s pevnou šířkou 444 px
bez rezervy: už dnes se podle šířky okna lámou 3 / 2+1 / 1+1+1 a po odsazení
z bloku A by se zalomila i tam, kde dnes nejsou. Mřížka je rozloží stejně na
všech šířkách: vedle sebe, kolik se vejde (min. 280 px), bez sirotka přes
celou šířku. Výšku drží poměr 16:9. */
@media (min-width: 768px) {
.category-perex p:has(> iframe[src*="youtube"]) {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
}
.category-perex p:has(> iframe[src*="youtube"]) > iframe {
width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important;
}
}
/* B) Pod 768 px (mobilní rozvržení, obsah 10 px od kraje): proužky schovat,
oba stejně. Na telefonech se Heureka nezobrazuje vůbec (její skript
rozhoduje podle user-agentu) a Zboží.cz se sám schovává pod 601 px —
tohle se tedy týká hlavně zúženého okna na počítači (601–767 px), kde
proužky ležely přes text (Zboží až 26 px). */
@media (max-width: 767px) {
[id^="hw-"][id$="left"], #heurekaTableft, #espeon-zbozi { display: none !important; }
}
/* C) Mobil: lupa hledání byla pod vyhledávacím polem na dalším řádku (pole má
plnou šířku, tlačítko nemělo kam) a na některých stránkách ležela přes
nadpis. Vráceno dovnitř pole vpravo, jako na desktopu. */
@media (max-width: 767px) {
#formSearchForm.search-form { position: relative; }
#formSearchForm .search-input { padding-right: 46px; }
#formSearchForm button[type="submit"],
#formSearchForm > .btn { position: absolute; right: 2px; top: 2px; margin: 0; }
}
/* D) Méně poskakování při načtení (CLS) — ZMĚŘENO 28. 9. na mobilu (profil
Lighthouse): kategorie 0,41, detail 0,28, homepage 0,14 (hranice „dobré" 0,1).
D1) Písmo. Šablona načítá Poppins s font-display: swap — do jeho příchodu
(na mobilu ~5,5 s) je text v záložním písmu a po přepnutí se řádky
přeskládají: na kategorii 0,31 z 0,37, na homepage 0,14. Záložní písmo
„Poppins Fallback" je Arial (počítače, iPhone) / Roboto (Android)
zvětšený a posazený na rozměry Poppins — přepnutí pak textem skoro
nepohne. Poměry šířek změřeny na českém textu webu (canvas, 28. 9.):
Poppins/Arial 400 = 110,97 %, 700 = 107,43 %; Poppins/Roboto 400 = 112,63 %,
700 = 114,62 %. Svisle: Poppins ascent 1,05 / descent 0,35 / mezera 0,10 em.
Kde lokální Arial chybí (Android), face se přeskočí a použije se Roboto;
kde chybí obojí, chování je stejné jako dnes. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 110.97%; ascent-override: 94.62%; descent-override: 31.54%; line-gap-override: 9.01%; }
@font-face { font-family: "Poppins Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 107.43%; ascent-override: 97.74%; descent-override: 32.58%; line-gap-override: 9.31%; }
@font-face { font-family: "Poppins Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 549; size-adjust: 112.63%; ascent-override: 93.23%; descent-override: 31.08%; line-gap-override: 8.88%; }
@font-face { font-family: "Poppins Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 550 900; size-adjust: 114.62%; ascent-override: 91.61%; descent-override: 30.54%; line-gap-override: 8.72%; }
:root {
--template-font: "Poppins", "Poppins Fallback", "Poppins Fallback Roboto" !important;
--template-headings-font: "Poppins", "Poppins Fallback", "Poppins Fallback Roboto" !important;
}
/* D2) Detail produktu: doplněk dkLab vkládá štítek „za týden koupeno X balení"
(22 px) nad hodnocení až po načtení (~7 s na mobilu) a posune celou
fotku dolů — 0,27 z 0,28 CLS detailu. Místo se vyhradí předem, JEN když
na stránce ještě žádný řádek štítků není; jakmile se štítky (.flags)
vloží, rezerva zmizí a štítek zaujme přesně její místo. Produkty bez
štítku mají o 22 px víc místa nad hodnocením.
JEN MOBIL: na počítači se štítek vloží do ~1 s, ještě před vykreslením, a
rezerva by naopak způsobila posun nahoru (změřeno: detail 0,078 → 0,100). */
@media (max-width: 767px) {
.p-detail-info:not(:has(> .flags)) { padding-top: 22px; }
}
/* E) 2026-09-28 (v21): styly bloku „Nevíte, které … vybrat?" (#espeon-category-guide)
Dřív je přidával až bundle (addStyles) — teď blok vzniká hned při čtení stránky
(skript espeon-category-guide-early v Záhlaví), aby stránka neposkočila, a styly
proto musí být k dispozici od začátku. Obsah 1:1 = bundle category-guide v4. */
#espeon-category-guide{margin:12px 0 18px}#espeon-category-guide>summary{display:inline-block;cursor:pointer;color:#732382;font-size:12pt;line-height:1.5;font-weight:700;text-decoration:underline;list-style:none}#espeon-category-guide>summary::-webkit-details-marker{display:none}#espeon-category-guide>summary::after{content:'\25BE';display:inline-block;margin-left:7px;text-decoration:none;transition:transform .18s ease}#espeon-category-guide[open]>summary::after{transform:rotate(180deg)}#espeon-category-guide>summary:focus-visible{outline:2px solid #732382;outline-offset:4px}#espeon-category-guide .es-guide-label-open{display:none}#espeon-category-guide[open] .es-guide-label-closed{display:none}#espeon-category-guide[open] .es-guide-label-open{display:inline}#espeon-category-guide>.category__secondDescription{margin:16px 0 4px;font-size:12pt!important;line-height:1.55!important}#espeon-category-guide>.category__secondDescription p,#espeon-category-guide>.category__secondDescription li,#espeon-category-guide>.category__secondDescription span,#espeon-category-guide>.category__secondDescription a,#espeon-category-guide>.category__secondDescription strong,#espeon-category-guide>.category__secondDescription b,#espeon-category-guide>.category__secondDescription em{font-size:12pt!important;line-height:1.55!important}#espeon-category-guide>.category__secondDescription div,#espeon-category-guide>.category__secondDescription section,#espeon-category-guide>.category__secondDescription aside{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}@media(max-width:767px){#espeon-category-guide{margin:10px 0 16px}#espeon-category-guide>summary{display:block}}
/* F) 2026-09-28 (v21): panel „Nejprodávanější" (nativní Shoptet, .products-top-wrapper)
schovat HNED. Náš bundle (modul bestseller) z něj čte top 3 pro pečetě 🏆 na dlaždicích
a pak ho skryje inline stylem — jenže až po vykreslení, takže celý výpis produktů
poskočí nahoru o výšku panelu (166 px počítač / 388 px mobil). Na kategorii s krátkým
popisem je to největší poskočení webu: /cepice/ CLS 0,36 počítač, 0,57 mobil (28. 9.).
Konečný stav je stejný jako dnes: panel je na webu jen jako „Nejprodávanější" (61 stránek
ze sitemapy, žádný jiný nadpis; detaily produktů ho nemají) a bundle ho skrývá všude.
Skrytý prvek zůstává v DOM, takže bundle z něj top 3 přečte dál. */
.products-top-wrapper { display: none !important; }