: li > div > a.
Selektor `li > a` proto NEsedí a tiše nic nedělá.
⚠️ V DOM je i druhá, skrytá kopie menu (mobil, šířka 0) — při ladění
v konzoli je nutné filtrovat na getBoundingClientRect().width > 0,
jinak měříš neviditelný klon a vypadá to, že se nic nezměnilo. */
body .navigation-in.menu ul.menu-level-2 > li > a,
body .navigation-in.menu ul.menu-level-2 > li > div > a,
body .navigation-in.menu ul.menu-level-2 > li > a b,
body .navigation-in.menu ul.menu-level-2 > li > div > a b,
body .navigation-in.menu ul.menu-level-2 > li > a span,
body .navigation-in.menu ul.menu-level-2 > li > div > a span{
font-size:15px !important;
font-weight:600 !important;
line-height:1.3 !important;
letter-spacing:-.005em !important;
color:#23201C !important;
}
body .navigation-in.menu ul.menu-level-2 > li > a:hover,
body .navigation-in.menu ul.menu-level-2 > li > div > a:hover{ color:#C4551A !important; }
/* "Akce & výprodej" — oranžový chip (vkládá zoo4you-hero.js) */
body .menu-level-1 > li.z-menu-akce > a,
body .menu-level-1 > li.z-menu-akce > a b{
color:#C4551A !important;
font-weight:700 !important;
}
body .menu-level-1 > li.z-menu-akce > a{
background:#FDEEE0 !important;
border-radius:11px !important;
padding:11px 18px !important;
}
body .menu-level-1 > li.z-menu-akce > a:hover{
background:#FAE0CC !important; color:#C4551A !important;
}
body .menu-level-1 > li.z-menu-akce > a::before{
content:"" !important; display:inline-block !important;
width:18px; height:18px; margin-right:8px; flex:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C4551A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E") no-repeat center/contain !important;
}
/* menší mezera mezi menu a carouselem
⚠️ Záporná margin-top se nedá přetáhnout donekonečna — pod −20 px už
hero leze pod poslední řádek menu a ukusuje mu spodní hranu. */
body #header .header-bottom{ padding-bottom:0 !important; }
body #header{ padding-bottom:0 !important; margin-bottom:0 !important; }
body main#content .banners-row{ margin-top:-16px !important; }
body.in-index #content-wrapper, body.type-index #content-wrapper{ padding-top:0 !important; }
/* Mobil má vlastní geometrii hera (celoplošný, těsně pod fixní hlavičkou)
a řeší se celá v zoo4you-pages.css, sekce 17. Tady schválně nic —
pages.css se načítá poslední a přebíjel by to stejně. */
/* ==========================================================================
SEKCE KATEGORIÍ — lícování + posouvání jako v referenci
Sekce měla vlastní padding:24px navíc k tomu, co už nese main#content
→ obsah začínal na 168 px místo 144 px. Ověřeno naživo.
========================================================================== */
body main#content .z-category-grid-section{
padding-left:0 !important; padding-right:0 !important;
max-width:none !important; width:100% !important;
}
body .z-category-grid-section > .z-category-grid-header,
body .z-category-grid-section > .z-category-slider-wrapper{
padding-left:0 !important; padding-right:0 !important;
margin-left:0 !important; margin-right:0 !important;
max-width:none !important; width:100% !important;
}
/* vodorovné posouvání: plynulé, se snapem, bez viditelného posuvníku */
body .z-category-cards{
scroll-behavior:smooth !important;
scroll-snap-type:x mandatory !important;
scrollbar-width:none !important;
-ms-overflow-style:none !important;
padding-bottom:4px !important;
}
body .z-category-cards::-webkit-scrollbar{ display:none !important; }
body .z-category-cards > *{
scroll-snap-align:start !important;
flex:0 0 auto !important;
}
/* ==========================================================================
EYEBROW nadpisy + ŠIPKY CAROUSELU — ověřeno naživo
========================================================================== */
/* eyebrow měl padding-left:24px → text se posouval o 24 px proti nadpisu */
body main#content .z-eyebrow,
body .welcome .z-eyebrow,
body span.z-eyebrow{
padding:0 !important;
margin-left:0 !important; margin-right:0 !important;
display:block !important;
}
/* šipky carouselu: bílé kruhy s oranžovou šipkou, vpravo dole u indikátorů */
body #carousel .carousel-control,
body .carousel .carousel-control{
position:absolute !important;
top:auto !important; bottom:20px !important;
width:42px !important; height:42px !important;
border-radius:50% !important;
background-color:rgba(255,255,255,.95) !important;
box-shadow:0 6px 18px -6px rgba(0,0,0,.35) !important;
border:none !important; opacity:1 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
transform:none !important; text-shadow:none !important; font-size:0 !important;
background-repeat:no-repeat !important; background-position:center !important;
transition:.15s;
}
body #carousel .carousel-control:hover{
background-color:#fff !important; transform:scale(1.06) !important;
}
body #carousel .carousel-control.left { left:auto !important; right:74px !important; }
body #carousel .carousel-control.right{ left:auto !important; right:20px !important; }
body #carousel .carousel-control::before,
body #carousel .carousel-control::after{ content:none !important; }
body #carousel .carousel-control span,
body #carousel .carousel-control i{ display:none !important; }
body #carousel .carousel-control.left{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") !important;
}
body #carousel .carousel-control.right{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23E8722A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}
/* indikátory vlevo od šipek */
body #carousel .carousel-indicators{
left:auto !important; right:130px !important; bottom:32px !important;
width:auto !important; margin:0 !important; text-align:right !important;
}
/* --- levý panel: místo plusku stejná ikona jako v hlavním menu ---------------
.cat-trigger je uvnitř
, takže se dá cílit přes href rodiče.
Barva stroke přebarvená z oranžové na barvu textu (#1F1F1F).
⚠️ Reset (content:"") je schválně jen v tomhle výčtu osmi kategorií,
ne na všech .cat-trigger. Kdyby platil plošně, kategorie bez ikony
(Oblečení, Módní doplňky, Do domácnosti, Značky) i všechny podkategorie
by přišly o plus a zůstalo by po nich prázdné místo.
⚠️ SVG v background-image musí mít width/height, jinak se nevykreslí. */
body .sidebar-left .topic > a[href*="barf"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="psy"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="kocky"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="hlodavce"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="ptactvo"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="akvarist"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="terarist"] .cat-trigger::before,
body .sidebar-left .topic > a[href*="azyl"] .cat-trigger::before{
content:"" !important;
display:inline-block !important;
width:18px !important; height:18px !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:18px 18px !important;
vertical-align:-3px !important;
}
body .sidebar-left .topic > a[href*="barf"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12.5 3a6.5 6.5 0 1 0 0 13H16v-3a6.5 6.5 0 0 0-3.5-10Z%22/%3E%3Cpath d=%22M16 16v2a3 3 0 1 0 6 0v-2%22/%3E%3C/svg%3E"); }
body .sidebar-left .topic > a[href*="psy"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="kocky"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="hlodavce"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="ptactvo"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="akvarist"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="terarist"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
body .sidebar-left .topic > a[href*="azyl"] .cat-trigger::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231F1F1F%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"); }
/* --- Chipy kategorií nad produktovou řadou (vkládá zoo4you.js) ---------- */
body .z-chip-bar{
display:flex; flex-wrap:wrap; gap:8px;
margin:0 0 20px;
}
body .z-chip-pill{
display:inline-flex; align-items:center;
padding:9px 18px; border-radius:100px;
border:1px solid var(--z-line,#EFE7D8); background:#fff;
font-size:14px; font-weight:500; color:var(--z-ink,#23201C);
text-decoration:none; white-space:nowrap; transition:.15s;
}
body .z-chip-pill:hover{
border-color:var(--z-accent,#E8722A);
color:var(--z-accent-dark,#C4551A);
}
@media (max-width:767px){
body .z-chip-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
body .z-chip-pill{ flex:none; }
}
/* --- BARF band: text nahoře, čtyři kroky poradny pod ním ------------------
Poradna se do bandu přesouvá v zoo4you.js.
⚠️ Band musí být blokový — jako flex si kroky sednou vedle textu do
úzkých sloupců a text se láme po dvou slovech.
⚠️ Kroky přicházejí jako .z-card s bílým pozadím (!important). Na fotce
z toho byly bílé obdélníky se světlým, nečitelným textem. Proto se
karta úplně rozpouští a zůstane jen číslo, nadpis a text. */
body .z-band{ display:block !important; }
body .z-band > div:first-child{ max-width:680px !important; }
body .z-band .z-barf-steps{
display:grid !important; grid-template-columns:repeat(4,1fr) !important;
gap:24px 34px !important; margin-top:32px !important;
width:100% !important; max-width:none !important;
position:relative; z-index:2;
}
html body .z-band .z-barf-steps > .z-card,
html body .z-band .z-barf-steps > *{
background:transparent !important; border:none !important;
box-shadow:none !important; border-radius:0 !important;
padding:0 !important; min-height:0 !important;
}
/* číslo kroku jako oranžový kolečkový odznak */
html body .z-band .z-barf-steps > * > span:first-child{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:26px !important; height:26px !important; flex:none !important;
border-radius:50% !important; background:var(--z-accent,#E8722A) !important;
color:#fff !important; font-size:13px !important; font-weight:700 !important;
margin:0 0 12px !important;
}
html body .z-band .z-barf-steps strong{
display:block !important; color:#fff !important;
font-size:16px !important; font-weight:600 !important; margin:0 0 6px !important;
}
html body .z-band .z-barf-steps p{
color:rgba(255,255,255,.82) !important;
font-size:13.5px !important; line-height:1.5 !important; margin:0 !important;
}
@media(max-width:900px){ body .z-band .z-barf-steps{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:560px){ body .z-band .z-barf-steps{ grid-template-columns:1fr !important; } }
/* --- mezera mezi produktovou řadou a uvítacím textem ----------------------
Sčítaly se čtyři odsazení naráz (64 + 44 + 56 + …) → 274 px prázdna.
Po úpravě 146 px. */
html body .products-wrapper{ margin-bottom:24px !important; }
html body .welcome-wrapper{ margin-top:0 !important; padding-top:0 !important; }
html body .welcome > div{ padding-top:0 !important; margin-top:0 !important; }
html body .welcome .z-section{ margin-top:34px !important; }
html body .welcome .z-section:first-child{ margin-top:24px !important; }
/* "Proč nakoupit u nás" — po odebrání dvou duplicit zbyly čtyři dlaždice,
ve třech sloupcích by jedna zůstala sama na druhém řádku. */
body .z-why-grid{ grid-template-columns:repeat(4,1fr) !important; }
@media(max-width:900px){ body .z-why-grid{ grid-template-columns:1fr 1fr !important; } }
/* --- Rozvoz: mapa se zónami + grafika ČR (staví zoo4you.js) ---------------
⚠️ Overlay se musí vynutit přes !important — .z-zones dědí z šablony
position:static a bez toho karta spadne pod mapu a udělá tam bílé pole.
⚠️ Pravý panel má oranžové pozadí na CELÉ kartě, ne jen za grafikou. */
body .z-delivery{
display:grid; grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr);
gap:18px; align-items:stretch;
}
body .z-delivery-map{
position:relative !important; background:#fff;
border:1px solid var(--z-line,#EFE7D8); border-radius:18px; overflow:hidden;
display:flex; flex-direction:column;
}
body #z-map{ height:360px !important; width:100%; flex:1 1 auto; }
/* výběr zón jako plovoucí karta PŘES mapu */
body .z-delivery-map .z-zones-overlay{
position:absolute !important;
left:14px !important; right:14px !important; bottom:14px !important;
top:auto !important; z-index:600 !important;
list-style:none !important; margin:0 !important; padding:7px !important;
display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:6px !important;
background:rgba(255,255,255,.93) !important; backdrop-filter:blur(8px);
border:1px solid var(--z-line,#EFE7D8) !important; border-radius:14px !important;
box-shadow:0 18px 40px -22px rgba(35,32,28,.5) !important;
}
body .z-zones-overlay li{
padding:9px 12px; border-radius:10px; cursor:default; transition:.15s;
border:1px solid transparent; margin:0;
}
body .z-zones-overlay li::before, body .z-zones-overlay li::after{ content:none !important; }
body .z-zones-overlay li b{
display:flex; align-items:center; gap:8px;
font-size:13px; font-weight:600; color:var(--z-ink,#23201C); margin-bottom:3px;
}
body .z-zones-overlay li b::before{
content:"" !important; width:9px; height:9px; border-radius:50%; flex:none;
background:var(--z-accent,#E8722A);
}
body .z-zones-overlay li[data-z="1"] b::before{ opacity:.6; }
body .z-zones-overlay li[data-z="2"] b::before{ opacity:.32; }
body .z-zones-overlay li span{
display:block; font-size:11.5px; color:var(--z-muted,#5F5447); line-height:1.35;
}
body .z-zones-overlay li:hover{ background:#FDF3E9; border-color:var(--z-accent,#E8722A); }
/* pravý panel — oranžové pozadí přes celou kartu, grafika ČR nahoře */
body .z-delivery-cr{
display:flex; flex-direction:column; height:100%;
text-decoration:none; transition:.15s;
background:linear-gradient(160deg,#FDF3E9 0%,#F6EADA 100%) !important;
border:1px solid var(--z-line,#EFE7D8); border-radius:18px; overflow:hidden;
}
body .z-delivery-cr:hover{ border-color:var(--z-accent,#E8722A); }
body .z-cr-art{
position:relative; flex:1 1 auto; width:100%;
display:flex; align-items:center; justify-content:center;
background:transparent !important; padding:18px 22px 8px;
}
body .z-cr-art svg{ width:100%; height:auto; overflow:visible; }
body .z-cr-art svg path{
fill:rgba(232,114,42,.16);
stroke:var(--z-accent,#E8722A); stroke-width:1.6;
stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
body .z-cr-dot{ fill:var(--z-accent,#E8722A); stroke:#fff; stroke-width:2; }
body .z-cr-halo{ fill:rgba(232,114,42,.20); animation:zPulse 2.6s ease-out infinite; transform-origin:217.6px 122.1px; }
@keyframes zPulse{ 0%{transform:scale(.5);opacity:.7} 70%{transform:scale(1.25);opacity:0} 100%{opacity:0} }
body .z-cr-pinlabel{
position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
font-size:11.5px; font-weight:600; color:var(--z-accent-dark,#C4551A);
background:rgba(255,255,255,.85); padding:3px 10px; border-radius:100px;
}
body .z-cr-text{ padding:4px 20px 20px; background:transparent !important; }
body .z-cr-text strong{ display:block; font-size:15.5px; color:var(--z-ink,#23201C); margin-bottom:5px; }
body .z-cr-text span{ display:block; font-size:12.5px; color:var(--z-muted,#5F5447); line-height:1.45; margin-bottom:9px; }
body .z-cr-text em{ font-style:normal; font-size:13px; font-weight:600; color:var(--z-accent-dark,#C4551A); }
@media(max-width:900px){
body .z-delivery{ grid-template-columns:1fr; }
body #z-map{ height:300px !important; }
body .z-delivery-map .z-zones-overlay{
position:static !important; grid-template-columns:1fr !important;
box-shadow:none !important; border:none !important;
border-top:1px solid var(--z-line,#EFE7D8) !important;
border-radius:0 !important; backdrop-filter:none;
}
}
/* --- Vodorovné pásy karet: šipky se ukazují podle potřeby -------------------
Kotví se na .z-slider, který kolem pásu vytvoří zoo4you.js.
Bez třídy can-prev / can-next jsou šipky neviditelné a neklikatelné —
nezabírají místo a nepletou, když se karty vejdou na jednu obrazovku. */
body .z-slider{ position:relative; }
body .z-slide-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
background:#fff; color:#241E1A; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; z-index:10;
box-shadow:0 8px 24px -6px rgba(0,0,0,.25);
opacity:0; pointer-events:none; transition:opacity .18s ease, transform .2s ease;
}
body .z-slide-prev{ left:-18px; }
body .z-slide-next{ right:-18px; }
body .z-slider.can-prev .z-slide-prev,
body .z-slider.can-next .z-slide-next{ opacity:1; pointer-events:auto; }
body .z-slide-btn:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 12px 28px -6px rgba(0,0,0,.35); }
@media(max-width:1100px){
body .z-slide-prev{ left:4px; }
body .z-slide-next{ right:4px; }
}
/* ==========================================================================
PATIČKA — Heureka pruh + úklid grafiky
Emoji nahrazená čárovými ikonami (stejná sada jako po celém webu),
inline styly přesunuté sem, ať jde patička ladit z jednoho místa.
========================================================================== */
/* ⚠️ .z-heureka je přímý potomek #footer (ne uvnitř .z-footer-grid), takže
bez vlastní max-width se roztáhl přes celou šířku patičky a nelícoval
s mřížkou pod sebou. Stejná osa jako grid: 1192 px, 24 px od kraje. */
body #footer .z-heureka, body .footer .z-heureka{
display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap;
box-sizing:border-box;
/* Není v mřížce, ale musí lícovat s jejím obsahem: proto se odsazení
odečítá tady, ne přidává paddingem jako u .z-footer-grid. */
width:calc(100% - 2 * var(--zpad,32px));
max-width:calc(var(--zmax,1600px) - 2 * var(--zpad,32px));
margin:0 auto 40px;
padding:16px 20px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:16px; text-decoration:none; transition:.15s;
}
body .z-heureka:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); }
body .z-heureka-badge{
display:inline-flex; align-items:center; gap:7px; flex:none;
background:rgba(59,140,90,.22); color:#8FD6A8;
border:1px solid rgba(143,214,168,.35);
font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:100px;
}
body .z-heureka-badge svg{ width:14px; height:14px; }
body .z-heureka-main{ font-size:16px; color:#fff; font-weight:500; }
body .z-heureka-main b{ font-weight:800; }
body .z-heureka-sub{ font-size:13.5px; color:rgba(247,239,226,.7); flex:1 1 220px; }
body .z-heureka-cta{ font-size:13.5px; font-weight:600; color:var(--z-accent,#E8722A); white-space:nowrap; }
body .z-heureka:hover .z-heureka-cta{ color:#F09B5F; }
/* značka a perex v prvním sloupci */
body .z-footer-brand{ margin-bottom:14px; }
body .z-footer-brand strong{ color:#fff; font-size:22px; font-weight:800; letter-spacing:-.02em; }
body .z-footer-brand span{ display:block; font-size:12.5px; color:var(--z-accent,#E8722A); font-weight:700; margin-top:2px; }
body .z-footer-about{
font-size:14px; line-height:1.55; max-width:300px;
margin-bottom:16px; color:rgba(247,239,226,.8);
}
/* kontakty s ikonami — mřížka ikona + text, ať text nezalamuje pod ikonu */
body .z-footer-contact .z-fc{
display:grid; grid-template-columns:18px 1fr; align-items:start; gap:9px;
color:rgba(247,239,226,.78); text-decoration:none; line-height:1.45;
}
body .z-footer-contact .z-fc i{ display:block; width:16px; height:16px; color:var(--z-accent,#E8722A); }
body .z-footer-contact .z-fc i svg{ width:16px; height:16px; display:block; }
body .z-footer-contact .z-fc.strong{ color:#fff; font-weight:600; }
body .z-footer-contact .z-fc.dim{ grid-template-columns:1fr; padding-left:27px; font-size:12.5px; color:rgba(247,239,226,.6); }
body .z-footer-contact .z-fc.ico{ grid-template-columns:1fr; padding-left:27px; font-size:12.5px; color:rgba(247,239,226,.5); }
body .z-footer-contact .z-fc em{ font-style:normal; font-weight:400; font-size:12.5px; color:rgba(247,239,226,.55); }
body .z-footer-contact a.z-fc:hover{ color:var(--z-accent,#E8722A); }
@media(max-width:700px){
body .z-heureka{ gap:10px; padding:14px 16px; }
body .z-heureka-main{ font-size:15px; }
}
/* --- Pásy, kde karty vyplní přesně šířku stránky (potřeby, věrnostní) -----
Sekce mazlíčků si nechává původní chování (4 karty + pátá vykukuje),
tyhle dvě mají karty roztažené na celou šířku v poměru 3:4.
⚠️ .z-cat-card má height:360px !important — bez height:auto by se
aspect-ratio neprojevilo. A bez min-width:0 by flex položky odmítly
zmenšit pod svou min-width:230px a pás by přetekl. */
body .z-category-cards.z-fill{ scroll-snap-type:none !important; }
body .z-category-cards.z-fill > .z-cat-card{
flex:1 1 0 !important;
min-width:0 !important;
height:auto !important;
aspect-ratio:3/4 !important;
}
/* na užších displejích se přepne zpět na posuvný pás — jinak by karty
byly tak úzké, že by se do nich nevešel popisek */
@media(max-width:1100px){
body .z-category-cards.z-fill > .z-cat-card{
flex:0 0 calc(33.333% - 11px) !important; min-width:190px !important;
}
}
@media(max-width:760px){
body .z-category-cards.z-fill > .z-cat-card{
flex:0 0 calc(50% - 8px) !important; min-width:170px !important;
}
}
/* --- Účet / Přihlásit v hlavičce (vkládá blok 1c v zoo4you.js) ----------- */
body .navigation-buttons{
display:flex !important; align-items:center !important;
gap:14px !important; padding-left:18px !important;
}
/* Vyhledávání má dojet až k přihlášení: .search nese padding-right:40px
a margin-right:24px, košík k tomu má margin-left:40px — dohromady 104 px
prázdna mezi polem a ikonami. Bereme 104 px zpátky poli (je flex:1 1 auto). */
body #header .header-top-wrapper > .search{
padding-right:0 !important; margin-right:0 !important;
}
html body #header .navigation-buttons > a.cart-count{ margin-left:0 !important; }
body .z-account{
display:flex !important; align-items:center !important; gap:10px !important;
text-decoration:none !important; padding:2px !important;
color:inherit !important; flex:none !important;
}
body .z-account .z-account-ico{
flex:0 0 36px; width:36px; height:36px; border-radius:50%;
background:#F2F0EC; color:#6B635A;
display:flex; align-items:center; justify-content:center;
transition:background .15s, color .15s;
}
body .z-account .z-account-ico svg{ width:19px; height:19px; }
body .z-account:hover .z-account-ico{ background:#EAE6E0; color:#23201C; }
body .z-account .z-account-txt{
display:flex; flex-direction:column; line-height:1.15; text-align:left;
}
body .z-account .z-account-top{
font-size:11.5px; font-weight:400; color:#9A928A;
}
body .z-account .z-account-main{
font-size:14px; font-weight:600; color:#23201C; white-space:nowrap;
transition:color .15s;
}
body .z-account:hover .z-account-main{ color:var(--z-accent); }
/* na telefonu hlavička nemá místo a přihlášení je v zásuvce pod hamburgerem */
@media(max-width:991px){
body .z-account{ display:none !important; }
}
/* --- Produktové řady na titulce jako posuvný pás -------------------------
Třídu z-prod-row přiděluje killSlider v zoo4you.js, šipky dodá blok 9k
(stejná mechanika jako u pásů kategorií — .z-slider + can-prev/can-next).
⚠️ display:flex, overflow-x a gap sedí inline s !important přímo na
elementu, protože Shoptet si tam po inicializaci slideru sahá sám.
Tady se doplňuje jen to, co inline být nemusí. */
body .z-prod-row{
scroll-snap-type:x proximity;
scroll-padding-left:0;
scrollbar-width:none;
-ms-overflow-style:none;
padding-bottom:2px;
}
body .z-prod-row::-webkit-scrollbar{ display:none; }
/* ⚠️ Jednotná velikost karet NENÍ tady, ale v sekci 22 v zoo4you-pages.css.
Sekce 15 tamtéž má `body .products > .product{ flex:none !important }`
se specificitou (0,2,1) a v pozdějším souboru — cokoli odsud přebila. */
/* --- Rozbalené menu: bílá karta s vrženým stínem ------------------------
⚠️ Stín tu nešel udělat obyčejným pravidlem. Kritické styly v zoo4you.js
mají `#header *, #navigation * { box-shadow:none !important }` —
specificita (1,0,0) s !important, takže `.menu-level-2` (0,1,0) prohrálo
i s vlastním !important. Proto je tu #navigation v selektoru: (1,3,3).
Pozadí bylo průsvitné, takže se pod menu prosvítal béžový podklad
stránky (--z-bg). Odtud ten našedlý dojem.
Jen od 768 px — v zásuvce pod hamburgerem je podmenu v toku bez karty
i stínu (sekce 14 v zoo4you-pages.css). */
@media(min-width:768px){
html body #navigation .navigation-in.menu ul.menu-level-2{
background:#fff !important;
border:1px solid #EFEBE4 !important;
border-radius:16px !important;
box-shadow:
0 24px 48px -20px rgba(35,32,28,.28),
0 6px 16px -8px rgba(35,32,28,.12) !important;
}
/* --- ROZBALENÉ MENU: přehledné podkategorie 3. úrovně bez ořezávání --- */
body .navigation-in.menu ul.menu-level-2 ul.menu-level-3,
body .navigation-in.menu .menu-level-2 .menu-level-3{
display:flex !important;
flex-direction:column !important;
gap:4px !important;
margin-top:8px !important;
padding-left:0 !important;
overflow:visible !important;
white-space:normal !important;
}
body .navigation-in.menu ul.menu-level-2 ul.menu-level-3 > li,
body .navigation-in.menu .menu-level-2 .menu-level-3 > li{
display:block !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.35 !important;
}
body .navigation-in.menu ul.menu-level-2 ul.menu-level-3 > li > a,
body .navigation-in.menu .menu-level-2 .menu-level-3 a{
display:inline-block !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
color:#6E6254 !important;
font-size:13.5px !important;
font-weight:400 !important;
padding:2px 0 !important;
transition:color .15s ease, transform .15s ease !important;
}
body .navigation-in.menu ul.menu-level-2 ul.menu-level-3 > li > a:hover,
body .navigation-in.menu .menu-level-2 .menu-level-3 a:hover{
color:var(--z-accent, #E8722A) !important;
transform:translateX(2px) !important;
}
/* Odstranění čárek mezi položkami, které Shoptet generuje */
body .navigation-in.menu ul.menu-level-2 ul.menu-level-3 > li::after,
body .navigation-in.menu .menu-level-2 .menu-level-3 > li::after{
display:none !important;
content:none !important;
}
}