/* ========================================================= BOTANIC.CZ - VLASTNI UPRAVY SHOPTET SABLONY ========================================================= */ /* ========================================================= 1. DETAIL PRODUKTU ========================================================= */ /* Detail produktu - skryti systemoveho nadpisu "Popis produktu" */ .description-inner .basic-description > h2.popis-nadpis { display: none !important; } /* --------------------------------------------------------- Detail produktu - sticky galerie --------------------------------------------------------- */ @media (min-width: 992px) { /* * Shoptet ma na .overall-wrapper overflow-x: hidden, * coz vytvori overflow-y: auto a blokuje position: sticky. * * clip zachova horizontalni orezani bez vytvoreni * scrollovaciho kontejneru. */ body.type-product .overall-wrapper { overflow-x: clip !important; overflow-y: visible !important; } body.type-product .p-detail-inner { align-items: flex-start !important; overflow: visible !important; } /* Miniatury + hlavni produktova galerie */ body.type-product .p-detail-inner > .p-thumbs-wrapper, body.type-product .p-detail-inner > .p-image-wrapper { position: -webkit-sticky !important; position: sticky !important; top: 100px !important; align-self: flex-start !important; } } /* ========================================================= 2. HLAVNI MENU - DESKTOP ========================================================= */ @media (min-width: 1200px) { /* ----------------------------------------------------- Horni hlavni navigace Zachovava Shoptet mechaniku otevirani submenu. ----------------------------------------------------- */ .navigation-in > ul.menu-level-1 > li > a { position: relative; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .navigation-in > ul.menu-level-1 > li:hover > a, .navigation-in > ul.menu-level-1 > li.ext.exp > a { background: #111 !important; color: #fff !important; box-shadow: inset 0 -3px 0 #63894f; } /* ----------------------------------------------------- Dropdown / mega menu POZOR: nemenime display ani position. To nechavame na Shoptetu kvuli hoveru a otevirani. ----------------------------------------------------- */ .navigation-in > ul.menu-level-1 > li.ext > ul.menu-level-2 { box-sizing: border-box; padding: 26px 28px 30px !important; background: #fff !important; border-top: 3px solid #63894f !important; border-right: 1px solid rgba(31, 49, 37, .08) !important; border-bottom: 1px solid rgba(31, 49, 37, .08) !important; border-left: 1px solid rgba(31, 49, 37, .08) !important; border-radius: 0 0 16px 16px !important; box-shadow: 0 22px 55px rgba(22, 31, 25, .16), 0 4px 12px rgba(22, 31, 25, .06) !important; } /* ----------------------------------------------------- Jednotlive skupiny Darky / Prirodni produkty / Latky / ... ----------------------------------------------------- */ .navigation-in .menu-level-2 > li { box-sizing: border-box; padding: 12px 14px !important; margin-bottom: 14px !important; border-radius: 12px; transition: background-color .15s ease; } .navigation-in .menu-level-2 > li:hover { background: #fafcfa; } /* ----------------------------------------------------- Hlavni nazvy skupin ----------------------------------------------------- */ .navigation-in .menu-level-2 > li > a, .navigation-in .menu-level-2 > li > div > a { color: #172219 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; margin-bottom: 8px !important; transition: color .15s ease; } .navigation-in .menu-level-2 > li > a:hover, .navigation-in .menu-level-2 > li > div > a:hover { color: #63894f !important; } /* ----------------------------------------------------- Obrazky hlavnich skupin ----------------------------------------------------- */ .navigation-in .menu-level-2 > li > a img, .navigation-in .menu-level-2 > li > div > a img, .navigation-in .menu-level-2 > li > img { width: 58px !important; height: 58px !important; object-fit: cover; margin-right: 12px !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(20, 35, 25, .10); transition: transform .18s ease, box-shadow .18s ease; } .navigation-in .menu-level-2 > li:hover img { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(20, 35, 25, .14); } /* ----------------------------------------------------- Podkategorie - kazda na vlastnim radku ----------------------------------------------------- */ .navigation-in .menu-level-3 { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 8px 0 0 !important; list-style: none !important; } /* * Omezime jen seznamy, ktere maji alespon 9 podkategorii. * Kratke seznamy (napr. CBD se 4 polozkami) zustanou * prirozene vysoke a CTA se u nich nezobrazi. */ .navigation-in .menu-level-3:has(> li:nth-child(9)) { position: relative !important; max-height: 260px !important; overflow: hidden !important; } .navigation-in .menu-level-3 > li { display: block !important; float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .navigation-in .menu-level-3 > li::before, .navigation-in .menu-level-3 > li::after { content: none !important; display: none !important; } .navigation-in .menu-level-3 > li > a { display: block !important; width: 100% !important; min-height: 0 !important; box-sizing: border-box; padding: 5px 8px !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #3e4941 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; text-decoration: none !important; white-space: normal !important; transition: background-color .13s ease, color .13s ease; } .navigation-in .menu-level-3 > li > a:hover { background: #edf3ed !important; color: #466f3e !important; } /* ----------------------------------------------------- Polozky uz neschovavame pres nth-child. O omezeni se stara max-height vyse, aby nativni Shoptet logika dokazala poznat skutecne preteceni. ----------------------------------------------------- */ /* Odkazy v menu mohou normalne zalamovat text */ .navigation-in .menu-level-2 a { white-space: normal !important; } } /* ========================================================= 3. MENU - NATIVNI SHOPTET "VICE POLOZEK" CTA CTA zobrazime pouze u seznamu s 9+ podkategoriemi. Je umistene jako samostatny radek pod posledni viditelnou polozkou, aby neprekryvalo text. ========================================================= */ @media (min-width: 1200px) { /* Kratke seznamy: Shoptet muze trigger technicky pridat, ale my ho vedome skryjeme. */ .navigation-in .menu-level-3:not(:has(> li:nth-child(9))) > .more-items-trigger { display: none !important; } /* Dlouhe seznamy: bily footer prekryje dalsi skryte polozky a CTA sedi samostatne pod viditelnym seznamem. */ .navigation-in .menu-level-3:has(> li:nth-child(9)) > .more-items-trigger { display: flex !important; align-items: center !important; justify-content: flex-start !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 38px !important; min-width: 0 !important; padding: 6px 8px !important; background: #fff !important; color: #466f3e !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; cursor: pointer !important; z-index: 5 !important; white-space: nowrap !important; box-shadow: 0 -12px 18px rgba(255, 255, 255, .96) !important; } .navigation-in .menu-level-3:has(> li:nth-child(9)) > .more-items-trigger::before { content: "Zobrazit vše \2192" !important; display: inline-flex !important; align-items: center !important; padding: 5px 9px !important; border-radius: 7px !important; background: #edf3ed !important; color: #466f3e !important; line-height: 1.2 !important; transition: background-color .13s ease, color .13s ease, transform .13s ease; } .navigation-in .menu-level-3:has(> li:nth-child(9)) > .more-items-trigger::after { content: none !important; display: none !important; } .navigation-in .menu-level-3:has(> li:nth-child(9)) > .more-items-trigger:hover::before { background: #e2ece1 !important; color: #31592f !important; transform: translateX(1px); } }