/* ============================================================================= TOPNÝŽEBŘÍK.CZ — KONSOLIDOVANÝ STYLESHEET Soubor: styly-v1.18.css Verze: 1.18 Datum: 2026-08 ----------------------------------------------------------------------------- Nahrazuje původní soubory: main.css (v2.0), kategorie.css, homepage-v7.css, produkt-v2.css, ostatni.css, blog.css, oprava-menu.css (v2) Načítat jako JEDINÝ vlastní CSS soubor, vždy AŽ ZA systémovým CSS Shoptetu. ----------------------------------------------------------------------------- CHANGELOG 1.18 (2026-08) ! Varianta --jen-ikona má nově pevnou čtvercovou buňku 96x96 px (mobil 76x76). Do 1.17 byly sloupce 1fr, takže se dlaždice roztahovaly podle počtu položek — čtyři ikony vyšly širší než šest. Mřížka je zarovnaná doleva a nedopočítává se. ~ Proměnné --menu-ikony-solo-min-h(-mob) nahrazeny --menu-ikony-solo-cell(-mob). 1.17 (2026-08) - Odstraněna třída .menu-ikony-text--skryty (sekce 5a). Varianta --jen-ikona je bez textu úplně; přístupný název odkazu nese atribut aria-label a bublinu title, takže žádný span s popiskem v HTML není. 1.16 (2026-08) + Varianta dlaždic bez popisku .menu-ikony-grid--jen-ikona a .menu-ikony-link--jen-ikona (sekce 5a) — čtvercová buňka pro horní megamenu, ikona vycentrovaná vodorovně i svisle a zvětšená tak, aby vyplnila většinu plochy. + Nové proměnné --menu-ikony-solo-* (sekce 1). 1.15 (2026-08) + Dlaždice ikon filtrů v menu .menu-ikony-* (sekce 5a) — mřížka auto-fit, šedá karta s inline SVG ikonou a popiskem pod ní. Sada: podle ceny, podle značek, podle šířky, podle barvy, podle výkonu, podle tvaru. Ikony mají stroke="currentColor", barvu tedy dědí z .menu-ikony-obrazek a mění se jedinou proměnnou --menu-ikony-color. + Nové proměnné --menu-ikony-* (sekce 1). 1.14 (2026-08) + Volba dopravy a platby .srv-volba (sekce 19p) — bílá karta s logem dopravce, názvem, poznámkou a cenovými dlaždicemi. Nahrazuje tabulky .srv-dp-tabulka na stránce Doprava a platba; štítek ceny je vidět i na desktopu, takže odpadá hlavička tabulky i mobilní card layout přes data-label. + .srv-panel__perex — odstavec pod hlavičkou panelu, nad mřížkou. ~ Tabulky .srv-dp-tabulka a .srv-dp-info (19l) se na Dopravě a platbě už nepoužívají. V souboru zůstávají pro servisní stránky, které ještě nejsou překlopené. 1.13 (2026-08) ~ CTA blok (sekce 19o) přestal být samostatným panelem. Nově sedí uvnitř .srv-panel jako .srv-cta__telo, takže nadpis sekce nese hlavička panelu (.srv-panel__hlava) stejně jako u Bankovního spojení. Odstraněny .srv-cta a .srv-cta__ikona; třídy .srv-cta__nadpis, __perex a __btn zůstávají a fungují dál. ! Nadpisy servisních sekcí patří dovnitř panelu. Blok .srv-section-title se na Kontaktech už nepoužívá, v souboru zůstává kvůli ostatním servisním stránkám. 1.12 (2026-08) + CTA panel .srv-cta (sekce 19o) — barevný panel s plnou červenou ikonovou dlaždicí, nadpisem, textem a tlačítkem vpravo. Na Kontaktech nahrazuje bílou kartu .srv-action v bloku „Reklamace a vrácení zboží". Vizuálně navazuje na .srv-uvod a .srv-panel. + Karta místa uvnitř panelu: .srv-panel__mrizka > .srv-misto ztrácí rámeček a přebírá radius bílých polí (14 px). Díky tomu může blok „Kde nás najdete" sedět ve stejném barevném panelu jako Bankovní spojení a Fakturační údaje. + .srv-panel__mrizka--1 — jednosloupcová varianta mřížky panelu. ~ .srv-action zůstává v souboru pro ostatní servisní stránky, na Kontaktech se už nepoužívá. ~ Kontakty v4 zároveň vyhazují galerii kanceláří (.srv-gallery), kartu Užitečné odkazy (.srv-links, .srv-eshopy) a obrázek auta (.srv-auto-img) — čistě změna HTML, CSS těchto bloků se nemění. 1.11 (2026-08) + Karta místa .srv-misto (sekce 19m) — blok „Kde nás najdete": ikonová dlaždice, nadpis s podtitulkem, adresní blok a řádky klíč–hodnota nad spodním okrajem karty, oddělené linkou. Dvě karty vedle sebe v .srv-grid-2. Port vzoru z primakoupelny, barevnost značková červená. + Panel s dlaždicemi .srv-panel (sekce 19n) — podklad --tz-hero-bg, hlavička s plnou červenou ikonovou dlaždicí a mřížka bílých polí štítek + hodnota. Nahrazuje tabulky klíč–hodnota (Fakturační údaje, Bankovní spojení). Modifikátor .srv-panel__pole-hodnota--text pro větné hodnoty, volitelná poznámka .srv-panel__pozn pod linkou. ~ Tabulka .srv-table (19d) se na Kontaktech už nepoužívá — nahradily ji .srv-misto a .srv-panel. V souboru zůstává pro servisní stránky, které ještě nejsou překlopené. ! Kontakty v3 zároveň nahrazují tmavý .tz-trust světlým .tz-hero (17g) s obsahem převzatým z titulní stránky — čistě změna HTML, CSS obou bloků se nemění. 1.10 (2026-08) + Světlý úvodní panel servisních stránek .srv-uvod (sekce 19b2) — kicker, nadpis, perex a bílé kontaktní karty s ikonovou dlaždicí. Vizuální jazyk přebírá z .tz-hero (17g): podklad --tz-hero-bg, akcentový kicker, levé zarovnání, geometrie karet jako .tz-hero__benefit. Na Kontaktech nahrazuje tmavý .srv-hero (19b); ten v souboru zůstává kvůli ostatním servisním stránkám a odstraní se, až budou všechny překlopené na nový vzhled. ~ .srv-action: podklad šedá -> bílá, tlačítko z pilulky (radius 30 px) na obdélník s radiusem 12 px podle .tz-hero__btn, hover kartu nezvedá, ale tlačítko ano (translateY -2 px). + .srv-action__ikona — ikonová dlaždice jako alternativa k obrázku v CTA kartě (stejná konvence SVG jako .tz-hero). ~ --srv-radius 12 -> 16 px. Sjednocuje geometrii servisních karet s kategoriovými bloky (--kat-blok-radius). Týká se .srv-card, .srv-action, .srv-dp-tabulka a .srv-dp-info; starý .srv-hero geometrii sdílí taky, u něj na tom nezáleží. ~ .srv-section-title h2 18 -> 20 px. + .srv-grid-2 zužuje první sloupec tabulek klíč–hodnota (min-width 160 -> 110 px), aby se tabulky vešly do poloviční karty. Umožňuje dát Fakturační adresu a Bankovní spojení vedle sebe. + Utility karet: .srv-card--flex (sloupcový flex, obsah roztažený ke krajům) a .srv-card__patka + .srv-card__patka-popisek (patka karty oddělená linkou) — nahrazují inline styly v HTML Kontaktů. ! Opraven zastaralý komentář na konci souboru (uváděl v1.02). 1.09 (2026-08) + Univerzální ikona modelové řady .kat-hlavni-serie-ikona. Karty sérií fotky nemají a nebudou mít, takže všechny nesou stejnou ikonu a rozlišuje je popisek. Je to vědomý ústupek: pravidlo o odlišných siluetách (kapitola 5.2 instrukcí) se na tuhle jedinou osu nevztahuje. ~ .kat-hlavni-link-serie proto nově počítá i s ikonou, ne jen s . 1.08 (2026-08) + Dokončen port horního rozcestníku (sekce 15a). Přibyly komponenty, které dosud chyběly a blokovaly hromadný přepis kategorií: .kat-hlavni-link-znacka (karta s logem, bez popisku), .kat-hlavni-link-serie (karta s fotkou modelové řady, popisek zůstává), .kat-hlavni-barva (barevný puntík místo ikony, bere odstíny ze sdílené palety .prod-barva--* ze sekce 16f) a štítek .kat-hlavni-top s bublinou z atributu data-tip. + Nové proměnné (sekce 1): --kat-hlavni-logo-h / -mobile, --kat-hlavni-serie-h / -mobile, --kat-hlavni-barva-size / -mobile, --kat-hlavni-top-color, --kat-hlavni-top-bg, --kat-hlavni-top-border, --kat-hlavni-tip-bg, --kat-hlavni-tip-text. + Doplněny chybějící odstíny palety (sekce 16f): .prod-barva--brousena-nerez, .prod-barva--lestena-nerez, .prod-barva--slonova-kost. Do teď se pro ně musel používat --fallback. ! Karta značky se u loga na tmavém podkladu nekontroluje automaticky — loga se berou z transparentních PNG a musí být čitelná na #f7f7f8. 1.07 (2026-08) + Úvodní věta nad mřížkou rozcestníku .kat-hlavni-uvod (sekce 15a). Jedna věta, která řekne, co karty znamenají. Podle instrukcí pro horní popisek se používá jen na koncových stránkách a u rozcestníků se dvěma až třemi kartami; jinde nad mřížkou žádný text být nesmí. + Nové proměnné (sekce 1): --kat-hlavni-uvod-size, -size-mob, -color. 1.06 (2026-08) ~ Port proporcí mřížky rozcestníku z primakoupelny (sekce 15a). Karta 112 × 145 -> 96 × 118 px, obrázkový box 65 -> 48 px, radius 10 -> 12 px, popisek 12 -> 11 px, vnitřní odsazení karty 12/8 -> 10/6 px, mezera pod obrázkem 8 -> 6 px. Mobil: výška karty 120 -> 100 px, obrázkový box 50 -> 38 px, radius 8 -> 10 px. Mobilní hodnoty jsou dopočítané ve stejném poměru jako desktopové, ne opsané z primakoupelny. ~ --kat-hlavni-ikona-velikost 70 % -> 90 %. Podíl se počítá z menšího boxu, výsledná ikona je ~43 px na desktopu (dřív ~45 px) a ~34 px na mobilu. ! Změna se týká VŠECH rozcestníků na webu, i těch, které mají místo inline SVG produktové PNG. Fotky v nich zůstanou ostré (mají vyšší rozlišení než box), ale vykreslí se menší. Po nasazení projdi kategorie, které ještě nejsou přepsané. ! Pořád chybí komponenty pro karty značek (.kat-hlavni-link-znacka), modelových řad (.kat-hlavni-link-serie), barevné puntíky (.kat-hlavni-barva), štítek TOP (.kat-hlavni-top) a úvodní větu (.kat-hlavni-uvod). Rozcestníky, které je používají, zatím nenasazuj. 1.05 (2026-08) + Inline SVG ikony v kartách rozcestníku (.kat-hlavni-img-wrapper svg) mají vlastní pravidlo. Bez něj se SVG bez atributů width/height roztáhlo na celou výšku obrázkového boxu (65 px) a v kartě působilo předimenzovaně. Nově se kreslí na 70 % výšky boxu, tedy zhruba 45 px na desktopu a 35 px na mobilu (~30% zmenšení). + Nové proměnné (sekce 1): --kat-hlavni-ikona-velikost, --kat-hlavni-ikona-velikost-mob, --kat-hlavni-ikona, --kat-hlavni-ikona-hover. ~ Barvu ikony nově drží token --kat-hlavni-ikona (#da2935) místo dědění barvy odkazu ze systémového CSS Shoptetu; hover přebarví ikonu na --kat-text. Týká se jen inline SVG, PNG obrázky ve starých rozcestnících pravidlo neovlivňuje. ! Pozor: tohle NENÍ port mřížky z primakoupelny. Karta zůstává 112 × 145 px a obrázkový box 65 px. Port na 96 × 118 px s boxem 48 px (a ikonou na 90 % jeho výšky) je pořád otevřený — až se udělá, změní se --kat-hlavni-ikona-velikost zpátky na 90 %. 1.04 (2026-08) + Světlý trust panel .tz-hero (sekce 17g) — kicker, nadpis, perex, čtyři statistiky v pásu mezi vodorovnými linkami, šest benefitových karet s ikonovými dlaždicemi, dvě CTA tlačítka a disclaimer. Nahrazuje tmavý .tz-trust na titulní stránce; ten zůstává v souboru kvůli zpětné kompatibilitě a je kandidát na odstranění, až se ověří, že ho žádná stránka nepoužívá. + Tip experta .kat-tip-expert (sekce 15g) — blok s plnou červenou ikonovou dlaždicí, textem a podpisem specialisty. Doplněno kvůli dolním popiskům kategorií, kapitola 5.3 instrukcí. + Podpis odpovědi ve FAQ: .kat-faq__autor, .kat-faq__autor-jmeno, .kat-faq__autor-role (sekce 15c). 1.03 (2026-08) + Sdílené tokeny kategoriových bloků (sekce 1): --kat-blok-radius, --kat-blok-radius-lg, --kat-blok-border, --kat-blok-border-akcent, --kat-ikona-radius, --kat-ikona-bg, --kat-text / -soft / -mute, --tz-hero-bg, --tz-hero-accent, --tz-hero-accent-dark, --tz-hero-radius. ~ FAQ (15c) překlopeno z modré na značkovou červenou, radius 10 -> 16 px, sbalená položka má podklad --tz-hero-bg. Třídy zůstávají beze změny, staré popisky kategorií fungují dál. + FAQ: volitelné .kat-faq__kicker, .kat-faq__perex, .kat-faq__skupina a patička .kat-faq__kontakt s tlačítkem. + Průvodce výběrem / nákupní rádce (15d) má novou variantu s vždy viditelným preview (.kat-pruvodce__kicker, __nadpis, __perex, __body, __bod, __fajfka) a přepínačem .kat-pruvodce__prepinac na konci bloku. Stará varianta s tlačítkem v hlavičce zůstává funkční — nové rozvržení se aktivuje jen tam, kde je v HTML přepínač. + Průvodce: .kat-pruvodce__sekce, .kat-pruvodce__podnadpis, .kat-pruvodce__cta, .kat-pruvodce__cta-text, .kat-pruvodce__cta-btn. ~ Ikona knihy .kat-pruvodce__ikona-kniha přijímá inline SVG; emoji 📋 se vykreslí jen u prázdného spanu (zpětná kompatibilita). 1.02 (2026-08) + Bublina (tooltip) s názvem barvy u barevných variant produktu — sekce 16f. Text se bere z atributu data-nazev na .prod-barva. V HTML nahraď title="…" za data-nazev="…", jinak se vedle bubliny zobrazí i nativní tooltip prohlížeče. + Nové proměnné --prod-barva-tip-bg a --prod-barva-tip-text (sekce 1). 1.01 (2026-08) — konsolidace + Zapracována oprava megamenu (původní oprava-menu.css v2) přímo do sekce 5; odstraněna pravidla z main.css, která si s ní odporovala. ~ Sloučeny všechny :root bloky do jedné sekce (1). ~ Sloučeny identické komponenty: .kat-stitek + .prod-stitek, pill tagy .kat-parametricka-link + .prod-varianta-link + .prod-kategorie__link (sekce 14). Názvy tříd zachovány — HTML se měnit nemusí. ! Opraven překryv breakpointů u .seo-subcategories (max-width: 768px → 767px; na přesně 768px platila obě pravidla). ~ Vyčištěny nánosy overridů v .srv-hero (hodnota/popisek/kontakty byly definovány dvakrát, podruhé s !important). ~ Sloučeny dvojité deklarace .srv-dp-tabulka img a .hp-rozcestnik__ikona svg. ~ Přečíslovány sekce (v původních souborech chyběla čísla 3 a byla zdvojena 3 a 5). ----------------------------------------------------------------------------- OBSAH 1. CSS proměnné 2. Písma (Poppins) 3. Typografie & globální prvky 4. Hlavička & top-bar 5. Hlavní navigace & megamenu 5a. Ikony filtrů v menu (.menu-ikony-*, varianta --jen-ikona) 6. Systémové příznaky (štítky / flags) 7. Produktový výpis — název produktu 8. Podkategorie (seo-subcategories + subcategories) 9. Filtrační panel 10. Pořadí filtrů (parametry) 11. Produktový detail — systémové úpravy 12. Propojení produktů (interconnection) 13. Slevový kód (dm-coupon) 14. Sdílené komponenty (štítek, pill tag) 15. Kategorie (.kat-*) 16. Produktová karta (.prod-*) 17. Homepage (.tz-*, .pk-*, .hp-*) 18. Blog (.blog-*) 19. Servisní stránky (.srv-*) ----------------------------------------------------------------------------- POZNÁMKA K PROMĚNNÝM --color-primary (#00a8ee), --color-text (#24242e) a --font-primary nejsou v tomto souboru definovány záměrně — dodává je šablona Shoptetu. Všude jsou použity s fallbackem, takže styly fungují i bez nich. Pokud by je šablona přestala dodávat, odkomentuj blok v sekci 1. ============================================================================= */ /* ============================================================================= 1. CSS PROMĚNNÉ ============================================================================= */ :root { /* --- Fallback globálních proměnných šablony (viz poznámka výše) --- --color-primary: #00a8ee; --color-text: #24242e; --font-primary: 'Poppins', sans-serif; */ /* Značka */ --tz-brand: #da2935; --tz-brand-dark: #aa1721; /* Kategorie — karta hlavní kategorie */ --kat-hlavni-bg: #f7f7f8; --kat-hlavni-bg-hover: #edeeef; --kat-hlavni-bg-blog: #fdd8db; --kat-hlavni-bg-blog-hover: #fcc4c8; --kat-hlavni-radius: 12px; --kat-hlavni-w: 96px; --kat-hlavni-h: 118px; --kat-hlavni-img-h: 48px; /* Velikost inline SVG ikony = podíl z výšky obrázkového boxu (48 px), zbylých 10 % je záměrná rezerva kolem kresby. */ --kat-hlavni-ikona-velikost: 90%; --kat-hlavni-ikona: var(--tz-brand, #da2935); --kat-hlavni-ikona-hover: var(--kat-text, #24242e); --kat-hlavni-gap: 10px; --kat-hlavni-label-size: 11px; --kat-hlavni-label-color: var(--color-text, #1a1a1a); --kat-hlavni-h-mobile: 100px; --kat-hlavni-img-h-mobile: 38px; --kat-hlavni-gap-mobile: 6px; --kat-hlavni-label-size-mob: 10px; --kat-hlavni-ikona-velikost-mob: 90%; --kat-hlavni-uvod-size: 14px; --kat-hlavni-uvod-size-mob: 13px; --kat-hlavni-uvod-color: var(--kat-text-soft, #55555f); --kat-hlavni-logo-h: 44px; --kat-hlavni-logo-h-mobile: 36px; --kat-hlavni-serie-h: 54px; --kat-hlavni-serie-h-mobile: 44px; --kat-hlavni-barva-size: 34px; --kat-hlavni-barva-size-mob: 28px; --kat-hlavni-top-color: var(--tz-brand-dark, #aa1721); --kat-hlavni-top-bg: #ffffff; --kat-hlavni-top-border: rgba(218, 41, 53, .30); --kat-hlavni-tip-bg: var(--kat-text, #24242e); --kat-hlavni-tip-text: #ffffff; /* Produkt — rozměrové varianty */ --prod-rozmery-bg: #f0f0f1; --prod-rozmery-bg-hover: #e2e2e4; --prod-rozmery-text: var(--color-text, #24242e); --prod-rozmery-current: #2e9e44; --prod-rozmery-current-bg: #ffffff; --prod-rozmery-radius: 10px; /* Produkt — barevné varianty */ --prod-barva-size: 44px; --prod-barva-size-mob: 40px; --prod-barva-border: #e0e0e0; --prod-barva-current: #1aa01a; --prod-barva-tip-bg: #24242e; --prod-barva-tip-text: #ffffff; /* Ikony filtrů v menu (v1.15) */ --menu-ikony-bg: #f4f4f5; --menu-ikony-bg-hover: var(--tz-hero-bg, #fdf4f5); --menu-ikony-border-hover: #fcc4c8; --menu-ikony-radius: 20px; --menu-ikony-radius-mob: 16px; --menu-ikony-gap: 16px; --menu-ikony-gap-mob: 10px; --menu-ikony-min-h: 150px; --menu-ikony-min-h-mob: 118px; --menu-ikony-size: 52px; --menu-ikony-size-mob: 40px; --menu-ikony-color: var(--tz-brand, #da2935); --menu-ikony-label-size: 15px; --menu-ikony-label-size-mob: 13px; --menu-ikony-label-color: var(--kat-text, #24242e); /* Ikony filtrů v menu — varianta bez popisku (v1.16, buňka v1.18) */ --menu-ikony-solo-cell: 96px; --menu-ikony-solo-cell-mob: 76px; --menu-ikony-solo-pad: 12px; --menu-ikony-solo-pad-mob: 10px; --menu-ikony-solo-size: 66px; --menu-ikony-solo-size-mob: 50px; /* Homepage — rozcestník */ --hp-roz-bg: #f1f2f4; --hp-roz-bg-hover: #e6e8ec; --hp-roz-ikona: #2d3a5e; --hp-roz-label: #2d3a5e; --hp-roz-radius: 14px; --hp-roz-gap: 12px; --hp-roz-ikona-size: 58px; --hp-roz-min-h: 128px; --hp-roz-znacky-bg: #fdeef0; --hp-roz-znacky-bg-hover: #fbdde1; --hp-roz-znacky-border: #da2935; /* Homepage — trust panel Pozn.: --tz-trust-brand a --tz-trust-ink-900 nejsou v CSS nikde použity (gradient panelu má barvy natvrdo). Ponechány pro případné inline styly v HTML — pokud je nikde nepoužíváš, můžeš je smazat. */ --tz-trust-brand: #da2935; --tz-trust-brand-dark: #aa1721; --tz-trust-ink-900: #2a0c0e; --tz-trust-radius: 24px; /* Kategoriové bloky — sdílené tokeny (v1.03) Používají je .kat-faq, .kat-pruvodce, .kat-tip-expert a světlé varianty panelů. Geometrie je společná s primakoupelnou, barevnost je značková červená. */ --kat-blok-radius: 16px; --kat-blok-radius-lg: 20px; --kat-blok-border: rgba(26, 26, 46, 0.12); --kat-blok-border-akcent: rgba(218, 41, 53, 0.30); --kat-ikona-radius: 12px; --kat-ikona-bg: rgba(218, 41, 53, 0.09); --kat-text: #24242e; --kat-text-soft: #55555f; --kat-text-mute: #6b6b7a; /* Světlý hero / panel (protějšek tmavého .tz-trust) */ --tz-hero-bg: #fdf4f5; --tz-hero-accent: #da2935; --tz-hero-accent-dark: #aa1721; --tz-hero-ink: #24242e; --tz-hero-ink-soft: #55555f; --tz-hero-ink-mute: #6b6b7a; --tz-hero-radius: 24px; /* Servisní stránky */ --srv-primary: #da2935; --srv-primary-dark: #aa1721; --srv-text: #24242e; --srv-muted: #6b6b7a; --srv-border: #e4e4e4; --srv-bg: #f7f7f8; --srv-white: #ffffff; --srv-radius: 16px; /* v1.10: 12 -> 16, sjednoceno s --kat-blok-radius */ --srv-radius-sm: 8px; --srv-font: 'Poppins', sans-serif; } /* ============================================================================= 2. PÍSMA — Poppins pro celý projekt ============================================================================= */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navigation-in a, .price strong, .products-block.products .p .price span, .btn:not(.cart-count), a.btn:not(.cart-count), .fav-cat li a, .user-action-tabs li a, .cart-widget .popup-widget-inner::before, .cart-widget-product-name a, .quantity .increase::before, .quantity .decrease::before, .cart-widget-product > span, .search-whisperer ul::before, .search-whisperer .p-info span, .search-whisperer .price, .search-box::before, .search-whisperer-documents a, .box-bg-variant .categories a, .box-filters::before, .param-filter-top::before, .subcategories.with-image li a .text, .name, .category-header label, .pagination > a, .pagination > strong, .search-results-groups #search-group-categories .search-results-group-list ul li a, .availability-value, .price-final, .p-gifts-heading, .p-gift-name, .shp-tabs-holder ul.shp-tabs li a, .all-param span, #productsAlternative::before, .rate-average, .vote-form::before, #variants::before, .var-dostupnost, .variant-name, .vote-title, ol.cart-header li a, ol.cart-header li strong, .cart-table tr td.p-name a, .price-wrapper, a.cart-related-name, .empty-cart-boxes ul li a, .payment-info, .payment-shipping-price, .cart-item-name, .cart-item-price, .order-summary-item.helper, .recapitulation-single, .reca-number, .id--15 .cart-table .p-name, .id--15 .cart-table .p-price, #register-form > fieldset .form-group:not(.consents) label, a.login-btn.facebook, a.login-btn.google, a.login-btn.seznam, ul.manufacturers ul li, .search-whisperer-empty, .menu-helper > ul > li a, .filtrovat, .tab-mobil, .free-gift-name, .id--9 .free-product-gifts-wrapper::before, .vote-form > form::before, #footer .contact-box::before, .external-fonts-loaded, .blank-mode, body, html, .external-fonts-loaded body, body.blank-mode, .category-appendix, .empty-content-404 h1, .dropdown-menu > li > a, .header-top .btn.cart-count .cart-price, .news-item-widget h5, .header-top .oblibeneBtn em, .navigation-buttons > a[data-target="cart"] i { font-family: 'Poppins', sans-serif !important; } /* ============================================================================= 3. TYPOGRAFIE & GLOBÁLNÍ PRVKY ============================================================================= */ h1, .h1 { font-size: 2.3em; } @media only screen and (max-width: 800px) { h2, .h2 { font-size: 35px !important; } } /* Zaoblené rohy tlačítek a prvků */ .btn:not(.cart-count), .compact-form .form-control, .pagination > a, .pagination > strong, a.login-btn { border-radius: 30px; } /* Checkbox — ikona zaškrtnutí u poznámky k objednávce */ input[type="checkbox"] + label[for="add-note"]::after { width: 22px; height: 22px; content: "\e919"; font-family: ikony; color: #fff; left: 0; font-size: 10px; text-align: center; line-height: 22px; background-color: var(--color-primary, #00a8ee); } /* ============================================================================= 4. HLAVIČKA & TOP-BAR ============================================================================= */ @media screen and (min-width: 768px) { .project-email, .project-phone { font-weight: 400 !important; font-size: 14px !important; } /* POZOR: provozní doba je natvrdo v CSS. Web na jiném místě uvádí Po–Ne 8:00–17:00 — před dalšími úpravami sjednotit. */ .top-navigation-bar .project-phone::after { content: " (Po - Pá 8:00 - 17:00)" !important; } } @media screen and (min-width: 992px) { .top-navigation-bar .project-phone::after { color: #A3A3A3; font-size: 13px; font-weight: 400; margin-left: 5px; display: inline-block; } } /* E-mail v hlavičce — desktop */ @media screen and (min-width: 1200px) { .top-navigation-bar .project-email { display: inline-block; font-size: 16px; font-weight: bold; margin-left: 24px; color: var(--color-primary, #00a8ee); } a.project-email::before { content: '\e910'; font-size: 16px; } } /* E-mail v hlavičce — mobil (jen ikona) */ @media screen and (min-width: 360px) and (max-width: 767px) { .top-navigation-contacts { display: block !important; } .top-navigation-contacts .project-phone { display: none !important; } .top-navigation-contacts .project-email { display: block !important; position: absolute; right: 164px; top: 15px; color: #A3A3AF; } a.project-email::before { content: '\e910'; } .top-navigation-contacts .project-email span { display: none; } } /* ============================================================================= 5. HLAVNÍ NAVIGACE & MEGAMENU ----------------------------------------------------------------------------- Zapracována oprava z původního oprava-menu.css (v2). Řešila: 1. Drobečková navigace a nadpis stránky se vykreslovaly NAD rozbaleným megamenu a zakrývaly jeho horní část; průjezd myší menu zavíral. → řeší z-index na #header a .menu-level-2. 2. max-height: 160px z main.css ořezával delší třetí úroveň a rozbíjel logiku .has-more-items (span.more-items-trigger). → původní pravidlo je zde ODSTRANĚNO, ne přepsáno. 3. min-height na .has-third-level nebyl omezen na druhou úroveň a zbytečně nafukoval výšku dropdownu. → min-height zůstává jen na položkách druhé úrovně. ============================================================================= */ @media screen and (min-width: 768px) { /* --- Barevnost lišty --- */ #header::after { background-color: var(--tz-brand, #da2935); } .navigation-in { background-color: transparent; } .navigation-in > ul > li > a, .submenu-arrow::after, .menu-helper::after { color: #fff; } .navigation-in a:hover { background-color: var(--tz-brand-dark, #aa1721) !important; } .menu-level-2 a:hover { background-color: #ffffff !important; } /* --- Stacking: hlavička nad obsahem stránky --- */ #header { position: relative; z-index: 500; } .navigation-in > ul > li.ext > ul.menu-level-2 { z-index: 501; } /* --- Výšky sloupců megamenu --- min-height jen na druhé úrovni (dorovnává sloupce), .has-third-level se nenafukuje. */ .navigation-in > ul > li.ext > ul > li { min-height: 130px; } .navigation-in li.has-third-level { min-height: 0; } /* --- Třetí úroveň: bez ořezu (kvůli .has-more-items) --- !important ponecháno záměrně — systémové CSS Shoptetu může max-height nastavovat vlastním pravidlem. */ .navigation-in > ul > li.ext > ul > li > div > ul, .navigation-in > ul > li.ext > ul > li > div > ul.menu-level-3 { max-height: none !important; min-height: 0; } } /* Větší padding položek menu na širokých desktopech */ @media screen and (min-width: 1200px) { .navigation-in > ul > li > a { padding: 25px 30px; } } /* ----------------------------------------------------------------------------- 5a. IKONY FILTRŮ V MENU (v1.15) Dlaždice pro rozřazení sortimentu v megamenu — podle ceny, značek, šířky, barvy, výkonu a tvaru. Ikona je inline SVG se stroke="currentColor", barvu tedy dědí z .menu-ikony-obrazek a jde měnit jednou proměnnou. Mřížka se přizpůsobí počtu dlaždic (auto-fit), takže stejný blok funguje pro tři i osm položek. ----------------------------------------------------------------------------- */ .menu-ikony-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--menu-ikony-gap, 16px); margin: 0; padding: 0; list-style: none; } .menu-ikony-item { margin: 0; padding: 0; list-style: none; } /* Shoptet přidává u některých šablon odrážkám pseudoprvek — v dlaždicích by se projevil jako puntík nad ikonou. */ .menu-ikony-item::before { content: none; } .menu-ikony-link, .menu-ikony-link:link, .menu-ikony-link:visited { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: var(--menu-ikony-min-h, 150px); padding: 20px 12px; background: var(--menu-ikony-bg, #f4f4f5); border: 1px solid transparent; border-radius: var(--menu-ikony-radius, 20px); color: var(--menu-ikony-label-color, #24242e); text-align: center; text-decoration: none; box-sizing: border-box; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .menu-ikony-link:hover, .menu-ikony-link:focus-visible { background: var(--menu-ikony-bg-hover, #fdf4f5); border-color: var(--menu-ikony-border-hover, #fcc4c8); color: var(--menu-ikony-label-color, #24242e); text-decoration: none; transform: translateY(-2px); } .menu-ikony-link:focus-visible { outline: 2px solid var(--tz-brand, #da2935); outline-offset: 2px; } .menu-ikony-obrazek { display: block; color: var(--menu-ikony-color, #da2935); line-height: 0; } .menu-ikony-obrazek svg { display: block; width: var(--menu-ikony-size, 52px); height: var(--menu-ikony-size, 52px); } .menu-ikony-text { display: block; font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--menu-ikony-label-size, 15px); font-weight: 700; line-height: 1.3; color: var(--menu-ikony-label-color, #24242e); } /* --- Varianta bez popisku — jen ikona (v1.16) ------------------------------- Pro horní megamenu. Buňka je čtvercová, ikona je vycentrovaná v obou osách a zvětšená tak, aby vyplnila většinu plochy. V HTML není žádný popisek — přístupný název odkazu nese atribut aria-label a bublinu atribut title. */ /* Pevná čtvercová buňka (v1.18) — sloupce mají konkrétní šířku, ne 1fr, takže dlaždice drží stejný rozměr bez ohledu na počet položek v řadě. */ .menu-ikony-grid--jen-ikona { grid-template-columns: repeat(auto-fit, var(--menu-ikony-solo-cell, 96px)); justify-content: flex-start; } .menu-ikony-link--jen-ikona, .menu-ikony-link--jen-ikona:link, .menu-ikony-link--jen-ikona:visited { gap: 0; padding: var(--menu-ikony-solo-pad, 12px); width: var(--menu-ikony-solo-cell, 96px); height: var(--menu-ikony-solo-cell, 96px); min-height: 0; } .menu-ikony-link--jen-ikona .menu-ikony-obrazek { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .menu-ikony-link--jen-ikona .menu-ikony-obrazek svg { width: var(--menu-ikony-solo-size, 66px); height: var(--menu-ikony-solo-size, 66px); max-width: 100%; max-height: 100%; } @media (max-width: 767px) { .menu-ikony-grid { gap: var(--menu-ikony-gap-mob, 10px); } .menu-ikony-link { min-height: var(--menu-ikony-min-h-mob, 118px); padding: 14px 8px; gap: 8px; border-radius: var(--menu-ikony-radius-mob, 16px); } .menu-ikony-obrazek svg { width: var(--menu-ikony-size-mob, 40px); height: var(--menu-ikony-size-mob, 40px); } .menu-ikony-text { font-size: var(--menu-ikony-label-size-mob, 13px); } .menu-ikony-grid--jen-ikona { grid-template-columns: repeat(auto-fit, var(--menu-ikony-solo-cell-mob, 76px)); } .menu-ikony-link--jen-ikona { padding: var(--menu-ikony-solo-pad-mob, 10px); width: var(--menu-ikony-solo-cell-mob, 76px); height: var(--menu-ikony-solo-cell-mob, 76px); } .menu-ikony-link--jen-ikona .menu-ikony-obrazek svg { width: var(--menu-ikony-solo-size-mob, 50px); height: var(--menu-ikony-solo-size-mob, 50px); } } /* ============================================================================= 6. SYSTÉMOVÉ PŘÍZNAKY (ŠTÍTKY / FLAGS) ============================================================================= */ .flag.flag-action, .flag.flag-tip, .flag.flag-new, .flag.flag-gift, .flag.flag-discount, .flag.flag-freeshipping { background-color: #ff7925; } /* ============================================================================= 7. PRODUKTOVÝ VÝPIS — název produktu ============================================================================= */ .products-block.products .p .name { height: 80px; } /* ============================================================================= 8. PODKATEGORIE ============================================================================= */ /* ----------------------------------------------------------------------------- 8a. seo-subcategories — SEO sekce v textu kategorie -------------------------------------------------------------------------- */ .seo-subcategories { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -6px 36px -6px; padding: 26px 0; position: relative; } .seo-subcategories li { list-style: none; flex: 0 0 auto; padding: 6px; } .seo-subcategories li a { box-shadow: none; position: relative; display: flex; align-items: center; height: 88px; padding: 12px; font-weight: 500; color: #24242E; border: 1px solid #e4e4e4; text-decoration: none !important; } .seo-subcategories li a:hover { border-color: var(--color-primary, #00a8ee) !important; } .seo-subcategories li a .text { max-height: 62px; overflow: hidden; line-height: 20px; font-size: 14px; font-weight: bold; } .seo-subcategories.with-image li a .image { text-align: center; } .seo-subcategories.with-image li a .text { padding-left: 5px; flex-grow: 0; text-align: left; display: inline-block; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .seo-subcategories li a { height: 70px !important; } .seo-subcategories.with-image li a .image { width: 55px !important; } .seo-subcategories.with-image li a .text { width: auto !important; } } /* OPRAVENO ve v1.01: bylo max-width: 768px → překrývalo se s pravidlem výše */ @media (max-width: 767px) { .seo-subcategories.with-image li a .image { width: 30% !important; } .seo-subcategories li { padding: 4px; } .seo-subcategories li a { height: 73px; } } /* Menší text v SEO podkategoriích na stránkách kategorií */ html .type-category .seo-subcategories li a .text { font-size: 11.9px; line-height: 1.3em; font-weight: 500 !important; } /* ----------------------------------------------------------------------------- 8b. subcategories — systémový widget Shoptetu -------------------------------------------------------------------------- */ .subcategories::before, .subcategories::after { height: 0px !important; } @media (min-width: 768px) { .subcategories li a { height: 70px !important; } .subcategories.with-image li a .image { width: 55px !important; } .subcategories.with-image li a .image img { max-height: 45px !important; } .subcategories.with-image li a .text { width: auto !important; } } /* Mobil — dvě položky vedle sebe */ @media (max-width: 767px) { .subcategories li { width: 50% !important; } .subcategories.with-image li a { width: 100%; } .subcategories.with-image li a .image { width: 30% !important; } .subcategories.with-image li a .text { width: 70% !important; } } /* Zvýrazněná podkategorie (custom třída .highlitedsub) */ .highlitedsub a { background: #ffe9eb; } .highlitedsub a:hover { background: #ffd8db; } /* Logo značky nad podkategorií */ .imageznacka { width: 100%; text-align: center; } .imageznacka img { max-height: 30px !important; } /* Výpis podkategorií v příspěvcích (blog / post) */ .type-post .subcategories.with-image li a { box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.07); padding-right: 0; } .type-post .subcategories.with-image li a .text { font-size: 85%; line-height: 1.3em; color: #000 !important; padding-top: 30px; width: 100% !important; } .type-post .subcategories .text { padding-top: 25px; } .type-post .subcategories li a::after, .type-post .subcategories li a::before { display: none; } /* ============================================================================= 9. FILTRAČNÍ PANEL ============================================================================= */ /* Zrušení výchozích pozadí a rámečků obálky */ html .box-filters { background-color: transparent !important; border: 0 solid #E4E4E4 !important; } .filter-sections { background-color: unset !important; } /* Každá filtrační sekce jako "karta" */ .type-category #filters .param-filter-top form, .type-category .filter-section form { padding: 15px; margin-bottom: 20px !important; background: #F6F6F6; border-radius: 5px; border: 1px solid #E4E4E4 !important; padding-bottom: 0px !important; } .filter-section { padding: 0px !important; border-top: 0px !important; } /* Hover na položce filtru — bez přebarvení pozadí */ .filter-section form > fieldset > div:not(.advanced-filters-wrapper):hover { background-color: transparent !important; } /* Stockový filtr — bez rámečku */ .type-category #filters .param-filter-top form[action="/action/ProductsListing/setStockFilter/"] { border-width: 0px !important; background: transparent !important; margin: 0px !important; } /* Doubledot filtr — opravy odsazení labelů */ .filter-section form[action="/action/ProductsListing/setStockFilter/"] fieldset div label, .filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] fieldset div:first-of-type label { margin: 0 !important; } .filter-section form[action="/action/ProductsListing/setDoubledotFilter/"] { padding-top: 0px !important; } /* První sekce bez horního paddingu */ .filter-section form:first-of-type { padding-top: 0px !important; } /* Prázdné formuláře bez rámečku */ .type-category .filter-section form:not(:has(div)) { border: none !important; } /* Formuláře s disabled vstupy — průhledné. POZOR: .param-filter-top form je zde uveden podruhé a přebíjí pozadí i rámeček nastavené výše. Ponecháno beze změny, aby se nezměnil vzhled — pokud to není záměr, odeber ho z tohoto selektoru. */ .type-category #filters .param-filter-top form, .type-category .filter-section form:has(input[disabled]) { border-color: transparent !important; background: transparent !important; } /* Odsazení labelů uvnitř sekce */ .filter-section fieldset div:first-of-type label { margin-top: 15px; } .filter-section fieldset div:last-of-type label { margin-bottom: 15px; } /* Skrytí nedostupných (disabled) možností filtru */ .filter-section input[type="checkbox"]:disabled + label, .filter-section input[type="radio"]:disabled + label { display: none; } /* Hover widget filtrů — sloupcový layout, skrytý výrobce */ #category-filter-hover #manufacturer-filter { display: none; } #category-filter-hover { display: flex !important; flex-direction: column !important; } /* Slider pro parametry */ .slider-wrapper.dkLab__slider-parameter { margin: unset !important; } .filters-wrapper > .filters > .slider-wrapper { display: none; } /* Zobrazení „Více / Méně" u filtračních hodnot */ .more-param:not(.rozbaleno) form fieldset div:nth-child(n+6) { display: none; } .more-param-link::after { content: " více"; } .rozbaleno .more-param-link::after { content: " méně"; } .more-param-link { font-size: 13px; color: var(--color-primary, #00a8ee); margin-top: 12px; display: inline-block; text-decoration: underline; cursor: pointer; margin-bottom: 15px; } .more-param-link:hover { text-decoration: none; } /* ============================================================================= 10. POŘADÍ FILTRŮ ============================================================================= */ /* ----------------------------------------------------------------------------- 10a. Globální pořadí -------------------------------------------------------------------------- */ .filter-section-parametric-id-221 { order: -101; } /* Cena s DPH */ .filter-section-parametric-id-65 { order: -100; } /* Značka */ .filter-section-parametric-id-20 { order: -99; } /* Šířka */ .filter-section-parametric-id-104 { order: -99; } /* Příslušenství */ .filter-section-parametric-id-17 { order: -98; } /* Výška */ .filter-section-parametric-id-41 { order: -97; } /* Výkon */ .filter-section-parametric-id-38 { order: -96; } /* Barva */ .filter-section-parametric-id-62 { order: -95; } /* Série */ .filter-section-parametric-id-56 { order: -94; } /* Možnost vytápění */ .filter-section-parametric-id-293 { order: -93; } /* Typ připojení */ .filter-section-parametric-id-200 { order: -92; } /* Typ středového připojení */ .filter-section-parametric-id-23 { order: -91; } /* Tvar */ .filter-section-parametric-id-194 { order: -90; } /* Styl */ .filter-section-parametric-id-68 { order: -89; } /* Výbava */ .filter-section-parametric-id-35 { order: -88; } /* Materiál */ .filter-section-parametric-id-53 { order: -87; } /* Místo určení */ .filter-section-parametric-id-287 { order: -86; } /* Instalace */ .filter-section-parametric-id-95 { order: -85; } /* Produkt */ .filter-section-parametric-id-359 { order: -84; } /* Rozměr */ /* ----------------------------------------------------------------------------- 10b. Topné tyče — přepis pro kategorii -------------------------------------------------------------------------- */ body[class*="in-topne-tyce"] .filter-section-parametric-id-485 { order: -96; } body[class*="in-topne-tyce"] .filter-section-parametric-id-68 { order: -95; } body[class*="in-topne-tyce"] .filter-section-parametric-id-23 { order: -94; } body[class*="in-topne-tyce"] .filter-section-parametric-id-62 { order: -93; } /* ----------------------------------------------------------------------------- 10c. Topné žebříky + koupelnové radiátory -------------------------------------------------------------------------- */ :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-221 { order: -101; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-65 { order: -100; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-20 { order: -99; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-17 { order: -98; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-41 { order: -97; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-59 { order: -96; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-38 { order: -95; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-62 { order: -94; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-56 { order: -93; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-293 { order: -92; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-200 { order: -91; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-23 { order: -90; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-194 { order: -89; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-68 { order: -88; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-35 { order: -87; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-53 { order: -86; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-287 { order: -85; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-95 { order: -84; } :is(body[class*="-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-359 { order: -83; } /* ============================================================================= 11. PRODUKTOVÝ DETAIL — systémové úpravy ============================================================================= */ /* Pořadí bloků v detailu */ #content .p-detail { display: flex; flex-direction: column; } #content .p-detail #related { order: 31 !important; } #content .p-detail .p-detail-tabs-wrapper { order: 32 !important; } #content .p-detail #productsAlternative { order: 33 !important; } /* Tabulka v rozšířeném popisu — zebra řádky */ .type-detail .extended-description table tr:nth-child(odd) { background: #fbf9f9; } /* Zobrazení všech řádků tabulky i ve sbalené verzi */ .type-detail .extended-description:not(.otevreno) table tr:nth-child(n+9) { display: table-row !important; } /* Skrytí bloku „Všechny parametry" (duplikát záložky) */ .type-detail .all-param { display: none !important; } /* ============================================================================= 12. PROPOJENÍ PRODUKTŮ (interconnection) ============================================================================= */ .c-product-interconnection-detail-params { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .c-product-interconnection-detail-params.is-template--Classic .c-product-interconnection-detail-params__type { max-width: 100%; line-height: 1; color: #000; font-weight: 700; font-size: 14px; } .c-product-interconnection-detail-params__products { gap: 20px; } /* Výběrová čísla — šedé pozadí, bez podtržení */ .c-product-interconnection-detail-params__products.is-type--numbers.is-display--box span[class^=item-type] { background-color: #F1F1F1 !important; text-decoration: none !important; } .c-product-interconnection-detail-params__products a { text-decoration: none !important; } /* Hover — černý rámeček */ .c-product-interconnection-detail-params__products a:hover span[class^=item-type] { border-color: #000; } /* Aktivní varianta — zelený rámeček */ .c-product-interconnection-detail-params__products.is-type--numbers.is-display--box a.is-current span[class^=item-type] { box-shadow: none; border-color: #008F1B; } /* Oddělení skupin interconnection */ .c-product-interconnection-detail-params + .c-product-interconnection-detail-params { margin-top: 20px; } /* Obrázková varianta */ .c-product-interconnection-detail-params__products.is-type--photos { gap: 8px; } .c-product-interconnection-detail-params__products.is-type--photos .item-type-img { box-sizing: content-box; background-size: contain; background-position: center; border-color: #a3a3a3; border-radius: 15px; margin: 0; width: 84px; height: 84px; } /* ============================================================================= 13. SLEVOVÝ KÓD (dm-coupon) ============================================================================= */ .dm-coupon-div { border: dashed 1px #d53546 !important; border-radius: 0px !important; background-color: #fff5ee !important; color: #000000 !important; padding: 12px !important; font-size: 16px !important; } .dm-coupon-div span { color: #d53546 !important; } .dm-coupon-div::before { background-color: #f3782b !important; color: #ffffff !important; font-size: 16px !important; } /* ============================================================================= 14. SDÍLENÉ KOMPONENTY ----------------------------------------------------------------------------- Ve v1.01 sloučeno: .kat-stitek a .prod-stitek byly identické, stejně jako tři pill komponenty. Názvy tříd zůstávají zachovány, HTML se nemění. ============================================================================= */ /* ----------------------------------------------------------------------------- 14a. Štítek (inline label) HTML: Hlavní kategorie Klíčové vlastnosti -------------------------------------------------------------------------- */ .kat-stitek, .prod-stitek { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; font-family: var(--font-primary, 'Poppins', sans-serif); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; color: #1a1d23; background-color: #ffffff; border: 1px dashed #b0b0b0; border-radius: 50px; } /* Odstraní výchozí mezery odstavce, pokud obsahuje pouze štítek */ p:has(> .kat-stitek), p:has(> .prod-stitek) { margin-bottom: 0 !important; margin-top: 0 !important; } /* ----------------------------------------------------------------------------- 14b. Pill tag — rozcestníkové odkazy Použití: .kat-parametricka-link (kategorie), .prod-varianta-link (varianty produktu), .prod-kategorie__link (kategorie produktu) -------------------------------------------------------------------------- */ .kat-parametricka-grid, .prod-varianta-grid, .prod-kategorie__grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; list-style: none; margin: 0; } .prod-kategorie__grid { padding: 0; } .kat-parametricka-link, .prod-varianta-link, .prod-kategorie__link { display: inline-flex; align-items: center; padding: 6px 13px; background-color: #f0f0f1; border-radius: 50px; font-family: var(--font-primary, 'Poppins', sans-serif); font-size: 11px; font-weight: 500; color: var(--color-text, #24242e); text-decoration: none !important; white-space: nowrap; border: 1px solid transparent; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; } .kat-parametricka-link:hover, .prod-varianta-link:hover, .prod-kategorie__link:hover { background-color: #e2e2e4; } .kat-parametricka-link:focus-visible, .prod-varianta-link:focus-visible, .prod-kategorie__link:focus-visible { outline: 2px solid var(--color-primary, #00a8ee); outline-offset: 2px; } /* Varianta — blog (odkaz na informativní článek) */ .kat-parametricka-link-blog { background-color: #fdd8db; } .kat-parametricka-link-blog:hover { background-color: #fcc4c8; } @media (max-width: 767px) { .kat-parametricka-link, .prod-varianta-link, .prod-kategorie__link { font-size: 10px; padding: 5px 11px; } } /* ============================================================================= 15. KATEGORIE (.kat-*) ----------------------------------------------------------------------------- Komponenty: 15a. Hlavní kategorie — grid karet s obrázkem 15b. Tip — zvýrazněný blok s radou 15c. FAQ — accordion 15d. Průvodce výběrem — accordion 15e. Identita — autoritativní blok (nesbalovat) 15f. Skrytí sekce „Nejprodávanější" ============================================================================= */ /* ----------------------------------------------------------------------------- 15a. HLAVNÍ KATEGORIE HTML: Varianta blog: Místo může být inline . Breakpointy: desktop 96×118 px, mobil ≤767px tři karty v řadě, výška 100 px -------------------------------------------------------------------------- */ /* Úvodní věta nad mřížkou — jen koncové stránky a rozcestníky o 2–3 kartách. HTML:

Další výšky elektrických žebříků:

*/ .kat-hlavni-uvod { color: var(--kat-hlavni-uvod-color); font-size: var(--kat-hlavni-uvod-size); font-family: var(--font-primary, 'Poppins', sans-serif); line-height: 1.45; margin: 0 0 2px; } .kat-hlavni-uvod + .kat-hlavni-grid { padding-top: 8px; } .kat-hlavni-grid { display: flex; flex-wrap: wrap; gap: var(--kat-hlavni-gap); padding: 15px 0; list-style: none; margin: 0; justify-content: flex-start; } .kat-hlavni-item { flex: 0 0 var(--kat-hlavni-w); margin-bottom: 5px !important; } .kat-hlavni-link { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--kat-hlavni-bg); border-radius: var(--kat-hlavni-radius); padding: 10px 6px; height: var(--kat-hlavni-h); text-decoration: none !important; box-sizing: border-box; border: 1px solid transparent; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out; } .kat-hlavni-link:hover { background-color: var(--kat-hlavni-bg-hover); transform: translateY(-2px); } .kat-hlavni-link:focus-visible { outline: 2px solid var(--color-primary, #00a8ee); outline-offset: 2px; border-radius: var(--kat-hlavni-radius); } .kat-hlavni-img-wrapper { display: flex; align-items: center; justify-content: center; height: var(--kat-hlavni-img-h); width: 100%; margin-bottom: 6px; } .kat-hlavni-img-wrapper img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; } /* Inline SVG ikona (nové rozcestníky). SVG se v HTML píše bez width/height, takže bez tohohle pravidla vyplní celou výšku boxu. Barvu drží token, do SVG se nikdy nepíše natvrdo — proto stroke="currentColor" v HTML. */ .kat-hlavni-img-wrapper svg { height: var(--kat-hlavni-ikona-velikost); width: auto; max-width: 100%; display: block; color: var(--kat-hlavni-ikona); transition: color 0.2s ease-in-out; } .kat-hlavni-link:hover .kat-hlavni-img-wrapper svg { color: var(--kat-hlavni-ikona-hover); } .kat-hlavni-label { color: var(--kat-hlavni-label-color); font-size: var(--kat-hlavni-label-size); font-family: var(--font-primary, 'Poppins', sans-serif); font-weight: 700; text-align: center; line-height: 1.2; margin: 0; word-wrap: break-word; overflow-wrap: break-word; } /* Varianta — karta značky. HTML: Popisek karta nemá, název nese logo. Logo se proto centruje na celou výšku karty, ne jen do obrázkového boxu. */ .kat-hlavni-link-znacka .kat-hlavni-img-wrapper { height: var(--kat-hlavni-logo-h); margin-bottom: 0; } .kat-hlavni-link-znacka .kat-hlavni-img-wrapper img { max-height: var(--kat-hlavni-logo-h); width: auto; } /* Varianta — karta modelové řady (fotka výrobku, popisek zůstává). */ .kat-hlavni-link-serie .kat-hlavni-img-wrapper { height: var(--kat-hlavni-serie-h); } .kat-hlavni-link-serie .kat-hlavni-img-wrapper img { max-height: var(--kat-hlavni-serie-h); object-fit: contain; } /* Univerzální ikona modelové řady. Používá se na kartách sérií, kde fotky nejsou; karty se od sebe liší jen popiskem. */ .kat-hlavni-link-serie .kat-hlavni-img-wrapper svg { height: var(--kat-hlavni-ikona-velikost); width: auto; color: var(--kat-hlavni-ikona); } /* Barevný puntík místo ikony. HTML: Odstíny se berou ze sdílené palety v sekci 16f, nový odstín se doplňuje tam. */ .kat-hlavni-barva { display: block; width: var(--kat-hlavni-barva-size); height: var(--kat-hlavni-barva-size); border-radius: 50%; border: 1px solid rgba(26, 26, 46, .18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10); } /* Štítek TOP v pravém horním rohu karty + bublina z atributu data-tip. */ .kat-hlavni-link { position: relative; } .kat-hlavni-top { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 1px 5px; border: 1px solid var(--kat-hlavni-top-border); border-radius: 999px; background: var(--kat-hlavni-top-bg); color: var(--kat-hlavni-top-color); font-family: var(--font-primary, 'Poppins', sans-serif); font-size: 8px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; } .kat-hlavni-top[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; width: max-content; max-width: 170px; padding: 6px 8px; border-radius: 8px; background: var(--kat-hlavni-tip-bg); color: var(--kat-hlavni-tip-text); font-size: 11px; font-weight: 400; line-height: 1.35; letter-spacing: normal; text-align: left; opacity: 0; visibility: hidden; transition: opacity .15s ease-in-out; } @media (hover: hover) { .kat-hlavni-link:hover .kat-hlavni-top[data-tip]::after { opacity: 1; visibility: visible; } } /* Varianta — blog */ .kat-hlavni-link-blog { background-color: var(--kat-hlavni-bg-blog); } .kat-hlavni-link-blog:hover { background-color: var(--kat-hlavni-bg-blog-hover); } @media (max-width: 767px) { .kat-hlavni-grid { gap: var(--kat-hlavni-gap-mobile); justify-content: flex-start; } .kat-hlavni-item { flex: 0 0 calc(33.333% - 4px); min-width: 0; } .kat-hlavni-link { height: var(--kat-hlavni-h-mobile); padding: 8px 4px; border-radius: 10px; } .kat-hlavni-img-wrapper { height: var(--kat-hlavni-img-h-mobile); } .kat-hlavni-img-wrapper svg { height: var(--kat-hlavni-ikona-velikost-mob); } .kat-hlavni-label { font-size: var(--kat-hlavni-label-size-mob); } .kat-hlavni-uvod { font-size: var(--kat-hlavni-uvod-size-mob); } .kat-hlavni-link-znacka .kat-hlavni-img-wrapper, .kat-hlavni-link-znacka .kat-hlavni-img-wrapper img { height: var(--kat-hlavni-logo-h-mobile); max-height: var(--kat-hlavni-logo-h-mobile); } .kat-hlavni-link-serie .kat-hlavni-img-wrapper, .kat-hlavni-link-serie .kat-hlavni-img-wrapper img { height: var(--kat-hlavni-serie-h-mobile); max-height: var(--kat-hlavni-serie-h-mobile); } .kat-hlavni-barva { width: var(--kat-hlavni-barva-size-mob); height: var(--kat-hlavni-barva-size-mob); } } /* ----------------------------------------------------------------------------- 15b. TIP HTML:

Text tipu…

-------------------------------------------------------------------------- */ .kat-tip { position: relative; background-color: #f0faf3; border-radius: 8px; padding: 12px 16px 12px 44px; font-size: 14px; line-height: 1.6; color: var(--color-text, #24242e); margin: 16px 0; } .kat-tip::before { content: '💡'; position: absolute; left: 14px; top: 12px; font-size: 16px; line-height: 1.6; } /* ----------------------------------------------------------------------------- 15c. FAQ — accordion Každá položka v samostatném rámečku, šipka vlevo, otázka vpravo od ní. Od v1.03 v červené paletě značky a se sdílenými tokeny --kat-blok-*. Struktura tříd je proti v1.02 nezměněná, staré popisky fungují dál; volitelně přibyly .kat-faq__kicker, .kat-faq__perex, .kat-faq__skupina a .kat-faq__kontakt. HTML:
Časté otázky

Na co se ptáte nejčastěji

Krátký úvod…

Sortiment

Text odpovědi…

…
Skrývání: třídou .je-zabaleno na .kat-faq__polozka (atribut hidden Shoptet v popisu kategorie ignoruje). Toggle řeší inline