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; }
/* G) 2026-10-01 (v22): řádek štítků pod názvem produktu na mobilu nesmí roztáhnout stránku.
Kontejner .flags je v .p-detail-info flex položka s flex-shrink:0 → nezúží se a štítky
(BIO / S koloidním ovsem / dkLab „za týden koupeno N balení“) zůstanou na jednom řádku;
když jsou delší než displej, stránka přeteče do strany (30. 9.: MOISTCARE3 +68 px,
CARE zelené +34, DIAMOND3 +3 na 375 px). Tady se kontejner smí zúžit → štítky se zalomí.
N se mění každý týden, proto obecně. Test celého webu: reports/2026-09-30-mobil-preteceni/. */
@media (max-width: 767px) {
.p-detail-info > .flags { flex-shrink: 1; min-width: 0; }
}
/* H) 2026-10-01 (v23): tlačítko s lupou vedle hledání na počítači bylo ovál, ne kruh.
V řádku formuláře se smršťovalo (34,6–36,5 px podle šířky okna) při výšce 40 px
a zaoblení 50 %. Pevná šířka 40 px = kruh 40 × 40 na všech šířkách od 768 px.
Mobil (pod 768 px, lupa uvnitř pole, blok C) se nemění. */
@media (min-width: 768px) {
.header-top .search-form button[type="submit"] { width: 40px; min-width: 40px; }
}
/* I) 2026-10-01 (v24): prázdný košík, blok „Zkuste vyhledávání“ (#formSearchFormContent).
Na mobilu se tlačítko v řádku smrštilo pod šířku textu a „HLEDAT“ se zlomilo na
„HLED / AT“ (70 × 60 px; lámání slov povoluje blok espeon-mobfix v Záhlaví).
Tlačítko se nesmí smrštit ani zalomit → 82 × 40 px na všech šířkách jako na počítači. */
#formSearchFormContent button[type="submit"] { flex-shrink: 0; white-space: nowrap; }
/* J) 2026-10-01 (v24): Šéfbot schovaný, dokud je na stránce cookie lišta. Jeho bublina
na mobilu zakrývala tlačítko „Souhlasím“. Přeneseno 1:1 ze Záhlaví (blok
espeon-sefbot-za-cookies-2026-10-01, nasadil chat GDPR 1. 10.), ať jsou styly v jednom
souboru. Shoptet po volbě lištu odstraní z DOM → bot se sám objeví. */
body:has(.js-siteCookies) [data-sefbot-host] { display: none !important; }
/* K) 2026-10-01 (v25): hlášky Shoptetu („Produkt byl přidán do košíku“ aj.).
1) Šedý pruh nahoře: obal hlášky .messages > .msg je přilepený nahoře; doplněk hlášek
(notifications-v2) ho má průhledný, ale styl šablony dkLab mu dává šedou #545454 a
výplň 8 + 8 px → 16px pruh přes menu, logo a košík. Vráceno na průhledný bez výplně.
2) Vzhled: místo zeleného boxu s velkou „fajfkou“ bílá karta v barvách webu (fialová
#732382), ikona vlevo, odkaz do košíku fialově. Chyba/varování má ikonu červenou.
3) Mobil: karta přes šířku displeje a výš (132 px od spodku), aby neležela přes Šéfbota
a přilepené tlačítko košíku. Počítač: vlevo dole jako dřív.
Text i odkaz hlášky dodává Shoptet, mění se jen vzhled. Rollback: odkaz zpět na v24. */
.messages > .msg.msg-success, .messages > .msg.msg-info, .messages > .msg.msg-warning {
background: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
.messages > .msg .container {
background-color: #fff !important; color: #2b2233 !important;
border: 1px solid #ead9ee; border-radius: 14px;
box-shadow: 0 12px 32px rgba(60, 20, 70, .22);
padding: 16px 18px 16px 62px !important;
width: 384px !important; max-width: calc(100vw - 24px);
font-size: 14px; line-height: 1.45; font-weight: 600;
animation-duration: .35s;
}
.messages > .msg .container a {
color: #732382 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.messages > .msg .container:before {
top: 50%; left: 16px; margin: -17px 0 0; width: 34px; height: 34px; border-radius: 50%;
background-color: #732382; background-size: 18px 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
}
.messages > .msg.msg-info .container:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 6.5v.5'/%3E%3C/svg%3E") !important;
}
.messages > .msg.msg-error .container:before, .messages > .msg.msg-warning .container:before {
background-color: #d33a36;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17v.5'/%3E%3C/svg%3E") !important;
}
@media (max-width: 767px) {
.messages > .msg .container {
left: 12px; right: 12px; bottom: 132px; width: auto !important; max-width: none;
}
}
/* L) 2026-10-01 (v26): položka v košíku na mobilu jako přehledná karta.
Dřív: buňky řádku po dvou vedle sebe bez vazby (cena za m. j. vlevo, součet vpravo,
„Uložit na později“ a křížek pod tím) – nebylo poznat, co k čemu patří.
Teď: nahoře obrázek + název, velikost a dostupnost, křížek v rohu; pod čarou vlevo
počet kusů, vpravo cena za balení; dole vlevo „Uložit na později“, vpravo součet.
Jen rozložení a vzhled (CSS), formuláře množství a odebrání zůstávají Shoptetu.
Počítač (od 768 px) se nemění. */
@media (max-width: 767px) {
.cart-table tr.removeable {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) auto;
grid-template-areas: "img name name" "img avail avail" "qty qty price" "total total total";
align-items: center; position: relative;
padding: 14px 10px 12px; border-bottom: 1px solid #ead9ee;
}
.cart-table tr.removeable > td { width: auto !important; padding: 0 !important; border: 0 !important; text-align: left; }
.cart-table tr.removeable > td.cart-p-image { grid-area: img; align-self: start; padding-right: 12px !important; }
.cart-table tr.removeable > td.cart-p-image img { width: 72px; height: 72px; object-fit: contain; display: block; }
.cart-table tr.removeable > td.p-name { grid-area: name; align-self: start; padding-right: 34px !important; }
.cart-table tr.removeable > td.p-name .main-link {
display: block; text-transform: none; font-size: 14px; line-height: 1.35; font-weight: 600; color: #2b2233;
}
.cart-table tr.removeable > td.p-name .main-link-variant { margin-top: 3px; font-size: 13px; font-weight: 400; color: #6b6470; }
.cart-table tr.removeable > td.p-availability { grid-area: avail; align-self: start; padding-top: 4px !important; font-size: 13px; line-height: 1.3; }
.cart-table tr.removeable > td.p-availability .p-label,
.cart-table tr.removeable > td.p-price .p-label { display: none; }
.cart-table tr.removeable > td.p-quantity,
.cart-table tr.removeable > td.p-price {
margin-top: 12px; padding-top: 12px !important; border-top: 1px solid #f0e6f3 !important; align-self: stretch;
display: flex !important; align-items: center;
}
.cart-table tr.removeable > td.p-quantity { grid-area: qty; justify-content: flex-start; text-align: left; }
.cart-table tr.removeable > td.p-price { grid-area: price; justify-content: flex-end; gap: 4px; font-size: 13px; color: #6b6470; white-space: nowrap; }
.cart-table tr.removeable > td.p-price .price-final { font-size: 13px; font-weight: 600; color: #6b6470; }
.cart-table tr.removeable > td.p-price .unit-value { font-size: 13px; }
.cart-table tr.removeable > td.p-total {
grid-area: total; display: flex !important; align-items: baseline; justify-content: flex-end; gap: 8px;
padding-top: 10px !important; text-align: right;
}
.cart-table tr.removeable > td.p-total .p-label { display: inline; font-size: 13px; color: #6b6470; margin: 0; }
.cart-table tr.removeable > td.p-total .price-final { font-size: 18px; font-weight: 700; color: #2b2233; }
.cart-table tr.removeable > td.p-total form.inline { order: -1; margin-right: auto; }
.cart-table tr.removeable > td.p-total .espeon-sfl-link { font-size: 13px; }
.cart-table tr.removeable > td.p-total .remove-item {
position: absolute !important; top: 8px; right: 4px; width: 34px; height: 34px; margin: 0;
}
}
/* M) 2026-10-01 (v27): „Zpět do obchodu“ v košíku jako skutečné vedlejší tlačítko.
Dřív na počítači šedý text bez pozadí roztažený na výšku bloku (94 px) – po najetí myší
z něj byl tmavě šedý čtverec vyšší než „Pokračovat“ (59 px). Na mobilu ho šablona skrývala.
Teď: pod „Pokračovat“ stejně široké a vysoké bílé tlačítko s fialovým rámečkem a textem
(#732382), po najetí fialové. Mobil: přes celou šířku pod souhrnem košíku (hlavní tlačítko
zůstává přilepené dole). Jen vzhled, odkaz i cíl dodává Shoptet. */
.next-step--cart { flex-direction: column-reverse; align-items: stretch; gap: 10px; height: auto; }
.next-step--cart .next-step-forward { width: 100%; }
.next-step--cart .next-step-back {
display: block; height: auto; text-align: center;
background: #fff; color: #732382; border: 1px solid #732382; font-weight: 600;
}
.next-step--cart .next-step-back:hover,
.next-step--cart .next-step-back:focus-visible {
background: #732382 !important; color: #fff !important; border-color: #732382 !important;
}
@media (max-width: 767px) {
.next-step--cart .next-step-back { display: block !important; margin: 4px 0 0; }
}
/* N) 2026-10-01: přilepené „Pokračovat“ na mobilu (košík a krok 1) jako tlačítko v bílém pruhu.
Dřív oranžová plocha přes celou šířku až do spodního kraje – na iPhonu splývala se spodní
lištou prohlížeče (ta si bere barvu spodního prvku) a při posouvání se od ní odtrhla bílou
mezerou; nevypadala jako tlačítko. Teď: bílý pruh s tenkou linkou a stínem (pseudo-prvek
::after obalu .next-step), v něm zaoblené oranžové tlačítko 12 px od krajů; vpravo 84 px
místa pro hlavu Šéfbota, aby neseděla na tlačítku. Dokud je vidět cookie lišta, platí
starší pravidlo (tlačítko je ve stránce, ne přilepené) a tenhle blok se neuplatní.
Tlačítko zůstává stejný prvek na stejném místě v kódu, mění se jen jeho rozměry a vzhled.
Ostrá verze od v28 (náhled za #content vyzkoušel Kuba na telefonu 1. 10.). */
@media (max-width: 767px) {
body:not(:has(.js-siteCookies)) .next-step--cart::after,
body:not(:has(.js-siteCookies)) .next-step--step-1::after {
content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
height: calc(79px + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid #ead9ee; box-shadow: 0 -6px 20px rgba(40, 10, 50, .10);
}
body:not(:has(.js-siteCookies)) .next-step--cart .next-step-forward,
body:not(:has(.js-siteCookies)) .next-step--step-1 .next-step-forward {
left: 12px !important; right: 84px !important; width: auto !important;
bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 51; border-radius: 12px; box-shadow: 0 4px 12px rgba(228, 73, 25, .28); white-space: nowrap;
}
body:not(:has(.js-siteCookies)).in-kosik,
body:not(:has(.js-siteCookies)).in-krok-1 { padding-bottom: 92px; }
}
@media (max-width: 359px) {
body:not(:has(.js-siteCookies)) .next-step--cart .espeon-cta-count { display: none; }
}
/* O) 2026-10-01 (v28): křížek „odebrat z košíku“ na počítači stále viditelný.
Šablona ho má s opacity:0 a ukáže až po najetí myší na řádek (tr.removeable:hover) –
kdo myší nenajede, neví, že jde položku odebrat. Na mobilu byl vidět vždy. */
.cart-table tr.removeable .remove-item { opacity: 1; }
/* P) 2026-10-01 (v29): ikona u nadpisu „Datum doručení“ (krok Doprava a platba).
Doplněk data doručení dává nadpisu znak z ikonového písma šablony, ale bez jejího stylu –
znak se kreslil běžným písmem a vyšel jako křížek v obdélníku. Místo něj kalendář ve stejném
fialovém obrysovém stylu a velikosti jako ikony u „Zvolte způsob dopravy“ a „… platby“
(36 px vlevo, text odsazený 60 px). Obrázek je přímo ve stylu, nic se odjinud nenačítá. */
.fv-datum .order-icon.fv-datum-nadpis { position: relative; padding-left: 60px; }
.fv-datum .order-icon.fv-datum-nadpis::before {
content: "" !important; display: block; position: absolute; left: 0; top: 50%; margin-top: -18px;
width: 36px; height: 36px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23732382' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h2M14 14h2M8 17.5h2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Q) 2026-10-01 (v29): tlačítko „Zpět“ na krocích objednávky (Doprava a platba, Informace o vás)
ve stejném vzhledu jako „Zpět do obchodu“ v košíku (blok M): bílé s fialovým rámečkem a
textem, po najetí fialové. Dřív šedý text (po najetí tmavě šedý čtverec), na mobilu skryté.
Mobil: přes celou šířku na konci stránky pod hlavním tlačítkem. Jen vzhled; odkaz dodává
Shoptet (krok 1 → košík, krok 2 → krok 1). */
.next-step--step-1, .next-step--step-2 { gap: 10px; }
.next-step--step-1 .next-step-back, .next-step--step-2 .next-step-back {
background: #fff; color: #732382; border: 1px solid #732382; font-weight: 600; text-align: center;
}
.next-step--step-1 .next-step-back:hover, .next-step--step-1 .next-step-back:focus-visible,
.next-step--step-2 .next-step-back:hover, .next-step--step-2 .next-step-back:focus-visible {
background: #732382 !important; color: #fff !important; border-color: #732382 !important;
}
@media (max-width: 767px) {
.next-step--step-1, .next-step--step-2 { flex-direction: column-reverse; align-items: stretch; }
.next-step--step-1 .next-step-back, .next-step--step-2 .next-step-back { display: block !important; width: 100%; margin: 4px 0 0; }
}
/* R) 2026-10-01 (v30): nadpis „Datum doručení“ sjednocen s „Zvolte způsob dopravy“ a „… platby“.
Doplněk data doručení ho má jako h4 s vlastním stylem: tloušťka 400, černá, malá písmena,
okraje 10/19 px a na počítači posun o 80 px doleva. Sousední nadpisy (h2.order-icon) jsou
700, fialové #732382, velkými písmeny, okraje 16,6/36 px. Hodnoty převzaté z naměřených
stylů těch dvou nadpisů (1. 10. 2026), ikona zůstává z bloku P. */
.fv-datum .order-icon.fv-datum-nadpis {
margin: 16.6px 0 36px !important;
font-size: 20px; line-height: 22px; font-weight: 700; color: #732382; text-transform: uppercase;
}
/* Ikona kalendáře doladěná k sousedním ikonám: tenčí čára (jako dodávka a peněženka),
větší a zarovnaná k levému kraji. Přepisuje obrázek z bloku P. */
.fv-datum .order-icon.fv-datum-nadpis::before {
width: 38px; height: 38px; margin-top: -19px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23732382' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.2' y='4.2' width='21.6' height='18' rx='1.8'/%3E%3Cpath d='M1.2 9.6h21.6M7 1.8v4.6M17 1.8v4.6M6.5 13.6h3M13.5 13.6h3M6.5 17.6h3'/%3E%3C/svg%3E");
}