@charset "UTF-8"; /* ========================================================= Shoptet úpravy – Svět žárovek Hostováno na GitHub Pages, viz README. Načítá se jako poslední → přebíjí style.css i dark-merkur.css. ========================================================= */ /* --------------------------------------------------------- 0) Body-scroll fix (kořenová oprava) Motiv/CSS dával pevnou výšku (= výška okna) → stránka scrollovala přes místo přes okno. Tím se nespouštěl window.scroll, na kterém visí lazy-load sekcí (související produkty) i reveal efekty → prázdné mezery a rozbitý sticky. Vrácením height:auto scrolluje zase okno = nativní chování. --------------------------------------------------------- */ html, body { height: auto !important; overflow-y: visible !important; /* clip (ne hidden) zabrání vodorovnému přetečení, ale NEudělá z body scroll kontejner → overflow-y zůstane visible a scrolluje okno */ overflow-x: clip !important; } /* --------------------------------------------------------- 1) Barvy headeru Header (pod logem, logo+search) = modrá #174A61 Navigace (menu) = tmavší modrá #0d3d51 Horní lišta s kontakty zůstává černá. Odstraňujeme i fotku na pozadí .container. --------------------------------------------------------- */ /* #header je jediný full-width prvek (logo/search/nav uvnitř jsou vycentrované). Aby navigace nebyla „patchy" (na bocích prosvítal světlejší header), barvíme #header gradientem: horní část #174A61, spodních ~53px (navigace) #0d3d51. Vnitřky necháme transparentní. */ #header { background: #174A61 !important; /* mobil / fallback */ } @media (min-width: 768px) { #header { background: linear-gradient( to bottom, #174A61, #174A61 calc(100% - 53px), #0d3d51 calc(100% - 53px), #0d3d51 ) !important; } /* Košík / objednávka (blank-mode) NEMÁ navigaci → gradient by udělal tmavý pruh dole = rozbité pozadí. Tam plná barva. */ body.ordering-process #header, body.blank-mode #header { background: #174A61 !important; } } #header > .container { background-image: none !important; background-color: transparent !important; } /* Desktop: nav průhledná, barvu dává gradient na #header. Mobil: NE – tam je menu samostatný overlay, který POTŘEBUJE vlastní pozadí (jinak prosvítá stránka = rozbité). */ @media (min-width: 768px) { #navigation, .navigation-in, .navigation-in > ul > li { background-color: transparent !important; } } @media (max-width: 767px) { #navigation, .navigation-in { background-color: #174A61 !important; } .navigation-in ul, .navigation-in > ul > li, .navigation-in ul li.ext.exp, .navigation-in > ul > li.ext.exp ul { background-color: #174A61 !important; } } /* Mobil: .top-navigation-bar (cart+hamburger) byla bílá – původní style.css ji má v základu #fff a tmavé pravidlo jen ≥768px → zčerníme. */ .top-navigation-bar { background-color: #000 !important; } /* MOBIL: header NEMÁ být černý – stejná modrá jako pod hledáním (#174A61), ikony bílé. DŮLEŽITÉ: bílou dáváme jen když je menu/popup ZAVŘENÝ – v otevřeném stavu řídí barvu (křížek) theme, jinak by byl neviditelný a menu by "nešlo zavřít". */ @media (max-width: 767px) { #header, .top-navigation-bar { background-color: #174A61 !important; } body:not(.navigation-window-visible):not(.cart-window-visible):not(.login-window-visible):not(.search-window-visible) .responsive-tools > a, body:not(.navigation-window-visible):not(.cart-window-visible):not(.login-window-visible):not(.search-window-visible) .responsive-tools > a::before, body:not(.navigation-window-visible) .responsive-tools > a[data-target="navigation"], body:not(.navigation-window-visible) .responsive-tools > a[data-target="navigation"]::before, body:not(.navigation-window-visible) .menu-helper { color: #fff !important; } /* Košík: ikona (::before) byla vybledlá (#3C7781) → bílá. */ body:not(.cart-window-visible):not(.empty-cart-hover-visible) a[data-target="cart"]::before { color: #fff !important; } /* Burger: pryč barevné pozadí (box #216D8F) za čárami – čáry zůstanou. */ .responsive-tools > a[data-target="navigation"]::before, a[data-target="navigation"]::before { background-color: transparent !important; } /* Menu nešlo zavřít: hamburger/křížek (v .top-navigation-bar, z:9) byl POD nav overlayem (#navigation z:1000 uvnitř #header z:9). .top-navigation-bar a #header jsou sourozenci → zvednutím .top-navigation-bar nad #header (1001) se křížek dostane NAD overlay a jde kliknout. */ body.navigation-window-visible .top-navigation-bar { position: relative !important; z-index: 1100 !important; } } /* Horní informační lišta (.site-msg) – modrá. */ .site-msg { background-color: #2550b2 !important; } /* Modré/šedé linky kolem nav menu z původního style.css (.navigation-in border-top #1977b5, #navigation border-bottom #e4e4e4) – na tmavém headeru ruší, sjednotíme do tmava. */ .navigation-in { border-top-color: transparent !important; } #navigation { border-bottom-color: transparent !important; } .navigation-in > ul > li { border-color: transparent !important; } /* ========================================================= FILTR – CARD CHROME (reskin dle návrhu): .box-filters jako karta s hlavičkou (ikona + titulek + Vymazat vše) a patičkou (počet + Zrušit filtry / Zobrazit produkty). Chrome staví shoptet.js (buildFilterChrome), tady je styl. Barvy v naší #174A61. ========================================================= */ .box-filters.sz-filter-card { background: #fff !important; border: 1px solid #e2e6ea !important; border-radius: 20px !important; box-shadow: 0 12px 36px rgba(15, 23, 42, .08) !important; overflow: hidden !important; padding: 0 !important; } /* hlavička */ .sz-filter-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 24px 28px 20px !important; border-bottom: 1px solid #e2e6ea !important; } .sz-fh-left { display: flex !important; align-items: center !important; gap: 14px !important; } .sz-fh-icon { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; color: #174A61 !important; background: #eaf3f5 !important; border-radius: 12px !important; } .sz-fh-title { font-size: 22px !important; font-weight: 800 !important; color: #16223b !important; line-height: 1.15 !important; letter-spacing: -.02em !important; } .sz-fh-sub { margin: 4px 0 0 !important; font-size: 14px !important; color: #667085 !important; } .sz-fh-clear { border: 0 !important; background: transparent !important; cursor: pointer !important; color: #b42318 !important; font-weight: 700 !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 15px !important; } .sz-fh-clear:hover { background: #fff1f0 !important; } /* patička */ .sz-filter-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 18px 28px !important; background: #f8fafc !important; border-top: 1px solid #e2e6ea !important; } .sz-ff-count { color: #667085 !important; font-size: 14px !important; } .sz-ff-actions { display: flex !important; gap: 10px !important; } .sz-ff-cancel, .sz-ff-show { min-height: 46px !important; padding: 0 18px !important; border-radius: 11px !important; font-weight: 800 !important; cursor: pointer !important; font-size: 15px !important; border: 1px solid !important; } .sz-ff-cancel { color: #16223b !important; background: #fff !important; border-color: #e2e6ea !important; } .sz-ff-cancel:hover { border-color: #cbd3dd !important; } .sz-ff-show { color: #fff !important; background: #174A61 !important; border-color: #174A61 !important; } .sz-ff-show:hover { background: #0d3d51 !important; border-color: #0d3d51 !important; } /* odsazení mřížky uvnitř karty + skrýt nativní „Zrušit filtry" (máme vlastní v patičce) */ .sz-filter-card #filters { padding: 22px 28px 26px !important; } .sz-filter-card .filter-cancel, .sz-filter-card .filters-cancel, .sz-filter-card a[class*="cancel"] { display: none !important; } /* --- Filtr V SIDEBARU = svislý (sekce pod sebou, plná šířka) --- */ .sidebar-left .box-filters.sz-filter-card { width: 100% !important; margin-bottom: 20px !important; } .sidebar-left #filters { display: block !important; padding: 14px 16px 18px !important; } .sidebar-left #filters .filter-sections, .sidebar-left #filters #category-filter-hover { display: block !important; width: 100% !important; } .sidebar-left #filters .filter-section-parametric, .sidebar-left #filters .slider-wrapper, .sidebar-left #filters .param-filter-top { width: 100% !important; max-width: none !important; float: none !important; margin: 0 0 8px !important; } .sidebar-left .sz-filter-head { padding: 18px 16px 14px !important; } .sidebar-left .sz-filter-head .sz-fh-title { font-size: 19px !important; } .sidebar-left .sz-filter-head .sz-fh-icon { display: none !important; } .sidebar-left .sz-filter-foot { padding: 14px 16px !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .sidebar-left .sz-filter-foot .sz-ff-actions { flex-direction: column !important; } .sidebar-left .sz-filter-foot .sz-ff-show, .sidebar-left .sz-filter-foot .sz-ff-cancel { width: 100% !important; } /* Volby v sekci (checkbox | text | počet) – čistý řádek, ŽÁDNÝ překryv (v úzkém sidebaru se to lámalo/překrývalo). */ .sidebar-left #filters .fieldsetinner { display: flex !important; flex-direction: column !important; gap: 2px !important; } .sidebar-left #filters .fieldsetinner > div { width: 100% !important; position: static !important; } .sidebar-left #filters .filter-label { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 7px 6px !important; margin: 0 !important; white-space: normal !important; border-radius: 8px !important; line-height: 1.3 !important; } .sidebar-left #filters .filter-label:hover { background: #f4f6f8 !important; } .sidebar-left #filters .filter-label input { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; } .sidebar-left #filters .filter-label .filter-count { margin-left: auto !important; flex: 0 0 auto !important; color: #667085 !important; font-size: 13px !important; font-weight: 600 !important; } /* ========================================================= FILTRY – jednotný vzhled + rozbalování. Selektory NAVÁZANÉ NA STABILNÍ TŘÍDY (.filter-section-parametric, .slider-wrapper, .param-filter-top), které drží i po AJAX překreslení – script.js, co je dřív normalizoval, je smazaný. Otevírá náš shoptet.js třídou .sz-open. ŽÁDNÝ overflow:hidden – ořezal by obsah! ========================================================= */ /* flex řádky filtrů: zavřené karty se NESMÍ natahovat na výšku otevřené (jinak prázdné vysoké kostky vedle rozbalené sekce) */ #filters, #filters .filter-sections, #category-filter-hover { align-items: flex-start !important; } /* DESKTOP horní řádek (Dle ceny + Dle štítku) = 50/50. Dle štítku měl nativně width:70% + padding → obří karta s obsahem vlevo. Srovnáno. */ @media (min-width: 768px) { #filters .slider-wrapper, #filters .param-filter-top { width: 50% !important; max-width: none !important; flex: 0 0 auto !important; } } /* MOBIL: filtry na celou šířku pod sebou (50% je rozbíjelo / překrývalo tlačítko Filtrovat a část nebyla vidět). */ @media (max-width: 767px) { #filters .filter-section-parametric, #filters .slider-wrapper, #filters .param-filter-top { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; order: 0 !important; } /* Tlačítko "Filtrovat" (mobilní toggle) – bylo úzké a chevron přes text. Plná šířka + chevron vpravo, ne přes text. */ #filters .filtrovat, .filters .filtrovat { width: 100% !important; box-sizing: border-box !important; padding: 13px 44px 13px 16px !important; margin-bottom: 10px !important; background: #f5f7f9 !important; border: 1px solid #e2e6ea !important; border-radius: 10px !important; font-weight: 700 !important; color: #16223b !important; } #filters .filtrovat::after, .filters .filtrovat::after { left: auto !important; right: 16px !important; } } /* tři typy karet */ #filters .filter-section-parametric, #filters .slider-wrapper, #filters .param-filter-top { border: 1px solid #e2e6ea !important; border-radius: 10px !important; background: #fff !important; margin-bottom: 10px !important; padding: 0 !important; /* nativní padding:0 4px dělal rámeček kolem hlavičky */ box-sizing: border-box !important; transition: border-color .15s, box-shadow .15s !important; } #filters .filter-section-parametric:hover, #filters .slider-wrapper:hover, #filters .param-filter-top:hover { border-color: #174A61 !important; } #filters .filter-section-parametric.sz-open, #filters .slider-wrapper.sz-open, #filters .param-filter-top.sz-open { border-color: #174A61 !important; box-shadow: 0 4px 14px rgba(23, 74, 97, .10) !important; } /* hlavička (klikací) – stejná všude */ #filters .filter-section-parametric > h4, #filters .slider-wrapper > h4, #filters .param-filter-top > h4 { display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 14px 16px !important; font-size: 15px !important; font-weight: 700 !important; color: #16223b !important; background: #f5f7f9 !important; border-radius: 10px !important; cursor: pointer !important; transition: background .15s !important; } #filters .filter-section-parametric.sz-open > h4, #filters .slider-wrapper.sz-open > h4, #filters .param-filter-top.sz-open > h4 { background: #eef4f6 !important; border-radius: 10px 10px 0 0 !important; } #filters .filter-section-parametric > h4:hover, #filters .slider-wrapper > h4:hover, #filters .param-filter-top > h4:hover { background: #eaeef2 !important; } /* skrýt nativní šipky a dát JEDNU vlastní (vpravo, CSS, nezávislá na fontu) */ #filters .filter-section-parametric > h4::before, #filters .slider-wrapper > h4::before, #filters .param-filter-top > h4::before { content: none !important; } #filters .filter-section-parametric > h4::after, #filters .slider-wrapper > h4::after, #filters .param-filter-top > h4::after { content: "" !important; flex: 0 0 auto !important; width: 9px !important; height: 9px !important; margin-left: 10px !important; border: solid #174A61 !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; transition: transform .15s !important; } /* šipka úplně vpravo (mezi ní a štítkem je prostor) */ #filters .filter-section-parametric > h4 > span:first-child, #filters .slider-wrapper > h4 > span:first-child, #filters .param-filter-top > h4 > span:first-child { margin-right: auto !important; } /* otevřené → šipka nahoru */ #filters .filter-section-parametric.sz-open > h4::after, #filters .slider-wrapper.sz-open > h4::after, #filters .param-filter-top.sz-open > h4::after { transform: rotate(-135deg) !important; } /* === AKTIVNÍ filtr (něco vybráno) – VÝRAZNÉ, čistě přes CSS :has(:checked). Žádný JS → okamžité (žádné obnovování), nebojuje s dklab. Filtr je přitom ZAVŘENÝ (uživatel nechce mít otevřené pořád). Plná modrá hlavička + ✓. === */ #filters .filter-section-parametric:has(input:checked), #filters .param-filter-top:has(input:checked) { border-color: #174A61 !important; box-shadow: inset 0 0 0 2px #174A61 !important; } #filters .filter-section-parametric:has(input:checked) > h4, #filters .param-filter-top:has(input:checked) > h4 { background: #174A61 !important; color: #fff !important; } #filters .filter-section-parametric:has(input:checked) > h4 > span:first-child, #filters .param-filter-top:has(input:checked) > h4 > span:first-child { color: #fff !important; } #filters .filter-section-parametric:has(input:checked) > h4::after, #filters .param-filter-top:has(input:checked) > h4::after { border-color: #fff !important; } /* ✓ za názvem aktivního filtru */ #filters .filter-section-parametric:has(input:checked) > h4 > span:first-child::after, #filters .param-filter-top:has(input:checked) > h4 > span:first-child::after { content: " ✓" !important; font-weight: 700 !important; } /* vybraná volba uvnitř otevřené sekce zvýraznit */ #filters .filter-label.checked, #filters input:checked + .filter-label { color: #174A61 !important; font-weight: 700 !important; } /* OBSAH: zavřeno = skryté, .sz-open = zobrazené + position:static (nativně je dropdown position:absolute → jinak plave přes produkty) */ #filters .filter-section-parametric > form, #filters .param-filter-top > form, #filters .slider-wrapper > .slider-content, #filters .slider-wrapper > .slider-header { display: none !important; } #filters .filter-section-parametric.sz-open > form, #filters .param-filter-top.sz-open > form, #filters .slider-wrapper.sz-open > .slider-content, #filters .slider-wrapper.sz-open > .slider-header { display: block !important; position: static !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; box-shadow: none !important; border: 0 !important; padding: 6px 16px 12px !important; } #filters .slider-wrapper.sz-open .slider-range, #filters .slider-wrapper.sz-open .ui-slider { max-width: 100% !important; } /* checkboxy v otevřené sekci */ #filters .filter-section-parametric.sz-open fieldset, #filters .param-filter-top.sz-open fieldset { display: block !important; position: static !important; max-height: 280px !important; overflow-y: auto !important; padding: 4px 14px 10px !important; } .filters .fieldsetinner > div { padding: 4px 0 !important; } .filters .filter-label { cursor: pointer !important; color: #2c3a4f !important; font-size: 14px !important; } .filters .filter-label .filter-count { color: #9aa3ad !important; font-size: 13px !important; } /* počítadlo "Položek k zobrazení" – bez rámečku */ .filters .filter-section-count { border: 0 !important; background: transparent !important; margin: 0 !important; } /* PRÁZDNÉ / nezpracované boxy schovat (boolean, prázdný form bez hlavičky) – jinak je můj card styl obarví jako prázdné bílé kostky. */ #filters .filter-section-boolean, .filters > form:not([class]), #filters > form:not([class]) { display: none !important; } /* --------------------------------------------------------- Sticky header (desktop) – čistý position:sticky Původní motiv řešil sticky JS hackem (body.fix-header + position:fixed). Ten se ale spouští na $(window).scroll, jenže stránka scrolluje přes → handler často nenaskočí správně, header pak poskakoval, ořezával popisky a špatně odsazoval. Nahrazujeme nativním position:sticky (funguje nezávisle na JS). Mobil (<768) má vlastní sticky ve style.css → nesaháme na něj. --------------------------------------------------------- */ @media (min-width: 768px) { #header { position: sticky !important; top: 0 !important; z-index: 1000 !important; } /* neutralizace zbytků fix-header hacku (kdyby třída naskočila) */ .fix-header .top-navigation-bar { position: static !important; top: auto !important; } .fix-header .header-top { height: auto !important; } .fix-header .user-action-in { display: block !important; } } /* --------------------------------------------------------- 2) Otevírací doba v horní liště (vedle telefonu) Stejný princip jako na protvoreni: ::before na kontakty. --------------------------------------------------------- */ .top-navigation-contacts::before { content: "Po–Pá 8:00–16:30"; margin-right: 16px; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 14px; white-space: nowrap; } /* --------------------------------------------------------- Hvězdičky na kartách překrývaly kód (obj.č.) .stars-wrapper měl position:absolute; top:-22px → plaval přes .p-code. Vracíme do normálního toku → kód nahoře, hvězdičky pod. --------------------------------------------------------- */ .products-block .p .stars-wrapper { position: static !important; top: auto !important; text-align: center !important; margin-bottom: 4px !important; } /* Kód (obj.č.) na kartách byl 22px – moc poutavý, zmenšíme. */ .products-block .p .p-code span { font-size: 15px !important; } /* Přeškrtnutá původní cena nad akční cenou (přidává shoptet.js). */ .products-block .p .p-orig-price { display: block !important; text-decoration: line-through !important; color: #9aa3ad !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 2px !important; } /* Karty výpisu: rezervovat místo pro hodnocení (hvězdičky), ať jsou karty s hodnocením i bez něj ZAROVNANÉ (názvy/ceny ve stejné výšce). */ .products-block .p .ratings-wrapper, .products-related .p .ratings-wrapper { min-height: 22px !important; display: block !important; } /* Výpis/carousel karty – slevový badge (–X %) do pravého horního rohu KARTY. shoptet.js (moveBadgeToCard) přesune .flags-extra jako přímého potomka .p (karta je position:relative), takže `.p > .flags-extra` kotví k rohu karty = zarovnané se štítky Akce/Výprodej vlevo nahoře. Hlavní produkt na detailu má badge v .p-image (ne přímý potomek .p) → tohle se ho netýká. */ .products-block .p, .products-related .p, .product .p, .slick-slider .p { position: relative !important; } .products-block .p > .flags-extra, .products-related .p > .flags-extra, .product .p > .flags-extra, .slick-slider .p > .flags-extra { position: absolute !important; top: -28px !important; /* zarovnat s vrškem štítku Akce (top:-28px) */ right: -8px !important; /* zrcadlo Akce (left:-8px) */ left: auto !important; bottom: auto !important; z-index: 3 !important; margin: 0 !important; } /* --------------------------------------------------------- Akční prvky červeně – badge slevy + cena v akci Badge (.flag-discount) byl teal #216d8f → červená. Akční cena: .price-final zčervená jen u karty se slevou (.p obsahuje .flag-discount). Běžná cena zůstává tmavá. --------------------------------------------------------- */ /* dvojitá třída = vyšší specificita, přebije i style.css (#216d8f !important) */ .flag.flag-discount.flag-discount { background-color: #e30613 !important; } /* akční cena – výpis (.p se slevou) i detail (.p-final-price-wrapper se slevou) POZOR: na kartách je viditelná cena UVNITŘ .price-final a má vlastní černou barvu → barvíme i potomky (.price-final *). */ .p:has(.flag-discount) .price-final, .p:has(.flag-discount) .price-final *, .p:has(.price-save) .price-final, .p:has(.price-save) .price-final *, .p-final-price-wrapper:has(.price-save) .price-final, .p-final-price-wrapper:has(.price-save) .price-final * { color: #e30613 !important; } /* Detail produktu: slevový badge (.flags-extra) úplně do pravého horního rohu (top:0/right:0) – zarovnaný k vrchu se štítky Akce/Výprodej vlevo. */ body.type-product .p-image .flags-extra, .p-detail-inner .p-image .flags-extra { top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; } /* Badge VŠUDE (detail i výpis): jen procenta (–10 %), původní cenu v kolečku skrýt. Přeškrtnutá orig. cena na kartách je vlastní .p-orig-price (shoptet.js modul E), takže tahle se neztratí. */ .flag-discount .price-standard { display: none !important; } /* Detail: přeškrtnutá původní cena v cenovém bloku = ČERNÁ (byla růžová). */ .p-final-price-wrapper .price-standard, .p-final-price-wrapper .price-standard * { color: #16223b !important; text-decoration: line-through !important; } /* --------------------------------------------------------- Detail: blok alternativních/podobných produktů (#productsAlternative) měl order:0 → lezl NAD produkt. Dáváme vysoký order → patří dolů. --------------------------------------------------------- */ .p-detail > .tab-pane, .p-detail > #productsAlternative { order: 10 !important; } /* "Doporučujeme dokoupit" (#related.souvisejici-produkty) měl také order:0 → lezl NAD produkt (ten "nesmysl" nahoře). Dáme ho POD produkt/USP (order 2), před popis/taby (3). */ .p-detail > #related.souvisejici-produkty { order: 2 !important; } .p-detail > .shp-tabs-wrapper { order: 3 !important; } /* --------------------------------------------------------- Skladový blok na detailu – celé do jednoho zeleného rámečku. Každý řádek = label vlevo / hodnota vpravo. Centrální sklad ČR s ikonou + zelenou dostupností. (Stavěno v shoptet.js, modul C.) --------------------------------------------------------- */ .p-info-wrapper .sklad { background: #eef6f1 !important; border: 1px solid #d7e8de !important; border-radius: 10px !important; padding: 4px 16px !important; margin-top: 14px !important; } .p-info-wrapper .sklad table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; } .p-info-wrapper .sklad tr { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 9px 0 !important; } .p-info-wrapper .sklad tr + tr { border-top: 1px solid #dceae2 !important; } .p-info-wrapper .sklad th, .p-info-wrapper .sklad td { display: inline !important; background: none !important; border: 0 !important; padding: 0 !important; font-size: 14px !important; } .p-info-wrapper .sklad th { color: #16223b !important; font-weight: 700 !important; text-align: left !important; } .p-info-wrapper .sklad td { color: #16223b !important; font-weight: 700 !important; text-align: right !important; white-space: nowrap !important; } .p-info-wrapper .sklad .centralniskald th::before { content: "🚚 "; } .p-info-wrapper .sklad .centralniskald td { color: #04a70f !important; } /* Skladovost kompaktně na jeden řádek (desktop i mobil) – ať řádek není vysoký a hodnota je svisle ZAROVNANÁ/vycentrovaná s labelem. Vyšší specificita přes "td" (theme má line-height:30px/font:17px s vyšší specificitou, nižší selektor prohrával). */ .p-info-wrapper .sklad td .availability-value, .p-info-wrapper .sklad td .availability-value .availability-label, .p-info-wrapper .sklad td .availability-value .availability-amount, .p-info-wrapper .sklad td .availability-value .delivery-time, .p-info-wrapper .sklad td .availability-value .delivery-in-detail, .p-info-wrapper .sklad td .availability-value .delivery-in-detail *, .p-info-wrapper .sklad td .availability-value .delivery-time-label { line-height: 1.35 !important; font-size: 14px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } .p-info-wrapper .sklad td .availability-value .availability-label, .p-info-wrapper .sklad td .availability-value .availability-amount, .p-info-wrapper .sklad td .availability-value .delivery-time, .p-info-wrapper .sklad td .availability-value .delivery-in-detail, .p-info-wrapper .sklad td .availability-value .delivery-time-label { display: inline !important; } /* pojistka: i kdyby hodnota byla vyšší, zarovnat řádek k vrchu, ať label sedí s prvním řádkem hodnoty (ne pod ním). */ .p-info-wrapper .sklad tr { align-items: flex-start !important; } /* MOBIL: řádky pod sebe (label nad hodnotou), zalomení, ať pravá strana nepřetéká. KOMPAKTNĚ – bylo to roztahané (menší padding/font/mezery). */ @media (max-width: 767px) { .p-info-wrapper .sklad { padding: 2px 12px !important; margin-top: 10px !important; } .p-info-wrapper .sklad tr { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 7px 0 !important; } .p-info-wrapper .sklad th, .p-info-wrapper .sklad td { width: 100% !important; text-align: left !important; white-space: normal !important; font-size: 13px !important; line-height: 1.3 !important; } /* Skladovost: zrušit zbytečné velké mezery (theme má line-height:30px, font:17px). Vyšší specificita přes "td" + těsný line-height/font. "Skladem X ks" inline na jeden řádek. */ .p-info-wrapper .sklad td .availability-value, .p-info-wrapper .sklad td .availability-value .availability-label, .p-info-wrapper .sklad td .availability-value .availability-amount, .p-info-wrapper .sklad td .availability-value .delivery-time, .p-info-wrapper .sklad td .availability-value .delivery-in-detail, .p-info-wrapper .sklad td .availability-value .delivery-time-label { line-height: 1.3 !important; font-size: 13px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .p-info-wrapper .sklad td .availability-value .availability-label, .p-info-wrapper .sklad td .availability-value .availability-amount { display: inline !important; } } /* Cena na detailu výraznější */ .p-final-price-wrapper .price-final { font-size: 40px !important; } /* "Možnosti doručení" přesunuto (shoptet.js) pod zelený box */ .p-info-wrapper .sklad + .shipping-options { display: inline-flex !important; align-items: center !important; margin-top: 10px !important; } /* --------------------------------------------------------- Tlačítko Hledat – primární zelená (viditelná) Černá splývala s tmavým headerem → neviditelná. Dáváme brand zelenou #04a70f a rušíme zelený rámeček. Výška přesně dle inputu (input je y+5px od formuláře): top:5px + bottom:0 → tlačítko sedí na input, nepřetýká nad něj ani nezůstává mezera. Desktop i mobil. --------------------------------------------------------- */ #header .search-form .btn { background-color: #04a70f !important; border-color: #04a70f !important; color: #fff !important; top: 5px !important; bottom: 0 !important; height: auto !important; } #header .search-form .btn:hover { background-color: #04880d !important; border-color: #04880d !important; } /* Detail – pravý sloupec (.p-info-wrapper = cena, dostupnost, KOŠÍK). Motiv ho má opacity:0 a odhaluje přidáním třídy .visible-element (JS reveal). Ten reveal je ale NESPOLEHLIVÝ (občas .visible-element nepřidá – hlavně při render-blocking načtení) → buy box je pak NEVIDITELNÝ. Forcujeme opacity:1, ať je košík vždy vidět. (script.js, co dělal duplicitní název, je smazaný, takže to nic nerozbije.) */ .p-info-wrapper { opacity: 1 !important; } /* --------------------------------------------------------- Skrytí starého benefit pruhu .kn_benefits (vkládá inline JS v Shoptetu) – duplikuje nativní theme .benefitBanner. --------------------------------------------------------- */ .kn_benefits { display: none !important; } /* Košík – fotka v boxu „Potřebujete pomoc?" přetékala z obsahu. Omezit na šířku boxu. */ .sidebar-in-cart .contact-box img, .cart-content .contact-box img, .checkout-box-wrapper .contact-box img, .box .contact-box img { max-width: 100% !important; height: auto !important; display: block !important; } /* --------------------------------------------------------- USP pruh (.benefitBanner) – ikony NAD nadpis+text a větší, vše vystředěné (původně ikona vlevo vedle textu). --------------------------------------------------------- */ .benefitBanner__item { flex-direction: column !important; align-items: center !important; text-align: center !important; overflow: visible !important; } /* kontejner ikony na plnou šířku + vycentrovat ikonu (byl 40px → ikona vlevo/oříznutá) */ .benefitBanner__picture { width: 100% !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 0 12px 0 !important; } .benefitBanner__img { width: 80px !important; height: 80px !important; max-width: none !important; } .benefitBanner__content { width: 100% !important; text-align: center !important; } /* nadpis i podtext na plnou šířku + střed (podtext byl úzký a sedl vlevo) */ .benefitBanner__title, .benefitBanner__data { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; float: none !important; text-align: center !important; } /* Nav hover – na modré navigaci ať není černý (dark-merkur) */ .navigation-in > ul > li:hover > a, .navigation-in > ul > li.exp > a, .navigation-in > ul > li.exp > a::after { background-color: #174A61 !important; } /* Přihlašovací popup překrýval sticky header (z-index:1000) → zvednout nad něj */ #login { z-index: 1100 !important; } /* --------------------------------------------------------- 3) Benefity registrace v přihlašovacím popupu (vpravo) HTML vkládá shoptet.js (aside.login-benefits). Akcent = brand teal. --------------------------------------------------------- */ #login.has-benefits { width: min(760px, 95vw) !important; max-width: none !important; right: 0 !important; left: auto !important; } #login.has-benefits .popup-widget-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto 1fr !important; padding: 0 !important; overflow: hidden !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(16, 34, 59, .18) !important; } #login.has-benefits > .popup-widget-inner > h2 { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 40px 38px 18px !important; font-size: 22px !important; font-weight: 700 !important; color: #16223b !important; background: 0 !important; } #login.has-benefits > .popup-widget-inner > #customerLogin { grid-column: 1 !important; grid-row: 2 !important; padding: 0 38px 40px !important; } #login.has-benefits .login-benefits { grid-column: 2 !important; grid-row: 1 / -1 !important; display: flex !important; flex-direction: column !important; padding: 56px 56px 48px 48px !important; background: linear-gradient(180deg, #f1f7f8, #e6f0f2) !important; border-left: 1px solid #d8e6e9 !important; } #login .lb-title { margin: 0 0 6px !important; padding: 0 !important; font-size: 22px !important; font-weight: 700 !important; color: #16223b !important; background: 0 !important; border: 0 !important; } #login .lb-sub { margin: 0 0 22px !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: #5a6b7e !important; } #login .lb-list { list-style: none !important; margin: 0 0 28px !important; padding: 0 !important; } #login .lb-list li { position: relative !important; margin: 0 !important; padding: 9px 0 9px 38px !important; font-size: 15px !important; line-height: 1.45 !important; color: #2c3a4f !important; } #login .lb-list li::before { content: "✓" !important; position: absolute !important; left: 0 !important; top: 6px !important; width: 24px !important; height: 24px !important; line-height: 24px !important; text-align: center !important; border-radius: 50% !important; background: #216d8f !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; } #login .lb-cta { display: block !important; margin-top: auto !important; padding: 15px 18px !important; text-align: center !important; background: #216d8f !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; box-shadow: 0 6px 16px rgba(33, 109, 143, .28) !important; transition: .15s; } #login .lb-cta:hover { background: #18566f !important; color: #fff !important; box-shadow: 0 8px 20px rgba(33, 109, 143, .36) !important; } @media (min-width: 992px) { #login.has-benefits { right: 120px !important; left: auto !important; } } @media (max-width: 767px) { #login.has-benefits { width: min(440px, 96vw) !important; } #login.has-benefits .popup-widget-inner { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; border-radius: 14px !important; } #login.has-benefits > .popup-widget-inner > h2 { padding: 28px 24px 14px !important; font-size: 20px !important; } #login.has-benefits > .popup-widget-inner > #customerLogin { padding: 0 24px 26px !important; } #login.has-benefits .login-benefits { grid-column: 1 !important; grid-row: auto !important; padding: 28px 24px !important; border-left: 0 !important; border-top: 1px solid #d8e6e9 !important; } #login .lb-title { font-size: 19px !important; } #login .lb-cta { margin-top: 8px !important; } } /* --------------------------------------------------------- Side banner "Potřebujete pomoc?" (vkládá se jako HTML do kategorie – jen markup .sz-help, styl je tady). --------------------------------------------------------- */ .sz-help { max-width: 340px; margin: 0 auto; border: 1px solid #e2e6ea; border-radius: 14px; overflow: hidden; background: #fff; font-family: inherit; box-shadow: 0 4px 16px rgba(23, 74, 97, .08); } .sz-help__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #eef4f6; border-bottom: 1px solid #e2e6ea; } .sz-help__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #174A61; display: flex; align-items: center; justify-content: center; } .sz-help__title { font-size: 18px; font-weight: 700; color: #16223b; line-height: 1.2; } .sz-help__row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #16223b; text-decoration: none; font-size: 15px; font-weight: 600; border-top: 1px solid #f0f3f5; transition: background .15s, color .15s; word-break: break-word; } .sz-help__row:first-of-type { border-top: 0; } .sz-help__row svg { flex: 0 0 auto; color: #174A61; } a.sz-help__row:hover { background: #eef4f6; color: #174A61; } a.sz-help__row:hover svg { color: #04a70f; } .sz-help__row--info { color: #5a6b7e; font-weight: 600; background: #fafbfc; }