(v15) ---------------- */ .box-categories .active > a, .box-categories .child-active > a{ background:transparent!important;color:var(--c-accent)!important; font-weight:600;box-shadow:inset 2px 0 0 var(--c-accent); } .box-categories .active > a:hover, .box-categories .child-active > a:hover{background:var(--c-surface-2)!important} /* ========================================================================== FÁZE 4c — varianty: čipy kolekcí a kompaktní řádky (17. 8. 2026) ========================================================================== */ /* --- 39. Čipy kolekcí látek ---------------------------------------------- */ .nz-vchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .nz-vchip{ display:inline-flex;align-items:center;gap:6px; min-height:36px;padding:0 14px; border:1px solid var(--c-border);border-radius:18px; background:var(--c-surface);color:var(--c-ink); font-size:13px;font-weight:500;line-height:1;cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease; } .nz-vchip:hover{border-color:var(--c-accent);color:var(--c-accent)} .nz-vchip:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} .nz-vchip__n{font-size:12px;color:var(--c-muted);font-variant-numeric:tabular-nums} .nz-vchip[aria-pressed="true"]{ background:var(--c-accent);border-color:var(--c-accent);color:#fff;font-weight:600; } .nz-vchip[aria-pressed="true"] .nz-vchip__n{color:rgba(255,255,255,.8)} /* --- 40. Kompaktní variantní řádky --------------------------------------- */ @media(min-width:768px){ #variants .variant-table .table-row{min-height:56px} #variants .variant-image img{width:44px;height:44px} #variants .variant-name-wrapper{align-items:center} #variants .variant-name{font-size:14px;line-height:1.35} } /* Třídu nz-odd přiděluje skript podle viditelných řádků, ne :nth-child — ten by počítal i skryté a při filtrování by pruhy vycházely náhodně. */ #variants .variant-table .table-row.nz-odd{background:var(--c-surface-2)} #variants .variant-table .table-row:hover, #variants .variant-table .table-row.nz-odd:hover{background:#f4ede8} /* ========================================================================== FÁZE 4d — přístupnost (17. 8. 2026) ========================================================================== */ /* --- 41. Viditelný focus ------------------------------------------------ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; border-radius:2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none} .skip-link:focus{ position:fixed!important;top:8px;left:8px;z-index:200; width:auto!important;height:auto!important; clip:auto!important;clip-path:none!important;overflow:visible!important; padding:10px 16px; background:var(--c-surface);color:var(--c-ink); border:2px solid var(--c-accent);border-radius:8px; font-size:15px;text-decoration:none; } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* --- 43. Přebití barev šablony (v20) ------------------------------------ Tlačítka, stránkování a „Načíst dalších" berou barvu ze šablonové proměnné --color-primary, ne z naší --c-accent. Původní #E35A00 mělo na bílé kontrast 3.67:1, norma chce u textu do 18 px alespoň 4.5:1. #C24E00 dává 4.79:1 a je to pořád stejná oranžová, jen o odstín hlubší. Hodnoty -h/-s/-l šablona používá pro odvozené odstíny, proto se mění taky. */ :root{ --color-primary:#C24E00; --color-primary-l:38%; --color-primary-hover:#A84300; --color-primary-hover-l:33%; --color-secondary:#C24E00; --color-secondary-l:38%; --color-secondary-hover:#A84300; --color-secondary-hover-l:33%; } /* --- 44. Zarovnání cen v seznamu variant (v21) -------------------------- Poppins nemá tabulkové číslice — „1 111 Kč" je o 17 px užší než „9 999 Kč" a font-variant-numeric:tabular-nums s tím nic neudělá, protože ta funkce ve fontu prostě není (ověřeno měřením). Ceny jsou zarovnané doprava, takže se rozjížděl jejich levý okraj a sloupec vypadal rozházeně. Systémový font (SF Pro / Segoe UI / Roboto) tabulkové číslice má — rozptyl klesl na 0 px. Mění se jen číslice v seznamu variant. */ #variants .table-col.price, #variants .table-col.price .price-final{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-variant-numeric:tabular-nums; } /* --- 45. Dostupnost v produktové kartě (v23) ---------------------------- Šablona má u dostupnosti v kartě text-align:right (pravidlo je na CDN, takže z JS není vidět). Když se text zalomil na dva řádky, druhý řádek odskočil doprava a odrážka se navíc svisle vycentrovala mezi oba řádky. Zarovnat doleva a odrážku posadit na první řádek. */ .products .product .availability{text-align:left!important;align-items:flex-start!important} .products .product .availability > *{text-align:left!important} /* --- 46. Tlačítko v produktové kartě na střed (v24) --------------------- Tlačítko má min-height 44 px, ale bylo inline-block s paddingem 5 px, takže řádek textu seděl u horní hrany (8 px nahoře, 17 dole). Flex s align-items:center to srovná. */ .products .product .p-tools a.btn, .products .product .p-tools button.btn{ display:flex!important;align-items:center!important;justify-content:center!important; } /* --- 47. Text v tlačítkách svisle na střed (v25) ------------------------ Šablona dává tlačítkům min-height 44 px (dotyková plocha), ale nechává je inline-block s paddingem 5 px — řádek textu pak sedí u horní hrany a zbylých 12 px se nasčítá dole. Platí pro všechna tlačítka, ne jen v produktové kartě: ZVOLTE VARIANTU na detailu, „Načíst dalších"… Bez !important, aby si vlastní flex pravidla (nz-var-more, buybar) zůstala. */ a.btn, button.btn, input.btn{ display:inline-flex;align-items:center;justify-content:center; } /* --- 48. Rozbalit filtr — text na střed šedého bloku (v26) -------------- Šedý blok .filter-sections má výšku 54 px, odkaz uvnitř 44 px a pod ním zůstávalo 10 px paddingu navíc, takže text seděl nad středem. Bez toho paddingu má blok 44 px a text je přesně uprostřed. */ .filter-sections .filter-section-button{padding-bottom:0} /* --- 49. Tlačítko Otevřít filtr — zaseknutý hover na mobilu (v27) ------- Na dotykovém displeji zůstane po klepnutí viset :hover. Šablona v něm dává tlačítku šedou výplň a naše pravidlo oranžový text — dohromady šedý obdélník s oranžovým nápisem, který navíc nesplňuje kontrast. Výplň držíme bílou ve všech stavech a hover pouštíme jen tam, kde opravdu existuje ukazatel (hover:hover). */ .filters-unveil-button-wrapper a.unveil-button, .filters-unveil-button-wrapper a.unveil-button:hover, .filters-unveil-button-wrapper a.unveil-button:focus, .filters-unveil-button-wrapper a.unveil-button:active{ background:var(--c-surface)!important; color:var(--c-ink)!important; } @media (hover:hover){ .filters-unveil-button-wrapper a.unveil-button:hover{ border-color:var(--c-accent)!important; color:var(--c-accent)!important; } } /* --- 50. Otevřít filtr skutečně otevírá a zavírá (v28) ------------------ Tlačítko přepínalo jen svůj popisek. Shoptet u něj správně přepíná třídu filters-visible na , ale šablona na ni nemá navázané žádné zobrazení, takže se panel nikdy neschoval ani neodkryl. Doplňujeme chybějící vazbu — a jen na mobilu, kde má smysl: na desktopu ať jsou filtry vidět pořád a tlačítko se vůbec nezobrazuje. */ @media(max-width:991px){ .sidebar .box-filters{display:none} body.filters-visible .sidebar .box-filters{display:block} } @media(min-width:992px){ .filters-unveil-button-wrapper{display:none} } /* --- 51. Nejprodávanější: skrýt dostupnost (v29) ------------------------ Blok je úzký (fotka vlevo, text v ~105px sloupci), takže se dostupnost lámala na čtyři řádky a rozhazovala celou kartu. V teaseru navíc nic nepřináší — text je u všech produktů v e-shopu stejný. Název a cena stačí. */ .products-top-wrapper .product .availability{display:none} /* --- 52. Zbytky mřížky mezi produkty (v30) ------------------------------ Šablona kreslila výpis jako tabulku: každá buňka měla border-right a od druhé řady i border-top. Náš redesign dává každému produktu vlastní kartu s rámečkem, takže z původní mřížky zbyly zbloudilé čáry mezi kartami. Pryč s nimi. */ .products .product{border:0!important} /* --- 53. Rozcestník mizel při přejezdu na podkategorii (v31) ------------ Na vnitřních stránkách se rozbalené menu zavřelo, jakmile myš sjela z položky dolů k podkategorii — na titulní ne. Dvě příčiny, obě v šabloně: 1) obal .fitted má overflow:hidden a výšku 32 px, zatímco menu uvnitř má 46 px, takže spodních 14 px odkazu se ořezalo a nedalo se na ně najet; 2) lišta s drobečkovou navigací na menu nasedá a v tom pásu kradla myš. Mezi položkou a rozbalenou nabídkou tak vznikl mrtvý pruh, kde se hover ztratil. Zrušit ořez a menu položit nad drobečky. Opraví to zároveň i oranžový proužek pod aktivní položkou. */ .navigation-wrapper .fitted, .navigation-wrapper .fitted.visible{overflow:visible!important} .navigation-in.menu{z-index:20} /* --- 54. Pruh jen u hlavní kategorie (v34) ------------------------------- Oranzovy pruh se kreslil dvakrat: u nadrazene kategorie i u aktivni podkategorie. Podkategorii staci oranzovy tucny text. */ .box-categories li.active > a{box-shadow:none!important} /* --- 55. Ikona u polozky Znacky (v35) ----------------------------------- Znacky se pridaly do horniho menu az ted, ikony mame vazane na href. */ .navigation-in>ul>li>a[href$="/znacka/"]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E")} /* ── Tabulka rozměrů v detailním popisu produktu ───────────────── */ .basic-description h3{font-size:20px;font-weight:600;color:var(--c-ink);margin:26px 0 8px} .basic-description table{border-collapse:collapse;width:100%;max-width:460px;margin:0} .basic-description table th, .basic-description table td{text-align:left!important;font-size:15px;line-height:1.5;padding:8px 0; border-bottom:1px solid var(--c-border);vertical-align:top} .basic-description table th{font-weight:500;color:var(--c-muted);padding-right:28px;width:62%} .basic-description table td{font-weight:600;color:var(--c-ink);white-space:nowrap} .basic-description table tr:last-child th, .basic-description table tr:last-child td{border-bottom:0} @media(max-width:543px){ .basic-description table th{padding-right:14px;width:58%} .basic-description table th,.basic-description table td{font-size:14px} } /* --- Drobečková navigace: svislé vycentrování mezi čárami (v39) --- Menu (.navigation-in) je position:absolute a přesahuje svůj