/* ========================================================================== ZOO4YOU — 1/3 ZÁKLAD Barvy a typografie, hlavička, hlavní menu, produktové karty, patička. Šablona: Disco (Shoptet 3G) — přepisujeme cizí produkční CSS, proto `!important`. Blank template má až Premium. Nasazení: FTP → /user/documents/, v jako první z našich tří CSS. Po nahrání zvýšit ?v= v administraci, jinak se drží cache. Pořadí: zoo4you.css → zoo4you-fix.css → zoo4you-pages.css Než sem sáhneš: ../shoptet/docs/PASTI.md ========================================================================== */ /* Fonty se načítají přes v Záhlaví , ne přes @import. @import se serializuje: prohlížeč musí stáhnout a rozparsovat tenhle soubor, teprve pak sáhne pro font — a celou tu dobu blokuje vykreslení. */ /* ---------- 1. Paleta a typografie ---------- */ :root{ --z-font-title:'Schibsted Grotesk', system-ui, -apple-system, sans-serif; /* ⚠️ Bez webfontu záměrně. Tenhle token nikde nepoužíváme — běžný text vykresluje Source Sans 3 ze Shoptetu. Dokud se token nepřiřadí na body, nemá smysl stahovat kvůli němu další rodinu. */ --z-font-body:system-ui, -apple-system, 'Segoe UI', sans-serif; --z-accent:#E8722A; --z-accent-dark:#C4551A; --z-band:#241E1A; --z-bg:#FFFFFF; --z-line:#EFE7D8; --z-ink:#23201C; --z-muted:#5F5447; --z-ok:#3B8C5A; --z-r:16px; --z-r-sm:11px; --z-shadow:0 18px 40px -24px rgba(35,32,28,.35); } /* Shoptet vlastní proměnné (přebijí barvy šablony) */ body{ --color-primary:#E8722A; --color-primary-hover:#C4551A; --conversion-color:#E8722A; background:var(--z-bg) !important; color:var(--z-ink); } /* ---------- 1b. Krémové pozadí i v postranních pruzích ---------- */ html, body, .overall-wrapper, #content, .content, #content-wrapper, .content-wrapper, main, .products-wrapper, .welcome-wrapper, .container{ background:#FFFFFF !important; } /* obsahové bloky, které mají zůstat bílé, si bílou nastaví samy (karty) */ /* ---------- 2. Horní informační proužek — jednotné žloutlé pozadí (#FAF5EC) ---------- */ .top-navigation-bar, .top-navigation-bar .container, .z-topbar-custom, .top-navigation-bar div.z-topbar-left, .top-navigation-bar div.z-topbar-center, .top-navigation-bar div.z-topbar-right, .top-navigation-bar div.z-topbar-item { background-color: #FAF5EC !important; background: #FAF5EC !important; } .top-navigation-bar { border-bottom: 1px solid #EFE7D8 !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 8px 0 !important; } .top-navigation-bar .top-navigation-menu, .top-navigation-bar .top-navigation-tools { display: none !important; } /* Šířku i odsazení řídí proměnné --zmax/--zpad ze zoo4you-fix.css, jinak by se proužek lišil od zbytku stránky. Vnitřní .z-topbar-custom nesmí mít vlastní padding, jinak se sečte s tím na .container. */ .top-navigation-bar > .container { max-width: var(--zmax, 1600px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--zpad, 24px) !important; padding-right: var(--zpad, 24px) !important; box-sizing: border-box !important; } .top-navigation-bar div.z-topbar-custom { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .top-navigation-bar div, .z-topbar-custom, .top-navigation-bar div.z-topbar-left, .top-navigation-bar div.z-topbar-center, .top-navigation-bar div.z-topbar-right, .top-navigation-bar div.z-topbar-item { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: auto !important; float: none !important; margin: 0 !important; white-space: nowrap !important; } .top-navigation-bar .z-topbar-custom { width: 100% !important; font-size: 13.5px !important; color: #5A4F44 !important; } .top-navigation-bar div.z-topbar-left, .top-navigation-bar div.z-topbar-center, .top-navigation-bar div.z-topbar-right, .top-navigation-bar div.z-topbar-item { gap: 8px !important; flex: 0 0 auto !important; } .z-topbar-center { gap: 16px !important; } .z-topbar-sep { color: #E6DCC9 !important; margin: 0 4px !important; } .z-topbar-right a{ display:inline-flex !important; align-items:center !important; gap:7px !important; color:#23201C !important; font-weight:600 !important; text-decoration:none !important; } .z-topbar-right a:hover{ color:var(--z-accent) !important; } /* Vektorové SVG ikony (oranžové #E8722A) */ .z-topbar-icon{ display:inline-block !important; width:16px !important; height:16px !important; flex:none !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; } .z-ico-pin{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important; } .z-ico-truck{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") !important; } .z-ico-pkg{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") !important; } .z-ico-phone{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323201C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important; } @media(max-width:768px){ .z-topbar-custom{ justify-content:center !important; text-align:center !important; } } /* ---------- 3. HLAVIČKA — bílá, BEZ stínu ---------- */ /* hlavička splývá s pozadím, ŽÁDNÉ dělicí čáry */ #header, #header .header-top, #header .header-bottom, .header-navigation, .navigation-wrapper{ background:var(--z-bg) !important; box-shadow:none !important; border:none !important; border-top:none !important; border-bottom:none !important; } #header .header-top{ padding:14px 0 !important; } /* hlavička jako jeden flex řádek: logo | hledání | účet+košík */ .header-top-wrapper{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:0 !important; } /* logo vlevo, přiměřená velikost */ .site-name{ margin:0 !important; flex:none !important; } .site-name img{ max-height:51px !important; width:auto !important; } /* ikony vpravo */ .navigation-buttons{ margin-left:auto !important; flex:none !important; display:flex !important; align-items:center !important; } /* prázdný blok nástrojů nemá brát místo */ .navigation-tools:empty{ display:none !important; } /* ---------- 4. VYHLEDÁVÁNÍ — delší, vzdušné s hezkou SVG lupou (dle obr. B) --- */ #search, #search-form, .header-top-wrapper .search-widget.stay-open, .header-top-wrapper .user-action-search, .search-widget, .search-widget-inner{ position:static !important; display:block !important; opacity:1 !important; visibility:visible !important; flex:1 1 auto !important; width:100% !important; max-width:none !important; /* vyplní prostor mezi logem a tlačítky */ margin:0 24px 0 24px !important; /* mezera od loga i tlačítka */ box-shadow:none !important; background:transparent !important; padding:0 !important; } /* Shoptet drží .search na flex-basis 33 % — bez tohohle by se pole neroztáhlo, i když má max-width:none. */ body #header .search{ flex:1 1 auto !important; width:auto !important; max-width:none !important; margin-right:24px !important; } .search-widget-close{ display:none !important; } .search-form{ display:block !important; width:100% !important; max-width:100% !important; background:transparent !important; border:none !important; padding:0 !important; margin:0 !important; box-shadow:none !important; } .search-form fieldset{ display:flex !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; height:52px !important; position:relative !important; background:#FAF5EC !important; /* krémové pozadí */ border:1.5px solid #EFE7D8 !important; border-radius:18px !important; padding:4px 5px 4px 18px !important; margin:0 !important; transition:border-color .15s; } /* při kliknutí jen decentní ztmavení rámečku, žádný barevný outline */ .search-form fieldset:focus-within{ border-color:#DCCFB8 !important; } body #header .search input:focus, body #header .search .query-input:focus, body #header .search input.search-input:focus{ outline:none !important; box-shadow:none !important; border:none !important; } /* Lupa — 100% matematicky zacentrovaná svisle (absolute center) */ .search-input-icon{ position:absolute !important; top:50% !important; transform:translateY(-50%) !important; left:18px !important; width:20px !important; height:20px !important; margin:0 !important; flex:none !important; z-index:2 !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A08A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center/contain !important; } .search-input-icon::before, .search-input-icon::after{ display:none !important; content:none !important; } /* Textové pole — perfektně vyrovnané na střed */ .search-form input[type="search"], .search-form input[type="text"], .search-input, .query-input{ flex:1 1 auto !important; height:44px !important; line-height:44px !important; align-self:center !important; border:none !important; background:transparent !important; box-shadow:none !important; padding:0 12px 0 46px !important; font-size:15px !important; color:var(--z-ink) !important; margin:0 !important; } .search-form input::placeholder{ color:#A08A72 !important; opacity:1 !important; } .search-form input:focus{ outline:none !important; box-shadow:none !important; } /* Oranžové tlačítko Hledat */ .search-form button[type="submit"], .search-form .btn, .z-search-btn{ flex:none !important; background:var(--z-accent) !important; border:none !important; border-radius:13px !important; color:#fff !important; font-weight:700 !important; font-size:15px !important; padding:0 28px !important; height:44px !important; cursor:pointer; box-shadow:none !important; /* bez oranžové záře */ } .search-form button[type="submit"]:hover, .z-search-btn:hover{ background:var(--z-accent-dark) !important; } .navigation-buttons a[data-target="search"]{ display:none !important; } /* ---------- 5. Ikony účtu a košíku — nákupní taška dle reference ---------- */ .navigation-buttons{ gap:8px !important; display:flex !important; align-items:center !important; } .navigation-buttons .btn.cart-count, .navigation-buttons a[data-target="cart"]{ background:var(--z-accent) !important; color:#fff !important; border-radius:14px !important; padding:12px 22px !important; font-weight:700 !important; font-size:14px !important; display:inline-flex !important; align-items:center !important; gap:9px !important; box-shadow:none !important; /* bez oranžové záře */ text-decoration:none !important; } .navigation-buttons .btn.cart-count::before, .navigation-buttons a[data-target="cart"]::before{ content:"" !important; display:inline-block !important; width:20px !important; height:20px !important; flex:none !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center/contain !important; } .navigation-buttons .btn.cart-count:hover{ background:var(--z-accent-dark) !important; } .navigation-buttons .top-nav-button{ background:transparent !important; color:var(--z-ink) !important; border-radius:var(--z-r-sm) !important; } .navigation-buttons .top-nav-button:hover{ background:#F6ECD9 !important; } /* ---------- 6. MENU kategorií — 1 čistý horizontální řádek bez zalamování ---------- */ /* ⚠️ `#navigation .navigation-in` má ID, takže přebíjí i pravidla ze zoo4you-fix.css. Šířku i odsazení proto musí brát z proměnných přímo tady, jinak se menu rozejde s logem. Vnitřní .navigation-in nesmí mít vlastní padding — ten už nese .header-bottom-wrapper. */ .header-top-wrapper, #navigation > .container { max-width:var(--zmax, 1600px) !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--zpad, 24px) !important; padding-right:var(--zpad, 24px) !important; box-sizing:border-box !important; } #navigation .navigation-in { max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } /* Cizí kategorie schované skriptem (blok 2). Třída, ne inline styl — inline display:none by mobilní zásuvka svým display:block !important přebila a kategorie by se v ní objevily. */ #navigation .menu-level-1 > li.z-menu-hidden{ display:none !important; } /* Akce & výprodej + servisní stránky: na desktopu je lišta plná a tyhle odkazy nese patička, v mobilní zásuvce ale dávají smysl. */ @media (min-width: 768px){ #navigation .menu-level-1 > li.z-menu-drawer-only{ display:none !important; } } /* ⚠️ Vodorovný scroller platí jen pro desktop. Selektor s ID přebíjí i mobilní pravidla v zoo4you-pages.css, takže bez media query zůstávala zásuvka pod hamburgerem vodorovná a — protože #navigation je fixed s left i right — shrink-to-fit u overflow:auto ji srazil na šířku 0. */ @media (min-width: 768px) { #navigation .menu-level-1, .navigation-in.menu > ul { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; margin: 0 !important; padding: 0 !important; } #navigation .menu-level-1::-webkit-scrollbar { display: none !important; } #navigation .menu-level-1 > li { flex: 0 0 auto !important; white-space: nowrap !important; } } body .navigation-in.menu > ul.menu-level-1 > li.z-first-menu-item > a, body .navigation-in.menu > ul.menu-level-1 > li:first-child > a, body .navigation-in.menu > ul.menu-level-1 > li:first-of-type > a, body #navigation .menu-level-1 > li:first-child > a { padding-left: 12px !important; margin-left: 0 !important; } /* Skrýt nechtěný plovoucí odkaz "Přihlášení" pod menu a ODSTRANIT ČÁRU pod menu */ html body #header, html body #header *, html body #navigation, html body #navigation *, html body .navigation-wrapper, html body .navigation-in, html body #header .header-bottom, html body .menu-level-1 { border-bottom: none !important; border-top: none !important; box-shadow: none !important; } html body #header::after, html body #navigation::after, html body .navigation-in::after, html body #header .header-bottom::after { display: none !important; content: none !important; } #header .header-bottom .login-link, #header .header-bottom .top-nav-button-login, #header .header-bottom a[href*="/login"], #navigation + .user-action-login, .navigation-in + .user-action-login, .user-action-login { display: none !important; } #header, #header .header-bottom, #navigation, .navigation-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; } .banners-row { margin-top: 0 !important; /* nulová mezera mezi menu a carouselem pro maximální splynutí */ margin-bottom: 48px !important; } #content, #content-wrapper, .content-wrapper { padding-top: 0 !important; margin-top: 0 !important; } body .navigation-in.menu > ul.menu-level-1 > li > a, body #navigation .menu-level-1 > li > a { font-weight:400 !important; /* tenčí font s vysokou specificitou */ font-size:15px !important; color:var(--z-ink) !important; padding:10px 16px !important; border-radius:11px; text-transform:none !important; letter-spacing:0 !important; display:inline-flex !important; align-items:center; gap:8px; } body .navigation-in.menu > ul.menu-level-1 > li.z-first-menu-item > a, body #navigation .menu-level-1 > li.z-first-menu-item > a { padding-left: 12px !important; margin-left: 0 !important; } /* ---- IKONY V MENU — čárové SVG (Lucide styl), oranžové ---- */ .navigation-in.menu ul.menu-level-1 > li > a::before{ content:"" !important; display:inline-block !important; width:20px; height:20px; flex:none; background-repeat:no-repeat; background-position:center; background-size:contain; margin-right:8px; } /* BARF = maso, ne lupa. Steak s kostí (Lucide „beef"), ať sedí do zbytku sady. */ .navigation-in.menu ul.menu-level-1 > li > a[href*="barf"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212.5%22 cy=%228.5%22 r=%222.5%22/%3E%3Cpath d=%22M12.5 2a6.5 6.5 0 0 0-6.22 4.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3a6.5 6.5 0 0 0-3.9-11.7Z%22/%3E%3Cpath d=%22m18.5 6 2.19 4.5a6.48 6.48 0 0 1 .31 2 6.49 6.49 0 0 1-2.6 5.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="psy"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5%22/%3E%3Cpath d=%22M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5%22/%3E%3Cpath d=%22M8 14v.5%22/%3E%3Cpath d=%22M16 14v.5%22/%3E%3Cpath d=%22M11.25 16.25h1.5L12 17l-.75-.75Z%22/%3E%3Cpath d=%22M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="kocky"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z%22/%3E%3Cpath d=%22M8 14v.5%22/%3E%3Cpath d=%22M16 14v.5%22/%3E%3Cpath d=%22M11.25 16.25h1.5L12 17l-.75-.75Z%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="hlodavce"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 16a3 3 0 0 1 2.24 5%22/%3E%3Cpath d=%22M18 12h.01%22/%3E%3Cpath d=%22M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1 1 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1a3 3 0 0 0-3 3%22/%3E%3Cpath d=%22M20 8.54V4a2 2 0 1 0-4 0v3%22/%3E%3Cpath d=%22M7.612 12.524a3 3 0 1 0-1.6 4.3%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="ptactvo"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 7h.01%22/%3E%3Cpath d=%22M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20%22/%3E%3Cpath d=%22m20 7 2 .5-2 .5%22/%3E%3Cpath d=%22M10 18v3%22/%3E%3Cpath d=%22M14 17.75V21%22/%3E%3Cpath d=%22M7 18a6 6 0 0 0 3.84-10.61%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="akvarist"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z%22/%3E%3Cpath d=%22M18 12v.5%22/%3E%3Cpath d=%22M16 17.93a9.77 9.77 0 0 1 0-11.86%22/%3E%3Cpath d=%22M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33%22/%3E%3Cpath d=%22M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4%22/%3E%3Cpath d=%22m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="terarist"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m8 2 1.88 1.88%22/%3E%3Cpath d=%22M14.12 3.88 16 2%22/%3E%3Cpath d=%22M9 7.13v-1a3.003 3.003 0 1 1 6 0v1%22/%3E%3Cpath d=%22M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6%22/%3E%3Cpath d=%22M12 20v-9%22/%3E%3Cpath d=%22M6.53 9C4.6 8.8 3 7.1 3 5%22/%3E%3Cpath d=%22M6 13H2%22/%3E%3Cpath d=%22M3 21c0-2.1 1.7-3.9 3.8-4%22/%3E%3Cpath d=%22M20.97 5c0 2.1-1.6 3.8-3.5 4%22/%3E%3Cpath d=%22M22 13h-4%22/%3E%3Cpath d=%22M17.2 17c2.1.1 3.8 1.9 3.8 4%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="azyl"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z%22/%3E%3Cpath d=%22M18 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z%22/%3E%3Cpath d=%22M8 13.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z%22/%3E%3Cpath d=%22M21 13.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z%22/%3E%3Cpath d=%22M12 22c-2 0-3.5-1.2-3.5-3 0-1.5 1-2.3 1.8-3.2.7-.8 1.2-1.6 1.7-1.6s1 .8 1.7 1.6c.8.9 1.8 1.7 1.8 3.2 0 1.8-1.5 3-3.5 3Z%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="oblec"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="doplnky"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="domacnost"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9 22V12h6v10%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="kontakt"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); } .navigation-in.menu ul.menu-level-1 > li > a[href*="podminky"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23E8722A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%2215 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3C/svg%3E"); } .navigation-in.menu > ul.menu-level-1 > li > a, .navigation-in.menu > ul.menu-level-1 > li > a *, .navigation-in.menu > ul.menu-level-1 > li > a:hover, .navigation-in.menu > ul.menu-level-1 > li:hover > a, .navigation-in.menu > ul.menu-level-1 > li > a:hover *, .navigation-in.menu > ul.menu-level-1 > li:hover > a *{ text-decoration:none !important; } .navigation-in.menu > ul.menu-level-1 > li > a:hover, .navigation-in.menu > ul.menu-level-1 > li:hover > a{ background:#F6ECD9 !important; color:var(--z-ink) !important; } /* zvýrazněná první položka (Akce) — doplní JS třídou z-menu-cta */ .navigation-in.menu > ul > li.z-menu-cta > a{ background:var(--z-accent) !important; color:#fff !important; box-shadow:none !important; /* bez oranžové záře */ } /* rozbalovací menu */ .menu-level-2{ border-radius:var(--z-r) !important; border:1px solid var(--z-line) !important; box-shadow:var(--z-shadow) !important; } /* ---------- 6b. Zrušit ztmavení stránky při rozbalení menu ---------- */ /* ---- ZRUŠIT ZTMAVENÍ při najetí na menu ---- Nic neskrýváme (skrytí minule shodilo menu) — jen zprůhledníme pozadí všech možných overlay vrstev, které Disco používá. */ .menu-helper, .overlay, .site-overlay, #overlay, .navigation-overlay, .dimmer, .backdrop, .modal-backdrop, .content-overlay{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; opacity:0 !important; pointer-events:none !important; } /* pseudo-vrstvy na body / wrapperu */ body::before, body::after, .overall-wrapper::before, .overall-wrapper::after, #content::before, #content::after{ background:transparent !important; opacity:0 !important; content:none !important; } /* některé šablony ztmavují přes filter/brightness */ body.menu-visible #content, body.menu-visible .overall-wrapper, body.dimmed #content{ filter:none !important; opacity:1 !important; } /* rozbalené submenu jako světle šedá karta ⚠️ Vnitřní wrappery (ul/li/div) Disco pozadí nedědí — mají vlastní bílou, která by přes šedou prosvítala jako pruhy. Proto explicitní transparent. */ .navigation-in.menu ul.menu-level-2{ background:#F5F4F2 !important; border:1px solid var(--z-line) !important; border-radius:18px !important; box-shadow:0 24px 50px -28px rgba(35,32,28,.45) !important; padding:22px !important; } .navigation-in.menu ul.menu-level-2 > li, .navigation-in.menu ul.menu-level-2 > li > div, .navigation-in.menu ul.menu-level-2 ul.menu-level-3, .navigation-in.menu ul.menu-level-2 ul.menu-level-3 > li{ background:transparent !important; } .menu-level-2 a{ color:var(--z-ink) !important; } .menu-level-2 .menu-level-3 a{ color:var(--z-muted) !important; font-size:13.5px !important; } .menu-level-2 .menu-level-3 a:hover{ color:var(--z-accent) !important; } /* skrýt prázdné rámečky obrázků v submenu */ .menu-level-2 a.menu-image img[src^="data:image/svg"]{ display:none !important; } .menu-level-2 a.menu-image:empty{ display:none !important; } /* ========================================================================== PÁS VÝHOD (benefitBanner) — broskvové karty s ikonami dle obrázku 2 ========================================================================== */ .benefitBanner{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important; gap:16px !important; max-width:1240px !important; margin:28px auto 48px !important; /* Odsazení nahoře (od hero) i dole */ padding:0 24px !important; background:transparent !important; border:none !important; } .benefitBanner__item{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important; background:#FAF2E8 !important; /* broskvovo-krémová barva karet z obr. 2 */ border:1px solid #F2E5D5 !important; border-radius:18px !important; padding:16px 20px !important; margin:0 !important; width:auto !important; text-align:left !important; } /* Ikony vlevo — malé, oranžové (#E8722A) */ .benefitBanner__picture{ flex:none !important; width:32px !important; height:32px !important; display:block !important; margin:0 !important; background-color:transparent !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; } .benefitBanner__img{ display:none !important; } /* Oranžové SVG ikony (doručení · osobní odběr · maso · věrnost 5+1) */ .benefitBanner__item:nth-child(1) .benefitBanner__picture{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") !important; } .benefitBanner__item:nth-child(2) .benefitBanner__picture{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E") !important; } .benefitBanner__item:nth-child(3) .benefitBanner__picture{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3a6.5 6.5 0 1 0 0 13H16v-3a6.5 6.5 0 0 0-3.5-10Z'/%3E%3Cpath d='M16 16v2a3 3 0 1 0 6 0v-2'/%3E%3C/svg%3E") !important; } .benefitBanner__item:nth-child(4) .benefitBanner__picture{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") !important; } .benefitBanner__content{ display:flex !important; flex-direction:column !important; gap:2px !important; text-align:left !important; } .benefitBanner__title{ font-size:15px !important; font-weight:700 !important; color:var(--z-ink) !important; line-height:1.25 !important; } .benefitBanner__data{ font-size:13px !important; color:var(--z-muted) !important; line-height:1.3 !important; } @media(max-width:600px){ .benefitBanner{ grid-template-columns:1fr 1fr !important; gap:12px !important; margin-top:20px !important; } .benefitBanner__item{ padding:14px !important; } } /* ========================================================================== SEKCE: Nakupte podle svého mazlíčka (karty kategorií s fotkami) ========================================================================== */ /* ========================================================================== SEKCE: Nakupte podle svého mazlíčka (karty s posuvníkem dle obr.) ========================================================================== */ .z-category-grid-section{ max-width:1240px !important; margin:48px auto 56px !important; padding:0 24px !important; } .z-category-grid-header{ text-align:center !important; margin-bottom:32px !important; } .z-category-slider-wrapper{ position:relative !important; width:100% !important; } /* Horizontální pás karet: 4 karty viditelné + 5. vykukuje napůl */ .z-category-cards{ display:flex !important; flex-direction:row !important; gap:16px !important; overflow-x:auto !important; scroll-behavior:smooth !important; scroll-snap-type:x mandatory !important; padding-bottom:12px !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .z-category-cards::-webkit-scrollbar{ display:none !important; } /* 4 karty plně viditelné + 5. vykukuje vpravo napůl (calc(22.2% - 4px)) */ .z-cat-card{ flex:0 0 calc(22.2% - 4px) !important; min-width:230px !important; scroll-snap-align:start !important; position:relative !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; height:360px !important; border-radius:20px !important; overflow:hidden !important; padding:20px !important; text-decoration:none !important; background-size:cover !important; background-position:center !important; box-shadow:0 10px 24px -12px rgba(35,32,28,.35) !important; transition:transform .25s ease, box-shadow .25s ease !important; } .z-cat-card:hover{ transform:none !important; box-shadow:0 10px 24px -12px rgba(35,32,28,.35) !important; text-decoration:none !important; } .z-cat-card-content{ display:flex !important; flex-direction:column !important; gap:3px !important; color:#fff !important; z-index:2 !important; padding-right:42px !important; } .z-cat-card-content strong{ font-size:20px !important; font-weight:800 !important; line-height:1.2 !important; color:#fff !important; font-family:var(--z-font-title, 'Bricolage Grotesque', sans-serif) !important; } .z-cat-card-content span{ font-size:12.5px !important; color:rgba(255,255,255,.82) !important; line-height:1.3 !important; } .z-cat-btn{ position:absolute !important; bottom:18px !important; right:18px !important; width:36px !important; height:36px !important; border-radius:50% !important; background:var(--z-accent, #E8722A) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:16px !important; font-weight:700 !important; z-index:3 !important; box-shadow:none !important; /* bez oranžové záře */ transition:transform .2s ease, background .2s ease !important; } .z-cat-card:hover .z-cat-btn{ transform:scale(1.1) translateX(2px) !important; background:var(--z-accent-dark, #D1611F) !important; } /* Plovoucí bílé tlačítko se šipkou (přesouvá se doprava/doleva při dojetí) */ .z-cat-slider-next{ position:absolute !important; top:50% !important; right:-18px !important; left:auto !important; transform:translateY(-50%) !important; width:44px !important; height:44px !important; border-radius:50% !important; background:#ffffff !important; color:#241E1A !important; border:none !important; box-shadow:0 8px 24px -6px rgba(0,0,0,.25) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; z-index:10 !important; transition:right .3s ease, left .3s ease, transform .2s ease !important; } .z-cat-slider-next.z-at-end{ right:auto !important; left:-18px !important; } .z-cat-slider-next:hover{ transform:translateY(-50%) scale(1.08) !important; background:#ffffff !important; box-shadow:0 12px 28px -6px rgba(0,0,0,.35) !important; } @media(max-width:992px){ .z-cat-card{ flex:0 0 calc(42% - 8px) !important; min-width:220px !important; height:280px !important; } } @media(max-width:600px){ .z-cat-card{ flex:0 0 calc(72% - 8px) !important; min-width:200px !important; height:260px !important; } .z-cat-slider-next{ right:4px !important; } } /* ========================================================================== PERFEKTNÍ LÍCOVÁNÍ OBSAHOVÝCH SEKCÍ A NADPISŮ (100% FLUSH ALIGNMENT) ========================================================================== */ .banners-row, .benefitBanner, .z-category-grid-section, .products-wrapper, .products-block, .homepage-group, .welcome-wrapper, .z-brands-section { max-width:1280px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:24px !important; padding-right:24px !important; box-sizing:border-box !important; } /* Nulování vnitřních okrajů mřížky Shoptetu — 1. karta lícuje přesně na 24px */ .products-wrapper > div.products, .products-block > div.products, .homepage-group > div.products, body div[id^="products-"] { margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } .products-wrapper .product:first-child, .products-block .product:first-child, .homepage-group .product:first-child, body div[id^="products-"] .product:first-child { margin-left:0 !important; padding-left:0 !important; } .banners-row{ margin-top:0 !important; margin-bottom:48px !important; } .products-wrapper{ margin-bottom:64px !important; } .welcome-wrapper{ margin-top:56px !important; margin-bottom:56px !important; } .welcome{ padding:0 !important; } /* nadpisy a podnadpisy sekcí — 100% lícování dolevy */ .homepage-group-title, .products-block-title, h2.homepage-section-title, .products-wrapper h2, .products-block h2, .homepage-group h2, .z-category-grid-header, .z-brands-header{ font-size:clamp(24px,2.8vw,32px) !important; font-weight:700 !important; font-family:var(--z-font-title, 'Schibsted Grotesk', system-ui, sans-serif) !important; letter-spacing:-.02em !important; color:var(--z-band) !important; margin:0 0 16px 0 !important; padding:0 !important; text-align:left !important; border:none !important; } /* ========================================================================== PRODUKTOVÁ MŘÍŽKA — maximální specificita (slider vypíná JS) ========================================================================== */ body div[id^="products-"], body .products-wrapper > div.products, body div.products.product-slider, body div.products[data-columns], body div.products.z-grid-products{ display:grid !important; /* ⚠️ Bylo repeat(4,1fr). Po rozšíření stránky (--zmax 1600) to znamenalo karty široké 346 px — počet sloupců byl pevný, tak se roztáhly. auto-fill drží velikost karty a počet sloupců si dopočítá sám. */ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:26px 18px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; transform:none !important; translate:none !important; left:auto !important; right:auto !important; position:static !important; overflow:visible !important; white-space:normal !important; float:none !important; flex-wrap:nowrap !important; align-items:stretch !important; } /* položky mřížky */ body div[id^="products-"] > .product, body .products-wrapper > div.products > .product, body div.products > .product{ display:block !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; float:none !important; position:static !important; transform:none !important; flex:none !important; height:auto !important; } /* slick zbytky nesmí zasahovat */ .slick-list, .slick-track{ width:auto !important; transform:none !important; display:contents !important; padding:0 !important; margin:0 !important; } .slick-slide, .slick-slide > div{ display:contents !important; width:auto !important; } .slick-arrow, .slick-dots, .products-wrapper .slider-arrow{ display:none !important; } .slick-cloned{ display:none !important; } /* Pevné počty sloupců pro užší okna už nejsou potřeba — auto-fill si je dopočítá. Zůstává jen mobil, kde chceme natvrdo dva sloupce. */ @media(max-width:820px){ body div[id^="products-"], body .products-wrapper > div.products, body div.products.product-slider, body div.products[data-columns]{ grid-template-columns:repeat(2,1fr) !important; gap:16px !important; } } /* ========================================================================== POJISTKA: rozpustit JAKÉKOLI wrappery, které slider vloží mezi .products a .product (slick-list, slick-track, slick-slide, div…) display:contents = element zmizí z layoutu, jeho děti se stanou přímými položkami gridu. ========================================================================== */ body div[id^="products-"] > *:not(.product), body .products-wrapper > .products > *:not(.product), body div[id^="products-"] .slick-list, body div[id^="products-"] .slick-track, body div[id^="products-"] .slick-slide, body div[id^="products-"] .slick-slide > div{ display:contents !important; } /* karta zůstává blokem, ať funguje jako položka mřížky */ body div[id^="products-"] .product{ display:block !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; float:none !important; position:static !important; transform:none !important; } /* klony ze slideru pryč */ body .slick-cloned{ display:none !important; } /* ========================================================================== KARTA PRODUKTU — dle reference (zarovnání vlevo, čisté, vzdušné) ========================================================================== */ .products .product .p, .product .p{ background:#fff !important; border:1px solid var(--z-line) !important; border-radius:18px !important; overflow:hidden !important; height:100% !important; display:flex !important; flex-direction:column !important; text-align:left !important; transition:box-shadow .2s, transform .2s, border-color .2s; } .products .product:hover .p{ box-shadow:none !important; border-color:var(--z-line) !important; transform:none !important; } /* obrázek */ .product .p .image{ display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; background:#fff !important; aspect-ratio:1/1; overflow:hidden; position:relative; width:100% !important; } .product .p .image img{ max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; } /* obsah — VŠE DOLEVA */ .product .p-in{ padding:0 16px 16px !important; display:flex !important; flex-direction:column !important; flex:1 1 auto !important; text-align:left !important; } .product .p-in-in{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; gap:4px !important; text-align:left !important; } .product .name{ font-weight:700 !important; font-size:15px !important; line-height:1.3 !important; color:var(--z-ink) !important; margin:0 !important; text-align:left !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:39px; } .product .name a{ color:var(--z-ink) !important; } /* SKRÝT BALAST — popisek, kód, počet kusů */ .product .p-desc, .product .description, .product .short-description, .product .p-code, .product .code, .product [class*="product-code"]{ display:none !important; } .product .quantity, .product .p-quantity, .product input[type="number"], .product .increase, .product .decrease, .product .btn-decrease, .product .btn-increase, .product .quantity-wrapper, .product .spinbox{ display:none !important; } /* dostupnost — malý zelený bod, vpravo na řádku značky */ .product .availability{ font-size:12.5px !important; margin:0 !important; text-align:left !important; display:inline-flex !important; align-items:center; gap:5px; } .product .availability::before{ content:"" !important; width:7px; height:7px; border-radius:50%; background:var(--z-ok); display:inline-block; flex:none; } .product .availability-amount, .product .availability span{ color:var(--z-ok) !important; font-weight:600 !important; font-size:12.5px !important; } /* CENA — masivní, vlevo */ .product .prices, .product .price{ margin:0 !important; text-align:left !important; } .product .price-final, .product .price-final strong, .product .price strong{ font-size:23px !important; font-weight:800 !important; color:var(--z-ink) !important; white-space:nowrap; line-height:1.15 !important; text-align:left !important; } .product .price-standard, .product del{ font-size:12.5px !important; color:#A08A72 !important; } /* spodek: tlačítko PŘES CELOU ŠÍŘKU */ .product .p-bottom{ margin-top:auto !important; padding-top:12px !important; display:block !important; border:none !important; text-align:left !important; } .product .p-tools{ display:block !important; width:100% !important; margin:10px 0 0 !important; } .product .btn, .product .add-to-cart-button, .product .btn-cart, .product .p-tools .btn, .btn.add-to-cart-button{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:100% !important; border-radius:12px !important; font-weight:700 !important; font-size:14.5px !important; padding:13px 18px !important; min-height:46px !important; background:var(--z-accent) !important; border:none !important; color:#fff !important; box-shadow:none; transition:.15s; /* bez oranžové záře */ } .product .btn:hover, .product .add-to-cart-button:hover{ background:var(--z-accent-dark) !important; transform:none !important; } /* ikona košíku v tlačítku */ .product .add-to-cart-button::before, .product .btn-cart::before{ content:""; width:17px; height:17px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2221%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2221%22 r=%221%22/%3E%3Cpath d=%22M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12%22/%3E%3C/svg%3E") no-repeat center/contain; } /* ŠTÍTKY — pilulky */ .product .flags{ top:12px !important; left:12px !important; z-index:2; } .product .flag{ border-radius:100px !important; font-size:11.5px !important; font-weight:700 !important; padding:5px 12px !important; letter-spacing:.01em; text-transform:none !important; background:var(--z-accent) !important; color:#fff !important; border:none !important; } .product .flag.flag-tip{ background:var(--z-accent) !important; color:#fff !important; } .product .flag.flag-new{ background:var(--z-ok) !important; } /* ========================================================================== BENTO — sekce jako karty ========================================================================== */ .welcome .z-section > .z-card, .welcome .z-card{ border-radius:18px !important; border:1px solid var(--z-line) !important; background:#fff !important; transition:border-color .15s; } .welcome .z-card:hover{ box-shadow:none !important; transform:none !important; } /* tmavý BARF blok — vzdušnější */ .welcome .z-band{ border-radius:22px !important; padding:44px !important; box-shadow:none !important; } .welcome .z-band .z-h2{ line-height:1.15 !important; } /* zaoblený hero */ #carousel, .carousel{ border-radius:20px !important; } /* ---------- 7. (staré karty — přebito layoutem výše) ---------- */ .products-block .product, .product-slider .product, .products .product{ background:#fff !important; border:1px solid var(--z-line) !important; border-radius:var(--z-r) !important; overflow:hidden; transition:border-color .15s; } .products-block .product:hover, .products .product:hover{ box-shadow:none !important; border-color:var(--z-line) !important; transform:none !important; } .product .name, .product .p-name{ font-weight:600 !important; color:var(--z-ink) !important; } .product .price-final, .product .price-final strong{ font-weight:800 !important; font-size:20px !important; color:var(--z-ink) !important; } .availability-label, .availability .show-tooltip{ font-weight:600 !important; } .availability-amount, span[class*="availability"]{ color:var(--z-ok) !important; } /* štítky / příznaky */ .flag{ border-radius:8px !important; font-weight:700 !important; letter-spacing:.02em; } .flag.flag-action, .flag-discount{ background:var(--z-accent) !important; } .flag.flag-new{ background:var(--z-ok) !important; } /* ---------- 8. TLAČÍTKA ---------- */ .btn.btn-primary, .btn-conversion, .add-to-cart-button, button.add-to-cart-button{ background:var(--z-accent) !important; border-color:var(--z-accent) !important; color:#fff !important; border-radius:var(--z-r-sm) !important; font-weight:700 !important; transition:.15s; } .btn.btn-primary:hover, .btn-conversion:hover, .add-to-cart-button:hover{ background:var(--z-accent-dark) !important; border-color:var(--z-accent-dark) !important; transform:translateY(-1px); } .btn.btn-default, .btn-secondary{ background:#fff !important; color:var(--z-ink) !important; border:1.5px solid var(--z-line) !important; border-radius:var(--z-r-sm) !important; } /* ---------- 9. FILTRY (klíčová funkce projektu) ---------- */ /* ---------- 9. FILTRY & SIDELINE (BENTO STYL) ---------- */ #filters, .filters-wrapper, .sidebar .box, .box-categories, .box-filters { background: #fff !important; border: 1px solid var(--z-line) !important; border-radius: 16px !important; padding: 20px !important; margin-bottom: 24px !important; box-shadow: 0 4px 16px -8px rgba(35,32,28,.1) !important; } #filters .filter-section-title, #filters h4, .box h3, .box h4 { font-size: 13px !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--z-accent) !important; font-weight: 700 !important; margin-bottom: 14px !important; } #filters .filter-section { border-bottom: 1px solid var(--z-line) !important; padding: 14px 0 !important; } .filter-label { font-size: 14px !important; color: var(--z-ink) !important; cursor: pointer; } .filter-count { color: var(--z-muted) !important; font-size: 12px !important; } /* custom checkboxes in filters */ #filters input[type="checkbox"] { accent-color: var(--z-accent) !important; width: 16px !important; height: 16px !important; margin-right: 8px !important; } /* cena slider */ .ui-slider-range { background: var(--z-accent) !important; } .ui-slider-handle { background: var(--z-accent) !important; border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.2) !important; } /* ---------- 10. PATIČKA (TMAVÁ #1C1713) ---------- */ /* Patička drží stejnou osu jako zbytek stránky (--zmax / --zpad), ne vlastní užší pruh. Heureka pruh, mřížka i spodní řádek tak lícují nejen mezi sebou, ale i s logem, menu a obsahem nad nimi. ⚠️ .z-heureka je přímý potomek #footer, takže bez vlastní max-width přetékal přes celou šířku a nelícoval s mřížkou. */ #footer, .footer { background: #1C1713 !important; color: rgba(247,239,226,.72) !important; margin-top: 72px !important; padding: 56px 0 28px !important; border-top: none !important; } #footer a, .footer a { color: rgba(247,239,226,.75) !important; text-decoration: none !important; transition: color .2s ease; } #footer a:hover, .footer a:hover { color: #FFFFFF !important; } .z-footer-grid { width: 100%; max-width: var(--zmax, 1600px); margin: 0 auto; padding: 0 var(--zpad, 32px); box-sizing: border-box; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.15fr; gap: 40px 48px; align-items: start; } /* Všechny čtyři sloupce začínají stejnou hlavičkou na stejné účaří. Značka v 1. sloupci je větší, proto má sjednocený line-height. */ .z-footer-col strong { color: #FFFFFF !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; margin: 0 0 18px !important; display: block !important; } .z-footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; line-height: 1.45; } .z-footer-social { display: flex; gap: 10px; margin-top: 20px; } .z-footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #fff !important; transition: background .2s; } .z-footer-social a:hover { background: var(--z-accent) !important; } .z-footer-bottom { width: 100%; max-width: var(--zmax, 1600px); margin: 44px auto 0; padding: 22px var(--zpad, 32px) 0; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(247,239,226,.5); } /* ---------- 11. Přístupnost ---------- */ a:focus-visible, button:focus-visible, input:focus-visible{ outline:3px solid rgba(232,114,42,.45) !important; outline-offset:2px; border-radius:6px; } /* ---------- 12. Vlastní bloky (HTML na úvodní straně) ---------- */ .z-section{ max-width:1220px; margin:56px auto 0; padding:0 16px; } .z-eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--z-accent); margin-bottom:10px; text-transform:uppercase; } .z-h2{ font-size:clamp(26px,3.6vw,40px); font-weight:800; color:var(--z-band); margin:0; } .z-sub{ color:var(--z-muted); font-size:15.5px; margin-top:8px; } .z-card{ background:#fff; border:1px solid var(--z-line); border-radius:var(--z-r); padding:20px; } .z-grid{ display:grid; gap:16px; } .z-grid-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .z-grid-3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .z-grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .z-band{ background:var(--z-band); color:#F7EFE2; border-radius:24px; padding:40px; } .z-band h2, .z-band .z-h2{ color:#fff; } .z-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--z-accent); color:#fff !important; font-weight:700; padding:14px 26px; border-radius:13px; text-decoration:none; } .z-btn:hover{ background:var(--z-accent-dark); } .z-chip{ display:inline-flex; align-items:center; padding:8px 14px; background:#F6EFE2; border-radius:9px; font-size:13.5px; color:#4A4038; font-weight:600; text-decoration:none; } .z-chip:hover{ background:#F2E3CC; } .z-usp{ display:flex; align-items:center; gap:13px; } .z-usp-ico{ width:46px; height:46px; flex:none; border-radius:13px; background:#F6ECD9; display:inline-flex; align-items:center; justify-content:center; font-size:22px; } .z-usp b{ display:block; font-size:15px; } .z-usp span{ font-size:12.5px; color:var(--z-muted); } /* ---------- 12b. HERO — perfektní zarovnání s hlavičkou a menu ---------- */ .banners-row > div:not(:first-child), .banners-row .col-sm-4, .banners-row .banner-wrapper:not(:first-child){ display:none !important; } .in-index #navigation, .type-index #navigation, .in-index #header, .type-index #header, .in-index #header .header-bottom, .type-index #header .header-bottom{ margin-bottom:0 !important; padding-bottom:0 !important; } .in-index #content-wrapper, .type-index #content-wrapper, .in-index #content, .type-index #content, .in-index .content-wrapper-in, .type-index .content-wrapper-in{ padding-left:0 !important; padding-right:0 !important; padding-top:4px !important; margin-top:0 !important; } .banners-row{ max-width:1280px !important; margin:0 auto 48px !important; padding:0 24px !important; /* 24px lícování s logem a menu */ } .banners-row > .col-sm-8, .banners-row > div:first-child, .banners-row > div{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important; margin:0 !important; } #carousel, .carousel, .homepage-slider{ border-radius:24px !important; overflow:hidden !important; box-shadow:0 10px 30px -22px rgba(35,32,28,.25) !important; margin:0 !important; width:100% !important; max-height:520px !important; /* nižší hero carousel dle přání */ } .carousel-inner, .carousel-inner .item{ border-radius:24px !important; overflow:hidden !important; max-height:520px !important; } .carousel-inner .item img{ width:100% !important; height:520px !important; object-fit:cover !important; object-position:center center !important; display:block !important; } /* Šipky — obě přesně na stejné úrovni vpravo dole */ #carousel, .carousel{ position:relative !important; } .carousel-control.left, .carousel-control.right{ position:absolute !important; top:auto !important; bottom:20px !important; transform:none !important; width:44px !important; height:44px !important; border-radius:50% !important; background:rgba(0,0,0,.35) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border:1px solid rgba(255,255,255,.25) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 6px 20px rgba(0,0,0,.25) !important; opacity:0.95 !important; cursor:pointer !important; z-index:10 !important; transition:background-color .2s ease, transform .2s ease !important; /* nulovat vše co by mohlo posunout jednu šipku jinam */ margin:0 !important; padding:0 !important; line-height:44px !important; vertical-align:middle !important; float:none !important; } .carousel-control.left{ right:76px !important; left:auto !important; } .carousel-control.right{ right:20px !important; left:auto !important; } .carousel-control:hover{ background:rgba(0,0,0,.55) !important; color:#fff !important; opacity:1 !important; } .carousel-control.left::before{ content:"" !important; width:18px !important; height:18px !important; display:block !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center/contain !important; } .carousel-control.right::before{ content:"" !important; width:18px !important; height:18px !important; display:block !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain !important; } .carousel-control .sr-only, .carousel-control .glyphicon, .carousel-control .icon-prev, .carousel-control .icon-next{ display:none !important; } /* Indikátory — nalevo od šipek vpravo dole */ .carousel-indicators{ position:absolute !important; bottom:37px !important; right:136px !important; left:auto !important; margin:0 !important; width:auto !important; display:flex !important; align-items:center !important; gap:8px !important; z-index:10 !important; } .carousel-indicators li{ width:10px !important; height:10px !important; border-radius:50% !important; background:rgba(255,255,255,.6) !important; border:none !important; margin:0 !important; cursor:pointer !important; transition:all .3s ease !important; } .carousel-indicators li.active, .carousel-indicators .active{ width:28px !important; height:10px !important; border-radius:100px !important; background:var(--z-accent, #E8722A) !important; border:none !important; } /* ---------- 12c. Nadpisy sekcí (Schibsted Grotesk, font-weight: 700) ---------- */ h1, h2, h3, .z-h2, .homepage-group-title, .products-block-title, h2.homepage-section-title, .z-category-grid-header h2{ font-family:var(--z-font-title, 'Schibsted Grotesk', system-ui, sans-serif) !important; font-weight:700 !important; letter-spacing:-.02em !important; color:var(--z-band) !important; } .homepage-group-title, .products-block-title, h2.homepage-section-title{ font-size:clamp(24px,3vw,34px) !important; text-align:left; } /* ---------- 12d. Výpis kategorií (dlaždice) ---------- */ .category-perex, .subcategories{ border:none !important; } .subcategories li a{ background:#fff !important; border:1px solid var(--z-line) !important; border-radius:var(--z-r) !important; padding:14px 16px !important; font-weight:600 !important; transition:.2s; } .subcategories li a:hover{ border-color:var(--z-accent) !important; transform:translateY(-2px); } /* ---------- 12e. Detail produktu ---------- */ .p-detail .p-final-price-wrapper .price-final{ font-size:32px !important; font-weight:800 !important; color:var(--z-ink) !important; } /* ⚠️ Název produktu se řídí VÝHRADNĚ ze zoo4you-pages.css, sekce 9. Bylo tu druhé pravidlo se stejnou specificitou (weight:800, clamp(24,3vw,34)), které se se sekcí 9 lišilo jen pořadím načtení — a v zúženém okně se rozhodovalo jinak než na plné šířce, takže nadpis měnil tloušťku podle šířky okna. Sem to pravidlo nevracet. */ .p-info-wrapper .add-to-cart .btn{ padding:16px 32px !important; font-size:16px !important; border-radius:14px !important; background:var(--z-accent) !important; } .p-detail .availability-value{ color:var(--z-ok) !important; font-weight:700 !important; } .p-detail .image-thumbnail img { border-radius: 10px; border: 1px solid var(--z-line); transition: border-color .2s; } .p-detail .image-thumbnail:hover img { border-color: var(--z-accent); } /* parametry produktu */ .detail-parameters th{ color:var(--z-muted) !important; font-weight:600 !important; padding: 10px 14px !important; } .detail-parameters td{ color:var(--z-ink) !important; padding: 10px 14px !important; } .detail-parameters tr:nth-child(even){ background: #FAF7F2 !important; } /* ---------- 12f. Košík a pokladna ---------- */ .cart-table .price-final, .cart-summary .price-final{ font-weight:800 !important; color:var(--z-ink) !important; } .checkout-box, .cart-summary{ background:#fff !important; border:1px solid var(--z-line) !important; border-radius:18px !important; padding:24px !important; box-shadow:0 4px 20px -10px rgba(35,32,28,.1) !important; } /* ---------- 12g. Stránkování a řazení ---------- */ .pagination a, .pagination span{ border-radius:10px !important; border-color:var(--z-line) !important; padding:8px 14px !important; font-weight:600 !important; } .pagination .active span{ background:var(--z-accent) !important; border-color:var(--z-accent) !important; color:#fff !important; } /* ---------- 13. MOBIL & RESPONSIVITY ---------- */ @media(max-width:991px){ .header-top-wrapper .search-widget.stay-open{ order:3; flex-basis:100%; max-width:none; margin:10px 0 0; } .site-name img{ max-height:48px !important; } .z-section{ margin-top:36px; } .z-band{ padding:24px; border-radius:18px; } } @media(max-width:900px){ .welcome .z-grid-2{ grid-template-columns:1fr; } .z-footer-grid { grid-template-columns:1fr 1fr !important; gap:32px !important; } } @media(max-width:560px){ .z-footer-grid { grid-template-columns:1fr !important; gap:28px !important; } } /* ---------- 14. ZRUŠENÍ VŠECH ŠEDÝCH STÍNŮ A SKÁKÁNÍ NA HOVER ---------- */ .product, .product:hover, .product *, .p, .p:hover, .z-cat-card, .z-cat-card:hover, .z-card, .z-card:hover, .bento-box, .bento-box:hover, .welcome .z-card, .welcome .z-card:hover, .welcome .z-band, .welcome .z-band:hover, .subcategories li a, .subcategories li a:hover, .category-perex, .category-perex:hover, .checkout-box, .cart-summary { box-shadow: none !important; transform: none !important; }