/* kategorie-extra.css — hodiny-online.cz Produktove karty ve vypisech: kategorie, vyhledavani, stranka znacky a stranka oblibenych (`body.in-oblibene`). Podoba se bere z homepage (`.ho-produkty` v redesign-extra.css), mrizka zustava sablonova — vypis ma sve sloupce a strankovani, posuvnik ne. Stitky u fotky kopiruji detail produktu (`.ho-det-stitky`). Nacitat AZ ZA ostatni vlastni CSS. */ :root { /* Firemni zlatou drzi sablona v --color-primary, nekopiruje se sem. Ramecek a stara cena jsou odectene z predlohy homepage. */ --ho-k-ramecek: #ecedf1; --ho-k-stara-cena: color-mix(in srgb, var(--color-primary, #B5A264) 80%, #fff); } /* Zkratka pro tri typy vypisu. Homepage ma vlastni obal .ho-produkty a do tohohle se nepocita. */ /* ===== 1) MRIZKA ===== Rozlozeni zustava sablonove a nesaha se na nej: karta ma sirku napevno (354,5 px pri 1440) a mezeru mezi kartami dela jeji vlastni padding 10 px. Gap ani nulovani paddingu sem nepatri - ctvrta karta by se zalomila na dalsi radek. Jedine, co se rusi, je sablonova delici cara `border-right: 1px #dadada` na `.product`. Spolu s ramecky karet kreslila pres cely vypis mrizku. Ramecek karty zustava, stejne jako na homepage. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block > .product { border: 0 !important; } /* ===== 2) KARTA ===== */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p { display: flex; flex-direction: column; height: 100%; padding: 14px; border: 1px solid var(--ho-k-ramecek); background: #fff; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .image { position: relative; display: block; margin-bottom: 14px; } /* Nazev — v predloze tmavy, sablona ho ma zlaty. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p a.name { display: block; overflow: visible; height: auto; max-height: none; margin: 0 0 4px; color: var(--rd-ink, #1a1a1a) !important; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p a.name:hover { color: var(--color-primary, #B5A264) !important; } /* Sablona zarovnava dostupnost a ceny doprava, predloha ma vse vlevo. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p :is(.p-in-in, .p-bottom, .availability, .prices) { text-align: left; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p :is(.availability, .availability span) { font-size: 13px; line-height: 1.35; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .ratings-wrapper { margin-bottom: 12px; } /* Spodek karty se prisaje dolu, aby tlacitka byla v rade zarovnana. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-in { display: flex; flex: 1 1 auto; flex-direction: column; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-bottom { margin-top: auto; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-bottom > div { display: block; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-bottom .p-desc { display: none; } /* ===== 3) CENY ===== */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .prices { margin-bottom: 12px; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .price-standard, body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .price-standard span { display: block; color: var(--ho-k-stara-cena) !important; font-size: 14px; text-decoration: line-through; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .price-final strong { color: var(--rd-ink, #1a1a1a) !important; font-size: 21px; font-weight: 700; } /* ===== 4) TLACITKO A SRDICKO ===== */ /* Radek s tlacitkem: KOUPIT roztazene, srdicko vpravo vedle nej. Srdicko sem stehuje kategorie-extra.js, sablona ho dava pod nazev. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-tools { display: flex; align-items: center; gap: 12px; width: 100%; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .pr-action { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .add-to-cart-button { display: block; width: 100%; padding: 11px 10px; border: 0; border-radius: 0; background: var(--color-primary, #B5A264) !important; color: var(--rd-ink, #1a1a1a) !important; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; cursor: pointer; transition: background .2s ease; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .add-to-cart-button:hover { background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important; } /* Sablona dava tlacitku ikonu sipky pres ::before. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .add-to-cart-button::before { content: none; } /* Srdicko z doplnku dkLab. Doplnek drzi svoje prvky pres !important, proto ho maji i nase pravidla. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .dkLabFavouriteProductDiv { flex: 0 0 auto; margin: 0; line-height: 0; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .dkLabFavProductSpan { display: inline-block; color: var(--color-primary, #B5A264) !important; font-size: 0 !important; /* schova text "Pridat k oblibenym", ikonu ne */ line-height: 0; cursor: pointer; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p :is(.dkLabFavProductSpan, .dkLabFavouriteProductLinkAdd, .dkLabFavouriteProductLinkRemove)::before { color: var(--color-primary, #B5A264) !important; font-size: 23px !important; line-height: 1; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .dkLabFavProductSpan:hover::before { color: var(--rd-ink, #1a1a1a) !important; } /* ===== 5) STITKY U FOTKY ===== Plati i pro karty v okne po pridani do kosiku (`#colorbox`) - pilulky tam stavi tentyz kategorie-extra.js, zbytek karty resi kosik-extra.css. */ /* Puvodni schranky po prestehovanych vlajkach. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p :is(.flags-default, .flags-extra) { display: none !important; } /* Novinka se ve vypisech neukazuje (klient 22. 10.). */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .flag-new { display: none !important; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitky { position: absolute; /* Klient 21. 10.: pilulky maji zacinat bliz levemu hornimu rohu. Puvodne 10 px od okraje fotky. */ top: 4px; left: 4px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: max-content; max-width: calc(100% - 8px); pointer-events: none; } /* Klient 21. 10.: ve vypisu az k ramecku karty, 4 px od nej. Fotka sedi v karte 14 px od okraje (padding karty), proto zaporne. Okno po pridani do kosiku (#colorbox) ma karty jinak, tam zustava 4 px od fotky. :not(#colorbox) jen dorovnava specificitu pravidla nad nim. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .ho-k-stitky { top: -10px; left: -10px; } /* Sirka musi byt max-content, jinak se box spocita bez ikony a text z pilulky vycuhuje ven. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek { position: static; display: inline-flex !important; flex: none; align-items: center; /* Klient 21. 10.: pilulky maji byt co nejuzsi, ale ne nacpane. Odsazeni 5/11 -> 3/8 px, mezera k ikone 6 -> 5, pismo 13 -> 12. Tim se "Doprava zdarma" zuzi ze 135 px, aniz by text dosedl na okraj. */ gap: 5px; width: max-content !important; max-width: 100%; height: auto !important; min-width: 0; margin: 0; padding: 3px 8px; border-radius: 0 !important; background: color-mix(in srgb, var(--ho-stitek, var(--color-primary, #B5A264)) 14%, #fff) !important; color: color-mix(in srgb, var(--ho-stitek, var(--color-primary, #B5A264)) 78%, #000) !important; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: left; text-indent: 0; white-space: nowrap; box-shadow: none; } /* Prebytecne pilulky. Trida, ne inline styl - pilulka ma `display: inline-flex !important`, ktery by inline `display:none` prebil. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek.ho-k-stitek-skryty { display: none !important; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek::after { content: none; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek::before { content: none; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona]::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Masky jsou tytez jako na detailu produktu (detail-extra.css, sekce 8). */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona="doprava"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona="sleva"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona="darek"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona="zvuk"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitek[data-ikona="video"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ===== 6) MOBIL ===== */ @media (max-width: 767px) { body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene) .products.products-block .p { padding: 10px; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene) .products.products-block .p a.name { font-size: 14px; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene) .products.products-block .p .price-final strong { font-size: 18px; } /* Mezi 321 a 339 px se KOUPIT do tlacitka nevesel (text 52 px, misto 49-53) a pretekal doprava ke srdicku. Mensi boky a mezera, flex drzi text uprostred, i kdyby pretekl. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .p-tools { gap: 8px; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .add-to-cart-button { display: flex; align-items: center; justify-content: center; padding: 11px 4px; letter-spacing: .02em; white-space: nowrap; } /* Klient 22. 10.: horni stitky 4 px od horni i leve cary karty jako na PC (fotka je od ni 15 px), reproduktor v ose pod nimi. Reproduktor ma inline styl z prehravani_zvuku_v_kategorii.js, proto !important. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p a.image > .flags-default { top: -10px; left: -10px; } body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .custom-sound-icon-wrapper { left: -10px !important; } /* ----- MOBIL: ZPET NA ROZVRZENI SABLONY ----- Klient 21. 10.: na telefonu pilulky zabiraly celou fotku. Vraci se puvodni rozlozeni sablony - **Zvuk a Video vlevo nahore** (`.flags-default`), **sleva a doprava jako prouzek pod fotkou** (`.flags-extra`, 165 px pres celou sirku karty). Zustava jen nova **barva**: podklad i text jako na detailu produktu, misto syte zelene a cervene. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .ho-k-stitky { display: none; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p :is(.flags-default, .flags-extra) { display: block !important; } /* Klient 21. 10.: prouzek zasahoval 5 px do nazvu, zvednuto o 6 px. */ body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene):not(#colorbox) .products.products-block .p .flags-extra { transform: translateY(-6px); } /* Barva se pocita ze stejneho zdroje jako u pilulek: `--ho-stitek` nese puvodni barvu vlajky, ktera se zesvetli na podklad a ztmavi na text. **Pravidlo smi platit az pro vlajky s `data-ho-hotovo`** - ten atribut dava kategorie-extra.js az pote, co si puvodni barvu precetl. Bez te podminky precetl uz prebarvenou hodnotu a zeleny prouzek vysel temer bily (`srgb 0.994 0.993`). */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p :is(.flags-default, .flags-extra) .flag[data-ho-hotovo] { background: color-mix(in srgb, var(--ho-stitek, var(--color-primary, #B5A264)) 14%, #fff) !important; color: color-mix(in srgb, var(--ho-stitek, var(--color-primary, #B5A264)) 78%, #000) !important; font-weight: 600; } /* Klient 21. 10.: vsechny stitky stejne male jako "Doprava zdarma" (pismo 9 px, vyska 16). Sleva mela 12 px, vlajky vlevo nahore 13 px. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p :is(.flags-default, .flags-extra) .flag, :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p :is(.flags-default, .flags-extra) .flag *:not([class*="icon"]) { font-size: 9px !important; line-height: 1.1 !important; } :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .flags-default .flag { padding: 3px 6px !important; } /* "Akce" se neukazuje nikde - v mobilnim rozvrzeni uz ji neschovava JS, protoze vlajky zustavaji na miste. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .flag-action { display: none !important; } /* Stitek "Oblibene" dosazuje dkLab po kliku na srdicko - je to stav tlacitka, ne vlastnost produktu. */ :is(body:is(.type-category, .type-search, .type-manufacturer-detail, .in-oblibene), #colorbox) .products.products-block .p .dkLabFavFlagProduct { display: none !important; } } /* ===== 6) STRANKA OBLIBENYCH - CO MA NAVIC ===== Karty vykresluje dkLab a maji stejny markup jako ve vypisech, takze podobu prebiraji z pravidel vyse. Dve veci tam ale vypisy nemaji: ovladac mnozstvi vedle tlacitka a krizek pro odstraneni z oblibenych. */ body.in-oblibene .products .p { position: relative; } /* Tlacitko stalo vedle menicky a bylo uzke (90 px). Menicka si drzi svou sirku, tlacitko zabere zbytek radky jako KOUPIT ve vypisech. */ body.in-oblibene .products .p .p-tools { display: flex; align-items: stretch; gap: 10px; width: 100%; } body.in-oblibene .products .p .p-tools form.quantity-form { flex: none; } /* Tlacitko je tu `.btn-cart` od doplnku dkLab, ne `.add-to-cart-button` jako ve vypisech - nese si vlastni tmavsi zlatou a bily text. Srovnano se zbytkem webu: zlata z `--color-primary` a tmavy text, stejne jako v kosiku u "Nezapomneli jste oblibeny produkt". Sipku v `::before` sablona kresli taky, vypina se. */ body.in-oblibene .products .p .p-tools :is(.btn-cart, .btn, a[class*="cart"]) { flex: 1 1 auto; justify-content: center; width: auto; padding: 11px 10px; border: 0 !important; border-radius: 0 !important; background: var(--color-primary, #B5A264) !important; color: var(--rd-ink, #1a1a1a) !important; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: background .2s ease; } body.in-oblibene .products .p .p-tools :is(.btn-cart, .btn, a[class*="cart"]):hover { background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important; } body.in-oblibene .products .p .p-tools :is(.btn-cart, .btn, a[class*="cart"])::before { content: none; } /* Krizek "Odstranit" sedel nad fotkou a odsouval ji o cely radek. Patri do praveho horniho rohu karty. Cervenou si nese doplnek. */ body.in-oblibene .products .p .dkLabFavDeleteBtn { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; } /* Na mobilu je karta 165 px siroka a menicka z ni ukousla tolik, ze na tlacitko zbylo 72 px. Pod 768 px proto jde tlacitko na vlastni radku pres celou sirku karty. */ @media (max-width: 767px) { body.in-oblibene .products .p .p-tools { flex-wrap: wrap; } body.in-oblibene .products .p .p-tools :is(.btn-cart, .btn, a[class*="cart"]) { flex: 1 0 100%; } } /* Tlacitko "Otevrit filtr": sablona ho pod kurzorem prebarvi na zelenou #32cb00. Ztmavena zlata jako u KOUPIT. */ body:is(.type-category, .type-search, .type-manufacturer-detail):not(#colorbox) .filters-unveil-button-wrapper .unveil-button:is(:hover, :focus, :active) { background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important; border-color: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important; color: #fff !important; }