@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. ========================================================= */ /* ANTI-FLASH (filtr „blikal"): theme renderuje filtr vlevo hned, ale chrome (hlavička/patička) doplní JS až po načtení → probliknutí. Proto filtr držíme skrytý (opacity:0), dokud mu JS nepřidá .sz-ready (chrome hotové), pak ho jemně ukážeme. Failsafe: i kdyby JS selhal, ukáže se po 1.2 s. */ /* STICKY přes třídu na STABILNÍM rodiči (.content-wrapper-in): motiv při AJAX načtení dat filtru .box-filters PŘEKRESLÍ (nový element bez .sz-ready) → dřív to znovu spadlo na opacity:0 a probliklo. Třída na rodiči se po prvním zobrazení už nesundá → filtr zůstane vidět i po překreslení = žádné blikání. */ .content-wrapper-in:not(.sz-filters-shown) .sidebar-left .box-filters { opacity: 0; animation: szFilterReveal 0.01s linear 1.2s forwards; /* failsafe kdyby JS selhal */ } .content-wrapper-in.sz-filters-shown .sidebar-left .box-filters { opacity: 1; transition: opacity 0.18s ease; } @keyframes szFilterReveal { to { opacity: 1; } } .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; } /* Motiv přidává na .box-filters ::before vlastní nadpis „Filtrovat" — máme svou hlavičku (.sz-filter-head „Filtry:"), tak ten nativní schováme, ať to není dvakrát. (Mobilní toggle je samostatný prvek .filtrovat, nedotčen.) */ .box-filters::before, .sidebar-left .box-filters::before, #content-wrapper .box-filters::before { content: "" !important; display: none !important; } /* Štítek „Na skladě" (checkbox filtru) zeleně – ať vyskočí (přání klienta). Cílíme přes for="stock" (unikátní), počet necháme šedý. */ .box-filters label[for="stock"], #filters .box-filters label[for="stock"] { color: #3f9a2e !important; font-weight: 700 !important; } .box-filters label[for="stock"] .filter-count, #filters .box-filters label[for="stock"] .filter-count { color: #94a1a6 !important; font-weight: 400 !important; } /* Parametrické sekce (Patice, Barva…) měly řádky UŽŠÍ a odsazené oproti Příznakům/Dle štítku – vnořené form>fieldset>.fieldsetinner přidávaly boční padding (16+14+24 px). Theme to drží přes ID #category-filter-hover (cross-origin style.css), proto přebíjíme dvěma ID. Výsledek: řádky přes celou šířku, počty u pravého okraje – stejně jako Příznaky. */ #filters #category-filter-hover .filter-section-parametric form, #filters #category-filter-hover .filter-section-parametric fieldset, #filters #category-filter-hover .filter-section-parametric .fieldsetinner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Štítky aktivních filtrů nad produkty (.sz-active-chips staví shoptet.js). „chips" = odstranitelné pilulky s vybranou hodnotou + ×; „Zrušit vše". */ .sz-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; } .sz-active-chips .sz-chips-label { font-size: 13px; font-weight: 700; color: #5d6b70; margin-right: 2px; } .sz-active-chips .sz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px; border-radius: 999px; background: #eef4f6; color: #174A61; border: 1px solid #d7e2e6; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1; transition: background .12s ease, border-color .12s ease; } .sz-active-chips .sz-chip:hover { background: #e0ebee; border-color: #b9ccd2; } .sz-active-chips .sz-chip svg { flex: none; opacity: .7; } .sz-active-chips .sz-chip:hover svg { opacity: 1; } .sz-active-chips .sz-chip-clear { background: transparent; border-color: transparent; color: #b23b3b; font-weight: 700; padding-left: 8px; padding-right: 8px; } .sz-active-chips .sz-chip-clear:hover { background: #fbeaea; border-color: transparent; } /* 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 – čistý řádek [checkbox] text … počet. Řeší PŘEKRYV: parametrické mají .fieldsetinner, „Dle štítku" (priznak) má jen fieldset>div (a dva formy) → volby se skládaly na sebe. */ .sidebar-left #filters .param-filter-top fieldset, .sidebar-left #filters .param-filter-top form, .sidebar-left #filters .fieldsetinner { display: block !important; width: 100% !important; } .sidebar-left #filters .param-filter-top fieldset > div, .sidebar-left #filters .fieldsetinner > div { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; position: static !important; float: none !important; padding: 6px 6px !important; margin: 0 !important; border-radius: 8px !important; } .sidebar-left #filters .param-filter-top fieldset > div:hover, .sidebar-left #filters .fieldsetinner > div:hover { background: #f4f6f8 !important; } /* DŮLEŽITÉ: theme reálný input skrývá (display:none, appearance:none) a kreslí vlastní checkbox přes .filter-label::before. My ::before schováváme (kvůli layoutu), takže MUSÍME zobrazit reálný input jako checkbox – jinak není vidět výběr. display + appearance přebít, teal accent-color. */ .sidebar-left #filters input[type="checkbox"], .sidebar-left #filters input[type="radio"] { display: inline-block !important; -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: checkbox !important; position: static !important; opacity: 1 !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 8px 0 0 !important; flex: 0 0 auto !important; pointer-events: auto !important; accent-color: #174A61 !important; } .sidebar-left #filters input[type="radio"] { -webkit-appearance: radio !important; -moz-appearance: radio !important; appearance: radio !important; border-radius: 50% !important; } .sidebar-left #filters .filter-label { display: flex !important; align-items: center !important; flex: 1 1 auto !important; width: auto !important; padding: 0 !important; margin: 0 !important; position: static !important; line-height: 1.3 !important; white-space: normal !important; min-height: 0 !important; cursor: pointer !important; } .sidebar-left #filters .filter-label::before, .sidebar-left #filters .filter-label::after { display: none !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; } /* Filtr: pryč šedé pozadí .filter-sections (#f6f6f6 z theme style.css) */ #filters .filter-sections, .sidebar-left #filters .filter-sections { background-color: transparent !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 filtru) → výrazné TEAL tlačítko, ať je dobře vidět (přání klienta): trychtýř vlevo + chevron vpravo. */ #filters .filtrovat, .filters .filtrovat { width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 16px 44px 16px 18px !important; min-height: 50px !important; /* +25 % výšky oproti původním ~40px (přání klienta) */ margin-bottom: 12px !important; background: #174A61 !important; border: 0 !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 16px !important; color: #fff !important; box-shadow: 0 4px 14px rgba(23, 74, 97, .25) !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent; } /* trychtýř (filter ikona) vlevo */ #filters .filtrovat::before, .filters .filtrovat::before { content: "" !important; width: 18px !important; height: 18px !important; flex: none !important; background: #fff !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center/contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center/contain no-repeat !important; } /* chevron motivu (icon-font ::after) vpravo + bílý */ #filters .filtrovat::after, .filters .filtrovat::after { left: auto !important; right: 18px !important; color: #fff !important; /* svisle na střed tlačítka (theme má top:10px napevno → po zvětšení tlačítka byl chevron nad středem). */ top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* === FILTR JAKO BOTTOM SHEET NA MOBILU (přání klienta) ================ Klik na „Filtrovat" (#filters dostane .otevreno) → filtr se ukáže jako spodní panel: fixní dole, zaoblený, s podkladem, sticky hlavičkou (× zavře) a sticky patičkou „Zobrazit produkty". Pořadí sekcí drží existující `order` na PŘÍMÝCH potomcích #filters → proto BEZ obalu (patička order:100, hlavička order:-100). Otevření/zavření zrcadlí JS do body.sz-sheet-open. Jen mobil. */ .sz-sheet-backdrop { display: none; } .sz-sheet-foot { display: none; } .sz-sheet-x { display: none; } @media (max-width: 991px) { .sz-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 9999; background: rgba(16, 34, 44, .5); opacity: 0; visibility: hidden; transition: opacity .25s ease; } body.sz-sheet-open .sz-sheet-backdrop { opacity: 1; visibility: visible; } body.sz-sheet-open { overflow: hidden; } /* plovoucí widgety s vysokým z-indexem (nahoru, widget otevírací doby OPH) překrývaly sheet → při otevřeném sheetu je schováme. */ body.sz-sheet-open #return-to-top, body.sz-sheet-open #OPHWidgetWrapp { display: none !important; } /* ZAVŘENÝ filtr na mobilu = jen tlačítko „Filtrovat". Motiv nechává sekci „Příznaky" (.param-filter-top) viset pod tlačítkem i po zavření → skryjeme vše kromě tlačítka, dokud není .otevreno. */ #filters:not(.otevreno) > *:not(.filtrovat) { display: none !important; } #filters.otevreno { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: 90vh !important; max-height: 90vh !important; margin: 0 !important; padding: 0 12px !important; z-index: 10000 !important; background: #fff !important; border-radius: 20px 20px 0 0 !important; box-shadow: 0 -10px 44px rgba(0, 0, 0, .28) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; align-items: stretch !important; /* aby se patička/hlavička roztáhly na plnou šířku (flex sloupec) */ animation: szSheetUp .3s cubic-bezier(.32, .72, 0, 1); } @keyframes szSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* chevron sekcí doprava (Příznaky měl holý text bez → chevron zůstával u textu; space-between ho odtlačí k pravému okraji jako u ostatních). */ #filters.otevreno h4 { justify-content: space-between !important; } #filters.otevreno .filtrovat { order: -100 !important; position: sticky !important; top: 0 !important; z-index: 5 !important; /* theme dává .filtrovat width:100% (= jen šířka obsahu sheetu, 24px krátká) → header nedosáhl k pravému kraji a × „viselo" daleko od rohu. Roztáhneme přes celou šířku sheetu (padding 0 12px kompenzujeme +24px a -12px margin). */ width: calc(100% + 24px) !important; box-sizing: border-box !important; margin: 0 -12px 8px !important; border-radius: 0 !important; background: #fff !important; color: #16223b !important; box-shadow: none !important; border-bottom: 1px solid #e6ebee !important; padding: 19px 16px !important; font-size: 18px !important; font-weight: 800 !important; align-items: center !important; min-height: 62px !important; gap: 8px !important; } #filters.otevreno .filtrovat::before { background: #174A61 !important; } #filters.otevreno .filtrovat::after { display: none !important; } /* × vpravo v hlavičce (flex, margin-left:auto – spolehlivé, bez absolutního pozicování, které se u sticky hlavičky rozbíjelo/přesouvalo). */ #filters.otevreno .sz-sheet-x { display: inline-flex !important; position: static !important; margin: 0 0 0 auto !important; flex: none !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #eef2f4 !important; align-items: center !important; justify-content: center !important; color: #5a6b7e !important; font-size: 23px !important; line-height: 1 !important; } /* badge počtu vybraných filtrů „N vybráno" vedle názvu. */ #filters.otevreno .sz-sheet-count { display: inline-flex !important; align-items: center !important; margin-left: 10px !important; background: #174A61 !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; padding: 3px 10px !important; border-radius: 999px !important; line-height: 1.4 !important; white-space: nowrap !important; } #filters.otevreno .sz-sheet-count.sz-empty { display: none !important; } /* všechny sekce na plnou šířku (parametrické měly 50% → nejednotné) */ #filters.otevreno .filter-section, #filters.otevreno .param-filter-top, #filters.otevreno .filter-section-parametric, #filters.otevreno .slider-wrapper, #filters.otevreno .filter-sections { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #filters.otevreno .sz-sheet-foot { display: block; order: 100 !important; position: sticky !important; bottom: 0 !important; z-index: 5 !important; margin: 8px -12px 0 !important; background: #fff !important; border-top: 1px solid #e6ebee !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; } #filters.otevreno .sz-sheet-foot .sz-sheet-show { width: 100% !important; padding: 15px !important; border: 0 !important; border-radius: 12px !important; background: #174A61 !important; color: #fff !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer; transition: opacity .15s ease; } #filters.otevreno .sz-sheet-foot .sz-sheet-show.sz-loading { opacity: .6; } /* FLAT vzhled sekcí (jako reference svet-svitidel): místo šedých boxů tenké oddělovače, hlavičky bez pozadí. Aktivní/otevřená sekce má teal pozadí na h4 (theme) přes silné pravidlo → přebíjíme dvěma ID (html body #content…). */ html body #content-wrapper #filters.otevreno .filter-section, html body #content-wrapper #filters.otevreno .param-filter-top, html body #content-wrapper #filters.otevreno .filter-section-parametric, html body #content-wrapper #filters.otevreno .slider-wrapper { background: transparent !important; border: 0 !important; border-bottom: 1px solid #eceff1 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } html body #content-wrapper #filters.otevreno h4 { background: transparent !important; color: #16223b !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 2px !important; } html body #content-wrapper #filters.otevreno h4 span { color: #16223b !important; } } /* === POŘADÍ SEKCÍ FILTRU (dle starého webu old.svetzarovek.eu) ======== Shoptet posílá parametrické filtry ABECEDNĚ → smysluplné pořadí si musíme určit sami. Logiku jsme převzali ze starého webu (klient: „řazení má význam podle použitelnosti při výběru – nejdřív barva auta, ne elektrony"): co to je → kompatibilita → výkon → tvar/provedení → barva → parametry → cena. Řadíme přes flex `order` a STABILNÍ třídy s ID parametru (.filter-section-parametric-id-NN) – napříč kategoriemi stejné, na rozdíl od dřívějších tříd odvozených z názvů (křehké, diakritika). Mapa ID: 45=Typ žárovky 60=Produkt 33=Patice 24=Napětí 30=Příkon 108=Tvar 27=Provedení 39=Barva světla 165=Barva 51=Barevná teplota 114=Odstín 84=Světelný tok 54=Délka 81=Odpovídá klasické 36=Proud 78=Stmívatelná 48=Homologace 90=CANBUS */ html body #content-wrapper #filters.filters.visible { display: flex !important; flex-direction: column !important; } html body #content-wrapper #filters.filters.visible > .filtrovat { order: -100 !important; } /* mobil toggle nahoře */ html body #content-wrapper #filters.filters.visible > .param-filter-top { order: 1 !important; } /* Příznaky nahoře */ html body #content-wrapper #filters.filters.visible > .filter-sections { order: 2 !important; } /* „Dle ceny" je PŘÍMÝ potomek #filters (ne uvnitř .filter-sections) → staré pravidlo na ni nesedělo, zůstal jí order 0 a byla PRVNÍ. Teď dolů. */ html body #content-wrapper #filters.filters.visible > .slider-wrapper { order: 90 !important; } html body #content-wrapper #filters .filter-sections .visible.visible { display: flex !important; flex-direction: column !important; } html body #content-wrapper #filters .filter-sections .visible > .param-filter-top { order: 0 !important; } html body #content-wrapper #filters .filter-sections .visible > .filter-section { order: 20 !important; } /* default pro neuvedené */ html body #content-wrapper #filters .filter-sections .visible > .slider-wrapper { order: 90 !important; } html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45 { order: 1 !important; } /* Typ žárovky */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-60 { order: 1 !important; } /* Produkt */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-33 { order: 2 !important; } /* Patice */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24 { order: 3 !important; } /* Napětí */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30 { order: 4 !important; } /* Příkon */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-108 { order: 5 !important; } /* Tvar */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27 { order: 6 !important; } /* Provedení */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39 { order: 7 !important; } /* Barva světla */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-165 { order: 7 !important; } /* Barva */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51 { order: 8 !important; } /* Barevná teplota */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-114 { order: 9 !important; } /* Odstín */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84 { order: 10 !important; } /* Světelný tok */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-54 { order: 11 !important; } /* Délka (mm) */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-81 { order: 12 !important; } /* Odpovídá klasické (W) */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-36 { order: 13 !important; } /* Proud */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-78 { order: 14 !important; } /* Stmívatelná */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-48 { order: 15 !important; } /* Homologace */ html body #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-90 { order: 16 !important; } /* CANBUS */ /* VÝJIMKY – kategorie, kde měl starý web jinou logiku pořadí. Cílíme přes body.in- (vyšší specificita než globální pravidlo výše). */ /* LED trubice/zářivky – starý web: Délka → Barva světla → Barevná teplota → Světelný tok → Příkon → Napětí (tj. Napětí/Příkon až za optikou, ne nahoře). */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-54 { order: 0 !important; } /* Délka */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39 { order: 1 !important; } /* Barva světla */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51 { order: 2 !important; } /* Barevná teplota */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84 { order: 3 !important; } /* Světelný tok */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30 { order: 4 !important; } /* Příkon */ html body.in-led-trubice-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24 { order: 5 !important; } /* Napětí */ /* Zářivky a příslušenství: starý web měl Odstín PŘED Barevnou teplotou */ html body.in-zarivky-a-prislusenstvi #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-114 { order: 8 !important; } html body.in-zarivky-a-prislusenstvi #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51 { order: 9 !important; } /* LED autožárovky: starý web měl Napětí PŘED Paticí */ html body.in-led-autozarovky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24 { order: 2 !important; } html body.in-led-autozarovky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-33 { order: 3 !important; } /* VZOR „Svítidla" dle starého webu (LED svítidla i klasická, Bodová, Nouzová, Solární, Nástěnná, Stropní, Dekorativní): Provedení → Napětí → Příkon → Barva světla → Barevná teplota → PIR → Typ žárovky → Světelný tok. Zbytek (Barva, Krytí, Odpovídá klasické, Stmívatelná) padá do defaultu 20. */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-27 { order: 1 !important; } /* Provedení */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-24 { order: 2 !important; } /* Napětí */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30 { order: 3 !important; } /* Příkon */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39 { order: 4 !important; } /* Barva světla */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51 { order: 5 !important; } /* Barevná teplota */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-126 { order: 6 !important; } /* PIR */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-45 { order: 7 !important; } /* Typ žárovky */ html body.in-bodova-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-nastenna-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-stropni-led-svitidla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-solarni-led-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-nocni-nouzove-a-orientacni #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-vnitrni-svetla #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84, html body.in-svicny--svicky--lampy #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-84 { order: 8 !important; } /* Světelný tok */ /* VZOR „Zářivkové trubice" dle starého webu (Kompaktní, Motýlí a kruhové, Trubicové T8/T5): Příkon → Patice → Odstín → Barva světla → Barevná teplota → Délka. (Staré kat. byly per-patice bez filtru Patice; nové ho mají, proto bereme vzor staré kat. „Zářivkové trubice T8 a T5", která Patici měla.) */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-30 { order: 1 !important; } /* Příkon */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-33, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-33, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-33 { order: 2 !important; } /* Patice */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-114, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-114, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-114 { order: 3 !important; } /* Odstín */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-39 { order: 4 !important; } /* Barva světla */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-51 { order: 5 !important; } /* Barevná teplota */ html body.in-ostatni-zarivky #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-54, html body.in-kruhove-a-motyli #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-54, html body.in-trubicove-zarivky-t8-a-t5 #content-wrapper #filters .filter-sections .visible > .filter-section-parametric-id-54 { order: 6 !important; } /* Délka (mm) */ /* 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; } /* --------------------------------------------------------- Telefon + otevírací doba VEDLE VYHLEDÁVÁNÍ (přání klienta). JS `buildHeaderPhone` vloží .sz-header-phone do .navigation-buttons. Původní telefon+doba v horní černé liště se skryje (duplicita). --------------------------------------------------------- */ .top-navigation-bar .top-navigation-contacts { display: none !important; } /* Robustní flex layout hlavičky (jen desktop ≥992px): logo (auto) | vyhledávání (roste, max 480px) | telefon+Přihlášení+košík (auto, u pravého kraje). Vejde se na jeden řádek na VŠECH šířkách, telefon je vždy hned za vyhledáváním (dřív pevný bootstrap grid → na širokém monitoru se rozhodilo). */ @media (min-width: 992px) { .header-top { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 18px !important; } .header-top .site-name-wrapper { flex: 0 0 auto !important; width: auto !important; } .header-top .search { flex: 1 1 auto !important; max-width: 480px !important; width: auto !important; min-width: 220px !important; } .header-top .navigation-buttons { flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 14px !important; } } .sz-header-phone { display: inline-flex !important; align-items: center !important; gap: 11px !important; text-decoration: none !important; color: #fff !important; margin-right: 18px !important; white-space: nowrap; /* motiv dorenderuje Přihlášení AŽ po vložení telefonu → skočilo před něj; order:-1 vynutí telefon jako první (vždy hned za vyhledáváním). */ order: -1 !important; } .sz-header-phone .szp-photo { flex: none !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid rgba(255, 255, 255, .35) !important; } .sz-header-phone .szp-photo img { width: 44px !important; height: 44px !important; object-fit: cover !important; display: block !important; } .sz-header-phone .szp-body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.2 !important; } .sz-header-phone .szp-num { font-size: 18px !important; font-weight: 800 !important; letter-spacing: .3px !important; } .sz-header-phone .szp-meta { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; } .sz-header-phone .szp-hrs { opacity: .8 !important; } .sz-header-phone .szp-online { color: #37d67a !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .sz-header-phone .szp-online::before { content: "" !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #37d67a !important; box-shadow: 0 0 0 3px rgba(55, 214, 122, .25) !important; } .sz-header-phone:hover .szp-num { text-decoration: underline !important; } /* mobil: blok schovat (těsno); theme má vlastní telefon v .responsive-tools */ @media (max-width: 991px) { .sz-header-phone { display: none !important; } .header-top .search { flex: 1 1 auto !important; max-width: none !important; width: auto !important; } } /* --------------------------------------------------------- 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; } /* Kód produktu → vycentrovaný POD fotku (dřív vpravo dole; přání klienta). Karta = flex sloupec: fotka → kód → zbytek (hvězdy/název/cena/koš). Badge .flags-extra je position:absolute → flex se ho netýká. */ .products-block .p { display: flex !important; flex-direction: column !important; } .products-block .p > .image { order: 1 !important; } .products-block .p > .p-code { order: 2 !important; position: static !important; display: block !important; width: 100% !important; text-align: center !important; margin: 8px 0 4px !important; inset: auto !important; } .products-block .p > .p-in { order: 3 !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: theme renderuje název 2× – jednou full-width nahoře (.p-detail-inner > .p-detail-inner-header) a jednou v pravém sloupci (.p-info-wrapper .p-detail-inner-header). Skrýt horní DUPLIKÁT, ALE JEN když název existuje i v pravém sloupci (`:has`) – jinak by u produktů, co mají jen horní hlavičku, název zmizel úplně. (Můj dřívější display:block omylem ukázal oba = duplicita.) */ .p-detail-inner:has(.p-info-wrapper .p-detail-inner-header) > .p-detail-inner-header { display: none !important; } .p-info-wrapper .p-detail-inner-header { display: block !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; } /* Inline jen to, co se má zobrazit: stav (Skladem) + množství/lhůta + datum. Větu "..., Můžeme doručit do " renderuje SÁM motiv přes ::before na datu (.delivery-time span). Proto NESMÍME odkrývat .delivery-in-detail / .delivery-time-label – to je nativně skrytý zdrojový popisek, jinak se "Můžeme doručit do" zobrazí DUPLICITNĚ (osamoceně na konci). */ .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 { display: inline !important; } .p-info-wrapper .sklad td .availability-value .delivery-in-detail, .p-info-wrapper .sklad td .availability-value .delivery-time-label { display: none !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: 0 !important; /* bylo 5px → mezera nad tlačítkem; teď plná výška */ right: 0 !important; /* bylo 4px → mezera z boku; teď u pravého kraje */ bottom: 0 !important; height: auto !important; } #header .search-form .btn:hover { background-color: #04880d !important; border-color: #04880d !important; } /* Megamenu (přání klienta): zobrazit VŠECHNY podkategorie – theme je ořezával pevnou výškou 56px + overflow:hidden a dával „..." přes .more-items-trigger. BEZ oddělovačů (ty klient nechtěl) – nativní čárky zůstávají. Sloupce nahoru + podkategorie plynou za sebou (display:inline). */ .menu-level-2 { align-items: flex-start !important; } .menu-level-3 { height: auto !important; max-height: none !important; overflow: visible !important; } .menu-level-3 .more-items-trigger { display: none !important; } .menu-level-3 > li { display: inline !important; } /* Sticky „Do košíku" lišta na MOBILU (přání klienta). Na desktopu skrytá. Na mobilu naskočí zespodu, když hlavní tlačítko „Vložit do košíku" sjede z obrazovky (třídu sz-sticky-on přepíná JS přes IntersectionObserver). */ .sz-sticky-buy { display: none; } @media (max-width: 991px) { .sz-sticky-buy { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, .14); transform: translateY(115%); transition: transform .25s ease; } body.sz-sticky-on .sz-sticky-buy { transform: translateY(0); } .sz-sticky-buy .ssb-price { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; } .sz-sticky-buy .ssb-orig { font-size: 14px; font-weight: 600; color: #9aa3ad; text-decoration: line-through; } .sz-sticky-buy .ssb-final { font-size: 22px; font-weight: 800; color: #e30613; } .sz-sticky-buy .ssb-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: #2f6f76; color: #fff; border: 0; border-radius: 8px; padding: 13px 22px; font-size: 15px; font-weight: 800; cursor: pointer; } .sz-sticky-buy .ssb-btn:active { background: #245258; } } /* Sticky „Pokračovat" lišta na MOBILU v košíku. Na desktopu skrytá. Naskočí zespodu, když tlačítko Pokračovat sjede z obrazovky (třídu sz-cart-sticky-on přepíná JS přes IntersectionObserver). */ .sz-cart-sticky { display: none; } @media (max-width: 991px) { .sz-cart-sticky { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, .14); transform: translateY(115%); transition: transform .25s ease; } body.sz-cart-sticky-on .sz-cart-sticky { transform: translateY(0); } .sz-cart-sticky .scs-price { display: inline-flex; flex-direction: column; line-height: 1.1; white-space: nowrap; } .sz-cart-sticky .scs-lbl { font-size: 11px; color: #94a1a6; font-weight: 600; } .sz-cart-sticky .scs-val { font-size: 20px; font-weight: 800; color: #16223b; } .sz-cart-sticky .scs-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #3c7781; color: #fff; border: 0; border-radius: 8px; padding: 13px 22px; font-size: 15px; font-weight: 800; cursor: pointer; } .sz-cart-sticky .scs-btn:active { background: #2f5f68; } } /* KOŠÍK: hláška o minimální ceně objednávky (když je košík pod limitem) byla jen šedý text v souhrnu → zákazníci si jí nevšimli a nechápali, proč nejde pokračovat. Uděláme z ní výrazný oranžový alert s ikonou (přání klienta). Cíl:
uvnitř .next-step--cart (v normálním stavu tam je tlačítko, ne
). */ .next-step--cart > p { position: relative !important; background: #fff4e0 !important; border: 2px solid #f2a63b !important; border-left: 6px solid #f2a63b !important; border-radius: 12px !important; padding: 16px 18px 16px 50px !important; color: #7a4400 !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.55 !important; margin: 14px 0 0 !important; box-shadow: 0 4px 16px rgba(242, 166, 59, .22) !important; } .next-step--cart > p::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; background: #f2a63b !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6v6m0 3v.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6v6m0 3v.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important; } .next-step--cart > p strong { color: #b23b00 !important; } .next-step--cart > p a { color: #b23b00 !important; font-weight: 800 !important; text-decoration: underline !important; } /* Košík/checkout (ordering-process) NEMÁ patičku (Shoptet ji tam záměrně nedává) → stránka končila „utnutá" bez místa dole. Doplníme tenkou čistou patičku (kontakt + copyright, NE celou rušivou z webu). Staví ji shoptet.js (buildCheckoutFooter) do .overall-wrapper (blok, plná šířka), tady je styl. */ .sz-checkout-footer { border-top: 1px solid #e3e8ea; margin-top: 34px; padding: 22px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: #fafbfc; } .sz-checkout-footer .szcf-in { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; font-size: 13px; color: #7a868c; text-align: center; } .sz-checkout-footer a { color: #174A61 !important; text-decoration: none; font-weight: 600; } .sz-checkout-footer a:hover { text-decoration: underline; } .sz-checkout-footer .szcf-brand { font-weight: 700; color: #5d6b70; } .sz-checkout-footer .szcf-sec { display: inline-flex; align-items: center; gap: 6px; } .sz-checkout-footer .szcf-sec svg { opacity: .7; } /* Homepage „Oblíbené kategorie": názvy měly nejednotný vzhled (dvě dlaždice podtržené, tři ne) → sjednotit na TUČNÉ + PODTRŽENÉ u všech (přání klienta). Fotky doplňuje shoptet.js (buildFavCatImages). */ .fav-cat a { text-decoration: underline !important; font-weight: 700 !important; } /* Názvy na stejném místě: „Kompaktní zářivky" je jednořádkový, ostatní dvouřádkové → bez pevné výšky měly dlaždice různě vysoký textový blok. Třídu .sz-fav-name přidává shoptet.js odkazu s názvem. */ .fav-cat .sz-fav-name { display: inline-block !important; min-height: 58px !important; } /* Informační pruh (.site-msg „Zboží označené skladem…") přesouvá shoptet.js pod menu (moveSiteMsg). Dokud není přesunutý, držíme ho skrytý – jinak se nejdřív vykreslí nativně nahoře a po přesunu problikne / vznikne bílá mezera. */ .site-msg:not(.sz-msg-moved) { display: none !important; } /* Detail na MOBILU: „Kód produktu" přesouvá shoptet.js (moveCodeUnderImage) pod hlavní obrázek – tady ho vycentrujeme (přání klienta). */ @media (max-width: 991px) { .p-image-wrapper > .p-code { display: block !important; text-align: center !important; margin: 10px 0 4px !important; } } /* CHECKOUT – doprava & platba (přání klienta): 1) neaktivní/nekompatibilní metody (Shoptet je značí .inactive-child + disabled input, text „Tato kombinace … není možná") byly šedé a viditelné → SKRÝT. 2) řádky metod byly hodně od sebe (nutnost scrollovat) → ZKOMPRIMOVAT. */ .radio-wrapper.inactive-child { display: none !important; } .shipping-billing-table .radio-wrapper { margin-bottom: 4px !important; } .shipping-billing-table .radio-wrapper > label { padding-top: 9px !important; padding-bottom: 9px !important; } /* CHECKOUT – Informace o vás (krok 3), přání klienta: 3) vyplněné hodnoty (i z ARESu) měly šedou barvu (color:#a3a3a3) → zákazník nevěděl, jestli jsou fakt vyplněné → ztmavit. (Placeholdery zůstanou šedé.) 4) formuláře byly moc od sebe (dost scrollování) → zkomprimovat (nižší inputy + menší mezery mezi poli). */ #order-form .form-control { color: #1d2b30 !important; padding-top: 9px !important; padding-bottom: 9px !important; } #order-form .form-group { margin-bottom: 9px !important; } #order-form fieldset.box { padding-top: 16px !important; padding-bottom: 16px !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; } /* ========================================================= KARTA PODPORY „Potřebujete pomoc?" (.contact-box – košík, kontakt). Nadpis teal + kulatá fotka se stínem + kontakty v řádcích s ikonou v teal kolečku. FB text/telefon formátuje shoptet.js (styleContactCard). Ikony theme jsou span::before (icon-font, position:absolute) → static. ========================================================= */ .contact-box { text-align: center !important; padding: 4px 2px 2px !important; position: static !important; overflow: visible !important; } .contact-box h2, .contact-box .h4 { color: #174A61 !important; font-size: 19px !important; font-weight: 800 !important; margin: 0 0 16px !important; text-align: center !important; } .contact-box img { display: block !important; float: none !important; width: 92px !important; max-width: 92px !important; height: 92px !important; object-fit: cover !important; margin: 0 auto 18px !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(23, 74, 97, .18) !important; } .contact-box.no-image img { display: none !important; } .contact-box ul { list-style: none !important; margin: 0 auto !important; padding: 0 !important; text-align: left !important; max-width: 300px !important; /* aby se v širším footeru seznam necentroval rozplácle */ } .contact-box ul li { margin: 0 !important; padding: 0 !important; display: block !important; border-top: 1px solid #eef1f4 !important; } .contact-box ul li:first-child { border-top: 0 !important; } .contact-box ul li > span { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 2px !important; width: 100% !important; position: static !important; } .contact-box ul li > span::before { position: static !important; top: auto !important; left: auto !important; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; min-width: 38px !important; line-height: 38px !important; text-align: center !important; background: #eaf3f5 !important; color: #174A61 !important; border-radius: 50% !important; font-size: 17px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .contact-box ul li a, .contact-box ul li .cellphone-inner { color: #1f2937 !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; word-break: break-word !important; line-height: 1.3 !important; display: inline !important; padding: 0 !important; } .contact-box ul li a:hover { color: #174A61 !important; } /* --------------------------------------------------------- KARTA PODPORY v KOŠÍKU – bohatší „help" karta (návrh klienta). JS `buildHelpCard` (shoptet.js) přestaví nativní .contact-box v košíku na tuhle strukturu (.sz-help): hlavička s ikonou, intro s fotkou, lišta otevírací doby (živý stav), řádky s ikonou+popiskem, patička. Scope `.contact-box.sz-help` → přebíjí starý vzhled výše. !important nutné (theme má descendant pravidla s vyšší specificitou). --------------------------------------------------------- */ .contact-box.sz-help{text-align:left !important;padding:0 !important;background:#fff !important;border:1px solid #e3e8ea !important;border-radius:8px !important;overflow:hidden !important;box-shadow:0 6px 20px rgba(23,74,97,.10) !important;} /* Motiv po AJAX překreslení košíku vrací nativní
/
/ jako přímé děti .contact-box → dvojitý nadpis. Skrýt tyhle nativní zbytky (náš obsah je v .help__top/.help__intro/… – ty zůstanou). Timing-proof přes CSS. */ .contact-box.sz-help > h1, .contact-box.sz-help > h2, .contact-box.sz-help > h3, .contact-box.sz-help > h4, .contact-box.sz-help > .h4, .contact-box.sz-help > ul, .contact-box.sz-help > img { display: none !important; } .contact-box.sz-help .help__top{display:flex !important;align-items:center !important;gap:9px !important;padding:13px 16px !important;background:#174A61 !important;color:#fff !important;} .contact-box.sz-help .help__top svg{width:18px !important;height:18px !important;flex:none !important;stroke:#fff !important;} .contact-box.sz-help .help__top h3{margin:0 !important;font-size:15px !important;font-weight:700 !important;color:#fff !important;text-align:left !important;} .contact-box.sz-help .help__intro{display:flex !important;align-items:center !important;gap:13px !important;padding:15px 16px 14px !important;border-bottom:1px solid #e3e8ea !important;} .contact-box.sz-help .avatar{width:54px !important;height:54px !important;border-radius:50% !important;flex:none !important;overflow:hidden !important;border:2px solid #fff !important;box-shadow:0 0 0 1px #e3e8ea !important;background:#e8eff1 !important;margin:0 !important;padding:0 !important;} .contact-box.sz-help .avatar img{width:54px !important;height:54px !important;min-width:54px !important;max-width:54px !important;margin:0 !important;border-radius:50% !important;object-fit:cover !important;box-shadow:none !important;display:block !important;float:none !important;} .contact-box.sz-help .who{min-width:0 !important;display:flex !important;flex-direction:column !important;} .contact-box.sz-help .who .lead{font-size:14px !important;font-weight:700 !important;line-height:1.25 !important;color:#1d2b30 !important;} .contact-box.sz-help .who .sub{font-size:12px !important;color:#5d6b70 !important;margin-top:2px !important;} .contact-box.sz-help .hours{display:flex !important;align-items:center !important;gap:7px !important;padding:9px 16px !important;background:#f1f5f6 !important;border-bottom:1px solid #e3e8ea !important;font-size:12.5px !important;} .contact-box.sz-help .hours .dot{width:8px !important;height:8px !important;border-radius:50% !important;flex:none !important;background:#94a1a6 !important;} .contact-box.sz-help .hours.open .dot{background:#3f9a2e !important;box-shadow:0 0 0 3px rgba(63,154,46,.18) !important;} .contact-box.sz-help .hours .state{font-weight:700 !important;} .contact-box.sz-help .hours.open .state{color:#3f9a2e !important;} .contact-box.sz-help .hours .sep{color:#94a1a6 !important;} .contact-box.sz-help .hours .hico{display:inline-flex !important;align-items:center !important;color:#174A61 !important;flex:none !important;} .contact-box.sz-help .hours .hico svg{width:15px !important;height:15px !important;} .contact-box.sz-help .hours .time{color:#5d6b70 !important;font-weight:600 !important;} /* online indikátor vedle otevírací doby (zeleně, živě řídí JS szSyncOnline) */ .contact-box.sz-help .hours .szp-online{margin-left:auto !important;display:inline-flex !important;align-items:center !important;gap:5px !important;color:#3f9a2e !important;font-weight:700 !important;} .contact-box.sz-help .hours .szp-online::before{content:"" !important;width:7px !important;height:7px !important;border-radius:50% !important;background:#3f9a2e !important;box-shadow:0 0 0 3px rgba(63,154,46,.18) !important;} .contact-box.sz-help .help__list{padding:8px !important;} /* e-mail oddělený dolů k patičce (čára nad ním; patička pak už bez čáry) */ .contact-box.sz-help .help__mail{padding:4px 8px !important;border-top:1px solid #e3e8ea !important;} .contact-box.sz-help .help__mail + .help__foot{border-top:0 !important;padding-top:4px !important;} .contact-box.sz-help .row{display:flex !important;align-items:center !important;gap:12px !important;padding:9px 10px !important;border:0 !important;border-radius:6px !important;text-decoration:none !important;color:#1d2b30 !important;} .contact-box.sz-help .row:hover{background:#f1f5f6 !important;} .contact-box.sz-help .row .ico{width:34px !important;height:34px !important;min-width:34px !important;border-radius:8px !important;flex:none !important;display:grid !important;place-items:center !important;background:#e8eff1 !important;color:#174A61 !important;} .contact-box.sz-help .row:hover .ico{background:#174A61 !important;color:#fff !important;} .contact-box.sz-help .row .ico svg{width:17px !important;height:17px !important;} .contact-box.sz-help .row .rbody{min-width:0 !important;flex:1 !important;display:flex !important;flex-direction:column !important;} .contact-box.sz-help .row .k{font-size:11px !important;color:#94a1a6 !important;line-height:1.2 !important;margin-bottom:1px !important;font-weight:400 !important;} .contact-box.sz-help .row .v{font-size:14px !important;font-weight:600 !important;line-height:1.3 !important;color:#1d2b30 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} .contact-box.sz-help .row.primary .v{font-size:16px !important;font-weight:700 !important;} .contact-box.sz-help .row .go{color:#94a1a6 !important;flex:none !important;width:16px !important;height:16px !important;opacity:0;transition:opacity .12s;} .contact-box.sz-help .row:hover .go{opacity:1;} .contact-box.sz-help .help__foot{padding:10px 16px 14px !important;border-top:1px solid #e3e8ea !important;font-size:11.5px !important;color:#94a1a6 !important;text-align:center !important;} /* Košík: VYPNOUT theme dekorace boxů (border, šedé pozadí #f6f6f6, padding) – přání klienta. Karta podpory (.sz-help) i souhrn pak stojí čistě na bílé. */ .cart-content.checkout-box-wrapper, .cart-content.summary-wrapper, .checkout-box, .order-summary-item.price, #checkoutSidebar .next-step, #checkoutSidebar .order-summary-inner, #checkoutSidebar .form-group.consents, .ucet, .radio-wrapper, .payment-logo, .contact-box img { background: transparent !important; border-color: transparent !important; border-width: 0 !important; } .cart-content.checkout-box-wrapper, .cart-content.summary-wrapper, .checkout-box { padding: 0 !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; }