,
takže ten samý wrapper má dva stavy:
- Empty (žádný child) → zebra fallback (= došel pool, PA dohlédne v review)
- Filled (má
![]()
child) → čistý container s overflow:hidden, img full-width.
`object-fit: cover` cropuje obrázek na containerovou aspect-ratio — používá
se pro section-with-image-below a section-twocol layouty, kde wireframe
diktuje pevnou ratio. feature-card má tento default override (viz níž). */
/* Wrapper divs — kontainer kolem
![]()
. Element selector `div.` zabraňuje
tomu, aby pravidla se aplikovala na raw `
![]()
`
(AI Listovač občas generuje bez wrapping div). */
.vlst-listovac div.embedded-image,
.vlst-listovac div.image-placeholder,
.vlst-listovac div.feature-card-image {
display: block !important;
border-radius: 8px !important;
overflow: hidden !important;
/* Solid background pro non-empty (= když je
![]()
uvnitř ale nepokrývá
box kvůli portrait/square aspect): bílá místo zebra. Mílovo pravidlo
2026-05-14: pruhované pozadí kolem reálné fotky vypadá nedotaženě. */
background: #ffffff !important;
}
.vlst-listovac div.embedded-image img,
.vlst-listovac div.image-placeholder img,
.vlst-listovac div.feature-card-image img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
}
/* Raw
![]()
bez wrapping divu (= AI Listovač
neidiomatická generace). Aplikuje fit pravidla přímo na
![]()
. */
.vlst-listovac img.embedded-image,
.vlst-listovac img.image-placeholder,
.vlst-listovac img.feature-card-image {
display: block !important;
border-radius: 8px !important;
max-width: 100% !important;
height: auto !important;
background: #ffffff !important;
}
/* Empty placeholder = zebra fallback. `div.X` element selector je KRITICKÝ —
AI Listovač občas generuje `
![]()
` (= raw img
s class, ne wrapper div). `
![]()
` element NIKDY nemá child `
![]()
`, takže
`:not(:has(img))` by na něj matchnul a zebra by se aplikovala na samotný
reálný obrázek. Bug zachycený 2026-05-14 na live https://www.voix.cz/
stolky--stojany--drzaky/the-pearl-stand/ — zebra prosvítala kolem stand
fotky. Element-selector `div.` to omezuje jen na `
` wrappery. */
.vlst-listovac div.image-placeholder:not(:has(img)),
.vlst-listovac div.feature-card-image:not(:has(img)) {
background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px) !important;
padding: 24px !important;
font-size: 12px !important;
color: #6b7280 !important;
text-align: center !important;
font-family: SFMono-Regular, Menlo, monospace !important;
min-height: 120px !important;
}
/* section-with-image-below: H2 + p (mimo wrapper), pak full-width obrázek 16:9.
Mílovo pravidlo 2026-05-12: full-width VELKÁ fotka jako breakpoint v textu
(= wireframe ukazuje široké landscape fotky, NE 720×480 centrované).
Aspect 16:9 + max-width 100% využije celý container Shoptet šablony. */
.vlst-listovac .section-with-image-below {
margin: 32px 0 !important;
width: 100% !important;
}
.vlst-listovac .section-with-image-below .embedded-image,
.vlst-listovac .section-with-image-below .image-placeholder,
.vlst-listovac .section-with-image-below .embedded-video {
aspect-ratio: 16 / 9 !important;
max-height: 560px !important;
width: 100% !important;
}
/* embedded-video: vnitřní