@charset "UTF-8"; /* ========================================================== ŠPONGR.cz - vlastní styly (Shoptet, šablona Apollo) Prefix vlastních tříd: seo- Vkládat do šablony. OBSAH 1) SEO- ZÁKLAD: brandové proměnné 2) SEO-INFO: infoboxy (tip, poznámka, varování, důležité) 3) SEO-BTN + SEO-CTA: tlačítka, CTA odkaz, pruh a banner 4) SEO-LIST: výčty, checklist, kroky, pro/proti 5) SEO-FAQ: sbalovací otázky a odpovědi 6) SEO-TRUST: trust / USP box 7) SEO-GUIDE: průvodce výběrem s číslovanými kroky 8) SEO-PILLS: pilulky a rozcestníky 9) SKRYTÍ POLOŽKY V MENU (starší pravidlo) 10) SEO-IMGBUTTONS: buttony s obrázkem (starší komponenta) ========================================================== */ /* ========================================================== 1) SEO- ZÁKLAD: brandové proměnné Špongr.cz Vložit do jen jednou, využívají je všechny komponenty. ========================================================== */ :root { --seo-primary: #bfaf88; /* konverzní barva, barva šablony 1 */ --seo-hover: #103b79; /* konverzní po najetí, barva šablony 2 */ --seo-soft: #f5f1ea; /* barva šablony 3 a 4, pozadí a bordery */ --seo-text: #1D1D1D; /* text */ --seo-white: #ffffff; --seo-radius: 12px; } /* ========================================================== 2) SEO-INFO: infobox (tip, poznámka, varování, důležité) Nadpis + 1 až 3 věty textu, ikona vlevo přes ::before. Varianty se liší pozadím, rámečkem a ikonou. Varianty mění jen CSS proměnné, takže je nepřebijí duplicitní selektory s vyšší specificitou (#content apod.). ========================================================== */ /* Výchozí hodnoty proměnných (desktop) */ .seo-info { --seo-info-pad-y: 18px; --seo-info-pad-x: 20px; --seo-info-gap: 16px; --seo-info-icon-size: 36px; --seo-info-icon-glyph: 20px; --seo-info-icon-top: 11px; } /* Box */ .seo-info, #content .seo-info, .category-perex .seo-info, .category__secondDescription .seo-info, .news-item-detail .seo-info, .basic-description .seo-info { position: relative; display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 24px 0 !important; padding: var(--seo-info-pad-y) var(--seo-info-pad-x) var(--seo-info-pad-y) calc(var(--seo-info-pad-x) + var(--seo-info-icon-size) + var(--seo-info-gap)) !important; background: var(--seo-info-bg, var(--seo-soft)); border: 1px solid var(--seo-info-border, var(--seo-soft)); border-radius: var(--seo-radius); color: var(--seo-info-color, var(--seo-text)); font-family: inherit; font-size: inherit; line-height: 1.6; text-align: left; } /* Ikona */ .seo-info::before, #content .seo-info::before, .category-perex .seo-info::before, .category__secondDescription .seo-info::before, .news-item-detail .seo-info::before, .basic-description .seo-info::before { content: ""; display: var(--seo-info-icon-display, block); position: absolute; top: var(--seo-info-icon-top); left: var(--seo-info-pad-x); width: var(--seo-info-icon-size); height: var(--seo-info-icon-size); border-radius: 50%; background-color: var(--seo-info-icon-bg, var(--seo-white)); background-image: var(--seo-info-icon, none); background-repeat: no-repeat; background-position: center; background-size: var(--seo-info-icon-glyph) var(--seo-info-icon-glyph); } /* Nadpis (p, h3 nebo h4 s třídou seo-info__title) */ .seo-info .seo-info__title, #content .seo-info .seo-info__title, .category-perex .seo-info .seo-info__title, .category__secondDescription .seo-info .seo-info__title, .news-item-detail .seo-info .seo-info__title, .basic-description .seo-info .seo-info__title { display: block; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: inherit; font-size: inherit !important; font-weight: 700; line-height: 1.4; letter-spacing: normal; text-transform: none; color: var(--seo-info-title, var(--seo-text)) !important; } /* Text */ .seo-info .seo-info__text, #content .seo-info .seo-info__text, .category-perex .seo-info .seo-info__text, .category__secondDescription .seo-info .seo-info__text, .news-item-detail .seo-info .seo-info__text, .basic-description .seo-info .seo-info__text { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit !important; } .seo-info .seo-info__text + .seo-info__text, #content .seo-info .seo-info__text + .seo-info__text, .category-perex .seo-info .seo-info__text + .seo-info__text, .category__secondDescription .seo-info .seo-info__text + .seo-info__text, .news-item-detail .seo-info .seo-info__text + .seo-info__text, .basic-description .seo-info .seo-info__text + .seo-info__text { margin-top: 8px !important; } /* Tučný text zůstává součástí věty */ .seo-info strong, .seo-info b, #content .seo-info strong, #content .seo-info b, .category-perex .seo-info strong, .category__secondDescription .seo-info strong, .news-item-detail .seo-info strong, .basic-description .seo-info strong { display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } /* Odkazy */ .seo-info a, #content .seo-info a, .category-perex .seo-info a, .category__secondDescription .seo-info a, .news-item-detail .seo-info a, .basic-description .seo-info a { color: var(--seo-info-link, var(--seo-hover)) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; transition: color .2s ease, text-decoration-color .2s ease; } .seo-info a:hover, .seo-info a:focus, #content .seo-info a:hover, .category-perex .seo-info a:hover, .category__secondDescription .seo-info a:hover, .news-item-detail .seo-info a:hover, .basic-description .seo-info a:hover { color: var(--seo-info-link-hover, var(--seo-text)) !important; text-decoration-color: transparent !important; } /* ---------- VARIANTY (mění jen proměnné) ---------- */ /* Poznámka / neutrální info (výchozí vzhled) */ .seo-info--note { --seo-info-bg: var(--seo-soft); --seo-info-border: var(--seo-soft); --seo-info-icon-bg: var(--seo-white); --seo-info-icon: url("data:image/svg+xml;utf8,"); } /* Tip */ .seo-info--tip { --seo-info-bg: var(--seo-white); --seo-info-border: var(--seo-primary); --seo-info-icon-bg: var(--seo-primary); --seo-info-icon: url("data:image/svg+xml;utf8,"); } /* Varování */ .seo-info--warning { --seo-info-bg: var(--seo-white); --seo-info-border: var(--seo-hover); --seo-info-title: var(--seo-hover); --seo-info-icon-bg: var(--seo-hover); --seo-info-icon: url("data:image/svg+xml;utf8,"); } /* Důležité upozornění */ .seo-info--important { --seo-info-bg: var(--seo-hover); --seo-info-border: var(--seo-hover); --seo-info-color: var(--seo-white); --seo-info-title: var(--seo-primary); --seo-info-link: var(--seo-primary); --seo-info-link-hover: var(--seo-white); --seo-info-icon-bg: var(--seo-primary); --seo-info-icon: url("data:image/svg+xml;utf8,"); } /* Modifikátor: bez ikony (kombinuje se s libovolnou variantou) */ .seo-info.seo-info--plain { --seo-info-icon-display: none; --seo-info-icon-size: 0px; --seo-info-gap: 0px; } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-info { --seo-info-pad-y: 16px; --seo-info-pad-x: 16px; --seo-info-gap: 14px; --seo-info-icon-size: 32px; --seo-info-icon-glyph: 18px; --seo-info-icon-top: 12px; } } @media (max-width: 480px) { .seo-info { --seo-info-pad-y: 14px; --seo-info-pad-x: 14px; --seo-info-gap: 12px; --seo-info-icon-size: 28px; --seo-info-icon-glyph: 16px; --seo-info-icon-top: 12px; } .seo-info, #content .seo-info, .category-perex .seo-info, .category__secondDescription .seo-info, .news-item-detail .seo-info, .basic-description .seo-info { margin: 20px 0 !important; line-height: 1.55; } } /* ========================================================== 3) SEO-BTN + SEO-CTA: tlačítka, CTA odkaz, CTA pruh a banner Navazuje na tlačítka šablony: pilulka, zlatá s hoverem do modré, jemný stín. Boxy mají 12px rádius jako karty. ========================================================== */ /* ---------- 3.1) TEXTOVÝ CTA ODKAZ ---------- */ .seo-cta-link, #content .seo-cta-link, .category-perex .seo-cta-link, .category__secondDescription .seo-cta-link, .news-item-detail .seo-cta-link, .basic-description .seo-cta-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--seo-text) !important; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.4; text-decoration: underline !important; text-decoration-color: var(--seo-primary) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px; transition: color .2s ease, text-decoration-color .2s ease; } .seo-cta-link::after, #content .seo-cta-link::after, .category-perex .seo-cta-link::after, .category__secondDescription .seo-cta-link::after, .news-item-detail .seo-cta-link::after, .basic-description .seo-cta-link::after { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background-color: var(--seo-primary); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform .2s ease, background-color .2s ease; } .seo-cta-link:hover, .seo-cta-link:focus, #content .seo-cta-link:hover, .category-perex .seo-cta-link:hover, .category__secondDescription .seo-cta-link:hover, .news-item-detail .seo-cta-link:hover, .basic-description .seo-cta-link:hover { color: var(--seo-hover) !important; text-decoration-color: var(--seo-hover) !important; } .seo-cta-link:hover::after, .seo-cta-link:focus::after { background-color: var(--seo-hover); transform: translateX(3px); } /* ---------- 3.2) TLAČÍTKA ---------- */ /* Obal pro více tlačítek vedle sebe */ .seo-btns, #content .seo-btns, .category-perex .seo-btns, .category__secondDescription .seo-btns, .news-item-detail .seo-btns, .basic-description .seo-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 !important; padding: 0 !important; } /* Základ tlačítka */ .seo-btn, #content .seo-btn, .category-perex .seo-btn, .category__secondDescription .seo-btn, .news-item-detail .seo-btn, .basic-description .seo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 48px; margin: 0 !important; padding: 12px 28px !important; border: 1px solid var(--seo-btn-border, var(--seo-primary)) !important; border-radius: 999px; background: var(--seo-btn-bg, var(--seo-primary)) !important; color: var(--seo-btn-color, var(--seo-white)) !important; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none !important; box-shadow: var(--seo-btn-shadow, 0 6px 16px rgba(29, 29, 29, .12)); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .seo-btn:hover, .seo-btn:focus, #content .seo-btn:hover, .category-perex .seo-btn:hover, .category__secondDescription .seo-btn:hover, .news-item-detail .seo-btn:hover, .basic-description .seo-btn:hover { background: var(--seo-btn-hover-bg, var(--seo-hover)) !important; border-color: var(--seo-btn-hover-bg, var(--seo-hover)) !important; color: var(--seo-btn-hover-color, var(--seo-white)) !important; text-decoration: none !important; transform: translateY(-1px); } .seo-btn:focus-visible, .seo-cta-link:focus-visible { outline: 2px solid var(--seo-hover); outline-offset: 3px; } /* Ikona před textem (telefon, e-mail) a šipka za textem. Barva se bere z textu, takže se mění i při hoveru. */ .seo-btn::before, .seo-btn::after, #content .seo-btn::before, #content .seo-btn::after, .category-perex .seo-btn::before, .category-perex .seo-btn::after, .category__secondDescription .seo-btn::before, .category__secondDescription .seo-btn::after, .news-item-detail .seo-btn::before, .news-item-detail .seo-btn::after, .basic-description .seo-btn::before, .basic-description .seo-btn::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: transform .2s ease; } .seo-btn::before, #content .seo-btn::before, .category-perex .seo-btn::before, .category__secondDescription .seo-btn::before, .news-item-detail .seo-btn::before, .basic-description .seo-btn::before { display: var(--seo-btn-icon-display, none); -webkit-mask-image: var(--seo-btn-icon, none); mask-image: var(--seo-btn-icon, none); } .seo-btn::after, #content .seo-btn::after, .category-perex .seo-btn::after, .category__secondDescription .seo-btn::after, .news-item-detail .seo-btn::after, .basic-description .seo-btn::after { display: var(--seo-btn-arrow-display, none); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .seo-btn:hover::after { transform: translateX(3px); } /* Varianty tlačítek */ .seo-btn--outline { --seo-btn-bg: transparent; --seo-btn-border: var(--seo-primary); --seo-btn-color: var(--seo-text); --seo-btn-shadow: none; --seo-btn-hover-bg: var(--seo-primary); --seo-btn-hover-color: var(--seo-white); } .seo-btn--dark { --seo-btn-bg: var(--seo-hover); --seo-btn-border: var(--seo-hover); --seo-btn-hover-bg: var(--seo-primary); } .seo-btn--light { --seo-btn-bg: var(--seo-white); --seo-btn-border: var(--seo-white); --seo-btn-color: var(--seo-hover); --seo-btn-hover-bg: var(--seo-primary); --seo-btn-hover-color: var(--seo-white); } /* Modifikátory ikon */ .seo-btn--arrow { --seo-btn-arrow-display: block; } .seo-btn--phone { --seo-btn-icon-display: block; --seo-btn-icon: url("data:image/svg+xml;utf8,"); } .seo-btn--mail { --seo-btn-icon-display: block; --seo-btn-icon: url("data:image/svg+xml;utf8,"); } /* ---------- 3.3) CTA BOX / PRUH / BANNER ---------- */ /* Výchozí hodnoty proměnných */ .seo-cta { --seo-cta-pad: 24px 28px; --seo-cta-dir: row; --seo-cta-align: center; --seo-cta-text-align: left; --seo-cta-actions-justify: flex-end; --seo-cta-icon-size: 56px; --seo-cta-icon-glyph: 26px; } .seo-cta, #content .seo-cta, .category-perex .seo-cta, .category__secondDescription .seo-cta, .news-item-detail .seo-cta, .basic-description .seo-cta { display: flex; flex-direction: var(--seo-cta-dir); align-items: var(--seo-cta-align); gap: 20px 28px; box-sizing: border-box; width: 100%; margin: 32px 0 !important; padding: var(--seo-cta-pad) !important; background: var(--seo-cta-bg, var(--seo-soft)); border: 1px solid var(--seo-cta-border, var(--seo-soft)); border-radius: var(--seo-radius); box-shadow: var(--seo-cta-shadow, none); color: var(--seo-cta-color, var(--seo-text)); font-family: inherit; font-size: inherit; line-height: 1.6; text-align: var(--seo-cta-text-align); } /* Ikona v kruhu */ .seo-cta::before, #content .seo-cta::before, .category-perex .seo-cta::before, .category__secondDescription .seo-cta::before, .news-item-detail .seo-cta::before, .basic-description .seo-cta::before { content: ""; display: var(--seo-cta-icon-display, none); flex: 0 0 var(--seo-cta-icon-size); width: var(--seo-cta-icon-size); height: var(--seo-cta-icon-size); border-radius: 50%; background-color: var(--seo-cta-icon-bg, var(--seo-white)); background-image: var(--seo-cta-icon, none); background-repeat: no-repeat; background-position: center; background-size: var(--seo-cta-icon-glyph) var(--seo-cta-icon-glyph); } .seo-cta .seo-cta__body, #content .seo-cta .seo-cta__body, .category-perex .seo-cta .seo-cta__body, .category__secondDescription .seo-cta .seo-cta__body, .news-item-detail .seo-cta .seo-cta__body, .basic-description .seo-cta .seo-cta__body { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; } .seo-cta .seo-cta__title, #content .seo-cta .seo-cta__title, .category-perex .seo-cta .seo-cta__title, .category__secondDescription .seo-cta .seo-cta__title, .news-item-detail .seo-cta .seo-cta__title, .basic-description .seo-cta .seo-cta__title { display: block; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: inherit; font-size: var(--seo-cta-title-size, 1.15em) !important; font-weight: 700; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--seo-cta-title, var(--seo-text)) !important; } .seo-cta .seo-cta__text, #content .seo-cta .seo-cta__text, .category-perex .seo-cta .seo-cta__text, .category__secondDescription .seo-cta .seo-cta__text, .news-item-detail .seo-cta .seo-cta__text, .basic-description .seo-cta .seo-cta__text { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit !important; } .seo-cta strong, .seo-cta b, #content .seo-cta strong, .category-perex .seo-cta strong, .category__secondDescription .seo-cta strong, .news-item-detail .seo-cta strong, .basic-description .seo-cta strong { display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } .seo-cta .seo-cta__actions, #content .seo-cta .seo-cta__actions, .category-perex .seo-cta .seo-cta__actions, .category__secondDescription .seo-cta .seo-cta__actions, .news-item-detail .seo-cta .seo-cta__actions, .basic-description .seo-cta .seo-cta__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: var(--seo-cta-actions-justify); gap: 12px; margin: 0 !important; padding: 0 !important; } /* Varianty CTA boxu */ /* Bílý box s rámečkem a stínem jako karty produktů */ .seo-cta--outline { --seo-cta-bg: var(--seo-white); --seo-cta-border: var(--seo-soft); --seo-cta-shadow: 0 8px 24px rgba(29, 29, 29, .06); --seo-cta-icon-bg: var(--seo-soft); } /* Výrazný modrý banner */ .seo-cta--strong { --seo-cta-bg: var(--seo-hover); --seo-cta-border: var(--seo-hover); --seo-cta-color: var(--seo-white); --seo-cta-title: var(--seo-primary); --seo-cta-title-size: 1.35em; --seo-cta-icon-bg: var(--seo-primary); } /* Na střed pod sebou (konec článku) */ .seo-cta.seo-cta--center { --seo-cta-dir: column; --seo-cta-align: center; --seo-cta-text-align: center; --seo-cta-actions-justify: center; } /* Ikony CTA boxu (kombinují se s --icon) */ .seo-cta--icon { --seo-cta-icon-display: block; } .seo-cta--ico-phone { --seo-cta-icon: url("data:image/svg+xml;utf8,"); } .seo-cta--ico-mail { --seo-cta-icon: url("data:image/svg+xml;utf8,"); } .seo-cta--ico-store { --seo-cta-icon: url("data:image/svg+xml;utf8,"); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-cta { --seo-cta-pad: 20px; --seo-cta-dir: column; --seo-cta-align: flex-start; --seo-cta-actions-justify: flex-start; --seo-cta-icon-size: 48px; --seo-cta-icon-glyph: 22px; } .seo-cta .seo-cta__actions, #content .seo-cta .seo-cta__actions, .category-perex .seo-cta .seo-cta__actions, .category__secondDescription .seo-cta .seo-cta__actions, .news-item-detail .seo-cta .seo-cta__actions, .basic-description .seo-cta .seo-cta__actions { width: 100%; } } @media (max-width: 480px) { .seo-cta { --seo-cta-pad: 18px 16px; } .seo-cta, #content .seo-cta, .category-perex .seo-cta, .category__secondDescription .seo-cta, .news-item-detail .seo-cta, .basic-description .seo-cta { margin: 24px 0 !important; } /* Tlačítka v CTA boxu a v obalu seo-btns na celou šířku */ .seo-cta .seo-cta__actions, .seo-btns, #content .seo-btns, .category-perex .seo-btns, .category__secondDescription .seo-btns, .news-item-detail .seo-btns, .basic-description .seo-btns { flex-direction: column; align-items: stretch; } .seo-cta .seo-btn, .seo-btns .seo-btn { width: 100%; padding: 12px 20px !important; } } /* ========================================================== 4) SEO-LIST: výčty a odrážky Typy: tečky (výchozí), --check (výhody, obsah balení), --steps (číslovaný postup v tmavě modré, na
    ), --pros / --cons (plusy a mínusy). Modifikátor --boxed vloží seznam do béžového panelu. Obal .seo-proscons dá výhody a nevýhody do dvou sloupců. Položka může být jen text, nebo tučný titulek + popis. Velikosti značek jsou v em, takže se samy přizpůsobí velikosti písma a vždy sedí na první řádek textu. ========================================================== */ /* ---------- SEZNAM (ul / ol) ---------- */ .seo-list, #content .seo-list, .category-perex .seo-list, .category__secondDescription .seo-list, .news-item-detail .seo-list, .basic-description .seo-list { display: block; box-sizing: border-box; margin: 20px 0 !important; padding: var(--seo-list-pad, 0) !important; list-style: none !important; background: var(--seo-list-bg, none) !important; border-radius: var(--seo-radius); counter-reset: seo-step; font-family: inherit; font-size: inherit; line-height: 1.6; color: inherit; } /* ---------- POLOŽKA ---------- */ .seo-list > li, #content .seo-list > li, .category-perex .seo-list > li, .category__secondDescription .seo-list > li, .news-item-detail .seo-list > li, .basic-description .seo-list > li { position: relative !important; display: block; box-sizing: border-box; margin: 0 !important; padding: 0 0 0 var(--seo-list-indent, 1.75em) !important; list-style: none !important; background: none !important; border: 0; font-size: inherit; line-height: 1.6; text-indent: 0; color: inherit; } .seo-list > li + li, #content .seo-list > li + li, .category-perex .seo-list > li + li, .category__secondDescription .seo-list > li + li, .news-item-detail .seo-list > li + li, .basic-description .seo-list > li + li { margin-top: var(--seo-list-gap, 10px) !important; } .seo-list > li::marker, #content .seo-list > li::marker, .category-perex .seo-list > li::marker, .category__secondDescription .seo-list > li::marker, .news-item-detail .seo-list > li::marker, .basic-description .seo-list > li::marker { content: none !important; } /* ---------- ZNAČKA (tečka / ikona / číslo) ---------- */ .seo-list > li::before, #content .seo-list > li::before, .category-perex .seo-list > li::before, .category__secondDescription .seo-list > li::before, .news-item-detail .seo-list > li::before, .basic-description .seo-list > li::before { content: "" !important; display: block !important; position: absolute !important; top: var(--seo-list-marker-top, calc(.8em - 4px)) !important; left: var(--seo-list-marker-left, .3em) !important; width: var(--seo-list-marker-size, 8px) !important; height: var(--seo-list-marker-size, 8px) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background-color: var(--seo-list-marker-bg, var(--seo-primary)) !important; background-image: var(--seo-list-marker-img, none) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 62% 62% !important; transform: none !important; font-family: inherit; font-size: inherit; line-height: 1; } /* ---------- TITULEK A POPIS POLOŽKY ---------- */ .seo-list .seo-list__title, #content .seo-list .seo-list__title, .category-perex .seo-list .seo-list__title, .category__secondDescription .seo-list .seo-list__title, .news-item-detail .seo-list .seo-list__title, .basic-description .seo-list .seo-list__title { display: block !important; margin: 0 !important; padding: 0 !important; font-family: inherit; font-size: inherit !important; font-weight: 700; line-height: inherit !important; color: var(--seo-list-title, var(--seo-text)) !important; } .seo-list .seo-list__text, #content .seo-list .seo-list__text, .category-perex .seo-list .seo-list__text, .category__secondDescription .seo-list .seo-list__text, .news-item-detail .seo-list .seo-list__text, .basic-description .seo-list .seo-list__text { display: block; margin: 2px 0 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit; } /* Tučný text v běžné větě zůstává součástí řádku */ .seo-list strong, .seo-list b, #content .seo-list strong, .category-perex .seo-list strong, .category__secondDescription .seo-list strong, .news-item-detail .seo-list strong, .basic-description .seo-list strong { display: inline; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } /* ---------- TYP: CHECKLIST (výhody, obsah balení) ---------- */ .seo-list--check { --seo-list-indent: 2em; --seo-list-marker-size: 1.25em; --seo-list-marker-top: .175em; --seo-list-marker-left: 0; --seo-list-marker-img: url("data:image/svg+xml;utf8,"); } /* ---------- TYP: ČÍSLOVANÝ POSTUP v tmavě modré (na
      ) ---------- */ .seo-list--steps { --seo-list-indent: 2.6em; --seo-list-gap: 14px; --seo-list-marker-size: 1.75em; --seo-list-marker-top: -.075em; --seo-list-marker-left: 0; --seo-list-marker-bg: var(--seo-hover); --seo-list-title: var(--seo-hover); } .seo-list--steps > li { counter-increment: seo-step; } .seo-list--steps > li::before, #content .seo-list--steps > li::before, .category-perex .seo-list--steps > li::before, .category__secondDescription .seo-list--steps > li::before, .news-item-detail .seo-list--steps > li::before, .basic-description .seo-list--steps > li::before { content: counter(seo-step) !important; color: var(--seo-white) !important; font-weight: 700 !important; line-height: var(--seo-list-marker-size) !important; text-align: center !important; } /* ---------- TYP: PRO / PROTI ---------- */ .seo-list--pros, .seo-list--cons { --seo-list-indent: 2em; --seo-list-marker-size: 1.25em; --seo-list-marker-top: .175em; --seo-list-marker-left: 0; } /* Plus: zlatý kruh, bílé plus */ .seo-list--pros { --seo-list-marker-bg: var(--seo-primary); --seo-list-marker-img: url("data:image/svg+xml;utf8,"); } /* Mínus: béžový kruh, tmavé mínus */ .seo-list--cons { --seo-list-marker-bg: var(--seo-soft); --seo-list-marker-img: url("data:image/svg+xml;utf8,"); } /* V béžovém panelu dostane mínus bílý kruh, aby nezanikl */ .seo-list--cons.seo-list--boxed { --seo-list-marker-bg: var(--seo-white); } /* Obal pro výhody a nevýhody ve dvou sloupcích */ .seo-proscons, #content .seo-proscons, .category-perex .seo-proscons, .category__secondDescription .seo-proscons, .news-item-detail .seo-proscons, .basic-description .seo-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 !important; padding: 0 !important; } .seo-proscons .seo-proscons__col, #content .seo-proscons .seo-proscons__col, .category-perex .seo-proscons .seo-proscons__col, .category__secondDescription .seo-proscons .seo-proscons__col, .news-item-detail .seo-proscons .seo-proscons__col, .basic-description .seo-proscons .seo-proscons__col { box-sizing: border-box; min-width: 0; margin: 0 !important; padding: 20px 22px !important; background: var(--seo-white); border: 1px solid var(--seo-soft); border-radius: var(--seo-radius); box-shadow: 0 8px 24px rgba(29, 29, 29, .06); } .seo-proscons .seo-proscons__title, #content .seo-proscons .seo-proscons__title, .category-perex .seo-proscons .seo-proscons__title, .category__secondDescription .seo-proscons .seo-proscons__title, .news-item-detail .seo-proscons .seo-proscons__title, .basic-description .seo-proscons .seo-proscons__title { display: block; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: inherit; font-size: 1.1em !important; font-weight: 700; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--seo-text) !important; } .seo-proscons .seo-list, #content .seo-proscons .seo-list, .category-perex .seo-proscons .seo-list, .category__secondDescription .seo-proscons .seo-list, .news-item-detail .seo-proscons .seo-list, .basic-description .seo-proscons .seo-list { margin: 0 !important; } /* ---------- MODIFIKÁTOR: BÉŽOVÝ PANEL ---------- */ .seo-list--boxed { --seo-list-pad: 20px 24px; --seo-list-bg: var(--seo-soft); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-list.seo-list--boxed { --seo-list-pad: 18px 20px; } } @media (max-width: 640px) { .seo-proscons, #content .seo-proscons, .category-perex .seo-proscons, .category__secondDescription .seo-proscons, .news-item-detail .seo-proscons, .basic-description .seo-proscons { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 480px) { .seo-list.seo-list--boxed { --seo-list-pad: 16px; } .seo-list.seo-list--steps { --seo-list-gap: 12px; } .seo-proscons .seo-proscons__col, #content .seo-proscons .seo-proscons__col, .category-perex .seo-proscons .seo-proscons__col, .category__secondDescription .seo-proscons .seo-proscons__col, .news-item-detail .seo-proscons .seo-proscons__col, .basic-description .seo-proscons .seo-proscons__col { padding: 16px !important; } } /* ========================================================== 5) SEO-FAQ: sbalovací otázky a odpovědi (čisté CSS,
      ) Varianty: karty (výchozí), --lines (minimalistické linky, celý blok odsazený od krajů obsahu). Ikona vpravo: béžový kruh s modrým plus, po otevření modrý kruh s bílým mínus. ========================================================== */ /* Výchozí hodnoty proměnných */ .seo-faq { --seo-faq-gap: 12px; --seo-faq-inset: 0px; --seo-faq-pad-x: 22px; --seo-faq-pad-y: 18px; --seo-faq-icon-size: 32px; --seo-faq-icon-glyph: 16px; } /* ---------- OBAL ---------- */ .seo-faq, #content .seo-faq, .category-perex .seo-faq, .category__secondDescription .seo-faq, .news-item-detail .seo-faq, .basic-description .seo-faq { display: flex; flex-direction: column; gap: var(--seo-faq-gap); box-sizing: border-box; width: auto; max-width: 100%; margin: 24px var(--seo-faq-inset) !important; padding: 0 !important; font-family: inherit; font-size: inherit; line-height: 1.6; color: inherit; } /* ---------- POLOŽKA (details) ---------- */ .seo-faq .seo-faq__item, #content .seo-faq .seo-faq__item, .category-perex .seo-faq .seo-faq__item, .category__secondDescription .seo-faq .seo-faq__item, .news-item-detail .seo-faq .seo-faq__item, .basic-description .seo-faq .seo-faq__item { display: block; box-sizing: border-box; margin: 0 !important; padding: 0 !important; background: var(--seo-faq-item-bg, var(--seo-white)); border: var(--seo-faq-item-border, 1px solid var(--seo-soft)); border-bottom: var(--seo-faq-item-border-bottom, 1px solid var(--seo-soft)); border-radius: var(--seo-faq-item-radius, var(--seo-radius)); box-shadow: var(--seo-faq-item-shadow, 0 8px 24px rgba(29, 29, 29, .06)); overflow: hidden; transition: border-color .2s ease; } .seo-faq .seo-faq__item[open], #content .seo-faq .seo-faq__item[open], .category-perex .seo-faq .seo-faq__item[open], .category__secondDescription .seo-faq .seo-faq__item[open], .news-item-detail .seo-faq .seo-faq__item[open], .basic-description .seo-faq .seo-faq__item[open] { border-color: var(--seo-faq-open-border, var(--seo-primary)); } /* ---------- OTÁZKA (summary) ---------- */ .seo-faq .seo-faq__q, #content .seo-faq .seo-faq__q, .category-perex .seo-faq .seo-faq__q, .category__secondDescription .seo-faq .seo-faq__q, .news-item-detail .seo-faq .seo-faq__q, .basic-description .seo-faq .seo-faq__q { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; min-height: 44px; margin: 0 !important; padding: var(--seo-faq-pad-y) var(--seo-faq-pad-x) !important; list-style: none !important; background: none !important; font-family: inherit; font-size: inherit; font-weight: 700; line-height: 1.45; color: var(--seo-text) !important; cursor: pointer; user-select: none; transition: color .2s ease; } /* Skrytí výchozí šipky prohlížeče */ .seo-faq .seo-faq__q::-webkit-details-marker, #content .seo-faq .seo-faq__q::-webkit-details-marker, .category-perex .seo-faq .seo-faq__q::-webkit-details-marker, .category__secondDescription .seo-faq .seo-faq__q::-webkit-details-marker, .news-item-detail .seo-faq .seo-faq__q::-webkit-details-marker, .basic-description .seo-faq .seo-faq__q::-webkit-details-marker { display: none; } .seo-faq .seo-faq__q::marker, #content .seo-faq .seo-faq__q::marker, .category-perex .seo-faq .seo-faq__q::marker, .category__secondDescription .seo-faq .seo-faq__q::marker, .news-item-detail .seo-faq .seo-faq__q::marker, .basic-description .seo-faq .seo-faq__q::marker { content: none !important; } .seo-faq .seo-faq__q::before, #content .seo-faq .seo-faq__q::before, .category-perex .seo-faq .seo-faq__q::before, .category__secondDescription .seo-faq .seo-faq__q::before, .news-item-detail .seo-faq .seo-faq__q::before, .basic-description .seo-faq .seo-faq__q::before { content: none !important; display: none !important; } /* Hover a focus */ .seo-faq .seo-faq__q:hover, #content .seo-faq .seo-faq__q:hover, .category-perex .seo-faq .seo-faq__q:hover, .category__secondDescription .seo-faq .seo-faq__q:hover, .news-item-detail .seo-faq .seo-faq__q:hover, .basic-description .seo-faq .seo-faq__q:hover { color: var(--seo-hover) !important; } .seo-faq .seo-faq__q:focus-visible { outline: 2px solid var(--seo-hover); outline-offset: -2px; border-radius: var(--seo-faq-item-radius, var(--seo-radius)); } /* Ikona plus / mínus */ .seo-faq .seo-faq__q::after, #content .seo-faq .seo-faq__q::after, .category-perex .seo-faq .seo-faq__q::after, .category__secondDescription .seo-faq .seo-faq__q::after, .news-item-detail .seo-faq .seo-faq__q::after, .basic-description .seo-faq .seo-faq__q::after { content: "" !important; display: block !important; flex: 0 0 var(--seo-faq-icon-size); width: var(--seo-faq-icon-size); height: var(--seo-faq-icon-size); margin: 0 !important; border-radius: 50%; background-color: var(--seo-soft); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: var(--seo-faq-icon-glyph) var(--seo-faq-icon-glyph); transition: transform .25s ease, background-color .2s ease; } .seo-faq .seo-faq__item[open] > .seo-faq__q::after, #content .seo-faq .seo-faq__item[open] > .seo-faq__q::after, .category-perex .seo-faq .seo-faq__item[open] > .seo-faq__q::after, .category__secondDescription .seo-faq .seo-faq__item[open] > .seo-faq__q::after, .news-item-detail .seo-faq .seo-faq__item[open] > .seo-faq__q::after, .basic-description .seo-faq .seo-faq__item[open] > .seo-faq__q::after { background-color: var(--seo-hover); background-image: url("data:image/svg+xml;utf8,"); transform: rotate(180deg); } /* Otevřená otázka zůstává v modré */ .seo-faq .seo-faq__item[open] > .seo-faq__q, #content .seo-faq .seo-faq__item[open] > .seo-faq__q, .category-perex .seo-faq .seo-faq__item[open] > .seo-faq__q, .category__secondDescription .seo-faq .seo-faq__item[open] > .seo-faq__q, .news-item-detail .seo-faq .seo-faq__item[open] > .seo-faq__q, .basic-description .seo-faq .seo-faq__item[open] > .seo-faq__q { color: var(--seo-hover) !important; } /* ---------- ODPOVĚĎ ---------- */ .seo-faq .seo-faq__a, #content .seo-faq .seo-faq__a, .category-perex .seo-faq .seo-faq__a, .category__secondDescription .seo-faq .seo-faq__a, .news-item-detail .seo-faq .seo-faq__a, .basic-description .seo-faq .seo-faq__a { box-sizing: border-box; margin: 0 !important; padding: 0 var(--seo-faq-pad-x) var(--seo-faq-pad-y) !important; font-size: inherit; line-height: 1.6; color: var(--seo-text); } .seo-faq .seo-faq__item[open] > .seo-faq__a { animation: seo-faq-in .25s ease; } @keyframes seo-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .seo-faq .seo-faq__a p, #content .seo-faq .seo-faq__a p, .category-perex .seo-faq .seo-faq__a p, .category__secondDescription .seo-faq .seo-faq__a p, .news-item-detail .seo-faq .seo-faq__a p, .basic-description .seo-faq .seo-faq__a p { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit; } .seo-faq .seo-faq__a p + p, #content .seo-faq .seo-faq__a p + p, .category-perex .seo-faq .seo-faq__a p + p, .category__secondDescription .seo-faq .seo-faq__a p + p, .news-item-detail .seo-faq .seo-faq__a p + p, .basic-description .seo-faq .seo-faq__a p + p { margin-top: 10px !important; } /* Výčet seo-list uvnitř odpovědi */ .seo-faq .seo-faq__a .seo-list, #content .seo-faq .seo-faq__a .seo-list, .category-perex .seo-faq .seo-faq__a .seo-list, .category__secondDescription .seo-faq .seo-faq__a .seo-list, .news-item-detail .seo-faq .seo-faq__a .seo-list, .basic-description .seo-faq .seo-faq__a .seo-list { margin: 12px 0 0 !important; } /* Tučný text zůstává součástí věty */ .seo-faq .seo-faq__a strong, .seo-faq .seo-faq__a b, #content .seo-faq .seo-faq__a strong, .category-perex .seo-faq .seo-faq__a strong, .category__secondDescription .seo-faq .seo-faq__a strong, .news-item-detail .seo-faq .seo-faq__a strong, .basic-description .seo-faq .seo-faq__a strong { display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } /* Odkazy v odpovědi */ .seo-faq .seo-faq__a a, #content .seo-faq .seo-faq__a a, .category-perex .seo-faq .seo-faq__a a, .category__secondDescription .seo-faq .seo-faq__a a, .news-item-detail .seo-faq .seo-faq__a a, .basic-description .seo-faq .seo-faq__a a { color: var(--seo-hover) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; transition: color .2s ease, text-decoration-color .2s ease; } .seo-faq .seo-faq__a a:hover, #content .seo-faq .seo-faq__a a:hover, .category-perex .seo-faq .seo-faq__a a:hover, .category__secondDescription .seo-faq .seo-faq__a a:hover, .news-item-detail .seo-faq .seo-faq__a a:hover, .basic-description .seo-faq .seo-faq__a a:hover { color: var(--seo-text) !important; text-decoration-color: transparent !important; } /* ---------- VARIANTA: LINKY (celý blok odsazený od krajů) ---------- */ .seo-faq--lines { --seo-faq-gap: 0; --seo-faq-inset: 24px; --seo-faq-pad-x: 0; --seo-faq-item-bg: transparent; --seo-faq-item-border: 0; --seo-faq-item-radius: 0; --seo-faq-item-shadow: none; --seo-faq-open-border: var(--seo-soft); } .seo-faq--lines > .seo-faq__item:first-child { border-top: 1px solid var(--seo-soft) !important; } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-faq { --seo-faq-pad-x: 18px; --seo-faq-pad-y: 16px; --seo-faq-gap: 10px; } .seo-faq.seo-faq--lines { --seo-faq-inset: 16px; --seo-faq-pad-x: 0; --seo-faq-gap: 0; } } @media (max-width: 480px) { .seo-faq { --seo-faq-pad-x: 16px; --seo-faq-pad-y: 14px; --seo-faq-icon-size: 28px; --seo-faq-icon-glyph: 14px; } .seo-faq.seo-faq--lines { --seo-faq-inset: 8px; --seo-faq-pad-x: 0; } } /* ========================================================== 6) SEO-TRUST: trust / USP box "Proč nakupovat u nás" Úvod (nadtitulek, nadpis, text) + důvody s ikonou, krátkým nadpisem a jednou větou. Rozložení: řádek (výchozí, důvody v mřížce pod úvodem), --split (úvod vlevo, důvody pod sebou vpravo). Počet sloupců v řádku: výchozí 3, modifikátory --cols-2 a --cols-4. Ikony přes modifikátory seo-trust__item--*. ========================================================== */ /* Výchozí hodnoty proměnných (řádek, desktop) */ .seo-trust { --seo-trust-pad: 32px 36px; --seo-trust-grid: 1fr; --seo-trust-grid-gap: 24px; --seo-trust-cols: 3; --seo-trust-items-pad: 24px 0 0; --seo-trust-items-border: 1px solid rgba(191, 175, 136, .45); --seo-trust-items-gap: 24px 28px; --seo-trust-item-grid: 1fr; --seo-trust-item-justify: center; --seo-trust-item-align: center; --seo-trust-icon-row: auto; --seo-trust-icon-margin: 0 0 12px; --seo-trust-icon-size: 52px; --seo-trust-icon-glyph: 26px; --seo-trust-text-col: auto; } /* ---------- BOX ---------- */ .seo-trust, #content .seo-trust, .category-perex .seo-trust, .category__secondDescription .seo-trust, .news-item-detail .seo-trust, .basic-description .seo-trust { display: grid; grid-template-columns: var(--seo-trust-grid); gap: var(--seo-trust-grid-gap); align-items: start; box-sizing: border-box; width: 100%; margin: 32px 0 !important; padding: var(--seo-trust-pad) !important; background: var(--seo-trust-bg, var(--seo-soft)); border: var(--seo-trust-border, 0); border-radius: var(--seo-radius); box-shadow: var(--seo-trust-shadow, none); color: var(--seo-text); font-family: inherit; font-size: inherit; line-height: 1.6; } /* ---------- ÚVOD ---------- */ .seo-trust .seo-trust__intro, #content .seo-trust .seo-trust__intro, .category-perex .seo-trust .seo-trust__intro, .category__secondDescription .seo-trust .seo-trust__intro, .news-item-detail .seo-trust .seo-trust__intro, .basic-description .seo-trust .seo-trust__intro { min-width: 0; margin: 0 !important; padding: 0 !important; } .seo-trust .seo-trust__eyebrow, #content .seo-trust .seo-trust__eyebrow, .category-perex .seo-trust .seo-trust__eyebrow, .category__secondDescription .seo-trust .seo-trust__eyebrow, .news-item-detail .seo-trust .seo-trust__eyebrow, .basic-description .seo-trust .seo-trust__eyebrow { display: block; margin: 0 0 6px !important; padding: 0 !important; font-family: inherit; font-size: .78em !important; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--seo-hover) !important; } .seo-trust .seo-trust__title, #content .seo-trust .seo-trust__title, .category-perex .seo-trust .seo-trust__title, .category__secondDescription .seo-trust .seo-trust__title, .news-item-detail .seo-trust .seo-trust__title, .basic-description .seo-trust .seo-trust__title { display: block; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: inherit; font-size: 1.35em !important; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--seo-text) !important; } .seo-trust .seo-trust__text, #content .seo-trust .seo-trust__text, .category-perex .seo-trust .seo-trust__text, .category__secondDescription .seo-trust .seo-trust__text, .news-item-detail .seo-trust .seo-trust__text, .basic-description .seo-trust .seo-trust__text { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit; } .seo-trust .seo-trust__text + .seo-trust__text, #content .seo-trust .seo-trust__text + .seo-trust__text, .category-perex .seo-trust .seo-trust__text + .seo-trust__text, .category__secondDescription .seo-trust .seo-trust__text + .seo-trust__text, .news-item-detail .seo-trust .seo-trust__text + .seo-trust__text, .basic-description .seo-trust .seo-trust__text + .seo-trust__text { margin-top: 10px !important; } /* Tučný text zůstává součástí věty */ .seo-trust strong, .seo-trust b, #content .seo-trust strong, .category-perex .seo-trust strong, .category__secondDescription .seo-trust strong, .news-item-detail .seo-trust strong, .basic-description .seo-trust strong { display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } /* Odkazy v úvodním textu */ .seo-trust .seo-trust__text a, #content .seo-trust .seo-trust__text a, .category-perex .seo-trust .seo-trust__text a, .category__secondDescription .seo-trust .seo-trust__text a, .news-item-detail .seo-trust .seo-trust__text a, .basic-description .seo-trust .seo-trust__text a { color: var(--seo-hover) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; transition: color .2s ease, text-decoration-color .2s ease; } .seo-trust .seo-trust__text a:hover, #content .seo-trust .seo-trust__text a:hover, .category-perex .seo-trust .seo-trust__text a:hover, .category__secondDescription .seo-trust .seo-trust__text a:hover, .news-item-detail .seo-trust .seo-trust__text a:hover, .basic-description .seo-trust .seo-trust__text a:hover { color: var(--seo-text) !important; text-decoration-color: transparent !important; } /* ---------- SEZNAM DŮVODŮ (ul) ---------- */ .seo-trust .seo-trust__items, #content .seo-trust .seo-trust__items, .category-perex .seo-trust .seo-trust__items, .category__secondDescription .seo-trust .seo-trust__items, .news-item-detail .seo-trust .seo-trust__items, .basic-description .seo-trust .seo-trust__items { display: grid; grid-template-columns: repeat(var(--seo-trust-cols), minmax(0, 1fr)); gap: var(--seo-trust-items-gap); min-width: 0; margin: 0 !important; padding: var(--seo-trust-items-pad) !important; list-style: none !important; background: none !important; border: 0; border-top: var(--seo-trust-items-border); } /* ---------- JEDEN DŮVOD (li) ---------- */ .seo-trust .seo-trust__item, #content .seo-trust .seo-trust__item, .category-perex .seo-trust .seo-trust__item, .category__secondDescription .seo-trust .seo-trust__item, .news-item-detail .seo-trust .seo-trust__item, .basic-description .seo-trust .seo-trust__item { display: grid; grid-template-columns: var(--seo-trust-item-grid); justify-items: var(--seo-trust-item-justify); align-content: start; column-gap: 14px; min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; text-align: var(--seo-trust-item-align); } .seo-trust .seo-trust__item::marker, #content .seo-trust .seo-trust__item::marker, .category-perex .seo-trust .seo-trust__item::marker, .category__secondDescription .seo-trust .seo-trust__item::marker, .news-item-detail .seo-trust .seo-trust__item::marker, .basic-description .seo-trust .seo-trust__item::marker { content: none !important; } /* Ikona v bílém kruhu */ .seo-trust .seo-trust__item::before, #content .seo-trust .seo-trust__item::before, .category-perex .seo-trust .seo-trust__item::before, .category__secondDescription .seo-trust .seo-trust__item::before, .news-item-detail .seo-trust .seo-trust__item::before, .basic-description .seo-trust .seo-trust__item::before { content: "" !important; display: block !important; position: static !important; grid-row: var(--seo-trust-icon-row); width: var(--seo-trust-icon-size) !important; height: var(--seo-trust-icon-size) !important; margin: var(--seo-trust-icon-margin) !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background-color: var(--seo-trust-icon-bg, var(--seo-white)) !important; background-image: var(--seo-trust-icon, none) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: var(--seo-trust-icon-glyph) var(--seo-trust-icon-glyph) !important; transform: none !important; } .seo-trust .seo-trust__item-title, #content .seo-trust .seo-trust__item-title, .category-perex .seo-trust .seo-trust__item-title, .category__secondDescription .seo-trust .seo-trust__item-title, .news-item-detail .seo-trust .seo-trust__item-title, .basic-description .seo-trust .seo-trust__item-title { display: block !important; grid-column: var(--seo-trust-text-col); margin: 0 !important; padding: 0 !important; font-family: inherit; font-size: inherit !important; font-weight: 700; line-height: 1.4 !important; color: var(--seo-text) !important; } .seo-trust .seo-trust__item-text, #content .seo-trust .seo-trust__item-text, .category-perex .seo-trust .seo-trust__item-text, .category__secondDescription .seo-trust .seo-trust__item-text, .news-item-detail .seo-trust .seo-trust__item-text, .basic-description .seo-trust .seo-trust__item-text { display: block; grid-column: var(--seo-trust-text-col); margin: 2px 0 0 !important; padding: 0 !important; font-size: .9em; line-height: 1.5; color: var(--seo-text); } /* ---------- IKONY (modifikátor na li) ---------- */ /* Vlastní výroba: nůžky */ .seo-trust__item--made { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Tradice: medaile */ .seo-trust__item--since { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Kamenná prodejna */ .seo-trust__item--store { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Úpravy na přání: tužka */ .seo-trust__item--custom { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Poradenství: bublina */ .seo-trust__item--advice { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Doprava: auto */ .seo-trust__item--ship { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Péče o kůži: kapka */ .seo-trust__item--care { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Dárek */ .seo-trust__item--gift { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* Hodnocení: hvězda */ .seo-trust__item--rating { --seo-trust-icon: url("data:image/svg+xml;utf8,"); } /* ---------- ROZLOŽENÍ A VARIANTY ---------- */ /* Počet sloupců v řádku */ .seo-trust--cols-2 { --seo-trust-cols: 2; } .seo-trust--cols-4 { --seo-trust-cols: 4; } /* Split: úvod vlevo, důvody pod sebou vpravo */ .seo-trust--split { --seo-trust-grid: minmax(0, 1.05fr) minmax(0, 1fr); --seo-trust-grid-gap: 40px; --seo-trust-cols: 1; --seo-trust-items-pad: 0; --seo-trust-items-border: 0; --seo-trust-items-gap: 18px; --seo-trust-item-grid: 44px minmax(0, 1fr); --seo-trust-item-justify: start; --seo-trust-item-align: left; --seo-trust-icon-row: 1 / span 2; --seo-trust-icon-margin: 0; --seo-trust-icon-size: 44px; --seo-trust-icon-glyph: 22px; --seo-trust-text-col: 2; } /* Bílý box s rámečkem a stínem jako karty (na béžové pozadí) */ .seo-trust--outline { --seo-trust-bg: var(--seo-white); --seo-trust-border: 1px solid var(--seo-soft); --seo-trust-shadow: 0 8px 24px rgba(29, 29, 29, .06); --seo-trust-icon-bg: var(--seo-soft); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-trust { --seo-trust-pad: 24px; --seo-trust-cols: 2; --seo-trust-items-gap: 22px 20px; } /* Split se skládá pod sebe, důvody ve dvou sloupcích */ .seo-trust.seo-trust--split { --seo-trust-grid: 1fr; --seo-trust-grid-gap: 22px; --seo-trust-cols: 2; --seo-trust-items-pad: 22px 0 0; --seo-trust-items-border: 1px solid rgba(191, 175, 136, .45); } } @media (max-width: 480px) { /* Na mobilu vždy jeden sloupec, ikona vlevo od textu */ .seo-trust, .seo-trust.seo-trust--split { --seo-trust-pad: 20px 16px; --seo-trust-cols: 1; --seo-trust-items-gap: 16px; --seo-trust-item-grid: 40px minmax(0, 1fr); --seo-trust-item-justify: start; --seo-trust-item-align: left; --seo-trust-icon-row: 1 / span 2; --seo-trust-icon-margin: 0; --seo-trust-icon-size: 40px; --seo-trust-icon-glyph: 20px; --seo-trust-text-col: 2; } } /* ========================================================== 7) SEO-GUIDE: průvodce výběrem s číslovanými kroky Béžový box: nadtitulek, nadpis, úvodní text a číslované kroky (titulek + popis). Část kroků je vidět hned, další se rozbalí pod tlačítkem (
      , čisté CSS, bez JS). Číslování pokračuje plynule přes viditelnou i skrytou část. Po rozbalení je tlačítko "Zobrazit méně" na konci. Bez
      funguje jako průvodce se všemi kroky. Varianty: --outline bílá karta místo béžového boxu --num-blue tmavě modrá čísla místo zlatých ========================================================== */ /* Výchozí hodnoty proměnných */ .seo-guide { --seo-guide-pad: 28px 32px; --seo-guide-num: 28px; --seo-guide-indent: 44px; --seo-guide-gap: 16px; --seo-guide-toggle-h: 46px; --seo-guide-toggle-gap: 20px; --seo-guide-toggle-w: fit-content; --seo-guide-num-bg: var(--seo-primary); } /* ---------- BOX ---------- */ .seo-guide, #content .seo-guide, .category-perex .seo-guide, .category__secondDescription .seo-guide, .news-item-detail .seo-guide, .basic-description .seo-guide { display: block; box-sizing: border-box; width: 100%; margin: 32px 0 !important; padding: var(--seo-guide-pad) !important; background: var(--seo-guide-bg, var(--seo-soft)); border: var(--seo-guide-border, 0); border-radius: var(--seo-radius); box-shadow: var(--seo-guide-shadow, none); counter-reset: seo-guide-step; color: var(--seo-text); font-family: inherit; font-size: inherit; line-height: 1.6; } /* ---------- HLAVIČKA ---------- */ .seo-guide .seo-guide__eyebrow, #content .seo-guide .seo-guide__eyebrow, .category-perex .seo-guide .seo-guide__eyebrow, .category__secondDescription .seo-guide .seo-guide__eyebrow, .news-item-detail .seo-guide .seo-guide__eyebrow, .basic-description .seo-guide .seo-guide__eyebrow { display: block; margin: 0 0 6px !important; padding: 0 !important; font-family: inherit; font-size: .78em !important; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--seo-hover) !important; } .seo-guide .seo-guide__title, #content .seo-guide .seo-guide__title, .category-perex .seo-guide .seo-guide__title, .category__secondDescription .seo-guide .seo-guide__title, .news-item-detail .seo-guide .seo-guide__title, .basic-description .seo-guide .seo-guide__title { display: block; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: inherit; font-size: 1.3em !important; font-weight: 700; line-height: 1.3 !important; letter-spacing: normal; text-transform: none; color: var(--seo-text) !important; } /* ---------- ÚVODNÍ A DOPLŇUJÍCÍ TEXT ---------- */ .seo-guide p, #content .seo-guide p, .category-perex .seo-guide p, .category__secondDescription .seo-guide p, .news-item-detail .seo-guide p, .basic-description .seo-guide p { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; color: inherit; } /* Hlavička si drží vlastní mezery (přebíjí reset odstavců) */ .seo-guide p.seo-guide__eyebrow, #content .seo-guide p.seo-guide__eyebrow, .category-perex .seo-guide p.seo-guide__eyebrow, .category__secondDescription .seo-guide p.seo-guide__eyebrow, .news-item-detail .seo-guide p.seo-guide__eyebrow, .basic-description .seo-guide p.seo-guide__eyebrow { margin: 0 0 6px !important; } .seo-guide p.seo-guide__title, #content .seo-guide p.seo-guide__title, .category-perex .seo-guide p.seo-guide__title, .category__secondDescription .seo-guide p.seo-guide__title, .news-item-detail .seo-guide p.seo-guide__title, .basic-description .seo-guide p.seo-guide__title { margin: 0 0 10px !important; } .seo-guide p + p:not(.seo-guide__title), #content .seo-guide p + p:not(.seo-guide__title), .category-perex .seo-guide p + p:not(.seo-guide__title), .category__secondDescription .seo-guide p + p:not(.seo-guide__title), .news-item-detail .seo-guide p + p:not(.seo-guide__title), .basic-description .seo-guide p + p:not(.seo-guide__title) { margin-top: 10px !important; } /* Infobox uvnitř průvodce */ .seo-guide .seo-info, #content .seo-guide .seo-info, .category-perex .seo-guide .seo-info, .category__secondDescription .seo-guide .seo-info, .news-item-detail .seo-guide .seo-info, .basic-description .seo-guide .seo-info { margin: 18px 0 0 !important; } /* V béžovém boxu dostane poznámka bílé pozadí, aby nezanikla */ .seo-guide .seo-info--note { --seo-info-bg: var(--seo-white); --seo-info-border: var(--seo-white); --seo-info-icon-bg: var(--seo-soft); } /* Tučný text zůstává součástí věty */ .seo-guide p strong, .seo-guide p b, #content .seo-guide p strong, .category-perex .seo-guide p strong, .category__secondDescription .seo-guide p strong, .news-item-detail .seo-guide p strong, .basic-description .seo-guide p strong { display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; color: inherit; } /* Odkazy */ .seo-guide p a, #content .seo-guide p a, .category-perex .seo-guide p a, .category__secondDescription .seo-guide p a, .news-item-detail .seo-guide p a, .basic-description .seo-guide p a { color: var(--seo-hover) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; transition: color .2s ease, text-decoration-color .2s ease; } .seo-guide p a:hover, #content .seo-guide p a:hover, .category-perex .seo-guide p a:hover, .category__secondDescription .seo-guide p a:hover, .news-item-detail .seo-guide p a:hover, .basic-description .seo-guide p a:hover { color: var(--seo-text) !important; text-decoration-color: transparent !important; } /* ---------- SEZNAM KROKŮ (ol) ---------- */ .seo-guide .seo-guide__steps, #content .seo-guide .seo-guide__steps, .category-perex .seo-guide .seo-guide__steps, .category__secondDescription .seo-guide .seo-guide__steps, .news-item-detail .seo-guide .seo-guide__steps, .basic-description .seo-guide .seo-guide__steps { display: block; margin: 16px 0 0 !important; padding: 0 !important; list-style: none !important; background: none !important; } /* Skryté kroky začínají hned pod tlačítkem, bez další mezery */ .seo-guide .seo-guide__more > .seo-guide__steps, #content .seo-guide .seo-guide__more > .seo-guide__steps, .category-perex .seo-guide .seo-guide__more > .seo-guide__steps, .category__secondDescription .seo-guide .seo-guide__more > .seo-guide__steps, .news-item-detail .seo-guide .seo-guide__more > .seo-guide__steps, .basic-description .seo-guide .seo-guide__more > .seo-guide__steps { margin-top: 0 !important; } /* ---------- KROK (li) ---------- */ .seo-guide .seo-guide__steps > li, #content .seo-guide .seo-guide__steps > li, .category-perex .seo-guide .seo-guide__steps > li, .category__secondDescription .seo-guide .seo-guide__steps > li, .news-item-detail .seo-guide .seo-guide__steps > li, .basic-description .seo-guide .seo-guide__steps > li { position: relative !important; display: block; margin: 0 !important; padding: 0 0 0 var(--seo-guide-indent) !important; list-style: none !important; background: none !important; counter-increment: seo-guide-step; font-size: inherit; line-height: 1.6; color: inherit; } .seo-guide .seo-guide__steps > li + li, #content .seo-guide .seo-guide__steps > li + li, .category-perex .seo-guide .seo-guide__steps > li + li, .category__secondDescription .seo-guide .seo-guide__steps > li + li, .news-item-detail .seo-guide .seo-guide__steps > li + li, .basic-description .seo-guide .seo-guide__steps > li + li { margin-top: var(--seo-guide-gap) !important; } .seo-guide .seo-guide__steps > li::marker, #content .seo-guide .seo-guide__steps > li::marker, .category-perex .seo-guide .seo-guide__steps > li::marker, .category__secondDescription .seo-guide .seo-guide__steps > li::marker, .news-item-detail .seo-guide .seo-guide__steps > li::marker, .basic-description .seo-guide .seo-guide__steps > li::marker { content: none !important; } /* Číslo v kruhu */ .seo-guide .seo-guide__steps > li::before, #content .seo-guide .seo-guide__steps > li::before, .category-perex .seo-guide .seo-guide__steps > li::before, .category__secondDescription .seo-guide .seo-guide__steps > li::before, .news-item-detail .seo-guide .seo-guide__steps > li::before, .basic-description .seo-guide .seo-guide__steps > li::before { content: counter(seo-guide-step) !important; display: block !important; position: absolute !important; top: -3px !important; left: 0 !important; width: var(--seo-guide-num) !important; height: var(--seo-guide-num) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--seo-guide-num-bg) !important; color: var(--seo-white) !important; font-family: inherit; font-size: .85em !important; font-weight: 700 !important; line-height: var(--seo-guide-num) !important; text-align: center !important; transform: none !important; } .seo-guide .seo-guide__steps > li::after, #content .seo-guide .seo-guide__steps > li::after, .category-perex .seo-guide .seo-guide__steps > li::after, .category__secondDescription .seo-guide .seo-guide__steps > li::after, .news-item-detail .seo-guide .seo-guide__steps > li::after, .basic-description .seo-guide .seo-guide__steps > li::after { content: none !important; display: none !important; } /* Titulek a text kroku */ .seo-guide .seo-guide__step-title, #content .seo-guide .seo-guide__step-title, .category-perex .seo-guide .seo-guide__step-title, .category__secondDescription .seo-guide .seo-guide__step-title, .news-item-detail .seo-guide .seo-guide__step-title, .basic-description .seo-guide .seo-guide__step-title { display: block !important; margin: 0 !important; padding: 0 !important; font-family: inherit; font-size: inherit !important; font-weight: 700; line-height: 1.4 !important; color: var(--seo-text) !important; } .seo-guide p.seo-guide__step-text, #content .seo-guide p.seo-guide__step-text, .category-perex .seo-guide p.seo-guide__step-text, .category__secondDescription .seo-guide p.seo-guide__step-text, .news-item-detail .seo-guide p.seo-guide__step-text, .basic-description .seo-guide p.seo-guide__step-text { display: block; margin: 2px 0 0 !important; padding: 0 !important; font-size: inherit; line-height: 1.6; color: var(--seo-text); } /* ---------- ROZBALOVACÍ ČÁST (details) ---------- */ .seo-guide .seo-guide__more, #content .seo-guide .seo-guide__more, .category-perex .seo-guide .seo-guide__more, .category__secondDescription .seo-guide .seo-guide__more, .news-item-detail .seo-guide .seo-guide__more, .basic-description .seo-guide .seo-guide__more { position: relative; display: block; margin: var(--seo-guide-toggle-gap) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } /* Po rozbalení: rezerva dole pro tlačítko a navázání na viditelné kroky */ .seo-guide .seo-guide__more[open], #content .seo-guide .seo-guide__more[open], .category-perex .seo-guide .seo-guide__more[open], .category__secondDescription .seo-guide .seo-guide__more[open], .news-item-detail .seo-guide .seo-guide__more[open], .basic-description .seo-guide .seo-guide__more[open] { margin-top: var(--seo-guide-gap) !important; padding-bottom: calc(var(--seo-guide-toggle-h) + var(--seo-guide-toggle-gap)) !important; } .seo-guide .seo-guide__more[open] > :not(summary) { animation: seo-guide-in .25s ease; } @keyframes seo-guide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- TLAČÍTKO (summary) ---------- */ .seo-guide .seo-guide__toggle, #content .seo-guide .seo-guide__toggle, .category-perex .seo-guide .seo-guide__toggle, .category__secondDescription .seo-guide .seo-guide__toggle, .news-item-detail .seo-guide .seo-guide__toggle, .basic-description .seo-guide .seo-guide__toggle { display: flex !important; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: var(--seo-guide-toggle-w); min-height: var(--seo-guide-toggle-h); margin: 0 auto !important; padding: 10px 26px !important; list-style: none !important; background: var(--seo-guide-toggle-bg, var(--seo-white)) !important; border: 1px solid var(--seo-primary) !important; border-radius: 999px; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.25; text-align: center; color: var(--seo-text) !important; cursor: pointer; user-select: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .seo-guide .seo-guide__toggle:hover, #content .seo-guide .seo-guide__toggle:hover, .category-perex .seo-guide .seo-guide__toggle:hover, .category__secondDescription .seo-guide .seo-guide__toggle:hover, .news-item-detail .seo-guide .seo-guide__toggle:hover, .basic-description .seo-guide .seo-guide__toggle:hover { background: var(--seo-primary) !important; border-color: var(--seo-primary) !important; color: var(--seo-white) !important; } .seo-guide .seo-guide__toggle:focus-visible { outline: 2px solid var(--seo-hover); outline-offset: 3px; } /* Skrytí výchozí šipky prohlížeče */ .seo-guide .seo-guide__toggle::-webkit-details-marker, #content .seo-guide .seo-guide__toggle::-webkit-details-marker, .category-perex .seo-guide .seo-guide__toggle::-webkit-details-marker, .category__secondDescription .seo-guide .seo-guide__toggle::-webkit-details-marker, .news-item-detail .seo-guide .seo-guide__toggle::-webkit-details-marker, .basic-description .seo-guide .seo-guide__toggle::-webkit-details-marker { display: none; } .seo-guide .seo-guide__toggle::marker, #content .seo-guide .seo-guide__toggle::marker, .category-perex .seo-guide .seo-guide__toggle::marker, .category__secondDescription .seo-guide .seo-guide__toggle::marker, .news-item-detail .seo-guide .seo-guide__toggle::marker, .basic-description .seo-guide .seo-guide__toggle::marker { content: none !important; } .seo-guide .seo-guide__toggle::before, #content .seo-guide .seo-guide__toggle::before, .category-perex .seo-guide .seo-guide__toggle::before, .category__secondDescription .seo-guide .seo-guide__toggle::before, .news-item-detail .seo-guide .seo-guide__toggle::before, .basic-description .seo-guide .seo-guide__toggle::before { content: none !important; display: none !important; } /* Šipka dolů / nahoru (barva podle textu) */ .seo-guide .seo-guide__toggle::after, #content .seo-guide .seo-guide__toggle::after, .category-perex .seo-guide .seo-guide__toggle::after, .category__secondDescription .seo-guide .seo-guide__toggle::after, .news-item-detail .seo-guide .seo-guide__toggle::after, .basic-description .seo-guide .seo-guide__toggle::after { content: "" !important; display: block !important; flex: 0 0 16px; width: 16px; height: 16px; margin: 0 !important; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform .25s ease; } /* Po rozbalení: tlačítko na konec průvodce, šipka nahoru */ .seo-guide .seo-guide__more[open] > .seo-guide__toggle, #content .seo-guide .seo-guide__more[open] > .seo-guide__toggle, .category-perex .seo-guide .seo-guide__more[open] > .seo-guide__toggle, .category__secondDescription .seo-guide .seo-guide__more[open] > .seo-guide__toggle, .news-item-detail .seo-guide .seo-guide__more[open] > .seo-guide__toggle, .basic-description .seo-guide .seo-guide__more[open] > .seo-guide__toggle { position: absolute !important; left: 0; right: 0; bottom: 0; } .seo-guide .seo-guide__more[open] > .seo-guide__toggle::after { transform: rotate(180deg); } /* Přepínání textu tlačítka */ .seo-guide .seo-guide__close, #content .seo-guide .seo-guide__close, .category-perex .seo-guide .seo-guide__close, .category__secondDescription .seo-guide .seo-guide__close, .news-item-detail .seo-guide .seo-guide__close, .basic-description .seo-guide .seo-guide__close { display: none !important; } .seo-guide .seo-guide__more[open] .seo-guide__open, #content .seo-guide .seo-guide__more[open] .seo-guide__open, .category-perex .seo-guide .seo-guide__more[open] .seo-guide__open, .category__secondDescription .seo-guide .seo-guide__more[open] .seo-guide__open, .news-item-detail .seo-guide .seo-guide__more[open] .seo-guide__open, .basic-description .seo-guide .seo-guide__more[open] .seo-guide__open { display: none !important; } .seo-guide .seo-guide__more[open] .seo-guide__close, #content .seo-guide .seo-guide__more[open] .seo-guide__close, .category-perex .seo-guide .seo-guide__more[open] .seo-guide__close, .category__secondDescription .seo-guide .seo-guide__more[open] .seo-guide__close, .news-item-detail .seo-guide .seo-guide__more[open] .seo-guide__close, .basic-description .seo-guide .seo-guide__more[open] .seo-guide__close { display: inline !important; } /* ---------- VARIANTA: SVĚTLÁ (bílá karta) ---------- */ .seo-guide--outline { --seo-guide-bg: var(--seo-white); --seo-guide-border: 1px solid var(--seo-soft); --seo-guide-shadow: 0 8px 24px rgba(29, 29, 29, .06); --seo-guide-toggle-bg: var(--seo-soft); } .seo-guide--outline .seo-info--note { --seo-info-bg: var(--seo-soft); --seo-info-border: var(--seo-soft); --seo-info-icon-bg: var(--seo-white); } /* ---------- VARIANTA: MODRÁ ČÍSLA ---------- */ .seo-guide--num-blue { --seo-guide-num-bg: var(--seo-hover); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 768px) { .seo-guide { --seo-guide-pad: 24px; } } @media (max-width: 480px) { .seo-guide { --seo-guide-pad: 20px 16px; --seo-guide-num: 26px; --seo-guide-indent: 38px; --seo-guide-toggle-gap: 18px; --seo-guide-toggle-w: 100%; } } /* ========================================================== 8) SEO-PILLS: menší klikatelné pilulky (filtry, klíčová slova, značky, související témata) Bílé pozadí, zlatý rámeček, po najetí výplň béžovou. Slouží jako rozcestník, ne jako tlačítko. Modifikátory: seo-pill--active (aktuální volba), seo-pills--center (zarovnání na střed). ========================================================== */ /* Výchozí hodnoty proměnných */ .seo-pills { --seo-pill-gap: 8px; --seo-pill-pad: 6px 14px; --seo-pill-height: 34px; --seo-pill-size: .88em; --seo-pill-justify: flex-start; } /* ---------- OBAL (ul) ---------- */ .seo-pills, #content .seo-pills, .category-perex .seo-pills, .category__secondDescription .seo-pills, .news-item-detail .seo-pills, .basic-description .seo-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--seo-pill-justify); gap: var(--seo-pill-gap); box-sizing: border-box; width: 100%; margin: 18px 0 !important; padding: 0 !important; list-style: none !important; background: none !important; font-family: inherit; font-size: inherit; line-height: 1.4; } .seo-pills > li, #content .seo-pills > li, .category-perex .seo-pills > li, .category__secondDescription .seo-pills > li, .news-item-detail .seo-pills > li, .basic-description .seo-pills > li { display: block; margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; line-height: 1.4; } .seo-pills > li::before, #content .seo-pills > li::before, .category-perex .seo-pills > li::before, .category__secondDescription .seo-pills > li::before, .news-item-detail .seo-pills > li::before, .basic-description .seo-pills > li::before { content: none !important; display: none !important; } .seo-pills > li::marker, #content .seo-pills > li::marker, .category-perex .seo-pills > li::marker, .category__secondDescription .seo-pills > li::marker, .news-item-detail .seo-pills > li::marker, .basic-description .seo-pills > li::marker { content: none !important; } /* ---------- PILULKA (a) ---------- */ .seo-pill, #content .seo-pill, .category-perex .seo-pill, .category__secondDescription .seo-pill, .news-item-detail .seo-pill, .basic-description .seo-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--seo-pill-height); margin: 0 !important; padding: var(--seo-pill-pad) !important; background: var(--seo-white) !important; border: 1px solid var(--seo-primary) !important; border-radius: 999px; color: var(--seo-text) !important; font-family: inherit; font-size: var(--seo-pill-size); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .seo-pill:hover, .seo-pill:focus, #content .seo-pill:hover, .category-perex .seo-pill:hover, .category__secondDescription .seo-pill:hover, .news-item-detail .seo-pill:hover, .basic-description .seo-pill:hover { background: var(--seo-soft) !important; border-color: var(--seo-primary) !important; color: var(--seo-text) !important; text-decoration: none !important; } .seo-pill:focus-visible { outline: 2px solid var(--seo-hover); outline-offset: 3px; } /* Aktuální volba: béžová výplň natrvalo */ .seo-pill.seo-pill--active, .seo-pill.seo-pill--active:hover, #content .seo-pill.seo-pill--active, .category-perex .seo-pill.seo-pill--active, .category__secondDescription .seo-pill.seo-pill--active, .news-item-detail .seo-pill.seo-pill--active, .basic-description .seo-pill.seo-pill--active { background: var(--seo-soft) !important; border-color: var(--seo-primary) !important; color: var(--seo-text) !important; font-weight: 700; cursor: default; } /* Zarovnání na střed */ .seo-pills.seo-pills--center { --seo-pill-justify: center; } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 480px) { .seo-pills { --seo-pill-pad: 6px 12px; --seo-pill-height: 32px; --seo-pill-size: .85em; } } /* ========================================================== 9) a 10) STARŠÍ PRAVIDLA ZE SOUBORU styly_v7.css Skrytí položky v menu + buttony s obrázkem (seo-imgbuttons) ========================================================== */ /* ========================================================================== Skrytí položky "Krémy - barevné a krycí" v rozbalovacím horním menu -------------------------------------------------------------------------- Kategorie zůstává funkční, dohledatelná a odkaz zůstává v HTML. Skryje se pouze vizuálně v hlavní navigaci. POZOR: zkontrolujte reálný slug kategorie v adrese e-shopu a případně upravte hodnotu v href*="..." na všech místech. ========================================================================== */ #navigation li:has(> a[href*="/kremy-barevne-a-kryci/"]), .navigation-in li:has(> a[href*="/kremy-barevne-a-kryci/"]), .menu-level-2 li:has(> a[href*="/kremy-barevne-a-kryci/"]), .menu-level-3 li:has(> a[href*="/kremy-barevne-a-kryci/"]) { display: none !important; } /* ========================================================================== BUTTONY S OBRÁZKEM PŘES CELÝ BUTTON (bílý vystředěný text) -------------------------------------------------------------------------- UNIVERZÁLNÍ KOMPONENTA - v CSS se nic nepřidává. Nový button = zkopírovat jeden řádek v HTML a vyměnit odkaz, obrázek a popisek. HTML (vkládat přes Zdrojový kód v editoru popisku): Pořadí uvnitř odkazu: nejdřív obrázek, potom span s třídou text. Atribut alt nechte prázdný, text nese span. Druhá podporovaná varianta je obrázek vložený inline jako background-image přímo na odkaz. Vše je sladěné s buttony .seo-subcategories ze souboru seo-styly13.css: - světlý rámeček #ebe9e9, po najetí myší #c0c0c0 - výška 70 px, na mobilu do 767 px 50 px - šířka 25 % nad 1440 px, 50 % do 1440 px - zaoblení 10 px, odsazení položek 6 px - písmo 14 px / řádkování 20 px, pod 480 px 12 px Obrázky jsou v plné barevnosti, bez celoplošného ztmavení. Čitelnost bílého textu zajišťuje tučný řez a úzký ostrý stín. Doporučený rozměr obrázku: 1200 x 200 px (JPG / WebP) ========================================================================== */ ul.seo-imgbuttons { display: flex !important; flex-wrap: wrap !important; align-items: center !important; list-style: none !important; padding: 26px 0 0 !important; margin: 0 -6px 36px -6px !important; position: relative !important; } ul.seo-imgbuttons::before, ul.seo-imgbuttons::after { content: none !important; height: 0 !important; } ul.seo-imgbuttons > li { list-style: none !important; list-style-type: none !important; flex: 0 0 auto !important; padding: 6px !important; margin: 0 !important; border: 0 !important; background: none !important; } ul.seo-imgbuttons > li::before, ul.seo-imgbuttons > li::after, ul.seo-imgbuttons > li::marker { content: none !important; } ul.seo-imgbuttons > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; height: 70px !important; padding: 10px 12px !important; border: 1px solid #ebe9e9 !important; border-radius: 10px !important; overflow: hidden !important; background-color: #2b2b2b !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; color: #ffffff !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; box-shadow: none !important; } ul.seo-imgbuttons > li > a:hover { border: 1px solid #c0c0c0 !important; } /* Obrázek vložený jako img se roztáhne přes celý button */ ul.seo-imgbuttons > li > a img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: center center !important; z-index: 0 !important; opacity: 1 !important; display: block !important; filter: none !important; } /* Žádný celoplošný překryv - obrázky zůstávají v plné barevnosti */ ul.seo-imgbuttons > li > a::before, ul.seo-imgbuttons > li > a::after { content: none !important; display: none !important; background: none !important; } /* -------------------------------------------------------------------------- TEXT PŘES OBRÁZEK Velikost i řádkování jsou shodné s .seo-subcategories. Stín je jen jeden a úzký, aby písmo zůstalo ostré. Sílu stínu ladíte hodnotou 0.80. -------------------------------------------------------------------------- */ ul.seo-imgbuttons > li > a .text { position: relative !important; z-index: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; color: #ffffff !important; font-weight: 700 !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: 0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.80) !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Breakpointy shodné se seo-subcategories */ @media (max-width: 1440px) { ul.seo-imgbuttons > li { width: 50% !important; } } @media (min-width: 1440px) { ul.seo-imgbuttons > li { width: 25% !important; } } @media (max-width: 767px) { ul.seo-imgbuttons > li > a { height: 50px !important; } } @media (max-width: 480px) { ul.seo-imgbuttons > li > a .text { font-size: 12px !important; line-height: 1.4 !important; -webkit-line-clamp: 3 !important; } }