/** * Karta produktu ve výpisu WooCommerce. * * Platí všude, kde se vykresluje smyčka `ul.products li.product` — stránka * kategorie, obchod, související produkty i výpis `[products]` vložený * do článku. Markup je na všech těch místech stejný, takže jedno CSS drží * katalog i článek ve stejném vzhledu. * * Vzhled schválně kopíruje karty, které vykreslují Astra layouty (.nst-produkt, * table.top-produkty, .banner-recenze): bílá karta s rámečkem #e7e2e6, radius 14, * stejný měkký stín, obrázek na podkladu #faf8f9 a CTA #FF49AA. Hodnoty jsou tu * psané natvrdo stejně jako ve style.css — proměnné by tady byly první a jediné. * * Hierarchie na kartě je záměrně: obrázek → název → cena → tlačítko. Kategorie * je jen zařazení a drží se vzadu, cena se od názvu odlišuje barvou, ne váhou. * * Proč vlastní soubor a ne style.css: FTPS na Blueboardu se nad ~20 kB usekává * a style.css je dnes na 21 kB. Kdyby tohle přibylo do něj, každé další nahrání * by byla loterie. * * Proč tak dlouhé selektory: Astra i WooCommerce míří na tytéž prvky tvarem * `.woocommerce ul.products li.product .neco`, tedy čtyřmi třídami. Kratší * selektor by prohrál na specificitě a rozdíl by se projevil jen na části webu — * `.woocommerce` je na stránce kategorie na , v článku na obalu výpisu. * `.type-product` je pátá třída navíc; WooCommerce ji dává každé položce smyčky. * Alternativou by bylo !important u dvaceti deklarací, což je horší. */ /* Mřížka ------------------------------------------------------------------------- */ /* Astra dělá mezeru mezi řádky přes margin-bottom u položky. Karty jsou samy o sobě dost výrazné, takže stačí menší rozestup — a řeší ho rovnou mřížka. */ .woocommerce ul.products { row-gap: 26px; } /* Výpis v článku potřebuje vlastní odstup od textu nad a pod ním. */ .entry-content div.woocommerce { margin: 2.5em 0; } /* Karta ------------------------------------------------------------------------- */ .woocommerce ul.products li.product.type-product { display: flex; flex-direction: column; margin-bottom: 0; padding: 16px 16px 18px; background: #fff; border: 1px solid #e7e2e6; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10); transition: transform .12s ease, box-shadow .12s ease; } .woocommerce ul.products li.product.type-product:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px -14px rgba(16,24,40,.18); } /* Obrázek ------------------------------------------------------------------------- */ /* Pevná výška rámečku srovná karty v řádku bez ohledu na poměr stran fotky. mix-blend-mode: multiply zahodí bílé pozadí fotky, takže produkt sedí na podkladu stejně jako na kartě v žebříčku. */ .woocommerce ul.products li.product.type-product div.astra-shop-thumbnail-wrap { margin: 0 0 14px; background: #faf8f9; border-radius: 10px; overflow: hidden; } .woocommerce ul.products li.product.type-product div.astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; height: 230px; padding: 14px; } .woocommerce ul.products li.product.type-product div.astra-shop-thumbnail-wrap a img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; mix-blend-mode: multiply; } /* Text karty ------------------------------------------------------------------------- */ /* Astra tady drží vlastní vodorovné odsazení (0 1.2em), kvůli kterému by text a tlačítko nelícovaly s obrázkem. Odsazení má mít jen karta jako celek. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; height: auto; padding: 0; } /* Kategorie je jen zařazení, ne argument pro nákup — drobný tichý popisek nad názvem. Tvar (verzálky, prostrkání, tlumená šedá) je stejný jako u nadpisů KLADY/ZÁPORY na kartě v žebříčku. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap .ast-woo-product-category { display: block; margin: 0 0 7px; padding: 0; background: none; color: #7b8794; border: 0; border-radius: 0; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap a.ast-loop-product__link { text-decoration: none; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap h2.woocommerce-loop-product__title { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #1e293b; transition: color .12s ease; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap a.ast-loop-product__link:hover h2.woocommerce-loop-product__title { color: #c2186f; } /* Cena byla dřív větší a těžší než název, takže na kartě přebíjela to hlavní, podle čeho si čtenář vybírá. Odlišuje se proto barvou, ne váhou: zůstává pod názvem v hierarchii a růžová ji zároveň váže k tlačítku pod ní. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap span.price { display: block; margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.2; color: #c2186f; letter-spacing: -.01em; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap span.price del { margin-right: 8px; font-size: 15px; font-weight: 600; color: #a0a8b4; opacity: 1; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap span.price ins { text-decoration: none; } /* Hvězdičky ------------------------------------------------------------------------- */ /* Barvy stejné jako u hodnocení ve srovnávací tabulce. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap .star-rating { margin: 0 0 10px; color: #e3e0e3; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap .star-rating span { color: #f5a623; } /* Dnes nemá hodnocení ani jeden z 2 655 produktů, takže pět prázdných hvězdiček na každé kartě nenese žádnou informaci a jen zašumí kartu. Skrývají se podle šířky překryvu, kterou WooCommerce počítá z průměru — jakmile nějaké hodnocení vznikne, hvězdičky naskočí samy. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap .star-rating:has(span[style*="width:0%"]) { display: none; } /* Tlačítko ------------------------------------------------------------------------- */ /* margin-top: auto drží tlačítko u spodní hrany i u kratšího názvu, takže tlačítka v řádku lícují. */ .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap a.button { display: block; box-sizing: border-box; width: 100%; margin: auto 0 0; padding: 12px 16px; border: 0; border-radius: 8px; background: #FF49AA; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; box-shadow: 0 6px 16px -7px rgba(255,73,170,.85); transition: transform .12s ease, background .12s ease; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap a.button:hover { background: #ec2f95; color: #fff; text-decoration: none; transform: translateY(-1px); } /* Mobil ------------------------------------------------------------------------- */ @media (max-width: 781px) { .woocommerce ul.products { row-gap: 18px; } .woocommerce ul.products li.product.type-product { padding: 14px 14px 16px; } .woocommerce ul.products li.product.type-product div.astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link { height: 190px; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap h2.woocommerce-loop-product__title { font-size: 16px; } .woocommerce ul.products li.product.type-product div.astra-shop-summary-wrap span.price { font-size: 17px; } }