/* ============================================================ DREVKO – dklab Obľúbené produkty: srdiečko v hlavičke Šablóna Shoptet Disco (body.template-13, mobile-header-version-1) v13 – spoločná verzia pre všetky e-shopy (sk, cz, hu, de, at, it, fr) (v13: počítadlo hore vpravo, rovnaká veľkosť a poloha ako počítadlo košíka) Nasadenie: nahrať do Súbory (/user/documents/) a do hlavičky vložiť ============================================================ */ /* ---------- POČÍTADLO (všetky šírky) ---------- Rovnaké ako počítadlo košíka v style.css e-shopu (18×18 px, 12px tučné, biely text). Doplnok má pevný kruh 17 px – pri 2 a viac čísliciach text pretekal, preto sa kruh mení na "pilulku". Kotvíme ju vpravo, takže rastie doľava ponad srdiečko a nikdy nezasiahne do košíka. Farba pozadia ostáva z nastavenia doplnku (počítadlo košíka má čistú červenú, t. j. #FF0000). */ .navigation-buttons #dkLabFavHeaderIconBtn em{ width:auto !important; min-width:18px !important; height:18px !important; line-height:18px !important; padding:0 3px !important; border-radius:9px !important; white-space:nowrap !important; box-sizing:border-box !important; font-size:12px !important; font-weight:700 !important; font-style:normal !important; text-align:center !important; bottom:auto !important; z-index:3 !important; } /* ---------- DESKTOP + TABLET (≥ 768px) ---------- Srdiečko vycentrované MEDZI vyhľadávaním a košíkom (rovnaké okraje) */ @media (min-width: 768px){ .navigation-buttons #dkLabFavHeaderWrapper{ display:inline-block !important; vertical-align:middle !important; } .navigation-buttons #dkLabFavHeaderIconBtn{ margin-left:22px !important; margin-right:22px !important; position:relative !important; z-index:2 !important; } /* počítadlo: hore vpravo, rovnako ako počítadlo košíka (top:6px; 1 číslica = 18–36px v 27px širokom odkaze, viac číslic rastie doľava) */ body.template-13 .navigation-buttons #dkLabFavHeaderIconBtn em{ top:6px !important; left:auto !important; right:-9px !important; } /* hover ako ostatné ikony v hlavičke */ .navigation-buttons #dkLabFavHeaderIconBtn:hover{ color:var(--color-primary-hover) !important; } } /* ---------- MOBILE (≤ 767px) ---------- Rozloženie: logo vľavo | (voľné) | lupa · srdiečko · košík · hamburger Pozn.: mení sa len horný pás hlavičky (.header-top-wrapper). */ @media (max-width: 767px){ div.navigation-wrapper.header-top-wrapper{ position:relative !important; display:flex !important; align-items:center !important; flex-wrap:nowrap !important; padding-left:12px !important; padding-right:12px !important; box-sizing:border-box !important; } /* logo vľavo, staticky, bez animácie; ako jediné sa smie zmenšiť, ak je displej extrémne úzky (Galaxy Fold 280px, zväčšené písmo v iOS) */ div.header-top-wrapper .site-name{ position:static !important; left:auto !important; right:auto !important; transform:none !important; flex:0 1 auto !important; min-width:0 !important; width:auto !important; margin:0 !important; padding:0 !important; transition:none !important; } div.header-top-wrapper .site-name a{ display:block !important; max-width:100% !important; } div.header-top-wrapper .site-name a img{ max-width:100% !important; height:auto !important; } /* skupina ikon vpravo (style.css e-shopu jej dáva padding-right:10px – rušíme) */ div.header-top-wrapper .navigation-buttons{ margin-left:auto !important; padding:0 !important; width:auto !important; flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; } /* všetky ikony rovnaký box 40×40 (ako košík) + vycentrovaný obsah */ div.navigation-buttons a.toggle-window[data-target="search"], div.navigation-buttons #dkLabFavHeaderWrapper, div.navigation-buttons a[data-target="cart"], div.navigation-buttons a.toggle-window[data-target="navigation"]{ flex:0 0 40px !important; width:40px !important; min-width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; } div.navigation-buttons #dkLabFavHeaderIconBtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:40px !important; height:40px !important; line-height:1 !important; font-size:24px !important; margin:0 !important; top:0 !important; } /* glyfy rovnako veľké ako košík. Disco dáva font-size/line-height priamo na ::before (30px/80px pri 480–767px), preto musíme cieliť na pseudo-element, nie na odkaz. line-height:40px = box glyfu rovnaký ako box ikony (inak presahuje a "klikateľná" plocha zasahuje 20px pod hlavičku). */ div.navigation-buttons a.toggle-window[data-target="search"]:before, div.navigation-buttons a.toggle-window[data-target="navigation"]:before, div.navigation-buttons #dkLabFavHeaderIconBtn:before{ font-size:24px !important; line-height:40px !important; height:40px !important; top:0 !important; } /* pri otvorenom menu má Disco malé X (14px) – zachovať */ body.navigation-window-visible div.navigation-buttons a.toggle-window[data-target="navigation"]:before{ font-size:14px !important; } /* počítadlo: hore vpravo, rovnaké súradnice ako počítadlo košíka (to má top:-2px; left:29px v 40px boxe → 1 číslica 29–47px; viac číslic rastie doľava) */ body.template-13 div.navigation-buttons #dkLabFavHeaderIconBtn em{ top:-2px !important; left:auto !important; right:-7px !important; } /* hamburger vždy posledný; pevná šírka => X po kliku neposunie ikony */ div.navigation-buttons a.toggle-window[data-target="navigation"]{ position:static !important; order:9 !important; } div.navigation-buttons, div.navigation-buttons > *{ transition:none !important; } /* vyhľadávanie: lišta tesne POD hlavičkou (cez obsah, neposúva stránku) */ div.header-top-wrapper > .search{ position:absolute !important; left:0 !important; right:0 !important; top:100% !important; bottom:auto !important; width:100% !important; height:auto !important; margin:0 !important; z-index:10000 !important; background:#fff !important; box-sizing:border-box !important; padding:10px 12px !important; box-shadow:0 6px 12px rgba(0,0,0,0.12) !important; } div.header-top-wrapper > .search .search-form, div.header-top-wrapper > .search fieldset{ width:100% !important; margin:0 !important; } div.header-top-wrapper > .search .query-input{ width:100% !important; box-sizing:border-box !important; } /* objednávka krok 2 a 3 (body.id--16 / id--17): Disco tam ikony skrýva, naše display:flex !important ich nesmie "oživiť" */ body.id--16 div.header-top-wrapper .navigation-buttons, body.id--17 div.header-top-wrapper .navigation-buttons{ display:none !important; } } /* ---------- 480–767px (mobil na šírku, malé tablety) ---------- Disco tu počíta s 80px vysokou hlavičkou (.overall-wrapper padding-top:80px, #navigation top:80px). So 40px ikonami by hlavička klesla na 50px a pod ňou by ostal 30px prázdny pás; menu by sa otváralo 30px pod hlavičkou. */ @media (min-width: 480px) and (max-width: 767px){ div.navigation-wrapper.header-top-wrapper{ min-height:80px !important; } } /* ---------- ÚZKE MOBILY (≤ 340px, napr. iPhone SE 1. gen.) ---------- */ @media (max-width: 340px){ div.navigation-wrapper.header-top-wrapper{ padding-left:8px !important; padding-right:8px !important; } div.header-top-wrapper .navigation-buttons{ gap:4px !important; } /* menšia medzera medzi ikonami – počítadlo o 3px doľava (26–44px) */ body.template-13 div.navigation-buttons #dkLabFavHeaderIconBtn em{ right:-4px !important; } }