/* ========================================================================== Vychoška, dizajnový systém Verzia 0.1.0, základ: tokeny, písma, farby kategórií. Zdroj hodnôt: mockup 3a + prvok kariet z 3b, gradient z loga. Prepis komponentov sa dopĺňa až po overení markupu Jaroti na stagingu. ========================================================================== */ :root { /* --- gradient značky, farby z loga --- */ --vy-brand-1: #d80061; --vy-brand-2: #7e0570; --vy-brand: linear-gradient(120deg, var(--vy-brand-1), var(--vy-brand-2)); /* Prehyb pre tlačidlá. Zámerne vodorovný, nie 120°: pri background-size 200 % sa dĺžka gradientu počíta z dvojnásobne širokej plochy, takže šikmý gradient ukázal v tlačidle aj ružovú vpravo. Vodorovný ukáže v ľavej polovici presne prechod brand-1 → brand-2, teda to isté ako --vy-brand, a hover posunie pozíciu na druhú polovicu. */ --vy-prehyb: linear-gradient(to right, var(--vy-brand-1) 0%, var(--vy-brand-2) 50%, var(--vy-brand-1) 100%); /* --- laditeľné hodnoty efektov, dolaďuje sa v ukazka-efekty.html --- */ --vy-chip-zoom: 1.03; --vy-chip-uhol: 4deg; --vy-chip-sytost: 2.2; --vy-chip-jas: 0.96; --vy-dl-tien: 3px; --vy-dl-sila: 14%; --vy-dl-posun: 4px; --vy-pis-dosah: 120px; --vy-pis-sila: 18px; --vy-pis-rot: 6deg; --vy-pis-navrat: 0.81s; --vy-accent: var(--vy-brand-1); /* kontrast na bielej 5,1:1, prejde AA */ /* --- neutrály --- */ --vy-ink: #2a1e33; --vy-bg: #fdfbfd; --vy-surface: #ffffff; --vy-line: #f0e4ee; --vy-muted: #7a6b82; --vy-footer-ink: #c9bcd1; /* --- písma --- */ --vy-font-display: "Fraunces", Georgia, "Times New Roman", serif; --vy-font-text: "Figtree", "Helvetica Neue", Arial, sans-serif; /* Osi premenného písma Fraunces. SOFT 0 je ostrá, 100 veľmi mäkká, opsz je optická veľkosť 9 až 144, WONK zapína rozdurdené oká. Hodnoty vybral Ivo v živej ukážke: čiastočne mäkká, display rez. */ --vy-vf: "SOFT" 30, "WONK" 0, "opsz" 81; /* --- tvar --- */ --vy-r-pill: 99px; --vy-r-card: 16px; --vy-r-hero: 20px; --vy-wrap: 1180px; --vy-gut: 48px; --vy-lift: 6px; /* farebný odtlačok karty */ /* --- podklady fotiek, jemné verzie farieb kategórií (z mockupu 3a) --- */ --vy-ph-hry: #fff8e3; --vy-ph-malovanky: #fff1ee; --vy-ph-spolocnost: #eef6ff; --vy-ph-dni: #eefaec; --vy-ph-sviatky: #f7f1fe; --vy-ph-merch: #fdf6fa; --vy-ph-diare: #fbeef5; /* --- pastely kategórií --- */ --vy-c-hry: #ffe8a3; --vy-c-malovanky: #ffd6cf; --vy-c-spolocnost: #cfe8ff; --vy-c-dni: #d8f3d5; --vy-c-sviatky: #e9defa; --vy-c-merch: #fbeef5; } @media (max-width: 1080px) { :root { --vy-gut: 32px; } } @media (max-width: 620px) { :root { --vy-gut: 16px; --vy-lift: 4px; } } /* -------------------------------------------------------------------------- Farba kategórie na dlaždici produktu. WooCommerce dáva každej dlaždici triedy product_cat-. Produkty sú často vo viacerých kategóriách naraz, preto je poradie nižšie ZÁMERNE od najmenej dôležitej po najdôležitejšiu: neskoršie pravidlo prepíše skoršie, takže vyhrá kategória vyššie v dohodnutej priorite. Priorita (od najvyššej): Diáre, Sviatky, Výnimočné dni, Maľovanky, Hry, Naša spoločnosť, Merch. -------------------------------------------------------------------------- */ /* Fallback, keby produkt nemal ani jednu z kategórií nižšie. Má nižšiu špecificitu (0,2,0), takže ho každé pravidlo s product_cat prebije. */ .products .product { --vy-cat: var(--vy-line); --vy-ph: var(--vy-surface); } .products .product.product_cat-vychoska-merch { --vy-cat: var(--vy-c-merch); --vy-ph: var(--vy-ph-merch); } .products .product.product_cat-nasa-spolocnost { --vy-cat: var(--vy-c-spolocnost); --vy-ph: var(--vy-ph-spolocnost); } .products .product.product_cat-hry { --vy-cat: var(--vy-c-hry); --vy-ph: var(--vy-ph-hry); } .products .product.product_cat-malovanky { --vy-cat: var(--vy-c-malovanky); --vy-ph: var(--vy-ph-malovanky); } .products .product.product_cat-vynimocne-dni { --vy-cat: var(--vy-c-dni); --vy-ph: var(--vy-ph-dni); } .products .product.product_cat-sviatky { --vy-cat: var(--vy-c-sviatky); --vy-ph: var(--vy-ph-sviatky); } .products .product.product_cat-vychoska { --vy-cat: var(--vy-brand); --vy-ph: var(--vy-ph-diare); } /* Diáre, gradient */ /* Na archíve kategórie má farba karty zodpovedať práve otvorenej kategórii, nie poradiu priority. Inak by sa štítok a farba rozišli: štítok ukazuje otvorenú kategóriu, odtlačok by ukazoval tú prioritnejšiu. Telo dostáva od WordPressu triedu term-, preto tento zápis. */ body.term-hry .products .product.product_cat-hry { --vy-cat: var(--vy-c-hry); --vy-ph: var(--vy-ph-hry); } body.term-malovanky .products .product.product_cat-malovanky { --vy-cat: var(--vy-c-malovanky); --vy-ph: var(--vy-ph-malovanky); } body.term-nasa-spolocnost .products .product.product_cat-nasa-spolocnost { --vy-cat: var(--vy-c-spolocnost); --vy-ph: var(--vy-ph-spolocnost); } body.term-vynimocne-dni .products .product.product_cat-vynimocne-dni { --vy-cat: var(--vy-c-dni); --vy-ph: var(--vy-ph-dni); } body.term-sviatky .products .product.product_cat-sviatky { --vy-cat: var(--vy-c-sviatky); --vy-ph: var(--vy-ph-sviatky); } body.term-vychoska-merch .products .product.product_cat-vychoska-merch { --vy-cat: var(--vy-c-merch); --vy-ph: var(--vy-ph-merch); } body.term-vychoska .products .product.product_cat-vychoska { --vy-cat: var(--vy-brand); --vy-ph: var(--vy-ph-diare); } /* ========================================================================== ELEMENTOR NA DOMOVSKEJ Poznámka k lícovaniu: Elementor dáva kontajneru sekcie odsadenie 15 px zľava a sprava a sekciám odmieta zapísať vodorovný okraj. Rieši sa to v samotnej stránke: hero karta je vo vnútornej sekcii a jej stĺpec má odsadenie 7 px, dlaždice majú okraj 7 px. Tým všetko lícuje na 332 px. ========================================================================== */ /* Ikony v dlaždiciach na domovskej. Emodži vyzerajú na každom systéme inak, preto vlastné ploché ikony ako pozadie nadpisu. Kľúčom je cieľ odkazu, takže v Elementore stačí napísať názov kategórie, ikona sa doplní sama. */ .elementor-widget-heading .elementor-heading-title a[href*="product-category/"], .elementor-widget-heading .elementor-heading-title.vy-ikona { display: inline-flex; align-items: center; gap: 9px; line-height: 1.25; } .elementor-widget-heading .elementor-heading-title a[href*="product-category/"]::before, .elementor-widget-heading .elementor-heading-title.vy-ikona::before { content: ""; flex: none; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .75; } .elementor-widget-heading .elementor-heading-title a[href*="product-category/hry/"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='4'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.1'%20fill='%232a1e33'%20stroke='none'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.1'%20fill='%232a1e33'%20stroke='none'/%3E%3Ccircle%20cx='15.5'%20cy='15.5'%20r='1.1'%20fill='%232a1e33'%20stroke='none'/%3E%3C/svg%3E"); } .elementor-widget-heading .elementor-heading-title a[href*="product-category/malovanky/"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020h4L20%208l-4-4L4%2016v4Z'/%3E%3Cpath%20d='M14.5%205.5%2018.5%209.5'/%3E%3C/svg%3E"); } .elementor-widget-heading .elementor-heading-title a[href*="product-category/nasa-spolocnost/"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2012a8%208%200%200%201-8%208H4.5l2.4-2.9A8%208%200%201%201%2020.5%2012Z'/%3E%3Cpath%20d='M8.5%2011h8M8.5%2014.5h5'/%3E%3C/svg%3E"); } .elementor-widget-heading .elementor-heading-title a[href*="product-category/sviatky/"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='9'%20width='18'%20height='12'%20rx='2'/%3E%3Cpath%20d='M3%2013h18M12%209v12'/%3E%3Cpath%20d='M12%209S9.8%204.2%207.6%205.4%209.2%209%2012%209Zm0%200s2.2-4.8%204.4-3.6S14.8%209%2012%209Z'/%3E%3C/svg%3E"); } /* Tri pruhy s výhodami. Ikona sa páruje cez CSS triedu widgetu, tie sa na rozdiel od tried sekcie ukladajú aj cez rozhranie Elementora. */ .elementor-widget-heading.vy-i-blesk .elementor-heading-title, .elementor-widget-heading.vy-i-skd .elementor-heading-title, .elementor-widget-heading.vy-i-zamok .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; line-height: 1.25; } .elementor-widget-heading.vy-i-blesk .elementor-heading-title::before, .elementor-widget-heading.vy-i-skd .elementor-heading-title::before, .elementor-widget-heading.vy-i-zamok .elementor-heading-title::before { content: ""; flex: none; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .75; } .elementor-widget-heading.vy-i-blesk .elementor-heading-title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202%204.5%2013.5H11l-1%208.5L19.5%2010H13l1-8Z'/%3E%3C/svg%3E"); } .elementor-widget-heading.vy-i-skd .elementor-heading-title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021h18M5%2021V9.5L12%204l7%205.5V21M10%2021v-5.5h4V21'/%3E%3C/svg%3E"); } .elementor-widget-heading.vy-i-zamok .elementor-heading-title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a1e33'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='10.5'%20width='16'%20height='10.5'%20rx='2'/%3E%3Cpath%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/%3E%3C/svg%3E"); } /* Elementor dáva každému widgetu spodný okraj 20 px pravidlom .elementor-widget:not(:last-child), ktoré prebije nastavenie okraja jednotlivého prvku. V nízkych dlaždiciach to robí veľkú dieru medzi názvom a popiskom, preto trieda vy-tesne s vyššou váhou. */ .elementor-widget.elementor-widget-heading.vy-tesne:not(:last-child) { margin-bottom: 2px; } /* Zúženie dlaždíc: nadpis aj počet bez zbytočnej výšky riadku. */ .elementor-widget-heading .elementor-heading-title { line-height: 1.25; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Mriežka Noviniek na stránke v Elementore. Skratka [products] vypíše ten istý výpis ako obchod, ale v užšom stĺpci by z auto-fill vyšli tri karty. Na domovskej chceme štyri, preto pevný počet stĺpcov. */ .elementor-widget-shortcode .woocommerce div.products:not(.swiper) { grid-template-columns: repeat(4, 1fr) !important; margin-bottom: 0 !important; } @media (max-width: 1024px) { .elementor-widget-shortcode .woocommerce div.products:not(.swiper) { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .elementor-widget-shortcode .woocommerce div.products:not(.swiper) { grid-template-columns: 1fr !important; } } /* ========================================================================== ŠÍRKA OBSAHU Téma nad 1279 px obmedzuje .page-container na 1354 px, ale telo má triedu main-content-fullwidth, ktorá to vracia na 100 %. Preto sa prepisujú aj tie varianty a preto je pred nimi body, aby bola váha vyššia ako v reset.css. Hodnota je token --vy-wrap, mení sa na jednom mieste. ========================================================================== */ body .page-container, body.layout-fullwidth .page-container, body.main-content-fullwidth .page-container { max-width: var(--vy-wrap); margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Dlaždica produktu. Skutočný markup Jaroti (odmerané na živom webe 3. 9. 2026): div.woocommerce.main-products.columns-4 div.products flex, záporné okraje 0 -5px -60px section.product.product_cat-* NIE li.product div.product-wrapper vizuálna karta div.thumbnail-wrapper obrázok + tlačidlá pri hoveri div.meta-wrapper h3.product-name, span.price Dve veci, na ktoré sa dá naletieť: 1. Mriežka Jaroti je flex so zápornými okrajmi, preto grid potrebuje !important, inak sa display:grid neuplatní a stĺpce zostanú po starom. 2. Odtlačok sa NEROBÍ cez z-index:-1. Predok s nepriehľadným pozadím ho prekryje a farba nie je vidno. Namiesto toho sa vrství bez záporných hodnôt: ::after je odtlačok (z-index 0), ::before je biela karta (z-index 1) a obsah karty ide na z-index 2. Na .product-wrapper preto nesmie prísť transform, opacity ani filter, vytvorili by stacking context. -------------------------------------------------------------------------- */ /* :not(.swiper) je dôležité. Súvisiace produkty sú karusel Swiper s tým istým .products, grid by mu rozbil vnútorné pozicovanie. */ .woocommerce div.products:not(.swiper) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 18px !important; margin: 0 0 40px !important; } .woocommerce div.products:not(.swiper) .product { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } .products .product .product-wrapper { position: relative; height: 100%; display: flex; flex-direction: column; background: transparent; border: 0; } /* odtlačok v farbe kategórie */ /* display:block je nutný. Jaroti má na .product-wrapper::after clearfix s display:table, ktorý zrazí pseudoprvok na nulovú veľkosť a farebný odtlačok sa vôbec nevykreslí. Toto pravidlo ho prebíja. */ .products .product .product-wrapper::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; border-radius: var(--vy-r-card); background: var(--vy-cat); transform: translate(var(--vy-lift), var(--vy-lift)); transition: transform .18s ease; } /* biela karta nad odtlačkom */ .products .product .product-wrapper::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: var(--vy-surface); border: 1px solid var(--vy-line); border-radius: var(--vy-r-card); } .products .product .product-wrapper > * { position: relative; z-index: 2; } /* Hover: karta sa posunie doľava hore, odtlačok sa tým roztiahne. Posúva sa transformom, nie cez top a left. Top a left menia rozloženie, prehliadač ich prepočítava v každom snímku a obe osi sa nerozbehnú naraz, takže pohyb vyzerá lomený. Transform beží na kompozítore, obe osi idú súčasne a plynulo. Odmerané na karte v Novinkách. */ .products .product .product-wrapper { transition: transform .18s ease; } .products .product:hover .product-wrapper { transform: translate(-2px, -2px); } .products .product:hover .product-wrapper::after { transform: translate(calc(var(--vy-lift) + 3px), calc(var(--vy-lift) + 3px)); } @media (prefers-reduced-motion: reduce) { .products .product .product-wrapper, .products .product .product-wrapper::after { transition: none; } } /* Karusel súvisiacich produktov má overflow hidden a výšku presne na kartu, takže farebný odtlačok posunutý o --vy-lift dole sa orežel. Odsadenie zdola mu spraví miesto. Meranie pred opravou: kontajner 366 px, karta 366 px. */ .woocommerce div.products.swiper { padding-bottom: calc(var(--vy-lift) + 6px); } /* Pätička sa lepila priamo na obsah. Odsadenie zdola na obale stránky jej spraví vzduch a platí to na každej stránke, nie len na domovskej. */ body .page-container { padding-bottom: 56px; } @media (max-width: 767px) { body .page-container { padding-bottom: 36px; } } /* Podklad fotky. Obrázky produktov sú prevzaté grafiky z Facebooku a majú rôzne pozadia: biele, limetkové, tyrkysové, oranžové. Odmerané na živom webe. Preto obrázok nesedí na hrane karty, ale leží na jemnom pastelovom podklade svojej kategórie a má okolo seba odsadenie. Krikľavé pozadie sa tým zmení z rušivej plochy karty na farebný blok vnútri pokojnej karty a web zostane pastelový aj pri obrázkoch, ktoré s paletou nemajú nič spoločné. */ .products .product .thumbnail-wrapper { border-radius: var(--vy-r-card) var(--vy-r-card) 0 0; overflow: hidden; background: var(--vy-ph); padding: 10px; } .products .product .thumbnail-wrapper img { border-radius: 10px; } @media (max-width: 620px) { .products .product .thumbnail-wrapper { padding: 7px; } } .products .product .thumbnail-wrapper figure { margin: 0; width: 100%; } .products .product .thumbnail-wrapper img { display: block; width: 100% !important; height: auto !important; } .products .product .meta-wrapper { margin: 0 !important; padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } /* Štítok kategórie v dlaždici. Farbu berie z tej istej premennej ako odtlačok karty, takže sa nemôžu rozísť. Diáre majú gradient, preto biely text. */ .products .product .vy-tag { align-self: flex-start; display: inline-block; font: 700 11px var(--vy-font-text); line-height: 1.4; padding: 4px 10px; border-radius: var(--vy-r-pill); background: var(--vy-cat); color: var(--vy-ink); text-decoration: none; } /* Vlastný štítok kategórie nahrádza výpis kategórií z témy, preto sa pôvodný riadok „Categories: ..." aj prázdny riadok SKU v dlaždici skrývajú. */ .products .product .meta-wrapper .product-categories, .products .product .meta-wrapper .product-sku { display: none; } /* Jaroti nastavuje odkazom v .meta-wrapper color:inherit selektorom s váhou (0,4,1). Farba štítku preto musí byť zapísaná aspoň rovnako špecificky, inak sa neprejaví. */ .products .product .product-wrapper a.vy-tag { color: var(--vy-ink); } .products .product.product_cat-vychoska .product-wrapper a.vy-tag { color: #fff; } .products .product .vy-tag:hover { filter: brightness(.96); } .products .product .product-name { margin: 0; font: 600 15px/1.35 var(--vy-font-text); } .products .product .price { font: 700 16px var(--vy-font-text); color: var(--vy-ink); } @media (max-width: 620px) { .woocommerce div.products { gap: 12px !important; } .products .product .meta-wrapper { padding: 12px; } } /* NEOVERENÉ: hodnoty vyššie sedia podľa merania v prehliadači, ale vizuálnu kontrolu na skutočnej stránke treba spraviť na stagingu. */ /* ========================================================================== TYPOGRAFIA A ZÁKLAD Platí pre celý web vrátane obsahu v Elementore, pokiaľ tam nie je nastavené vlastné písmo. Elementor si vie písmo prebiť vlastnými nastaveniami, preto v ňom treba nastaviť aj globálne písma (viď dokumentáciu). ========================================================================== */ body, button, input, select, textarea { font-family: var(--vy-font-text); color: var(--vy-ink); } h1, h2, h3, h4, h5, h6, .product_title, .woocommerce-loop-product__title { font-family: var(--vy-font-display); font-weight: 700; text-wrap: balance; } a { color: var(--vy-accent); } /* ========================================================================== TLAČIDLÁ WooCommerce používa .button všade, od výpisu po pokladňu. ========================================================================== */ .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .woocommerce #place_order, .woocommerce-cart .button, .woocommerce-checkout .button, .woocommerce-account .button { background: var(--vy-brand); color: #fff; border: 0; border-radius: var(--vy-r-pill); font: 700 15px var(--vy-font-text); padding: 13px 26px; transition: filter .18s ease; } .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, .woocommerce #place_order:hover, .woocommerce-cart .button:hover, .woocommerce-checkout .button:hover { filter: brightness(1.08); color: #fff; } /* druhotné tlačidlo, napr. pokračovať v nákupe */ .woocommerce .button.vy-ghost { background: transparent; color: var(--vy-ink); border: 2px solid var(--vy-line); } /* ========================================================================== DETAIL PRODUKTU Markup Jaroti + WooCommerce, odmeraný na stagingu 4. 9. 2026: div.breadcrumbs > div.breadcrumbs-container div.product.gallery-layout-vertical div.product-images-summary div.woocommerce-product-gallery > div.woocommerce-product-gallery__wrapper div.woocommerce-product-gallery__image div.product-label > span.new štítok Novinka div.summary.entry-summary h1.product_title.entry-title div.availability.stock.in-stock téma ju skrýva cez .single-product .stock div.single-counter-wrapper rozbitý odpočet, prázdne Order in the next p.price > span.woocommerce-Price-amount.amount form.cart > div.quantity > div.number-button > input.minus + input.qty + input.plus minus a plus sú absolútne + button.single_add_to_cart_button div.StripeElement Apple Pay, G Pay, Link a.button.ts-buy-now-button div.woocommerce-tabs.wc-tabs-wrapper > ul.tabs.wc-tabs section.related.products > div.products.swiper karusel, nie mriežka POZOR na váhu selektorov. Jaroti tlačí nastavenia z Reduxu inline do hlavičky selektormi ako .woocommerce div.product .summary .product_title (0,4,1) alebo .woocommerce div.product .summary form.cart .button (0,5,2). Slabšie pravidlo sa ticho neuplatní. Preto má každé pravidlo detailu prefix body.single-product.woocommerce div.product. Trieda woocommerce je na tele stránky, nie vnútri, preto je spojená s body. POZOR na skratku font. Prepíše aj line-height na normal a Jaroti stavia výšku ovládačov práve na line-height. Kde na výške záleží, treba ju zapísať zvlášť. ========================================================================== */ body.single-product .breadcrumbs .breadcrumbs-container { font: 600 13px var(--vy-font-text); color: var(--vy-muted); } /* Dva stĺpce detailu. Téma ich rieši floatom v pomere 58 a 42 percent, mokap má polovicu na polovicu. Odmerané v prehliadači, prebije to aj bez !important. */ @media (min-width: 900px) { body.single-product.woocommerce div.product .woocommerce-product-gallery { width: 50%; } body.single-product.woocommerce div.product .summary.entry-summary { width: 46%; margin-left: 4%; } } body.single-product.woocommerce div.product .summary h1.product_title { font: 700 38px/1.15 var(--vy-font-display); color: var(--vy-ink); letter-spacing: 0; margin: 0 0 12px; } body.single-product.woocommerce div.product .summary p.price, body.single-product.woocommerce div.product .summary p.price .amount { font: 800 40px var(--vy-font-display); color: var(--vy-ink); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* Skladovosť téma skrýva vlastným nastavením. Ak sa raz zapne, nech má farbu dizajnu a bez anglického popisku Stock:. */ body.single-product.woocommerce div.product .summary .availability { font: 600 13px var(--vy-font-text); color: #1f8a5c; } body.single-product.woocommerce div.product .summary .availability .label { display: none; } /* Prázdny odpočet z témy, v slovenčine nie je preložený a nemá hodnoty. */ body.single-product.woocommerce .single-counter-wrapper { display: none; } /* Množstvo. Minus a plus sú v téme absolútne vnútri .number-button, preto sa nerobí flex, len sa dorovnajú výšky a farby. */ body.single-product.woocommerce div.product .summary form.cart { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } /* Jaroti dáva formuláru clearfix cez ::before a ::after. Vo flex kontajneri sa z nich stanú plnohodnotné flex položky: majú nulovú šírku, ale medzeru z gap si vypýtajú. Kvôli tomu bolo množstvo posunuté o 12 px doprava a tlačidlo o 12 px užšie ako Kúpiť ihneď pod ním. Odmerané: 954 proti 942 a 402 proti 414. Je to ten istý clearfix, ktorý nám zrážal odtlačok karty. */ body.single-product.woocommerce div.product .summary form.cart::before, body.single-product.woocommerce div.product .summary form.cart::after { display: none; } body.single-product.woocommerce div.product .summary form.cart .quantity { flex: none; width: 132px; height: 64px; border: 1px solid var(--vy-line); border-radius: var(--vy-r-pill); background: var(--vy-surface); overflow: hidden; } body.single-product.woocommerce div.product .summary form.cart .quantity .number-button { height: 100%; } body.single-product.woocommerce div.product .summary form.cart .quantity input.qty { width: 100%; height: 100%; line-height: 1; margin: 0; padding: 0 40px; background: transparent; border: 0; box-shadow: none; color: var(--vy-ink); font: 700 16px var(--vy-font-text); text-align: center; -moz-appearance: textfield; } body.single-product.woocommerce div.product .summary form.cart .quantity input.qty::-webkit-outer-spin-button, body.single-product.woocommerce div.product .summary form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.single-product.woocommerce div.product .summary form.cart .quantity input.minus, body.single-product.woocommerce div.product .summary form.cart .quantity input.plus { top: 0; bottom: 0; height: 100%; width: 40px; background: transparent; border: 0; box-shadow: none; color: var(--vy-muted); font: 700 18px var(--vy-font-text); cursor: pointer; } body.single-product.woocommerce div.product .summary form.cart .quantity input.plus { left: auto; right: 0; } body.single-product.woocommerce div.product .summary form.cart button.single_add_to_cart_button { flex: 1; min-width: 220px; height: 64px; padding: 0 30px; background: var(--vy-brand); color: #fff; border: 0; border-radius: var(--vy-r-pill); box-shadow: none; font: 700 16px var(--vy-font-text); letter-spacing: 0; text-transform: none; transition: filter .18s ease; } body.single-product.woocommerce div.product .summary form.cart button.single_add_to_cart_button:hover { filter: brightness(1.08); color: #fff; } /* Druhé tlačidlo Buy now. Text je v téme po anglicky, preklad ide cez prekladový súbor témy, nie cez CSS. */ body.single-product.woocommerce div.product .summary a.ts-buy-now-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; padding: 0 30px; margin: 0 0 24px; background: var(--vy-surface); color: var(--vy-ink); border: 2px solid var(--vy-line); border-radius: var(--vy-r-pill); box-shadow: none; font: 700 15px var(--vy-font-text); letter-spacing: 0; text-transform: none; } body.single-product.woocommerce div.product .summary a.ts-buy-now-button:hover { border-color: var(--vy-accent); color: var(--vy-accent); } /* Štítok Novinka nad obrázkom. */ body.single-product.woocommerce div.product .product-label span.new { display: inline-block; background: var(--vy-brand); color: #fff; font: 700 12px var(--vy-font-text); line-height: 1.4; padding: 6px 12px; border-radius: var(--vy-r-pill); text-transform: uppercase; letter-spacing: .4px; } /* Galéria */ body.single-product.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--vy-r-card); } body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 10px; } /* Záložky pod produktom */ body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a { font: 700 14px var(--vy-font-text); color: var(--vy-muted); letter-spacing: 0; } body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vy-ink); } /* Nadpis súvisiacich produktov, v téme veľkými písmenami a čierny. */ body.single-product.woocommerce div.product section.related > h2 { font: 700 24px var(--vy-font-display); color: var(--vy-ink); letter-spacing: 0; text-transform: none; margin-bottom: 20px; } @media (max-width: 900px) { body.single-product.woocommerce div.product .summary h1.product_title { font-size: 28px; } body.single-product.woocommerce div.product .summary p.price, body.single-product.woocommerce div.product .summary p.price .amount { font-size: 32px; } } /* Mobil: počítadlo ostáva úzke, tlačidlo ide na celý riadok pod neho. Odmerané v ráme 390 px, text „Pridať do košíka" sa inak zalomil do dvoch riadkov. */ @media (max-width: 620px) { body.single-product.woocommerce div.product .summary form.cart { gap: 10px; } body.single-product.woocommerce div.product .summary form.cart button.single_add_to_cart_button { flex: 1 1 100%; min-width: 0; padding: 0 18px; } } /* ========================================================================== ČO TÁTO TÉMA ZÁMERNE NERIEŠI Hlavička, pätička a domovská stránka nie sú v téme, ale v Elementore: hlavička je šablóna div.elementor.elementor-692 (21 prvkov), domovská je stránka s id 21. CSS z child témy sa im dá vnútiť len násilím, cez triedy ako .elementor-element-xxxxx, ktoré sa menia pri každej úprave obsahu. Preto sa robia v Elementore: globálne farby a písma v Site Settings podľa tokenov vyššie, a potom sekcie. Postup je v dokumente NASADENIE_FAZA1. ========================================================================== */ /* ========================================================================== HLAVIČKA Hlavička je šablóna UAE Header & Footer, príspevok typu elementor-hf s názvom „jedna", ID 692. Skladá sa z troch sekcií: oznamovací pruh (vlastné HTML), riadok s logom, hľadaním, účtom a košíkom (widgety UAE) a riadok chips (vlastné HTML). Stĺpce sa oslovujú dvoma spôsobmi naraz. Prvý je ID Elementor prvku, to platí na stagingu. Druhý je `:has()` podľa toho, čo je v stĺpci: obrázok je logo, `.hfe-search-form__container` je hľadanie, `.elementor-widget-hfe-cart` je košík. Dôvod: pri exporte šablóny a importe na iný web Elementor **všetky ID prepíše**, takže na ostrom webe sú iné než na stagingu. Overené pri prenose 5. 9. Selektor cez `:has()` prežije aj prestavbu hlavičky, ID nie. ========================================================================== */ /* Šírky stĺpcov. Elementor ich mal 33/33/33 a do stĺpca s účtom a košíkom sa dvojica nezmestila, zalomila sa pod seba. Odmerané: obal mal 150 px, účet 70 + medzera 20 + košík 125 = 215. Percentá sa nastavujú cez CSS, lebo pri zmene v Elementore si stĺpce šírku preberajú medzi sebou. */ #masthead .elementor-element-0affd11, #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) { width: 24%; } #masthead .elementor-element-549943d, #masthead .elementor-column:has(.hfe-search-form__container) { width: 46%; } #masthead .elementor-element-89b41cf, #masthead .elementor-column:has(.elementor-widget-hfe-cart) { width: 30%; } /* Logo. To isté PNG ako v pätičke, s priehľadným okrajom 23,33 % vľavo a 26 % hore aj dole. Bez orezania by značka začínala až o 54 px vpravo od hrany obsahu. Overené meraním: ľavá hrana značky je na 331, chips pod ňou na 332. Keď sa logo oreže do nového súboru, tieto okraje zrušiť. */ /* Logo. Od 0.9.1 je to nový súbor vychoska-logo-gradient.png v gradiente značky, orezaný tesne na obsah, takže negatívne okraje na kompenzáciu priehľadného rámu už netreba. Šírka 150 px je z mokapu. Widget site-logo od UAE sme vymenili za obyčajný obrázok. Ten widget totiž berie logo z prispôsobenia témy, nie zo svojho nastavenia, takže sa doň nedalo zapísať nové logo ani cez API. Obrázok je predvídateľný. */ #masthead .elementor-element-0affd11 img, #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) img { display: block; width: 150px; height: auto; margin: 0; } /* Vyváženie logotypu vo výške riadku. Obrázok v odkaze je riadkový prvok, takže pod ním ostávalo 7 px na dotiahnutie účaria a logo sedelo bližšie k oznamovaciemu pruhu než k chipsom. Odmerané pred opravou: 13 px hore, 21 px dole. Po oprave 17 a 18. */ #masthead .elementor-element-0affd11 > .elementor-widget-wrap, #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) > .elementor-widget-wrap { align-content: center; } #masthead .elementor-element-0affd11 .elementor-widget-container, #masthead .elementor-element-0affd11 a, #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) .elementor-widget-container, #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) a { display: block; line-height: 0; } /* Účet a košík vedľa seba, zarovnané doprava. */ #masthead .elementor-element-89b41cf > .elementor-widget-wrap, #masthead .elementor-column:has(.elementor-widget-hfe-cart) > .elementor-widget-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 20px; } #masthead .elementor-element-89b41cf > .elementor-widget-wrap > .elementor-element, #masthead .elementor-column:has(.elementor-widget-hfe-cart) > .elementor-widget-wrap > .elementor-element { width: auto; margin-bottom: 0; } #masthead a.vy-ucet { font: 600 14px var(--vy-font-text); color: var(--vy-muted); text-decoration: none; white-space: nowrap; } #masthead a.vy-ucet:hover { color: var(--vy-ink); } /* Pole hľadania. Mokap má pilulku so svetlým rámom, maximálne 380 px. Dve veci ho vyhadzovali z jednej línie s logom a košíkom. Reset témy dáva každému `html input` spodný okraj 10 px, a kontajner hľadania sa naťahoval podľa tlačidla s krížikom, takže pole sedelo pri jeho hornej hrane. Odmerané pred opravou: stred poľa 102,5, stred loga aj košíka 107,5. */ #masthead .hfe-search-form__container { max-width: 380px; align-items: center; } #masthead input.hfe-search-form__input { margin: 0; } #masthead input.hfe-search-form__input { height: 46px; padding: 0 18px; border: 1px solid #ecdfea; border-radius: var(--vy-r-pill); background: var(--vy-surface); color: var(--vy-ink); font: 400 14px var(--vy-font-text); box-shadow: none; } #masthead input.hfe-search-form__input::placeholder { color: #a08fa8; } #masthead input.hfe-search-form__input:focus { border-color: var(--vy-accent); outline: none; } /* Košík. Téma má v Reduxe oranžovočervený gradient, značka má svoj vlastný. */ #masthead .hfe-menu-cart__toggle a.elementor-button { background: var(--vy-brand); border: 0; box-shadow: none; border-radius: var(--vy-r-pill); padding: 12px 20px; font: 700 14px var(--vy-font-text); color: #fff; transition: filter .18s ease; } #masthead .hfe-menu-cart__toggle a.elementor-button:hover { filter: brightness(1.08); } #masthead .hfe-menu-cart__toggle a.elementor-button .elementor-button-text { color: #fff; } @media (max-width: 767px) { #masthead .elementor-element-89b41cf > .elementor-widget-wrap, #masthead .elementor-column:has(.elementor-widget-hfe-cart) > .elementor-widget-wrap { gap: 12px; } #masthead a.vy-ucet { display: none; } } /* ========================================================================== PÍSMO Nadpisy Fraunces, texty Figtree. Fraunces je premenné písmo a všade, kde sa používa, treba nastaviť jeho osi, inak si prehliadač odvodí optickú veľkosť sám z veľkosti písma a rez vyjde mäkší a hrubší, než chceme. Preto jedno pravidlo na všetko, čo beží na --vy-font-display. ========================================================================== */ body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title, body.single-product.woocommerce div.product .summary h1.product_title, body.single-product.woocommerce div.product .summary p.price, body .products .product .product-name, body .vy-foot b { font-variation-settings: var(--vy-vf); } /* Detail produktu: veľkosti podľa voľby v živej ukážke. */ body.single-product.woocommerce div.product .summary h1.product_title { font: 700 45px/1.1 var(--vy-font-display); font-variation-settings: var(--vy-vf); } body.single-product.woocommerce div.product .summary, body.single-product.woocommerce div.product .woocommerce-tabs .panel { font-size: 15px; line-height: 1.65; } /* ========================================================================== OMRVINKOVÁ NAVIGÁCIA V mokape je len na detaile produktu, nikde inde, a nie je to pruh cez celú šírku, ale riadok v obsahovom stĺpci. Odmerané pred opravou: obal bol vysoký 55 px a text začínal na 100, kým galéria produktu začína na 325. Na domovskej svietilo „Home / Domov nová", čo je navyše aj po anglicky. ========================================================================== */ /* Skrývame len na domovskej a na bežných stránkach. Na archívoch obchodu a vo výsledkoch vyhľadávania je v tomto páse **nadpis kategórie**, takže pôvodné plošné `body:not(.single-product)` ho schovalo tiež. Chyba z 5. 9. */ body.home .breadcrumb-title-wrapper, body.page:not(.woocommerce-page) .breadcrumb-title-wrapper { display: none; } body.single-product .breadcrumb-title-wrapper, body.woocommerce-page:not(.single-product) .breadcrumb-title-wrapper, body.search .breadcrumb-title-wrapper { background: transparent; height: auto; min-height: 0; } body.woocommerce-page:not(.single-product) .breadcrumb-title-wrapper .page-title, body.search .breadcrumb-title-wrapper .page-title { font: 700 38px/1.15 var(--vy-font-display); font-variation-settings: var(--vy-vf); color: var(--vy-ink); margin: 0 0 4px; } body.single-product .breadcrumb-title-wrapper .breadcrumbs-container, body.woocommerce-page:not(.single-product) .breadcrumb-title-wrapper .breadcrumbs-container, body.search .breadcrumb-title-wrapper .breadcrumbs-container { width: min(1031px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 18px 0 6px; } body.single-product .breadcrumbs, body.single-product .breadcrumbs a, body.single-product .breadcrumbs span { font: 600 13px var(--vy-font-text); color: var(--vy-muted); } body.single-product .breadcrumbs a:hover { color: var(--vy-accent); } body.single-product .breadcrumbs > *:last-child { color: var(--vy-ink); } /* ========================================================================== COOKIE LIŠTA Farby sa nastavujú v pluginu CookieYes, ktorý ich píše do atribútu style každého tlačidla. Preto sú tu len tvar, písmo a gradient na hlavnom tlačidle. Gradient ide ako background-image, ktorý sa vykresľuje nad inline background-color, takže netreba !important. ========================================================================== */ .cky-consent-container .cky-btn, .cky-modal .cky-btn { font: 700 14px var(--vy-font-text) !important; border-radius: var(--vy-r-pill); padding: 11px 22px; line-height: 1.2; transition: filter .18s ease; } .cky-consent-container .cky-btn-accept, .cky-modal .cky-btn-accept { background-image: var(--vy-brand); border-color: transparent; } .cky-consent-container .cky-btn-accept:hover, .cky-modal .cky-btn-accept:hover { filter: brightness(1.08); } /* Odmietnuť a Prispôsobiť dedili oranžovočervený gradient z tlačidiel témy, ten istý, aký sme brali košíku. Farbu pozadia majú z pluginu správne bielu, ale gradient sa vykresľuje nad ňou. Odmerané: linear-gradient(261deg, rgb(250,116,15), rgb(242,41,91)). */ /* Odmietnuť a Prispôsobiť. Farby sem patria natvrdo, nie do pluginu: CookieYes na bezplatnom pláne úpravu farieb zablokoval. Rozhranie ohlási „Update was successful", ale hodnoty zahodí, overené na ostrom webe 5. 9. Uložené v plugine ostávajú pôvodné oranžové #EF9A21, prebíjame ich tu. `!important` tu je nutné, nie z lenivosti: plugin píše farby priamo do atribútu style na tlačidle (`style="color:#EF9A21;..."`), a riadkový štýl inak neprebije žiadny selektor. Overené na ostrom webe. */ .cky-consent-container .cky-btn-reject, .cky-consent-container .cky-btn-customize, .cky-modal .cky-btn-reject, .cky-modal .cky-btn-customize { background-image: none; background-color: #fff !important; color: var(--vy-ink) !important; border-color: #e6dbe4 !important; } .cky-consent-container .cky-btn-accept, .cky-modal .cky-btn-accept { color: #fff !important; border-color: transparent !important; } .cky-consent-container a, .cky-notice-des a { color: var(--vy-accent); } .cky-consent-container .cky-btn-reject:hover, .cky-consent-container .cky-btn-customize:hover { border-color: var(--vy-accent); color: var(--vy-accent); } .cky-consent-container .cky-title, .cky-modal .cky-title { font-family: var(--vy-font-display); font-variation-settings: var(--vy-vf); } .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des * { font-family: var(--vy-font-text); font-size: 14px; line-height: 1.6; } /* Koliesko na znovuotvorenie cookies. Oranžovú #EF9A21 píše plugin do atribútu style na OBALE, nie na tlačidle, preto sa farbí obal a preto `!important`. */ .cky-btn-revisit-wrapper { background-color: transparent !important; background-image: var(--vy-brand) !important; } .cky-btn-revisit-wrapper .cky-btn-revisit { background: transparent; } /* -------------------------------------------------------------------------- Pokladňa, súhlas so sprístupnením digitálneho obsahu (0.9.6) Dve pasce naraz, obe overené meraním: 1. Selektor musí obsahovať `form.checkout`. WooCommerce má na to isté miesto pravidlo `.woocommerce form .form-row label.checkbox`, ktoré je o jeden prvok špecifickejšie, a bez `form` v reťazci naše pravidlo prehrá. 2. Flexbox tu nejde použiť. WooCommerce lepí hviezdičku `` až za text labelu, takže by sa stala samostatnou položkou flexu a odletela na koniec prvého riadka. Preto odsadenie a políčko na absolútnej pozícii, hviezdička potom plynie v texte tam, kam patrí. -------------------------------------------------------------------------- */ .woocommerce-checkout form.checkout .vy-suhlas { display: block; margin: 0 0 14px; padding: 0; } .woocommerce-checkout form.checkout .vy-suhlas label.checkbox { display: block; position: relative; margin: 0; padding-left: 26px; font-family: var(--vy-font-text); font-size: 13px; line-height: 1.55; color: #5a4a63; cursor: pointer; } .woocommerce-checkout form.checkout .vy-suhlas input.input-checkbox { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; margin: 0; accent-color: #d80061; } .woocommerce-checkout form.checkout .vy-suhlas .required { color: #d80061; text-decoration: none; border: 0; } .woocommerce-checkout form.checkout .vy-suhlas.woocommerce-invalid label.checkbox { color: #b3123f; } /* Poznámka o súhlase na PDF faktúre */ .vy-suhlas-faktura { margin-top: 10px; font-size: 8pt; line-height: 1.4; color: #555; } /* ========================================================================== MOBIL, opravy z 5. 9. Všetko tu je scoped na `max-width: 767px`. Selektory sa zámerne neviažu na ID Elementor prvkov, tie sa pri prenose šablóny menia. Namiesto toho sa sekcie a stĺpce hľadajú podľa toho, čo obsahujú. ========================================================================== */ @media (max-width: 767px) { /* Riadok hlavičky. Na desktope má stĺpce 24/46/30 %, tie percentá platili aj na mobile, takže logo vytieklo o 10 px vľavo za okraj a košík o 10 px vpravo. Odmerané pri 375 px: logo x = -10, košík končil na 385. Na mobile preto riadok zalomíme: logo a košík hore, hľadanie pod nimi. */ #masthead .elementor-section:has(.hfe-search-form__container) > .elementor-container { flex-wrap: wrap; padding-left: 16px; padding-right: 16px; } #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) { width: 50%; order: 1; } #masthead .elementor-column:has(.elementor-widget-hfe-cart) { width: 50%; order: 2; } #masthead .elementor-column:has(.hfe-search-form__container) { width: 100%; order: 3; margin-top: 10px; } #masthead .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) img { width: 120px; } #masthead .hfe-search-form__container { max-width: none; } /* Kapsule kategórií. Pás sa dá posúvať, ale nebolo to vidieť. Zväčšené a doplnený mäkký prechod na pravom okraji, aby bolo jasné, že pokračuje. */ .vy-chips { position: relative; } .vy-chips .vy-chip { font-size: 15px; padding: 9px 16px; } .vy-chips::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 32px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%); } /* Dlaždice kategórií a pás výhod. Na mobile sa stĺpce ukladajú pod seba a Elementor im nedáva žiadnu medzeru, takže farebné karty na seba doliehali. Odmerané: dlaždice na y 991, 1063, 1136, 1208, čiže medzera 0 až 1 px. */ body.home .elementor-top-section .elementor-column + .elementor-column { margin-top: 12px; } body.home .elementor-top-section:has(.vy-hero-obal) .elementor-column + .elementor-column { margin-top: 0; } } /* ========================================================================== OPRAVY Z IVOVHO ZOZNAMU, 5. 9., child téma 0.9.12 ========================================================================== */ /* -------------------------------------------------------------------------- Mriežka produktov držala tri stĺpce bez ohľadu na prepínač Príčina bola moja: `repeat(auto-fill, minmax(280px, 1fr))`. Obsah je široký 1017 px, takže sa doň zmestili vždy práve tri stĺpce a prepínač 3/4/5/6 nemal na čo zabrať. WooCommerce dáva zvolený počet ako triedu `columns-N` na obal, tak ju odteraz čítame. -------------------------------------------------------------------------- */ .woocommerce .columns-1 div.products:not(.swiper) { grid-template-columns: repeat(1, 1fr) !important; } .woocommerce .columns-2 div.products:not(.swiper) { grid-template-columns: repeat(2, 1fr) !important; } .woocommerce .columns-3 div.products:not(.swiper) { grid-template-columns: repeat(3, 1fr) !important; } .woocommerce .columns-4 div.products:not(.swiper) { grid-template-columns: repeat(4, 1fr) !important; } .woocommerce .columns-5 div.products:not(.swiper) { grid-template-columns: repeat(5, 1fr) !important; } .woocommerce .columns-6 div.products:not(.swiper) { grid-template-columns: repeat(6, 1fr) !important; } @media (max-width: 1024px) { .woocommerce .columns-4 div.products:not(.swiper), .woocommerce .columns-5 div.products:not(.swiper), .woocommerce .columns-6 div.products:not(.swiper) { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 767px) { .woocommerce [class*="columns-"] div.products:not(.swiper) { grid-template-columns: repeat(2, 1fr) !important; } } /* Do 5. 9. sme tu mali jeden stĺpec. Pri ôsmich Novinkách to znamenalo osem riadkov pod sebou, zhruba 3600 px scrollovania na telefóne. Dva stĺpce dávajú pri 375 px dlaždicu 162 px, obrázky sú štvorcové, takže sa to dá prezerať očami a nie palcom. */ @media (max-width: 420px) { .woocommerce [class*="columns-"] div.products:not(.swiper) { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .products .product .product-name, .products .product .woocommerce-loop-product__title { font-size: 13px; line-height: 1.35; } .products .product .price { font-size: 14px; } .products .product .vy-tag { font-size: 10px; padding: 4px 9px; } } /* -------------------------------------------------------------------------- Štítok Vypredané Text mal odsadenie 5 px a riadkovanie 15 px v 25 px vysokej kapsule, takže sedel natlačený. Odmerané na archíve Diáre. -------------------------------------------------------------------------- */ .products .product .out-of-stock { border-radius: var(--vy-r-pill); padding: 0; overflow: hidden; } .products .product .out-of-stock span { display: block; padding: 7px 16px; font: 700 12px/1 var(--vy-font-text); letter-spacing: .02em; } /* -------------------------------------------------------------------------- Košík POZOR na triedu tela. Na košíku a v pokladni má telo `woocommerce-cart` a `woocommerce-page`, ale **nie** `woocommerce`. Prefix `body.woocommerce` tam teda nesadne na nič, overené 5. 9. Trieda `woocommerce` je na obale vnútri stránky, nie na tele. -------------------------------------------------------------------------- */ /* Rám sumáru mal oranžovú 2 px od témy. */ body.woocommerce-cart .cart-collaterals { border-color: var(--vy-line) !important; } /* Sumár sa prekrýval s tabuľkou. Príčina nebola v pozicovaní, ale v šírkach: tabuľka košíka si pýtala 673 px v 564 px širokom formulári a pretekala doprava pod sumár. To isté robil riadok s kupónom a tlačidlami. Odmerané 5. 9.: formulár 564, tabuľka 673, Aktualizovať košík končilo na 998. */ body.woocommerce-cart .woocommerce { flex-wrap: wrap; gap: 24px; align-items: flex-start; } body.woocommerce-cart form.woocommerce-cart-form { flex: 1 1 520px; min-width: 0; } body.woocommerce-cart .cart-collaterals { flex: 1 1 340px; min-width: 0; } /* `table-layout: fixed` a `overflow-wrap: anywhere` sa tu neosvedčili, názov produktu sa lámal po písmenách. Stačí šírka 100 % a užšia miniatúra, zvyšok si prehliadač rozdelí sám. */ body.woocommerce-cart form.woocommerce-cart-form table.shop_table { width: 100% !important; min-width: 0 !important; } body.woocommerce-cart form.woocommerce-cart-form table.shop_table td.product-thumbnail, body.woocommerce-cart form.woocommerce-cart-form table.shop_table th.product-thumbnail { width: 84px; } body.woocommerce-cart form.woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 72px; height: auto; } body.woocommerce-cart form.woocommerce-cart-form table.shop_table td.product-remove, body.woocommerce-cart form.woocommerce-cart-form table.shop_table th.product-remove { width: 36px; } body.woocommerce-cart form.woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; } body.woocommerce-cart form.woocommerce-cart-form .actions .coupon { flex: 1 1 100%; display: flex; gap: 10px; margin: 0; } body.woocommerce-cart form.woocommerce-cart-form .actions > .button, body.woocommerce-cart form.woocommerce-cart-form .actions .coupon .button { flex: 0 0 auto; margin: 0; float: none; } /* Skontrolovať a objednať bolo tmavočervené #C11E1E. */ body.woocommerce-page a.checkout-button, body.woocommerce-page a.checkout-button.button { background-color: transparent !important; background-image: var(--vy-brand) !important; border: 0 !important; color: #fff !important; border-radius: var(--vy-r-pill); } /* Plus a mínus pri počte kusov dedili oranžový gradient témy a boli 21 × 24 px. */ body.woocommerce-page .quantity input.minus, body.woocommerce-page .quantity input.plus, body.woocommerce-page .quantity .minus, body.woocommerce-page .quantity .plus { background-image: none !important; background-color: #fff !important; color: var(--vy-ink) !important; border: 1px solid var(--vy-line) !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; font-size: 16px; line-height: 1; } body.woocommerce-page .quantity input.minus:hover, body.woocommerce-page .quantity input.plus:hover, body.woocommerce-page .quantity .minus:hover, body.woocommerce-page .quantity .plus:hover { border-color: var(--vy-accent) !important; color: var(--vy-accent) !important; } /* -------------------------------------------------------------------------- Okrúhle tlačidlá na kartách produktu Lupa a košík dedili oranžovočervený gradient témy, ten istý ako všade inde. -------------------------------------------------------------------------- */ .products .product .button-in a, .products .product .quickshop, .products .product a.add_to_cart_button, .products .product .ts-wishlist-button a { background-image: none; background-color: #fff; color: var(--vy-ink); border: 1px solid var(--vy-line); } .products .product .button-in a:hover, .products .product .quickshop:hover, .products .product a.add_to_cart_button:hover { background-image: var(--vy-brand); color: #fff; border-color: transparent; } /* -------------------------------------------------------------------------- Hover na hlavných tlačidlách Predtým sa gradient len jemne zosvetlil a nebolo to poznať. Teraz sa prejde po tlačidle: gradient je zapísaný trojfarebne a široký 200 %, hover posunie jeho pozíciu, čo vyzerá ako otočenie o 180 stupňov. -------------------------------------------------------------------------- */ body .single_add_to_cart_button, body.woocommerce-page a.checkout-button, body.woocommerce-page a.checkout-button.button, body #place_order, #masthead .hfe-menu-cart__toggle a.elementor-button { /* Veľkosť a pozícia potrebujú !important: téma inde nastavuje skratku background, ktorá background-size resetuje na auto. Odmerané na #place_order, kde bez toho vychádzalo background-size: auto a gradient sa roztiahol cez celé tlačidlo aj s ružovou vpravo. */ background-image: var(--vy-prehyb) !important; background-size: 200% 100% !important; background-position: 0 0 !important; transition: background-position .45s ease, filter .18s ease; } body .single_add_to_cart_button:hover, body.woocommerce-page a.checkout-button:hover, body.woocommerce-page a.checkout-button.button:hover, body #place_order:hover, #masthead .hfe-menu-cart__toggle a.elementor-button:hover { background-position: 100% 0 !important; filter: none; } @media (prefers-reduced-motion: reduce) { body .single_add_to_cart_button, body.woocommerce-page a.checkout-button, body #place_order, #masthead .hfe-menu-cart__toggle a.elementor-button { transition: none; } } /* -------------------------------------------------------------------------- Hlavička archívu, kategória a obchod. Jaroti na /product-category/ nevypisuje žiadny nadpis: v DOM nie je ani .breadcrumb-title-wrapper, ani h1. Overené meraním, nie odhadom. Nadpis preto pridáva child téma cez woocommerce_before_main_content (prio 25). Obsah archívu zároveň začínal na y=193 pri hlavičke končiacej na y=197, teda doslova pod ňou. Preto odstup zhora. -------------------------------------------------------------------------- */ body.archive.woocommerce-page #primary, body.post-type-archive-product #primary, body.woocommerce-shop #primary { padding-top: 40px; } .vy-arch { --vy-arch-bg: var(--vy-ph-diare); position: relative; box-sizing: border-box; width: 100%; flex: 0 0 100%; order: -2; /* .before-loop-wrapper je flex, hlavička patrí nad lištu */ margin: 0 0 30px; padding: 26px 30px 24px 34px; border-radius: var(--vy-r-card); background: var(--vy-arch-bg); overflow: hidden; } .vy-arch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--vy-brand); } .vy-arch__nadpis { margin: 0; padding: 0; font-family: var(--vy-font-display); font-variation-settings: var(--vy-vf); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.01em; color: var(--vy-ink); text-transform: none; } .vy-arch__popis { max-width: 62ch; margin-top: 10px; font-family: var(--vy-font-text); font-size: 15px; line-height: 1.6; color: var(--vy-muted); } .vy-arch__popis p:last-child { margin-bottom: 0; } .vy-arch__pocet { margin: 12px 0 0; font-family: var(--vy-font-text); font-size: 13px; letter-spacing: 0.02em; color: var(--vy-muted); } /* Podklad podľa kategórie, rovnaké poradie ako pri dlaždiciach produktov. */ body.term-hry .vy-arch { --vy-arch-bg: var(--vy-ph-hry); } body.term-malovanky .vy-arch { --vy-arch-bg: var(--vy-ph-malovanky); } body.term-nasa-spolocnost .vy-arch { --vy-arch-bg: var(--vy-ph-spolocnost); } body.term-vynimocne-dni .vy-arch { --vy-arch-bg: var(--vy-ph-dni); } body.term-sviatky .vy-arch { --vy-arch-bg: var(--vy-ph-sviatky); } body.term-vychoska-merch .vy-arch { --vy-arch-bg: var(--vy-ph-merch); } body.term-vychoska .vy-arch { --vy-arch-bg: var(--vy-ph-diare); } /* -------------------------------------------------------------------------- Lišta nad výpisom produktov. Prepínač počtu stĺpcov je demo prvok témy s natvrdo anglickými reťazcami (4 Columns), ktoré neprechádzajú cez gettext. Skrývame ho: návštevníkovi nič nedáva a rozbíja mriežku, ktorú riadime cez columns-N. -------------------------------------------------------------------------- */ body.woocommerce-page .before-loop-wrapper { gap: 14px 20px; margin: 0 0 32px; padding: 0 0 18px; border-bottom: 1px solid var(--vy-line); } body.woocommerce-page .before-loop-wrapper .ts-product-columns-dropdown { display: none !important; } body.woocommerce-page .before-loop-wrapper .woocommerce-notices-wrapper { order: -1; width: 100%; } body.woocommerce-page .before-loop-wrapper .product-on-sale-form { order: 1; margin: 0; } body.woocommerce-page .before-loop-wrapper .woocommerce-ordering { order: 2; margin: 0 0 0 auto; } body.woocommerce-page .product-on-sale-form label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--vy-font-text); font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--vy-muted); cursor: pointer; } body.woocommerce-page .product-on-sale-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--vy-brand-1); } body.woocommerce-page .woocommerce-ordering select.orderby { height: auto; padding: 9px 16px; font-family: var(--vy-font-text); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--vy-ink); background-color: #fff; background-image: none; border: 1px solid var(--vy-line); border-radius: var(--vy-r-pill); } @media (max-width: 767px) { body.archive.woocommerce-page #primary, body.post-type-archive-product #primary, body.woocommerce-shop #primary { padding-top: 24px; } .vy-arch { margin-bottom: 22px; padding: 20px 20px 18px 24px; } body.woocommerce-page .before-loop-wrapper .woocommerce-ordering { margin-left: 0; width: 100%; } body.woocommerce-page .woocommerce-ordering select.orderby { width: 100%; } } /* -------------------------------------------------------------------------- Tlačidlá na dlaždici produktu (hover). Téma dáva .loop-add-to-cart na hover pozadie rgb(193,30,30), odmerané. Bublina s popiskom je position:absolute vo vnútri 38 px kruhu, preto sa text „Pridať do košíka" nezmestil a lial sa pod tlačidlo. -------------------------------------------------------------------------- */ .products .product .product-group-button .loop-add-to-cart:hover, .products .product .product-group-button .loop-add-to-cart.loading, .products .product .product-group-button .loop-add-to-cart.added, .products .product .product-group-button .button-in:hover { background-color: var(--vy-brand-1) !important; background-image: var(--vy-brand) !important; color: #fff !important; border-color: transparent !important; } .products .product .product-group-button .loop-add-to-cart:hover a, .products .product .product-group-button .button-in:hover a { color: #fff !important; } .products .product .product-group-button .ts-tooltip.button-tooltip { right: calc(100% + 10px) !important; left: auto !important; width: max-content !important; max-width: none !important; padding: 7px 13px !important; font-family: var(--vy-font-text) !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; color: #fff !important; background-color: var(--vy-ink) !important; border-radius: var(--vy-r-pill) !important; } /* -------------------------------------------------------------------------- Zoradenie: téma nahrádza