v .p-detail-inner-header-mobile (uvnitř .p-image-wrapper) — vidět je TATO nad ~1200 px:

v .p-detail-inner-header Ta druhá je na užších oknech v DOM pořád, ale má nulovou šířku. Když se stylovala jen ona, na desktopu se změna projevila a na užším okně ne — protože tam byl vidět ten druhý, netknutý, v původních 700/34px. Stejná past jako u uvítacího bloku (viz zoo4you.js, blok 9e): Shoptet používá
, ne
, takže selektor na element ho mine. PŘI MĚŘENÍ VŽDY FILTROVAT NA getBoundingClientRect().width > 0. / html body .p-detail .p-detail-inner-header h1, html body .p-detail-inner-header h1, html body .p-detail .p-detail-inner-header-mobile .h1, html body .p-detail-inner-header-mobile .h1{ / ⚠️ NE var(--z-font-title). Ta proměnná ukazuje na 'Schibsted Grotesk', který se na webu nikde nenačítá — změřeno: text v ní vysázený má přesně stejnou šířku jako v system-ui, tedy se používá záložní písmo. Druhá deklarovaná rodina (Hanken Grotesk) má načtené jen řezy 600, 700 a 800, takže by prohlížeč u váhy 400 skočil na 600 a nadpis by zase ztěžknul. Proto tu stojí rodina, která reálný řez 400 má. / font-family:system-ui,-apple-system,'Segoe UI',sans-serif !important; font-size:clamp(19px,1.7vw,24px) !important; font-weight:400 !important; / název produktu je popisek, ne poutač / line-height:1.25 !important; letter-spacing:-.01em !important; color:var(--z-band) !important; } / --- PRAVÝ SLOUPEC DETAILU: všechno na jednu levou osu --- Podle reference (Vilgain). Disco rozhazovalo obsah do krajů třemi nezávislými způsoby a každý se musel vypnout zvlášť — ověřeno naživo na /yoggies-lneny-olej-pro-psy-a-kocky-500-ml/. / / 1) Značka odlétala k pravému okraji přes margin-left:auto. Velikost písma sjednocená s levým panelem kategorií (13 px / 400) — hodnocení a značka jsou doplňkový údaj, ne druhý nadpis. / html body .p-detail .ratings-and-brand{ justify-content:flex-start !important; gap:6px 20px !important; flex-wrap:wrap !important; } / ⚠️ Velikost se dědí z kontejneru přes `* { font-size:inherit }`, ne výčtem značek. Výčet (a, span, div) minule „Podrobnosti hodnocení" minul — odkaz sedí hlouběji, než kam selektor dosáhl, a zůstal velký a podtržený vedle zmenšeného zbytku. Hvězdičky jsou ikonový font, takže je stejná dědičnost zmenší zároveň. / html body .p-detail .ratings-and-brand{ font-size:12px !important; font-weight:400 !important; line-height:1.5 !important; / jedna barva pro celý řádek — dřív se tu potkávaly tři: tmavý text, tmavý podtržený odkaz a oranžová značka / color:var(--z-muted,#8A8178) !important; } html body .p-detail .ratings-and-brand { font-size:inherit !important; color:inherit !important; text-decoration:none !important; border-bottom:none !important; line-height:1.5 !important; } html body .p-detail .ratings-and-brand a:hover, html body .p-detail .ratings-and-brand a:hover { color:var(--z-accent-dark,#C4551A) !important; } html body .p-detail .ratings-and-brand .stars-wrapper{ width:auto !important; flex:0 0 auto !important; } html body .p-detail .ratings-and-brand .brand-wrapper{ flex:0 0 auto !important; margin-left:0 !important; } / --- HVĚZDIČKY --- ⚠️ Zděděný font-size je nezmenšil, takže to nejsou znaky ikonového fontu, ale prvky s pevnými rozměry (background-image nebo SVG). Proto se tu nastavuje rozměr, ne velikost písma, a to přes [class="star"], protože přesná třída listu není ověřená. :not(.stars) je podstatné — bez něj by 11 px dostal i kontejner všech pěti hvězd a slisoval by je na sebe. / /* ⚠️ ZOOM ODSTRANĚN. `zoom` na .stars-wrapper > [class="star"] zmenšil i „Neohodnoceno" a „Podrobnosti hodnocení" — ten přímý potomek tedy neobsahuje jen hvězdy, ale celý řádek včetně textu. Zmenšovat se smí výhradně listy, ne jakýkoli obal. Dokud nebude ověřená přesná třída listu, zůstává jen rozměrové pravidlo níž (které samo nestačilo). / /* ⚠️ Rozměr dostávají VÝHRADNĚ potomci .stars, ne cokoli s „star" v názvu. Selektor [class="star"] chytal i obal, ve kterém sedí „Neohodnoceno" — ten pak dostal 11×11 px, text z něj vytekl a překryl „Podrobnosti hodnocení". Hvězdy jsou uvnitř .stars, doprovodný text ne. / html body .p-detail .ratings-and-brand .stars > , html body .p-detail .ratings-and-brand .stars > > { width:11px !important; height:11px !important; min-width:0 !important; min-height:0 !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; font-size:11px !important; line-height:1 !important; } html body .p-detail .ratings-and-brand .stars > ::before, html body .p-detail .ratings-and-brand .stars > * > ::before{ font-size:11px !important; line-height:1 !important; background-size:contain !important; background-repeat:no-repeat !important; } / doprovodný text zpátky na velikost řádku — ať ho nesebere nic výše / html body .p-detail .ratings-and-brand .stars-wrapper > :not(.stars), html body .p-detail .ratings-and-brand .stars-wrapper a, html body .p-detail .ratings-and-brand .brand-wrapper, html body .p-detail .ratings-and-brand .brand-wrapper { font-size:12px !important; width:auto !important; height:auto !important; } html body .p-detail .ratings-and-brand .stars{ display:inline-flex !important; align-items:center !important; gap:2px !important; line-height:1 !important; } html body .p-detail .ratings-and-brand svg{ width:11px !important; height:11px !important; } / --- Tisk / Zeptat se / Sdílet: stejná velikost i barva jako řádek s hodnocením, bez podtržení. --- / html body .p-detail .p-detail-tools, html body .p-detail .p-detail-tools a, html body .p-detail .detail-tools, html body .p-detail .detail-tools a, html body .p-detail .link-icons, html body .p-detail .link-icons a{ font-size:13px !important; font-weight:400 !important; color:var(--z-muted,#8A8178) !important; text-decoration:none !important; } html body .p-detail .p-detail-tools a:hover, html body .p-detail .detail-tools a:hover, html body .p-detail .link-icons a:hover{ color:var(--z-accent-dark,#C4551A) !important; } html body .p-detail .p-detail-tools svg, html body .p-detail .detail-tools svg, html body .p-detail .link-icons svg{ width:15px !important; height:15px !important; } / --- Pravý sloupec není banner přes půl obrazovky --- Bez stropu se roztáhne na celou zbylou šířku a tlačítko „Do košíku" je pak 570 px široký oranžový pás. ⚠️ margin-right:auto, ne margin:0 auto — vzniklé místo musí zůstat vpravo. Se souměrným auto marginem by se sloupec vycentroval a rozešel se s levou osou, na kterou je srovnaný zbytek stránky. / html body .p-detail .p-detail-inner > .p-data-wrapper{ max-width:460px !important; margin-left:0 !important; margin-right:auto !important; } / 2) Tabulka parametrů: štítek měl min-width:180px, takže mezi „Dostupnost" a „Skladem" zela díra přes půl sloupce. ⚠️ Bez min-width:0 se width:1% neprojeví — min-width vyhrává. / html body .p-detail table.detail-parameters{ width:auto !important; table-layout:auto !important; } html body .p-detail table.detail-parameters th{ width:1% !important; min-width:0 !important; white-space:nowrap !important; padding:0 18px 0 0 !important; text-align:left !important; font-weight:400 !important; color:var(--z-muted,#8A8178) !important; } html body .p-detail table.detail-parameters td{ width:auto !important; padding:0 !important; } html body .p-detail table.detail-parameters th, html body .p-detail table.detail-parameters td, html body .p-detail table.detail-parameters td span{ font-size:13px !important; line-height:1.45 !important; } html body .p-detail .availability-label{ font-weight:600 !important; } / stavová tečka před dostupností, jako v referenci / html body .p-detail .availability-label::before{ content:"" !important; display:inline-block !important; vertical-align:middle !important; width:8px !important; height:8px !important; border-radius:50% !important; background:currentColor !important; margin-right:8px !important; margin-top:-2px !important; } / 2b) Dostupnost patří pod tlačítko „Do košíku", ne nad cenu. ⚠️ Přesun se dělá pořadím ve flexu, ne v DOM — HTML generuje Shoptet. Ostatní potomci formuláře (u variant výběr velikosti) zůstávají na order:0, takže jdou první, což je správně. / html body .p-detail form.pr-action{ display:flex !important; flex-direction:column !important; } html body .p-detail form.pr-action > .p-to-cart-block{ order:1 !important; } html body .p-detail form.pr-action > table.detail-parameters{ order:2 !important; margin:16px 0 0 !important; } / 3) Cena a množstevník vedle sebe, ne na opačných koncích řádku. ⚠️ .add-to-cart měl margin-left:auto — samotné justify-content na rodiči ho nepřebije, auto margin má přednost. / html body .p-detail .p-to-cart-block{ justify-content:flex-start !important; gap:28px !important; padding-left:0 !important; padding-right:0 !important; } html body .p-detail .p-to-cart-block .add-to-cart{ margin-left:0 !important; } / Sloupce detailu na jednu osu s panelem kategorií. ⚠️ .sidebar-inner má padding-top:20px, takže bílá karta kategorií začíná o 20 px níž než fotka a nadpis. Srovnáváme posunutím pravé části dolů, ne zrušením toho paddingu — ten drží odstup i na stránkách bez detailu produktu. / html body .p-detail .p-detail-inner > .p-image-wrapper, html body .p-detail .p-detail-inner > .p-data-wrapper{ margin-top:20px !important; } .p-detail .p-final-price-wrapper .price-final, .p-detail .price-final strong{ font-size:32px !important; font-weight:800 !important; color:var(--z-ink) !important; } .p-detail .price-standard, .p-detail del{ color:#A08A72 !important; font-size:15px !important; } .p-detail .availability-value, .p-detail .availability-label{ color:var(--z-ok) !important; font-weight:700 !important; } / --- řádek „Kód: 4136" pryč --- Interní číslo z Pohody, zákazníkovi neříká nic a v detailu zabírá celý řádek. Disco ho vykresluje ve třech variantách podle šablony (buňka tabulky, řádek tabulky, samostatný span), proto všechny tři. ⚠️ Nepoužívat [class="code"] — chytlo by i pole na slevový kupón. / .p-detail .p-code, .p-detail tr.p-code, .p-detail .p-code-row, .p-detail .product-detail-code, .p-detail .product-code{ display:none !important; } /* --- smazat horizontální čáry u Dostupnost / Kód --- V Shoptet Disco tyto řádky používají flex layout s ::after čarou a tabulkovou strukturu s border-bottom / / ::after leader-line (nejčastější způsob v Disco) / .p-detail dt::after, .p-detail th::after, .p-detail .p-properties dt::after, .p-detail .p-properties th::after, .p-detail .p-property-label::after, .p-detail .product-detail-property .label::after, .p-detail .p-availability::after, .p-detail .p-code-row::after, .p-detail [class="property"]::after, .p-detail [class="availability"]::after, .p-detail [class="code-"]::after { display:none !important; border:none !important; content:none !important; } /* a případné hr elementy / .p-detail .p-properties hr, .p-detail .p-info hr, .p-detail .product-detail-properties hr { display:none !important; } / border-bottom na řádcích tabulky / .p-detail .p-info, .p-detail .p-info table, .p-detail .p-info tr, .p-detail .p-info td, .p-detail .p-info th, .p-detail table.p-properties, .p-detail table.p-properties tr, .p-detail table.p-properties td, .p-detail table.p-properties th, .p-detail .product-detail-availability, .p-detail .product-detail-code, .p-detail .p-availability, .p-detail .p-availability-block, .p-detail .product-availability, .p-detail .product-code, .p-detail [class="property"], .p-detail [class="availability"], .p-detail [class="code-row"] { border:none !important; border-bottom:none !important; border-top:none !important; box-shadow:none !important; } /* --- tlačítko Do košíku: bez záře --- / .p-detail .add-to-cart .btn, .p-detail .btn-conversion { border-radius:13px !important; font-weight:700 !important; font-size:16px !important; padding:15px 32px !important; min-height:52px !important; box-shadow:none !important; } .p-detail .add-to-cart .btn:hover, .p-detail .btn-conversion:hover { box-shadow:none !important; } / --- stepper +/- count --- Rozvržení řeší sekce 12 (platí všude stejně). Tady jen zvětšení, aby vedle velkého tlačítka „Do košíku" nevypadal jako drobek. ⚠️ Dřív tu bylo celé druhé rozvržení (max-width:140, gap, flex:0 0 38px). Mělo vyšší specificitu než sekce 12, přebilo ji jen zčásti a stepper se složil do 52 px — tlačítka ležela přes číslo. Neobnovovat. / .p-detail .quantity{ min-height:40px !important; } .p-detail .quantity .increase, .p-detail .quantity .decrease{ width:34px !important; height:38px !important; flex:0 0 34px !important; font-size:16px !important; } .p-detail .quantity input{ font-size:15px !important; min-width:38px !important; } / --- drobečková navigace: začíná zleva --- Shoptet jí dává width:470px + margin-left:auto, takže se odtlačí k pravému okraji kontejneru. / body .breadcrumbs{ margin-left:0 !important; width:auto !important; max-width:none !important; padding:0 var(--zpad, 24px) !important; / stejná osa jako logo a menu / } / --- hlavní obrázek: JEDEN světlý panel, ne dva rámečky --- Původně měl rámeček .p-image-wrapper i .p-main-image uvnitř → dvojitý obrys. Rámeček nese jen vnitřní prvek, a to jako plocha ve stejném odstínu jako karty ve výpisu (viz sekce 15). ⚠️ Šablona Shoptetu má na .p-main-image vlastní !important pozadí s vyšší specificitou — proto je tu selektor přes html body + .p-image-wrapper. / body .p-detail .p-image-wrapper{ border:none !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body .p-detail .p-image{ padding-bottom:16px !important; } html body .p-detail .p-image-wrapper a.p-main-image{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:auto !important; aspect-ratio:1/1 !important; background:#fff !important; border:1px solid var(--z-line) !important; border-radius:18px !important; / užší po stranách než nahoře a dole — fotka tak vyplní panel do šířky, ale nedotýká se zaoblených rohů / padding:24px 12px !important; overflow:hidden !important; } html body .p-detail a.p-main-image img{ max-width:94% !important; max-height:86% !important; width:auto !important; height:auto !important; object-fit:contain !important; } .p-thumbnails img, .thumbnail img{ border:1px solid var(--z-line) !important; border-radius:10px !important; } / --- parametry produktu: bez béžových pruhů, bez oddělovačů --- #filters uvnitř už má border z zoo4you.css; border-bottom tady bylo navíc / .detail-parameters{ border:none !important; border-radius:0 !important; } html body .p-detail table.detail-parameters th{ color:var(--z-muted) !important; font-weight:600 !important; background:transparent !important; border:none !important; padding:12px 0 !important; } html body .p-detail table.detail-parameters td, html body .p-detail table.detail-parameters tr.p-code{ color:var(--z-ink) !important; background:transparent !important; border:none !important; border-bottom:none !important; / ← odstraňte čáry / padding:12px 0 !important; } / počet kusů řeší sekce 12 — platí pro detail, košík i widget zároveň / / --- blok s cenou a košíkem: bez šedého pozadí --- / body .p-detail .p-to-cart-block{ background:transparent !important; } / ========================================================================== 10. MOBIL ========================================================================== / @media(max-width:768px){ .cart-table td{ padding:12px !important; } .summary, .cart-total{ padding:16px !important; } .subcategories{ grid-template-columns:1fr 1fr !important; } .btn-conversion{ width:100% !important; } } / ========================================================================== 11. MOBIL — kompletní responzivita ========================================================================== / @media(max-width:991px){ / --- hlavička: logo + ikony na řádku, hledání pod tím --- / .header-top-wrapper{ flex-wrap:wrap !important; gap:10px !important; } .site-name{ order:1; } .navigation-buttons{ order:2; margin-left:auto !important; } .header-top-wrapper .user-action-search, .header-top-wrapper .search-widget{ order:3 !important; flex-basis:100% !important; max-width:none !important; margin:6px 0 0 !important; } .site-name img{ max-height:35px !important; } / --- menu vodorovně scrollovatelné --- ⚠️ POUZE od 768 px výš. Na telefonu se menu vykresluje v zásuvce pod hamburgerem a tohle z ní dělalo vodorovný pás — viditelné byly čtyři položky a pod nimi prázdno. Vertikální varianta je v sekci 14. / .navigation-in.menu > ul.menu-level-1{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding-bottom:8px !important; scrollbar-width:thin; } .navigation-in.menu > ul.menu-level-1 > li{ flex:none !important; } .navigation-in.menu > ul.menu-level-1::-webkit-scrollbar{ height:4px; } .navigation-in.menu > ul.menu-level-1::-webkit-scrollbar-thumb{ background:#E0D4C0; border-radius:2px; } / --- hero nižší --- / #carousel .item img, .carousel .item img{ min-height:340px; object-fit:cover; } / ⚠️ Jen vodorovné odsazení. Zkratka `padding:0 20px !important` tady přebíjela svislé odsazení overlaye ze zoo4you-fix.css (pill od horní hrany, statistiky od spodní) — pages.css se načítá poslední. / .z-hero-overlay{ padding-left:20px !important; padding-right:20px !important; } .z-hero-h1{ font-size:clamp(24px,7vw,34px) !important; } .z-hero-cta{ margin-top:18px !important; } .z-hero-btn{ padding:12px 20px !important; font-size:14px !important; } / --- filtry: sbalené pod tlačítko --- / .box-filters, .filters-wrapper{ padding:16px !important; } .filters-unveil-button-wrapper{ position:sticky; bottom:12px; z-index:20; } .filters-unveil-button-wrapper .btn{ width:100% !important; min-height:50px !important; box-shadow:none !important; / bez oranžové záře / } / --- košík: tabulka jako karty --- / .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block !important; width:100% !important; } .cart-table thead{ display:none !important; } .cart-table tr{ border:1px solid var(--z-line) !important; border-radius:14px !important; margin-bottom:12px !important; padding:12px !important; background:#fff !important; } .cart-table td{ border:none !important; padding:6px 0 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; } .cart-p-image{ justify-content:center !important; } .cart-p-image img{ max-width:90px !important; } / --- souhrn a tlačítka --- / .summary, .cart-total{ padding:16px !important; } .price-primary, .cart-total .price-final{ font-size:22px !important; } .next-step{ flex-direction:column-reverse !important; gap:10px !important; } .next-step .btn, .btn-conversion{ width:100% !important; justify-content:center !important; } / --- detail produktu --- ⚠️ Stejná specificita i font-family jako v základu (sekce 9). Dřív tu bylo jen font-size, takže o tloušťce a písmu rozhodoval základ — a ten měl dvě konkurenční verze ve dvou souborech. / html body .p-detail .p-detail-inner-header h1, html body .p-detail-inner-header h1, html body .p-detail .p-detail-inner-header-mobile .h1, html body .p-detail-inner-header-mobile .h1{ / i tady obě varianty nadpisu — viz poznámka u sekce 9 / font-family:system-ui,-apple-system,'Segoe UI',sans-serif !important; font-size:20px !important; font-weight:400 !important; line-height:1.25 !important; } .p-detail .p-final-price-wrapper .price-final{ font-size:26px !important; } .p-detail .add-to-cart .btn{ width:100% !important; } / --- sekce --- / .z-section{ margin-top:36px !important; } .z-band, .z-cta-band, .z-newsletter{ padding:26px !important; border-radius:18px !important; } .z-newsletter{ flex-direction:column !important; align-items:flex-start !important; } .z-newsletter-form{ max-width:none !important; width:100% !important; } } @media(max-width:600px){ / karty produktů 2 sloupce / body div[id^="products-"], body .products-wrapper > .products{ grid-template-columns:1fr 1fr !important; gap:12px !important; } .product .p-in{ padding:0 12px 12px !important; } .product .name{ font-size:13.5px !important; min-height:36px; } .product .price-final{ font-size:18px !important; } .product .btn, .product .add-to-cart-button{ font-size:13px !important; padding:11px 12px !important; min-height:42px !important; } / USP a dlaždice 2 sloupce / .benefitBanner{ grid-template-columns:1fr 1fr !important; gap:10px !important; } .benefitBanneritem{ padding:12px !important; } .benefitBannertitle{ font-size:13.5px !important; } .benefitBannerdata{ font-size:11.5px !important; } .subcategories{ grid-template-columns:1fr 1fr !important; } .z-brands{ gap:8px !important; } .z-brand{ padding:10px 16px !important; font-size:13.5px !important; } / hero statistiky menší / .z-hero-stats{ gap:14px !important; } .z-hero-stat b{ font-size:17px !important; } .z-hero-stat span{ font-size:11px !important; } } @media(max-width:400px){ body div[id^="products-"], body .products-wrapper > .products{ grid-template-columns:1fr !important; } .benefitBanner{ grid-template-columns:1fr !important; } } / ========================================================================== 12. POČET KUSŮ — zaoblený segment (platí VŠUDE: košík, detail, widget) ========================================================================== / / ⚠️ Dvě pasti, obě ověřené naživo 4. 8. 2026 na /kosik/: 1) Sekce 2 má `.cart-table .quantity input{border:1.5px}` — vyšší specificita než `.quantity input`, takže vstupu zůstával vlastní rámeček a prvek měl DVA obrysy nad sebou. Proto je tu html body. 2) Shoptet drží .quantity úzkou a přebývající tlačítka ořezává přes overflow:hidden. Pořadí v DOM je label → increase → decrease, takže se přeskládává přes `order`, ne změnou HTML. / / Vzhled podle reference: bílý, tenký rámeček, kompaktní. / html body .quantity{ display:inline-flex !important; align-items:center !important; justify-content:space-between !important; width:auto !important; min-width:84px !important; min-height:28px !important; background:#fff !important; border:1px solid #E3E0DA !important; border-radius:8px !important; overflow:visible !important; padding:0 !important; gap:0 !important; } html body .quantity label{ order:2 !important; flex:1 1 auto !important; align-self:stretch !important; display:flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:40px !important; margin:0 !important; } html body .quantity .decrease{ order:1 !important; flex:0 0 24px !important; } html body .quantity .increase{ order:3 !important; flex:0 0 24px !important; } html body .quantity .decrease, html body .quantity .increase{ / ⚠️ Disco dává tlačítkům position:absolute (top:0, left/right:0). Vypadnou tím z flexu, šířka .quantity spadne na samotné číslo (52 px) a „−"/„+" leží PŘES něj. Naměřeno na detailu produktu. Statická pozice je proto podmínka, ne kosmetika. / position:static !important; width:24px !important; height:26px !important; / svislé zarovnání přes flex, ne přes line-height — drží i když se výška tlačítka jinde změní (detail produktu je má vyšší) / display:flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; padding:0 !important; border-radius:0 !important; font-size:13px !important; color:#9A928A !important; background:none !important; transition:color .15s !important; } / ⚠️ OPRAVA STARÉHO PŘEDPOKLADU: „−" a „+" NEJSOU ::before pseudoprvky. Skutečný znak je − uvnitř tlačítka. ::before je prázdný zbytek po ikonovém fontu (content:"", font-family: shoptet), ale CSS mu dávalo rozměr 38×38 — a protože je tlačítko flex, zabíral půlku šířky a odtlačoval znaménko z osy. Odtud ta „zmáčknutost" a to, že +/− sedělo výš než číslo. Ověřeno na detailu produktu. width/height auto: když je ::before prázdný, smrskne se na nulu; kdyby ho jiná šablona přece jen naplnila glyfem, nastaví se podle obsahu. / / ⚠️ ::before se SKRÝVÁ. Předchozí verze mu dala width/height:auto s tím, že když je prázdný, smrskne se na nulu. Na části produktů ale prázdný není a vykreslil se glyf z ikonového fontu — vedle znaménka ze spanu, takže v tlačítku byly „− −" a „+ +". Skutečný znak nese vždycky .decreasesign / .increasesign, tenhle pseudoprvek je zbytečný. / html body .quantity .decrease::before, html body .quantity .increase::before{ content:none !important; display:none !important; } html body .quantity .decreasesign, html body .quantity .increase__sign{ display:block !important; line-height:1 !important; margin:0 !important; padding:0 !important; font-size:inherit !important; color:inherit !important; } / bublinové nápovědy nad tlačítky nesmí zabírat místo ve flexu / html body .quantity .increase-tooltip, html body .quantity .decrease-tooltip{ position:absolute !important; pointer-events:none !important; } / hover jen ztmavením symbolu — žádné podbarvení. ⚠️ Žluté pozadí (#FFC500) sedí na ::before, ne na tlačítku samotném — ověřeno naživo: button má na hover background rgba(0,0,0,0), ale getComputedStyle(btn,'::before').backgroundColor vrací rgb(255,197,0). / html body .quantity .decrease:hover, html body .quantity .increase:hover{ background:none !important; color:#4A443C !important; } html body .quantity .decrease::before, html body .quantity .increase::before, html body .quantity .decrease:hover::before, html body .quantity .increase:hover::before{ background:none !important; color:inherit !important; } html body .quantity input, html body .cart-table .quantity input{ width:100% !important; min-width:30px !important; height:auto !important; font-size:12px !important; font-weight:600 !important; border:none !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; text-align:center !important; } .quantity .increase, .quantity .decrease, .increase, .decrease{ width:36px !important; height:36px !important; border:none !important; background:transparent !important; color:var(--z-muted) !important; border-radius:9px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:17px !important; font-weight:700 !important; cursor:pointer !important; transition:.15s; } .quantity .increase:hover, .quantity .decrease:hover, .increase:hover, .decrease:hover{ background:none !important; color:#4A443C !important; } .quantity input, .quantity .amount, input.amount{ width:46px !important; height:36px !important; border:none !important; background:transparent !important; text-align:center !important; font-weight:700 !important; font-size:15px !important; color:var(--z-ink) !important; box-shadow:none !important; padding:0 !important; -moz-appearance:textfield; } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } / ========================================================================== 13. VYSKAKOVACÍ KOŠÍK (po vložení do košíku) ========================================================================== / #cart-widget, .cart-widget.popup-widget{ border:1px solid var(--z-line) !important; border-radius:18px !important; box-shadow:0 24px 60px -28px rgba(35,32,28,.45) !important; overflow:hidden !important; padding:0 !important; background:#fff !important; } #cart-widget .popup-widget-inner, .cart-widget-inner{ padding:0 !important; } / položka v košíku / #cart-widget .cart-item, .cart-widget .cart-item, #cart-widget tr{ display:flex !important; align-items:center !important; gap:14px !important; padding:16px 20px !important; border-bottom:1px solid var(--z-line) !important; } #cart-widget td{ border:none !important; padding:0 !important; } #cart-widget img{ width:56px !important; height:56px !important; object-fit:contain !important; border:1px solid var(--z-line) !important; border-radius:10px !important; padding:4px; background:#fff; } #cart-widget .p-name, #cart-widget .name a{ font-weight:600 !important; font-size:14.5px !important; color:var(--z-ink) !important; flex:1 !important; text-align:left !important; } #cart-widget .p-price, #cart-widget .price{ font-weight:800 !important; font-size:15.5px !important; color:var(--z-ink) !important; white-space:nowrap; } / patička widgetu s tlačítkem / #cart-widget .cart-widget-footer, #cart-widget .buttons, .cart-widget .btn-wrapper{ padding:16px 20px !important; background:#FAF7F2 !important; } #cart-widget .btn, .cart-widget .btn{ width:100% !important; border-radius:13px !important; font-weight:700 !important; font-size:15px !important; min-height:50px !important; background:var(--z-accent) !important; border:none !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; } #cart-widget .btn:hover, .cart-widget .btn:hover{ background:var(--z-accent-dark) !important; } / hláška o dopravě zdarma / #cart-widget .free-shipping, #cart-widget .cart-free-shipping{ text-align:center !important; font-size:13.5px !important; color:var(--z-ok) !important; font-weight:600 !important; padding:12px 20px !important; } / ========================================================================== 14. MOBILNÍ HLAVIČKA — kompaktní, bez překryvu carouselu Měřeno v iframe 390 px (3. 8. 2026). Problém: #header je position:fixed a byl vysoký 78 px, ale Shoptet rezervuje obsahu jen 50 px → hlavička přesahovala přes carousel o 20 px. Zdroje výšky: .header-top-wrapper min-height:50px + .header-top padding 14px + tlačítka 50×50. ⚠️ Tlačítka jsou flex položky — samotné width/height je nestačí přebít, je nutné i flex / min-width / max-width, jinak je flexbox roztáhne zpět. ========================================================================== / @media (max-width:767px){ / nesymetrický padding: obsah hlavičky sedí o kus níž, ale hlavička zůstává 60 px, takže pořád nepřesahuje přes carousel (ten začíná na 74) / html body #header .header-top{ padding:13px 0 5px !important; } html body #header .header-top-wrapper{ min-height:42px !important; height:auto !important; padding-left:10px !important; padding-right:14px !important; } html body #header .site-name{ padding-left:0 !important; margin-left:0 !important; } html body #header .site-name img{ max-height:34px !important; height:34px !important; width:auto !important; } / ikony košíku a menu — z 50 na 40 px / html body #header .header-top .navigation-buttons > a.toggle-window, html body #header .header-top .navigation-buttons > a.btn-icon, html body #header .navigation-buttons .toggle-window{ width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; max-height:40px !important; flex:0 0 40px !important; line-height:38px !important; padding:0 !important; font-size:16px !important; border-radius:12px !important; } / Ikony jsou ::before pseudoprvky s line-height:50px (podle původní velikosti tlačítka). V 40px tlačítku proto seděly o 5 px níž — hamburger vypadal proti košíku posunutý dolů. ⚠️ Měnit se smí JEN line-height. Nastavení height:auto / display na pseudoprvku ikonu zruší (kreslí se přes background-image, který bez rozměru nic nevykreslí) a přepis display navíc odkrývá skryté tlačítko hledání. / html body #header .navigation-buttons > a{ line-height:40px !important; } html body #header .navigation-buttons > a::before{ line-height:40px !important; } html body #header .navigation-buttons .cart-count span{ font-size:12px !important; } / hamburger o něco menší než košík / html body #header .navigation-buttons > a.toggle-window:not(.cart-count){ width:34px !important; min-width:34px !important; max-width:34px !important; height:34px !important; min-height:34px !important; max-height:34px !important; flex:0 0 34px !important; line-height:34px !important; font-size:14px !important; } html body #header .navigation-buttons > a.toggle-window:not(.cart-count)::before{ line-height:34px !important; } / --- HERO těsně pod hlavičkou, ale s postranním odsazením --- ⚠️ Hero NENÍ přes celou šířku. Vejde se do --zpad jako zbytek obsahu a nechává si zaoblené rohy. To, že fotka dřív nedosahovala doprava, nezpůsobilo odsazení, ale zaseknutý transform Bootstrap carouselu (řeší zoo4you-fix.css) — celoplošný hero byl léčba špatné nemoci. / / Mezera mezi hlavičkou a hero. Vzniká ve čtyřech vrstvách naráz: .overall-wrapper rezervuje 80 px pod fixní hlavičku (ta je vysoká 60), a pod ní ještě .container 6 + .content-wrapper-in 4 + main#content 4. Dohromady 34 px. Rezervaci srovnáváme na výšku hlavičky + 4 px, zbytek nulujeme. Jen na titulce — na vnitřních stránkách je odstup pod hlavičkou v pořádku a nadpis by se jinak lepil k menu. / html body.in-index .overall-wrapper, html body.type-index .overall-wrapper{ padding-top:64px !important; } html body.in-index #content-wrapper.container, html body.in-index .content-wrapper-in, html body.in-index main#content.content{ padding-top:0 !important; } html body main#content .banners-row{ margin-top:0 !important; margin-bottom:28px !important; margin-left:0 !important; margin-right:0 !important; width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; } html body #carousel, html body .carousel, html body .homepage-slider{ border-radius:18px !important; width:100% !important; max-width:none !important; margin:0 !important; } html body #carousel .carousel-inner, html body .carousel .carousel-inner{ min-height:0 !important; height:auto !important; width:100% !important; } html body #carousel .item, html body .carousel .item{ width:100% !important; margin:0 !important; transform:none !important; left:0 !important; right:auto !important; display:block !important; opacity:1 !important; float:none !important; } / Posouvání jen prstem — šipky pryč. ⚠️ Hero je Bootstrap carousel (.carousel-control), ne slick. Slick selektory jsou tu jen pro případ, že by ho Shoptet přehodil. / html body #carousel .carousel-control, html body .carousel .carousel-control, html body #carousel .slick-arrow, html body .carousel .slick-arrow, html body .banners-row .slick-arrow{ display:none !important; } } / ========================================================================== 15. VÝPIS KATEGORIE — mřížka, karta produktu, levý panel Podle reference (Vilgain). Měřeno naživo na /granule-pro-psy/ (3. 8. 2026). Shoptet DOM karty: .product > .p > a.image + .p-in > .p-in-in (název, dostupnost) > .p-bottom > div > .prices + .p-tools ⚠️ Tři pasti, na které jsme narazili: 1) .p-bottom obsahuje i CENU. Původní verze téhle sekce schovávala celý .p-bottom pod obrázek (translateY(100%)) — a tím schovala i cenu. Skrývat se smí POUZE .p-tools. 2) .p-bottom má od Shoptetu transform: translateY(23px). Transformovaný předek se stává vztažným rámcem pro position:absolute, takže se tlačítko kotvilo k němu, ne ke kartě. Nutné transform:none. 3) .p-tools dědí flex-direction:column, takže align-items míří vodorovně. Na spodní hranu obrázku se tlačítko dostane přes justify-content. Samotnou spodní hranu obrázku trefíme tak, že .p-tools dostane aspect-ratio:1/1 a top:0 — překryje přesně čtvercový obrázek. ========================================================================== / / --- levý panel: menší a tenčí písmo, užší sloupec --- / body .sidebar.sidebar-left{ flex:0 0 284px !important; width:284px !important; max-width:284px !important; / panel je sourozenec main#content, takže nedědí jeho odsazení — bez tohohle by začínal na 0 a nelícoval s logem / margin-left:var(--zpad, 24px) !important; } body .sidebar .topic > a{ font-size:14px !important; font-weight:600 !important; line-height:1.35 !important; } body .sidebar li a{ font-size:13px !important; font-weight:400 !important; line-height:1.45 !important; } body .sidebar li a:hover{ color:var(--z-accent-dark) !important; } body .sidebar li.active > a{ font-weight:600 !important; color:var(--z-accent-dark) !important; } / --- mřížka výpisu (Shoptet dává flex, který padal do jednoho sloupce) --- / body #products, body #productsTop, body .products.products-block, body .products.products-top{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important; gap:26px 18px !important; } body .products > .product{ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; margin:0 !important; border:none !important; background:none !important; box-shadow:none !important; / ⚠️ Shoptet má na .product overflow:hidden. Cena začíná přesně na levé hraně karty a ořezávalo jí to první znak ("od 99 Kč" → "ɔd 99 Kč"). Ořez zajišťuje sám obrázkový panel, tady není k ničemu. / overflow:visible !important; } body .products .product .p{ position:relative !important; display:flex !important; flex-direction:column !important; width:auto !important; height:auto !important; border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; overflow:visible !important; } / --- obrázek jako bílý čtvercový panel s jemným obrysem --- Bílé pozadí proto, že většina produktových fotek má bílé pozadí — šedá plocha by kolem nich dělala viditelný obdélník. / body .products .product a.image{ position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:1/1 !important; background:#fff !important; border-radius:14px !important; overflow:hidden !important; border:1px solid var(--z-line) !important; margin:0 0 12px !important; padding:0 !important; } body .products .product a.image img{ position:absolute !important; inset:12% !important; width:76% !important; height:76% !important; object-fit:contain !important; margin:0 !important; } / --- texty pod obrázkem, vše zarovnané na levou hranu karty --- / body .products .product .p-in, body .products .product .p-in-in{ padding:0 !important; width:100% !important; } body .products .product a.name{ font-size:14px !important; font-weight:400 !important; line-height:1.4 !important; color:var(--z-ink) !important; width:100% !important; display:block !important; padding:0 !important; margin:0 0 6px !important; } body .products .product .availability{ font-size:12.5px !important; } body .products .product .stars-placeholder{ display:none !important; } body .products .product .ratings-wrapper, body .products .product .availability, body .products .product .prices, body .products .product .price-final{ padding-left:0 !important; margin-left:0 !important; } / --- cena zůstává v toku (viz past č. 1) --- / body .products .product .p-bottom{ position:static !important; transform:none !important; overflow:visible !important; height:auto !important; margin-top:6px !important; padding:0 !important; } body .products .product .p-bottom > div{ transform:none !important; } body .products .product .prices{ display:block !important; text-align:left !important; font-size:15px !important; font-weight:700 !important; } / --- tlačítko přes spodní hranu obrázku, jen při hoveru --- / body .products .product .p-tools{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; aspect-ratio:1/1 !important; height:auto !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; align-items:stretch !important; overflow:visible !important; padding:0 !important; margin:0 !important; opacity:0 !important; transform:none !important; pointer-events:none !important; transition:opacity .16s ease !important; z-index:4 !important; } body .products .product:hover .p-tools{ opacity:1 !important; pointer-events:auto !important; } body .products .product .p-tools .btn, body .products .product .p-tools .add-to-cart-button{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:38px !important; / nižší a spíš do šedé než do černé (dřív var(--z-ink) #23201C) / background:#3C3833 !important; color:#fff !important; / dole 13px = 14px zaoblení panelu minus jeho 1px rámeček, aby tlačítko zapadlo přesně do spodní hrany panelu / border:none !important; border-radius:12px 12px 13px 13px !important; padding:9px 10px !important; font-size:13.5px !important; font-weight:600 !important; box-shadow:none !important; } body .products .product .p-tools .btn:hover, body .products .product .p-tools .add-to-cart-button:hover{ background:#2A2622 !important; } / při najetí tmavší, ne světlejší / / reference má jen text, bez ikony košíku / body .products .product .p-tools .add-to-cart-button::before{ display:none !important; } / --- mobil: hover neexistuje, tlačítko musí být trvale v toku --- / @media (max-width:767px){ body #products, body #productsTop, body .products.products-block, body .products.products-top{ grid-template-columns:1fr 1fr !important; gap:22px 14px !important; } body .products .product .p-tools{ position:static !important; aspect-ratio:auto !important; opacity:1 !important; pointer-events:auto !important; margin-top:10px !important; } body .products .product .p-tools .btn, body .products .product .p-tools .add-to-cart-button{ border-radius:10px !important; min-height:42px !important; } } / ========================================================================== 16. HLÁŠKA „Produkt byl přidán do košíku" Shoptet ji vykresluje jako .msg.msg-success — celoplošný zelený pás vysoký 112 px na začátku stránky. Uvnitř má .container, který od naší šablony dědí bílé pozadí → zelený pruh s bílým pásem přes celou šířku. Měřeno naživo 4. 8. 2026 na /salamy/. ⚠️ Vědomě NEpoužíváme position:fixed — hláška se vkládá dovnitř obalů, které mají transform, a fixed by se k nim zakotvil. ========================================================================== / html body .msg{ width:auto !important; max-width:560px !important; height:auto !important; min-height:0 !important; margin:14px auto !important; padding:14px 22px !important; border-radius:14px !important; text-align:center !important; box-shadow:0 18px 40px -22px rgba(35,32,28,.5) !important; } html body .msg > .container{ background:transparent !important; max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; } html body .msg.msg-success{ background:var(--z-ok) !important; color:#fff !important; } html body .msg.msg-success a, html body .msg.msg-success span{ color:#fff !important; } html body .msg.msg-success a{ text-decoration:underline !important; } / ========================================================================== 17. MOBIL — košíkové tlačítko a zásuvka menu Měřeno v iframu 390 px, 4. 8. 2026. ========================================================================== / @media (max-width:767px){ / --- ikona na střed tlačítka, počet do pravého horního rohu --- Shoptet dává počítadlu position:absolute s top:13px/right:10px, takže sedělo uprostřed vpravo a překrývalo ikonu košíku. / html body #header .navigation-buttons .cart-count{ position:relative !important; justify-content:center !important; } html body #header .navigation-buttons .cart-count i{ top:-5px !important; right:-5px !important; left:auto !important; bottom:auto !important; width:18px !important; height:18px !important; line-height:18px !important; font-size:10.5px !important; text-align:center !important; border:2px solid #fff !important; box-sizing:content-box !important; } / --- zásuvka menu: svislý seznam, ne vodorovný pás --- Sekce 11 (max-width:991px) dělá z ul.menu-level-1 vodorovný scroller. To je správně pro tablet, ale v zásuvce pod hamburgerem to znamenalo čtyři položky v řádku a pod nimi prázdnou stránku. Tenhle blok je v souboru později, takže ho přebíjí. / / ⚠️ overflow-y:auto na seznamu byl chyba — seznam si drží výšku z původního vodorovného řádku (78 px), takže po přeskládání na sloupec zbyla vidět jediná položka. Scrollovat musí zásuvka, ne seznam. ⚠️ Vodorovný scroller ale nešel přebít odsud vůbec — pravidla `#navigation .menu-level-1` (ID, specificita 1,1,0) v zoo4you.css i v kritickém