/* Etapa 3, Task 2: typografie detailu podle AB. Ceny: s DPH hlavní 32 px Big Shoulders, bez DPH 16 px Barlow šedě; symboly měny dědí velikost (dnes 11/18/29 px zvlášť). Cíl: sjednotit detail na stupnici 14/16/22/24/32/52 (viz .superpowers/sdd/task-2-brief.md). Selektor cen NENÍ ".single-product .mlv-price-incl-tax..." jako v briefu doslova - ověřeno na živém markupu (curl), že ".single-product" (třída na ) zasahuje i cenu v bloku "Související produkty" na konci detailu (stejné třídy mlv-price-incl-tax/excl-tax, jede přes stejný Mlv_Cena_S_Bez_Dph jako hlavní cena). Blok WooCommerce product-price nese atribut, kterým jde obě odlišit - [data-is-descendent-of-single-product-template] jen u hlavní ceny, [data-is-descendent-of-query-loop] u karet souvisejících produktů. */ .single-product [data-is-descendent-of-single-product-template="true"] .mlv-price-incl-tax{ font:800 32px/1.1 var(--wp--preset--font-family--nadpis,"Big Shoulders"); color:var(--wp--preset--color--inkoust,#0A0A0C)} .single-product [data-is-descendent-of-single-product-template="true"] .mlv-price-excl-tax{ font:400 16px/1.3 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52)} .single-product .woocommerce-Price-currencySymbol{font-size:inherit} .single-product button.mlv-size-swatch{font:600 14px/1.2 var(--wp--preset--font-family--text,Barlow); border-radius:0} .single-product .mlv-glove-size-table-toggle, .single-product a.reset_variations{font-size:14px} /* WooCommerce core (woocommerce.css) má ".woocommerce div.product form.cart .reset_variations{font-size:.83em}" - o dost vyšší specificita (0,4,2) než pravidlo výš (0,2,1), takže vyhrávalo a odkaz zůstával na 13 px. Stejný řetězec selektoru, jen doplněný o .single-product navíc, aby specificitou přebil. POZOR: .single-product i .woocommerce sedí na TÉŽE (ověřeno computed style/matches) - proto spojené bez mezery (.single-product.woocommerce), ne jako dva předci za sebou, jinak selektor nikdy nic netrefí. */ .single-product.woocommerce div.product form.cart a.reset_variations{font-size:14px} .single-product .woocommerce-tabs .tabs li a{ font:800 16px/1.2 var(--wp--preset--font-family--nadpis,"Big Shoulders"); text-transform:uppercase} /* Tlačítko "Přidat do košíku": červená výplň, bílý text, sražený roh 9 px (stejná konstrukce jako tlačítka AB - viz prototyp/navrh-ab-obchod.py, .tlacitko + hover na černou), žádný border-radius. Dřív černá výplň (dědila z výchozího wp-element-button), radius už byl 0 (ověřeno computed style), takže tady se mění jen barva a přibývá zkosení. Nález finální revize (N2): #mlv-bulk-add-to-cart (hromadné tlačítko ve velikostní tabulce, mlv-bulk-size-table.php) zůstávalo úplně nestylované (výchozí šedé tlačítko prohlížeče, Arial, výška 22 px, žádný clip-path) - zákazník tak viděl dvě různé vizuální řeči tlačítka "koupit" podle typu produktu. Sjednoceno pod jeden selektor, obě tlačítka teď dostávají týž vzhled včetně explicitního písma (dřív se dědilo, u single vyšlo na váhu 300 místo zamýšlené 600) a paddingu, který drží výšku >= 44 px. */ .single-product button.single_add_to_cart_button, .single-product #mlv-bulk-add-to-cart{ background:var(--wp--preset--color--cervena,#E00103);color:#fff; font:600 16px/1.2 var(--wp--preset--font-family--text,Barlow); padding:16px 36px;border-radius:0; clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px), calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)} .single-product button.single_add_to_cart_button:hover, .single-product button.single_add_to_cart_button:focus-visible, .single-product #mlv-bulk-add-to-cart:hover, .single-product #mlv-bulk-add-to-cart:focus-visible{ background:var(--wp--preset--color--inkoust,#0A0A0C)} /* Rozšíření nad rámec briefu, nalezeno při měření (viz task-2-report.md): po nasazení výše uvedeného zůstávalo na detailu víc stupňů písma, než dovoluje limit (<=8). Tři zdroje: */ /* 1) Karty "Související produkty" pod hlavním obsahem jedou přes stejný blok Product Collection jako výpis kategorie (li.wc-block-product), ale mlv-vypis.css (Etapa 2) se na detailu nenačítá - beze zásahu by ceny karet zůstaly na staré neškálované velikosti z mlv-size-swatches.css (.mlv-price-incl-tax 1.3em / .mlv-price-excl-tax 0.8em), což dělalo tři stupně navíc (symbol měny 11/18/29 px podle kontextu). Hodnoty přebrané z mlv-vypis.css (stejný vizuální jazyk karet, žádné nové stupně - 22 a 14 už jsou v paletě použité jinde). */ .single-product [data-is-descendent-of-query-loop="true"] .mlv-price-incl-tax{ font:800 22px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders"); color:var(--wp--preset--color--inkoust,#0A0A0C)} .single-product [data-is-descendent-of-query-loop="true"] .mlv-price-excl-tax{ font:400 14px/1.3 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52)} /* Review Tasku 2 (2b): tlačítko "Vybrat možnosti" na kartách "Související produkty" mělo z WP core button bloku výchozí border-radius:9999px - stejná vada, jakou etapa 2 řešila na .wp-block-button__link ve výpisu (viz mlv-vypis.css). */ .single-product [data-is-descendent-of-query-loop="true"] .wp-block-button__link{border-radius:0} /* 2) Hromadné tlačítko "Přidat do košíku" ve velikostní tabulce (#mlv-bulk-add-to-cart, mlv-bulk-size-table.php) - dřív 13 px, mimo stupnici. Od N2 (finální revize) dostává společně s .single_add_to_cart_button plný vzhled tlačítka "koupit" (16 px, viz pravidlo výš), takže samostatný font-size zásah tady už není potřeba - odstraněno, ať neodporuje. */ /* 3) Odkaz "Zrušit odpověď na komentář" (WordPress core, záložka Hodnocení) je obalený v - výchozí prohlížečových 80 % dělá z 16 px základu 13 px. Nejde o nic z Task 2 (cena/swatch/tlačítko/ záložky), ale bez zásahu by to samo o sobě srazilo měřák. */ .single-product #cancel-comment-reply-link{font-size:14px} /* 4) Tlačítko "Odeslat" pod formulářem recenze (záložka Hodnocení) leží uvnitř .woocommerce-tabs, které kontrola border-radiusu prochází celé (".woocommerce-tabs *") - z WP core button bloku mělo výchozí border-radius:9999px (stejná vada jako .wp-block-button__link na kartách výpisu, viz mlv-vypis.css). */ .single-product .woocommerce-tabs input[type="submit"]{border-radius:0} /* Review Tasku 2 (2b): kontrola border-radiusu v zmer-detail.py byla zúžená na pár selektorů - rozšířena na CELOU stránku ("document.querySelectorAll('body *')"), beze výjimek v měřáku. Dva zbylé kulaté prvky ze zpřísněného běhu jsou WooCommerce core (photoswipe), ne naše CSS - hranatí se přímo tady, ať je kontrola absolutní: 1) Lupa nad galerií (woocommerce.css, .woocommerce-product-gallery__ trigger{border-radius:100%}) - jde jen o kruhové POZADÍ tlačítka, ikonu lupy samotnou (kruh+ouško) kreslí ::before/::after, které querySelectorAll nevidí (nejsou to prvky DOM), takže se nezmění. Hranatá lupa je v naší geometrii správně. POZOR: skutečný core selektor NENÍ holé ".woocommerce-product-gallery__trigger" (grep na první "}" to zkrátil), je to ".woocommerce div.product div.images .woocommerce-product-gallery__trigger" - specificita (0,4,2). Prostý ".single-product .woocommerce-product-gallery__ trigger" (0,2,0) prohrával (ověřeno přes document.styleSheets, vyhrávalo pořád core pravidlo) - stejná past a stejné řešení jako u a.reset_variations výš: ".single-product" a ".woocommerce" sedí na TÉŽE , spojené bez mezery na compound. 2) Bublina "Sdílet" v otevřené galerii (photoswipe/default-skin, .pswp__share-tooltip{border-radius:2px} + zaoblené rohy prvního/ posledního odkazu uvnitř) - v DOM je i bez otevření galerie (skryté), proto to najde i běh bez interakce. */ .single-product.woocommerce div.product div.images .woocommerce-product-gallery__trigger{border-radius:0} .single-product .pswp__share-tooltip, .single-product .pswp__share-tooltip a:first-child, .single-product .pswp__share-tooltip a:last-child{border-radius:0} /* Task 3: počet kusů skladem u velikosti (mlv-size-swatches.php, ). Swatch měl pevnou výšku 3rem na jeden řádek textu (mlv-size-swatches.css) - s druhým řádkem (počet kusů) by se accessible text zalomil/oříznul, proto height:auto + flex column místo pevné výšky. Barva/rámeček/font velikosti samotné (mlv-size-swatches.css) beze změny, brief chtěl stylovat jen nový prvek s počtem. */ .single-product button.mlv-size-swatch{display:flex;flex-direction:column; align-items:center;justify-content:center;height:auto;min-height:3rem; padding:6px 4px;gap:2px} .single-product .mlv-swatch-kusy{display:block;font:400 14px/1.1 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52)} /* Vyprodaná velikost: šedý text, BEZ přeškrtnutí (žádné text-decoration) - jen tlumenější odstín než u dostupných velikostí. */ .single-product button.mlv-size-swatch:disabled .mlv-swatch-kusy, .single-product button.mlv-size-swatch--vyprodano .mlv-swatch-kusy{ color:var(--wp--preset--color--sediva-svetla,#C1C1C5)} /* Task 3b (review Tasku 3): "u výrobce" NENÍ vyprodáno - tlačítko zůstává klikatelné, takže text pod velikostí dostává normální šedou (#4E4E52), ne zesvětlenou variantu vyprodaného stavu o dvě pravidla výš. Explicitní pravidlo místo spoléhání na to, že selektor "vyprodáno" swatch minine - ať budoucí úprava barvy vyprodaného stavu tenhle případ omylem nestáhne s sebou. Rozhodnutí zadavatele 5. 9. 2026 (bod 2): "dotaz" (SANTÉ) je stejně klikatelné jako "vyrobce", stejné pravidlo platí i pro něj. */ .single-product button.mlv-size-swatch[data-dostupnost="vyrobce"] .mlv-swatch-kusy, .single-product button.mlv-size-swatch[data-dostupnost="dotaz"] .mlv-swatch-kusy{ color:var(--wp--preset--color--sediva,#4E4E52)} /* Souhrnný řádek pod swatchi, jen když aspoň jedna velikost je "u výrobce" nebo "na dotaz" (mlv-size-swatches.php, .mlv-dodani). Stejný stupeň/ barva jako ostatní drobný text detailu (14 px Barlow šedě - viz .mlv-swatch-kusy výš). */ .single-product .mlv-dodani{font:400 14px/1.4 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52);margin-top:8px} /* Task 4: blok důvěry pod tlačítkem košíku (woocommerce_single_product_summary, priorita 35). Stejný stupeň/barva jako ostatní drobný text detailu (14 px Barlow šedě - viz .mlv-swatch-kusy/.mlv-dodani výš). Linka nahoře odděluje od tlačítka/dodání, odsazení shora dělá odstup - bez odrážek/ikon (etapa 3 je bez nových obrázků), proto list-style:none. */ .single-product .mlv-duvera-detail{list-style:none;margin:16px 0 0; padding:12px 0 0;border-top:1px solid var(--wp--preset--color--linka,#E1E2E5)} .single-product .mlv-duvera-detail li{font:400 14px/1.4 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52)} .single-product .mlv-duvera-detail li+li{margin-top:6px} /* Popisek "s DPH" u hlavní ceny (koordinátor 9. 9. 2026; GoPay, bod 4 náležitostí prodejního místa - u ceny má být napsané, jestli je s daní, nebo bez). Značku sází Mlv_Cena_S_Bez_Dph::popisek_s_dph() dovnitř .mlv-price-incl-tax, takže bez vlastního stupně by dědila 32px/800 Big Shoulders hlavní ceny. Stupeň 14 px Barlow šedě je ten, který na detailu už mají .mlv-swatch-kusy, .mlv-dodani i .mlv-duvera-detail - žádný desátý stupeň nepřibývá. Cena se nezmenšuje, popisek se k ní přisazuje. white-space:nowrap drží "s" a "DPH" pohromadě, kdyby se blok na úzkém telefonu lámal. */ .single-product [data-is-descendent-of-single-product-template="true"] .mlv-price-dph{ font:400 14px/1.1 var(--wp--preset--font-family--text,Barlow); color:var(--wp--preset--color--sediva,#4E4E52); white-space:nowrap} /* Změřeno ve 390 px: dostupná šířka 330 px, blok s popiskem 321 px - lámal se tak, že "1 869,00 Kč" zůstalo na prvním řádku vedle částky bez DPH a osamocené "s DPH" spadlo na druhý. Nowrap na celé skupině s DPH přesune zlom před částku, takže na telefonu vyjde "1 544,63 Kč bez DPH (21 %)" / "1 869,00 Kč s DPH". */ .single-product [data-is-descendent-of-single-product-template="true"] .mlv-price-incl-tax{ white-space:nowrap}