/* header-style.css — custom styly hlavicky a hlavniho menu Linkuje se z ADMIN-SHOPTET-ZALOHA/Zahlavi.html (v sekci ) Scope: cely web (header je sdilena komponenta), zadne body.type-* gating. Pred touto upravou: - vraceni hlavicky a menu na default Shoptet DISCO (viz docs/HEADER-RESTORE-DEFAULT-SHOPTET.md) - legacy override sirek site-name/search/navigation-buttons v doppler-all.css (radky ~61-63) zakomentovan jako soucast Bloku 1 (return-to-default-shoptet) — proto zde flex pomery nemaji souboj se starym min-width/max-width. Postup vyvoje: Faze 1 (current): proporce header-top-wrapper (logo / search / navigation-buttons) Faze 2 (planned): mega-menu styling dle Figmy Faze 3 (planned): mobile drawer styling Faze 4 (planned): nove elementy (Doppler+ Klub vyhod, Akce, Vice trigger, Znacky / Kolekce) */ /* ============================================================= FAZE 1 — proporce header-top-wrapper Sirky 3 sloupcu hlavicky (logo / search / navigation-buttons) resene flex-basis. Default Shoptet DISCO ma vlastni proporce, prepiseme je dle Figmy. ============================================================= */ @media (min-width: 768px) { #header .header-top-wrapper .site-name { flex: 0 1 10%; padding-right: 32px; } #header .header-top-wrapper > div.search { flex: 0 1 70%; } #header .header-top-wrapper > div.navigation-buttons { flex: 0 1 20%; } } /* ============================================================= FAZE 2 — mega-menu thumbnaily kategorii (level-2) Default Shoptet renderuje miniaturu z administrace jako ctvercovy (140x100). Figma chce kulaty kruh 38x38 s lehkou linkou, text vedle vertikalne zarovnany k hornimu okraji kruhu. ============================================================= */ /* Thumbnail kruh — 38x38 dle Figmy */ #header .menu-level-2 .menu-image img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #F5F5F5; object-fit: cover; } /* Pravy sloupec polozky (nadpis + level-3) — odstranit default Shoptet paddingy (top zustal po drivejsim 14px hacku, left ma default Shoptet 24px).
  • je flex container s align-items: flex-start, takze nadpis i kruh zacinaji na stejnem top bez paddingu. */ @media (min-width: 992px) { .navigation-in > ul > li.ext > ul > li > div { padding-top: 0; } } @media (min-width: 768px) { .navigation-in > ul > li.ext > ul > li > div { padding-left: 0; } } /* ============================================================= FAZE 2 — "Vse v kategorii X" levy sloupec mega-menu header/header-script.js injektuje jako prvni dite kazdeho . CSS udela z polozky levy sloupec pres vsechny radky gridu, viditelne jen na desktopu (>=992px). ============================================================= */ @media (min-width: 992px) { /* Override default Shoptet flex layout pro otevreny mega-menu na grid. Default Shoptet ma na display: flex (column-wrap) — proto grid-template-columns/grid-auto-flow z drivejsich pokusu nemely efekt (jsou grid-only property, ignorovany pri display: flex). Cilime pres body.submenu-visible — Shoptet pridava tuto classu na kdyz je mega-menu otevreny. Tim: - default state (display: none) zustava — menu se schovava normalne - visible state je override na grid — uplatni se naše template Tj. nezasahujeme do hover toggle behaviour. */ /* POZOR: NE pres body.submenu-visible — to je global flag a aplikoval by display:grid na VSECHNY menu-level-2 najednou (= bug, vsechny 3 mega-menu viditelne). Cilime jen na aktivne hover-ovanou pres .exp class (Shoptet ji pridava na ) + aria-expanded fallback. */ #header .navigation-in li.ext.exp > .menu-level-2, #header .navigation-in > ul > li.ext > a[aria-expanded="true"] + .menu-level-2 { display: grid !important; grid-template-columns: 280px repeat(3, 1fr) !important; grid-auto-flow: row !important; column-gap: 20px; } /* Nas nadpis v levem sloupci, span vsechny radky gridu */ #header .menu-level-2 .roi-hdr-all-in { grid-column: 1; grid-row: 1 / span 100; padding-top: 14px; } /* Typografie nadpisu — Poppins 700 20px LH 150% #383838 default. width: 100% — bez nej ma default Shoptet width: auto (~min-content), takze text se zalamuje na uzkem boxu. 100% dotahuje na sirku grid cell (280px). */ #header .menu-level-2 .roi-hdr-all-in > a { display: block; width: 100%; font-family: Poppins, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; color: #383838; text-decoration: none; } /* Hover state — brand red + underline */ #header .menu-level-2 .roi-hdr-all-in > a:hover { color: #A72B3A; text-decoration: underline; } /* Hlavni polozky menu (Destniky / Zahradni nabytek / Slunecniky) — text-transform: none misto default uppercase */ #header .navigation-in > ul.menu-level-1 > li.ext > a { text-transform: none; } /*
  • v menu-level-2 — default Shoptet ma width: 25% (z legacy 4-column flex layoutu @ min-width 1200px). V nasem grid contextu to mackalo subkategorie na ~96px misto plne cell sirky. Override na 100% — kazda
  • vyplni svou grid cell. */ #header .navigation-in > ul > li.ext > ul.menu-level-2 > li { width: 100% !important; flex-basis: 100% !important; } /* Default Shoptet ma na
  • v menu-level-3 ::after pseudo-element s 1px vertikalni linkou (separator). V Figme to neni — schovavame. */ #header .menu-level-3 > li::after { display: none !important; } /* Level-3 polozky kazda na vlastnim radku. POZOR: ma default Shoptet display: flex — proto display: block na
  • samostatne nestaci (items zustavaji flex-items, flex-row layout je primary). Musime override i