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");
}
/* S) 2026-10-01 (v31): na dotykových zařízeních tlačítka objednávky nešednou.
Šablona má pro „Pokračovat“ / „Objednat“ při najetí myší tmavě šedou (#373737). Na telefonu
se stav „najetí“ zapne dotykem při posouvání stránky a zůstane viset → přilepené oranžové
tlačítko zešedlo. Na zařízeních bez myši (hover: none) proto zůstává oranžové a při stisku
jen mírně ztmavne; tlačítka „Zpět“ zůstávají bílá s fialovým rámečkem a při stisku zfialoví.
Počítač (hover: hover) se nemění. */
@media (hover: none) {
#continue-order-button:hover, #orderFormButton:hover, #submit-order:hover {
background-color: #e44919 !important; border-color: #e44919 !important; color: #fff !important;
}
#continue-order-button:active, #orderFormButton:active, #submit-order:active {
background-color: #c93d12 !important; border-color: #c93d12 !important;
}
.next-step .next-step-back:hover { background: #fff !important; color: #732382 !important; border-color: #732382 !important; }
.next-step .next-step-back:active { background: #732382 !important; color: #fff !important; }
}
/* T) 2026-10-05: jedno nebo dvě videa v popisu kategorie se neroztahují přes celou šířku.
Blok A2 skládá videa do mřížky „kolik se vejde“ (auto-fit): prázdné sloupce se zruší a
zbylá videa se roztáhnou. U tří videí to dá třetiny, ale jedno video vyšlo přes celou šířku
popisu (1440 px okno: ~1 300 × 730 px) a dvě přes polovinu. Kategorie s jedním nebo dvěma
videi (5. 10. 2026: 11 na CZ, 11 na SK, např. /ostatni-rukavice/, /tukle/, /zasobniky/)
proto dostávají stejné sloupce, jako by videa byla tři: na počítači třetina šířky, na užším
okně polovina (min. 280 px), zarovnáno vlevo k textu. Kategorie se třemi videi se nemění
(pravidlo se jich netýká), mobil pod 768 px také ne. */
@media (min-width: 768px) {
.category-perex p:has(> iframe[src*="youtube"]):not(:has(> iframe:nth-of-type(3))) {
grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 20px) / 3 - 1px)), 1fr));
}
}
/* U) 2026-10-07: výpis kategorie na dotykových zařízeních – druhá fotka produktu posunutím prstu.
Styly pro skript espeon-vypis-fotky v3 (CZ) / espeonky-sk-vypis-fotky v3 (SK): ten u karet ve
výpisu skládá obě fotky vedle sebe do pásu .es-sw-track uvnitř odkazu a pod fotku dává dvě tečky
.es-sw-dots. Pás se posouvá jen vodorovně a prohlížeč ho přichytí na celou fotku; posuvník není
vidět. Tečky leží v 10px mezeře pod fotkou a nejdou zasáhnout prstem (odkaz pod nimi funguje).
Bez skriptu (počítač, starý prohlížeč) se třídy na stránce nevyskytují a pravidla nic nedělají. */
.es-sw-track {
display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.es-sw-track::-webkit-scrollbar { display: none; }
.es-sw-track > img {
flex: 0 0 100%; width: 100%; max-width: 100%; height: auto; display: block;
scroll-snap-align: center; scroll-snap-stop: always;
}
.es-sw-dots {
position: absolute; left: 0; right: 0; bottom: -10px; display: flex; justify-content: center;
gap: 7px; pointer-events: none;
}
.es-sw-dots i {
width: 7px; height: 7px; border-radius: 50%; background: #c9b3cf;
transition: background-color .2s, transform .2s;
}
.es-sw-dots i.on { background: #732382; transform: scale(1.25); }
/* V) 2026-10-08 (v34): počítač – obsah stránky už neposkočí, když se hlavička při posunu přes 200 px
přepne na přilepenou. Styl doplňku (style_dklab.min.css) v tu chvíli vyrovnává 120 px, ale ze
stránky zmizí 185 px (hlavička 145 + horní pruh 40) – obsah poskočil o 65 px na každé stránce a
tlačítko „Zvolte velikost“ proto dojíždělo pod první velikost. Doplněno přesné vyrovnání. */
:root { --es-detail-nakup: 1; } /* značka pro skript espeon-detail-nakup: styly bloků V–Y jsou načtené */
@media screen and (min-width: 768px) {
body.dklabFixHead .overall-wrapper { padding-top: 145px; }
body.dklabFixHead:has(.site-msg.information) .overall-wrapper { padding-top: 185px; }
}
/* W) 2026-10-08 (v34): tečky pod „Souvisejícími produkty“ v košíku zajížděly na mobilu přes
přilepené tlačítko „Pokračovat“. Posuvník jim dává z-index 99, tlačítko má 51 (blok N).
Tečkám stačí 1 – zůstanou nad svým pásem a pod přilepeným tlačítkem i jeho bílým pruhem. */
.cart-related-list .lSSlideOuter .lSPager.lSpg > li a { z-index: 1; }
/* X) 2026-10-08 (v34): detail produktu – tlačítko „Zvolte velikost“ a záložky.
1) Tlačítko ve stránce (#toVariants, text kreslí doplněk přes ::before) mělo tenké písmo velkými
písmeny v oválu a působilo šedě; teď stejný tvar a písmo jako tlačítko v proužku na mobilu
(roh 10 px, 15 px tučně, bílé), po najetí tmavší oranžová místo šedé.
2) V mřížce záložek na mobilu bylo prázdné místo: styl doplňku schovává odkaz „Podobné“
(podobné produkty ukazuje pod záložkami), buňka ale zůstávala. Schová se celá buňka. */
#toVariants { border-radius: 10px; padding: 11px 18px; text-transform: none; box-shadow: 0 3px 8px rgba(228, 73, 25, .25); }
#toVariants:before { font-size: 15px; font-weight: 700; letter-spacing: normal; color: #fff; }
a#toVariants.btn:hover, a#toVariants.btn:focus { background-color: #c93d12 !important; border-color: #c93d12 !important; }
.shp-tabs-row .shp-tab:has(> a[href$='#productsAlternative']) { display: none; }
/* Y) 2026-10-08 (v34): mobil – hlavička a detail produktu. Skript espeon-detail-nakup v1.
1) Klid v hlavičce: zavřený panel menu (#navigation, pevná vrstva mimo obrazovku) při posunu
přes 50 px 0,3 s animoval horní odsazení a hlavičce se přepínal stín. Odsazení zavřeného
panelu je stále 0 a neanimuje se (otevírání a zavírání menu se animuje dál), stín je stálý.
2) Ikona košíku v přilepené hlavičce o 5 px níž a kolečko s počtem uvnitř ikony (byly 7 a 2 px
od horního okraje a na iPhonu zajížděly pod horní lištu prohlížeče).
3) Proužek pod přilepenou hlavičkou na detailu produktu: cena + „Zvolte velikost“ (#es-buybar
vkládá skript jen na dotykových zařízeních a jen u produktů s tabulkou velikostí). Obsah je
o výšku proužku níž a kotva sjezdu na velikosti o 40 px výš, aby první velikost nezůstala
pod proužkem. Při otevřeném menu, hledání nebo košíku z hlavičky se proužek schová.
4) Řádky pod názvem produktu (třídu .es-uklid a .es-meta dává skript): hvězdičky s počtem
hodnocení jako jeden klikací prvek (odkaz „Podrobnosti hodnocení“ roztažený přes ně), štítek
„za týden koupeno“ na stejném řádku, pod tím malý řádek „Kód · Značka“.
Bez skriptu (počítač, starý prohlížeč) se třídy 3) a 4) na stránce nevyskytují. */
@media screen and (max-width: 767px) {
#navigation { transition-property: left, right, width, opacity, transform !important; }
body:not(.navigation-window-visible) #navigation { margin-top: 0 !important; }
.top-navigation-bar { box-shadow: 0 1px 2px rgba(0, 0, 0, .16); }
#header .navigation-buttons a.btn.cart-count i { top: 2px !important; }
body:not(.ordering-process) #header .cart-count { top: -89px; }
#es-buybar {
position: absolute; left: 0; right: 0; top: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 10px; height: 52px; padding: 0 10px 0 12px; text-transform: none; letter-spacing: normal; background: #fff;
border-top: 1px solid #f0e6f3; border-bottom: 1px solid #ead9ee; box-shadow: 0 6px 14px rgba(40, 10, 50, .10); font-family: inherit;
}
body[class*='-window-visible'] #es-buybar { display: none; }
#es-buybar .es-bb-cena { flex: 0 1 auto; min-width: 0; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#es-buybar .es-bb-cena b { font-size: 18px; font-weight: 700; }
#es-buybar .es-bb-cena span { font-size: 13px; color: #6b6b6b; margin-left: 4px; }
#es-buybar button {
flex: 0 0 auto; height: 38px; padding: 0 18px; border: 0; border-radius: 10px; background: #e44919; color: #fff;
font: inherit; font-size: 15px; font-weight: 700; line-height: 38px; white-space: nowrap;
box-shadow: 0 3px 8px rgba(228, 73, 25, .25); -webkit-tap-highlight-color: transparent; cursor: pointer;
}
#es-buybar button:active { background: #c93d12; }
body.es-has-buybar .p-detail { padding-top: 52px; }
body.es-has-buybar #variantsOffset { position: relative; top: -40px; }
.type-detail.es-uklid-on .p-detail-inner-header h1 { margin-bottom: 8px; }
.type-detail .p-detail-info.es-uklid { gap: 6px 8px; margin-bottom: 10px; }
.type-detail .p-detail-info.es-uklid > .stars-wrapper { order: 1; flex: 0 0 auto; width: auto; flex-wrap: nowrap; position: relative; gap: 5px; }
.type-detail .p-detail-info.es-uklid > .stars-wrapper::before { display: none; }
.type-detail .p-detail-info.es-uklid > .stars-wrapper .stars-label { font-size: 13.5px; color: #732382; text-decoration: underline; }
.type-detail .p-detail-info.es-uklid > .stars-wrapper a.stars-link { position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; overflow: hidden; text-indent: -999px; white-space: nowrap; }
.type-detail .p-detail-info.es-uklid > .flags { order: 2; flex: 0 1 auto; }
.type-detail .p-detail-info.es-uklid > .flags .dklabZakoupenoFlag { font-size: 12px; padding: 0 8px; }
.type-detail .p-detail-info.es-uklid > .es-meta { order: 3; flex: 0 0 100%; font-size: 12.5px; line-height: 1.35; color: #767676; }
.type-detail .p-detail-info.es-uklid > .es-meta::before { display: none; }
.type-detail .p-detail-info.es-uklid > .es-meta a, .type-detail .p-detail-info.es-uklid > .es-meta .p-code { font-size: inherit; color: inherit; }
.type-detail .p-detail-info.es-uklid > .es-meta .p-code-label { display: inline; }
.type-detail .p-detail-info.es-uklid > .es-meta .p-code + a::before { content: "\00b7"; margin: 0 6px; }
}
/* Z) 2026-10-08 (v34): krok 2 objednávky – zaškrtávátka „Nezasílat dotazník…“ (Zboží.cz, Heureka)
byla hned nad tlačítkem „Objednat“, kde bývá povinný souhlas, a zákazníci je zaškrtávali omylem
(Clarity 1.–8. 10.). Zůstávají na místě a fungují stejně, jen jsou v šedém rámečku s nadpisem
„Nepovinné“ a menším písmem (varianta B, vybral Kuba 8. 10.). Vypnout v Shoptetu je nejde –
možnost odmítnout dotazník je povinná. Prohlížeč bez :has() zůstane u původního vzhledu. */
#checkoutSidebar .cart-content > .consents:has(input[name=zboziConsent]),
#checkoutSidebar .cart-content > .consents:has(input[name=heurekaConsent]) { margin: 0; padding: 4px 12px; background: #f7f5f8; }
#checkoutSidebar .cart-content > .consents:has(input[name=zboziConsent]) label,
#checkoutSidebar .cart-content > .consents:has(input[name=heurekaConsent]) label { font-size: 13px; color: #6b6b6b; }
#checkoutSidebar .cart-content > .consents.consents-first:has(input[name=zboziConsent]),
#checkoutSidebar .cart-content > .consents.consents-first:has(input[name=heurekaConsent]) { margin-top: 14px; padding-top: 10px; border-radius: 10px 10px 0 0; }
#checkoutSidebar .cart-content > .consents.consents-first:has(input[name=zboziConsent])::before,
#checkoutSidebar .cart-content > .consents.consents-first:has(input[name=heurekaConsent])::before {
content: "Nepovinné"; display: block; margin: 0 0 6px;
font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b6b6b;
}
#checkoutSidebar .cart-content > .consents:has(input[name=heurekaConsent]),
#checkoutSidebar .cart-content > .consents:has(input[name=zboziConsent]):not(:has(+ .consents input[name=heurekaConsent])) {
padding-bottom: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
#checkoutSidebar .cart-content > .consents:has(input[name=heurekaConsent]) + .consents,
#checkoutSidebar .cart-content > .consents:has(input[name=zboziConsent]):not(:has(+ .consents input[name=heurekaConsent])) + .consents { margin-top: 14px; }
/* AA) 2026-10-09 (v35): mobil – stránka kategorie: dlaždice a produkty výš.
Proč: Clarity 1.–8. 10. – v Nitrilových začínaly produkty 1,6 obrazovky pod okrajem (1 332 px), 19 %
zobrazení se neposunulo vůbec; nejklikanější jsou dlaždice podkategorií a ty byly až pod dvěma videi (990 px).
Co dělá (jen do 767 px, jen prohlížeče se :has):
– úvodní text na 3 řádky; zbytek se ukáže tlačítkem „Zobrazit více“ (vkládá skript espeon-detail-nakup v2;
text zůstává celý v kódu stránky),
– dlaždice podkategorií hned pod text, videa až za ně a v jedné řadě, která se posouvá prstem do strany,
– prázdný odstavec mezi průvodcem a videi se neukazuje (označí ho skript).
Pořadí mění jen styly, v HTML se nic nepřesouvá. Sbalení je ve stylech (stránka při načtení neposkočí);
pod textem je pro tlačítko vyhrazeno 48 px. Počítač se nemění.
Podklad: reports/2026-10-09-navrhy-kosik-kategorie-uvod/README.md. Rollback: hlavní CSS zpět na v34. */
:root { --es-kat-mobil: 1; }
@media (max-width: 767px) {
@supports selector(:has(*)) {
body.type-category .category-top:has(> .category-perex) { display: flex; flex-direction: column; }
body.type-category .category-top > .category-perex { display: contents; }
body.type-category .category-top > ul.subcategories { order: 1; }
body.type-category .category-top > .category-perex > p:has(> iframe[src*="youtube"]) {
order: 2; display: flex; gap: 10px; margin: 0 -10px 19px; padding: 0 10px;
overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.type-category .category-top > .category-perex > p:has(> iframe[src*="youtube"])::-webkit-scrollbar { display: none; }
body.type-category .category-top > .category-perex > p:has(> iframe[src*="youtube"]) > iframe {
flex: 0 0 86%; width: 86%; height: auto; aspect-ratio: 16 / 9; scroll-snap-align: center;
}
body.type-category .category-top > .category-perex > p:has(> iframe[src*="youtube"]):not(:has(> iframe + iframe)) > iframe { flex-basis: 100%; width: 100%; }
/* okraje se v řadě pod sebou (flex) nesčítají jako dřív – průvodce výběrem drží původní odstup */
body.type-category .category-top > .category-perex > details,
body.type-category .category-top > .category-perex > details#espeon-category-guide { margin-top: 0; margin-bottom: 19px; }
body.type-category .category-top .es-kat-prazdny { display: none; }
body.type-category .category-top:not(.es-kat-rozbaleno):not(.es-kat-kratky) > .category-perex > p:first-child:not(:has(iframe, img, table)) {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 48px;
}
body.type-category .category-top:not(.es-kat-rozbaleno):not(.es-kat-kratky) > .category-perex > p:first-child:not(:has(iframe, img, table)) ~ p:not(:has(iframe, img, table)) { display: none; }
body.type-category .category-top .es-kat-vice {
align-self: flex-start; height: 40px; margin: 0 0 8px; padding: 0; border: 0; background: none;
color: #702283; font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.type-category .category-top:not(.es-kat-rozbaleno) .es-kat-vice { margin-top: -48px; }
body.type-category .category-top .es-kat-vice::after { content: " \25BE"; display: inline-block; text-decoration: none; }
body.type-category .category-top.es-kat-rozbaleno .es-kat-vice::after { content: " \25B4"; }
}
}
/* AB) 2026-10-09 (v35), upraveno 11. 10. 2026 (v36): mobil – úvodní stránka.
Zůstává jen nižší úvodní pás (menší odstupy a písmo, 601 → 417 px). Řada tří dlaždic Nitrilové / Latexové /
Vinylové byla 11. 10. vrácena – dlaždice jsou zase pod sebou přes celou šířku v původní podobě.
Počítač se nemění. Rollback: hlavní CSS zpět na v35 (dlaždice v řadě) nebo v34 (i původní výška pásu). */
@media (max-width: 767px) {
body.in-index #carousel .extended-banner-texts { padding-top: 24px; }
body.in-index #carousel .extended-banner-title { font-size: 30px; line-height: 1.25; }
body.in-index #carousel .carousel-text { font-size: 16px; line-height: 1.45; }
body.in-index #carousel .carousel-list { padding-top: 44px; padding-bottom: 92px; }
body.in-index #carousel .carousel-list__item { font-size: 15px; }
}
/* AC) 2026-10-11 (v37), změněno týž den (v38): mobil – úvodní stránka, dlaždice Nitrilové / Latexové / Vinylové jako
nižší pásy: stejná podoba jako původně (fotka přes celou šířku, oranžové tlačítko uprostřed ve stejné velikosti),
jen poloviční výška – fotka je oříznutá na pás (116 px při šířce 390 px, úměrně šířce telefonu). Nahrazuje podobu
„řádky s fotkou“ z v37. Odkazy se nemění, počítač se nemění.
Podklad: reports/2026-10-11-uvod-dlazdice-C-ostra/README.md. Rollback: hlavní CSS zpět na v37 (řádky s fotkou)
nebo v36 (původní vysoké pásy). */
@media (max-width: 767px) {
body.in-index .next-to-carousel-banners .banner-wrapper a { width: 100%; height: auto; }
body.in-index .next-to-carousel-banners .banner-wrapper img { width: 100%; height: clamp(96px, 29.75vw, 228px); object-fit: cover; object-position: center 38%; border-radius: 26px; }
}
/* AD) 2026-10-12 (v39): tablet a počítač (od 768 px) – rámečky filtrů ve výpisu kategorie jako pravidelná mřížka.
Všechny rámečky stejně široké a zarovnané pod sebou; „Seřadit dle“ je poslední rámeček první řady (stejná šířka
i výška). Sloupec se smí roztáhnout jen tehdy, když by se do něj nevešel nejdelší název (nic se neláme ani
neořezává). Telefon (do 767 px) se nemění. Zasahuje do rozložení doplňku filtrů (dkLab): dva vnitřní obaly jsou
„průhledné“ (display: contents), obsluha kliknutí visí na #filters a ten zůstává.
--es-ft = sloupců včetně řazení, --es-ff = sloupců pro filtry, --es-fg = mezera, --es-fh = výška rámečku.
Podklad: reports/2026-10-12-filtry-mrizka-ostra/README.md. Rollback: hlavní CSS zpět na v38. */
@media (min-width: 768px) {
#dkLabTopFilters { --es-ft: 4; --es-ff: 3; --es-fg: 8px; --es-fh: 38px; --es-fc: calc((100% - (var(--es-ft) - 1) * var(--es-fg)) / var(--es-ft)); }
#dkLabTopFilters #filters { display: grid !important; grid-template-columns: repeat(var(--es-ff), minmax(max-content, 1fr)) var(--es-fc); gap: var(--es-fg); align-items: start; padding-right: 0; }
#dkLabTopFilters #filters::before { content: ""; grid-row: 1; grid-column: -2 / -1; } /* místo pro „Seřadit dle“ */
#dkLabTopFilters #filters > .filter-sections, #dkLabTopFilters #filters #category-filter-hover { display: contents; }
#dkLabTopFilters #filters > #price-filter-form { position: absolute; } /* jen skrytá pole, nesmí zabrat buňku */
#dkLabTopFilters #filters .slider-wrapper, #dkLabTopFilters #filters .filter-section { float: none; width: auto; min-width: 0; margin: 0; }
#dkLabTopFilters #filters .filter-section-count { grid-column: 1 / -1; }
#dkLabTopFilters #filters .slider-wrapper > h4, #dkLabTopFilters #filters .filter-section > h4 { white-space: nowrap; }
#dkLabTopFilters #category-header { right: 0; width: var(--es-fc); }
#dkLabTopFilters #category-header .span--sort { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: var(--es-fh); padding-top: 0; padding-bottom: 0; text-align: left; }
}
@media (min-width: 992px) {
#dkLabTopFilters { --es-ft: 5; --es-ff: 4; --es-fg: 10px; --es-fh: 42px; }
#dkLabTopFilters #filters .slider-wrapper > h4, #dkLabTopFilters #filters .filter-section > h4 { padding-left: 12px; padding-right: 30px; }
#dkLabTopFilters #filters .slider-wrapper > h4::after, #dkLabTopFilters #filters .filter-section > h4::after { right: 11px; }
}
@media (min-width: 1200px) {
#dkLabTopFilters { --es-ft: 6; --es-ff: 5; --es-fh: 43px; }
#dkLabTopFilters #filters .slider-wrapper > h4, #dkLabTopFilters #filters .filter-section > h4 { font-size: 12px; }
}
@media (min-width: 1440px) {
#dkLabTopFilters #filters .slider-wrapper > h4, #dkLabTopFilters #filters .filter-section > h4 { font-size: 13px; padding-left: 16px; padding-right: 38px; }
#dkLabTopFilters #filters .slider-wrapper > h4::after, #dkLabTopFilters #filters .filter-section > h4::after { right: 14px; }
}
/* vzhled rámečků: zaoblení, světlejší linka, fialová při najetí a rozbalení; zvolený filtr zůstává oranžový */
@media (min-width: 768px) {
#dkLabTopFilters #filters .slider-wrapper, #dkLabTopFilters #filters .filter-section:not(.filter-section-count), #dkLabTopFilters #category-header.category-header.dkLabTopFiltersHeader .span--sort.span--sort { border: 1px solid #cdbfd4 !important; border-radius: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
#dkLabTopFilters #filters .slider-wrapper:hover, #dkLabTopFilters #filters .filter-section:not(.filter-section-count):hover, #dkLabTopFilters #category-header.category-header.dkLabTopFiltersHeader .span--sort.span--sort:hover { border-color: #702283 !important; }
#dkLabTopFilters #filters .slider-wrapper.active, #dkLabTopFilters #filters .filter-section.active, #dkLabTopFilters #category-header.category-header.dkLabTopFiltersHeader.active .span--sort.span--sort { border-color: #702283 !important; box-shadow: 0 0 0 3px rgba(112, 34, 131, .12); }
#dkLabTopFilters #filters .filter-section.checked { border-color: #e2470f !important; background: #fff7f2; }
#dkLabTopFilters #filters .filter-section > form, #dkLabTopFilters #filters .slider-wrapper > .dkLab-slider-wrapper, #dkLabTopFilters #category-header .listSorting { margin-top: 6px; border: 1px solid #702283; border-radius: 10px; box-shadow: 0 10px 28px rgba(60, 20, 80, .16); }
}
/* AE) 2026-10-12 (v40): Telefon (do 767 px), filtry po ťuknutí na „Zobrazit filtry“: dva sloupce stejně širokých rámečků ve stejném vzhledu
jako na počítači (zaoblení, světlá linka, fialová při rozbalení). Písmo názvů se přizpůsobuje šířce telefonu tak,
aby se i nejdelší název vešel na jeden řádek vedle nápovědy a šipky. Pojistka: rámeček, jehož název by se do poloviny
nevešel (užší telefon, nový delší filtr), se sám roztáhne přes celý řádek – nic se nepřekrývá, nelomí ani neořezává.
Podklad: reports/2026-10-12-filtry-telefon-ostra/README.md. Rollback: hlavní CSS zpět na v39.
Otevřený panel se pozná podle style="display: block" (tak ho otevírá doplněk). */
@media (max-width: 767px) {
#dkLabTopFilters #filters { padding: 14px 12px 8px; border-radius: 12px; }
#dkLabTopFilters #filters[style*="display: block"] { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#dkLabTopFilters #filters > .filter-sections, #dkLabTopFilters #filters #category-filter-hover { display: contents; }
#dkLabTopFilters #filters > #price-filter-form { position: absolute; }
#dkLabTopFilters #filters .slider-wrapper, #dkLabTopFilters #filters .filter-section:not(.filter-section-count) { float: none; box-sizing: border-box; flex: 0 1 calc(50% - 4px); width: auto; min-width: max-content; max-width: 100%; margin: 0; border: 1px solid #cdbfd4 !important; border-radius: 10px; background: #fff; }
#dkLabTopFilters #filters .filter-section-count { flex: 0 0 100%; margin: 0; }
#dkLabTopFilters #filters .slider-wrapper > h4, #dkLabTopFilters #filters .filter-section > h4 { font-size: clamp(10.5px, 3.05vw, 13px); padding-left: 9px; padding-right: 24px; white-space: nowrap; }
#dkLabTopFilters #filters h4 .espeon-tip { width: 17px; height: 17px; margin-left: 5px; }
#dkLabTopFilters #filters h4 .espeon-tip::before { font-size: 11.5px; }
#dkLabTopFilters #filters .slider-wrapper > h4::after, #dkLabTopFilters #filters .filter-section > h4::after { right: 8px; }
#dkLabTopFilters #filters .slider-wrapper.active, #dkLabTopFilters #filters .filter-section.active { border-color: #702283 !important; box-shadow: 0 0 0 3px rgba(112, 34, 131, .12); }
#dkLabTopFilters #filters .filter-section.checked { border-color: #e2470f !important; background: #fff7f2; }
#dkLabTopFilters #filters .filter-section > form, #dkLabTopFilters #filters .slider-wrapper > .dkLab-slider-wrapper { box-sizing: border-box; min-width: calc(100% + 2px); margin-top: 6px; border: 1px solid #702283; border-radius: 10px; box-shadow: 0 10px 28px rgba(60, 20, 80, .16); }
/* tlačítka nad panelem („Seřadit dle“, „Zobrazit / Skrýt filtry“) ve stejném vzhledu; nabídka řazení bez lámání slov */
#dkLabTopFilters #category-header.category-header.dkLabTopFiltersHeader .span--sort.span--sort, #dkLabTopFilters .dkLab-filters-pack-button > .btn { border: 1px solid #cdbfd4 !important; border-radius: 10px !important; background: #fff; }
#dkLabTopFilters #category-header.category-header.dkLabTopFiltersHeader.active .span--sort.span--sort { border-color: #702283 !important; box-shadow: 0 0 0 3px rgba(112, 34, 131, .12); }
#dkLabTopFilters #category-header .listSorting { top: 36px; margin-top: 0; min-width: 190px; border: 1px solid #702283; border-radius: 10px; box-shadow: 0 10px 28px rgba(60, 20, 80, .16); }
}