/* Naše doplňky k šabloně z v0. Samostatný soubor schválně: `style.css` je
   převzatý 1:1 a přegeneruje ho `nastroje/stahni.py`, takže do něj nepatří nic
   našeho. Co je tady, je vypsané i v `ref/zmeny.json`.
   ------------------------------------------------------------------------- */

/* Stín u přilepených sloupců srovnávací tabulky.

   Předloha má jen ostrou linku (`inset -1px` vlevo, `inset 1px` vpravo), takže
   není poznat, že obsah zajíždí pod pevný sloupec. Linku necháváme beze změny
   a přidáváme k ní měkký přechod.

   POZOR - proč pseudoprvek a ne `box-shadow`:
   Chromium NEKRESLÍ vnější box-shadow na buňce tabulky, která má
   `border-collapse: collapse` (a tu má předloha). Vnitřní `inset` stín se
   vykreslí, vnější zmizí. Naměřeno na minimálním pokusu - táž buňka, týž stín:
     collapse  → pixely vpravo od hrany [255, 255, 255, …]  (nic)
     separate  → [171, 186, 199, 212, 224, 233, 241, 247]   (stín)
     collapse + ::after → [131, 150, 169, 188, 207, 227, 245, 255]
   Proto se stín kreslí jako pruh s přechodem, ne jako `box-shadow`. Buňka je
   `position: sticky`, takže je pro pseudoprvek vztažným rámcem, a má `z-index`
   20, takže pruh překryje obsah, který pod sloupec zajíždí.

   Ukazuje se jen tam, kam se dá posunout: u levého sloupce po odsunutí od
   kraje, u pravého dokud tabulka není dojetá na konec. */

[data-oddelovac-vpravo]::after,
[data-oddelovac-vlevo]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease-out;
}

[data-oddelovac-vpravo]::after {
  right: -16px;
  background: linear-gradient(to right, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0));
}

[data-oddelovac-vlevo]::before {
  left: -16px;
  background: linear-gradient(to left, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0));
}

[data-stin-vpravo]::after,
[data-stin-vlevo]::before {
  opacity: 1;
}

/* Řádek se skóre na kartách mobilního žebříčku (odchylka 10) - zrušeno
   5. 10.: počet hodnocení je teď v závorce u skóre na jednom řádku,
   „R-Skóre 9,4/10 (542)" (bod 20 níž). Značka `data-skore-radek` zůstává,
   bod 20 podle ní karty najde. */

/* Řádek čipů kategorií v průvodci.

   Předloha dává text uprostřed čipu a poslední čip slepuje s „Rozbalit vše"
   do jednoho `inline-flex` obalu. Na 375 px se tím poslední čip vytlačí do
   dvou řádků - naměřeno „Stanice, provoz a servis" 215×56 px a „Rozbalit
   vše" 120×54 px vedle sebe, oba dvouřádkové.

   Rozhodnutí majitele: text doleva a na mobilu „Rozbalit vše" na vlastní
   řádek. Na desktopu se nemění nic - tam se všechno vejde. */

[data-rada-kategorii] button {
  text-align: left;
  justify-content: flex-start;
}

@media (max-width: 1023px) {
  /* `display: contents` obal zruší, takže poslední čip i „Rozbalit vše"
     spadnou přímo do vnější řady, která `flex-wrap` má. Tlačítko si pak
     vezme celou šířku a odsune se pod čipy. */
  [data-obal-rozbalit] {
    display: contents;
  }

  [data-rozbalit-vse] {
    flex-basis: 100%;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Úpravy z UX auditu (27. 9. 2026), schválené majitelem bod po bodu.
   Značky dává `nastroje/zmeny.py` (UPRAV_UX, UPRAV_MOBIL) - tady je jen
   vzhled. Hranice 1023 px = od 1024 px (`lg:`) má šablona desktopové
   rozvržení, pod ní mobilní karty místo tabulky.

   POZOR na vrstvy: `style.css` (Tailwind 4) má třídy v `@layer utilities`,
   tenhle soubor ve vrstvě NENÍ. Nevrstvená pravidla vyhrávají nad
   vrstvenými bez ohledu na specifičnost - takže i nad `hidden`, `sm:hidden`
   nebo `sm:text-sm`. Proto hlídky `:not(.hidden)` a proto má písmo zvlášť
   hranice podle toho, od kolika px šablona velikost sama zvětšuje.
   ═════════════════════════════════════════════════════════════════════════ */

/* 13 · Písmo na mobilu (audit, bod 6).

   Naměřeno na 375 px před úpravou: medián odstavce 14 px, 155 ze 156
   odstavců pod 16 px, 811 textů pod 13 px (nejmenší 10 px).
   Tělo textu (`data-proza="16"`) má 16 px, vedlejší text (popisky, štítky,
   seznamy, poznámky - `data-pismo-min`) aspoň 13 px. Řádkování šablona
   zadává poměrem (`leading-relaxed` = 1,625), takže roste s písmem samo. */

@media (max-width: 1023px) {
  [data-proza="16"] {
    font-size: 16px;
  }

  [data-pismo-min=""] {
    font-size: 13px;
  }
}

/* Prvky, kterým šablona od 768 / 640 px písmo zvětšuje sama (`md:text-…`,
   `sm:text-…`) - nad tou hranicí je necháváme jejímu pravidlu. */
@media (max-width: 767px) {
  [data-pismo-min="md"] {
    font-size: 13px;
  }
}

@media (max-width: 639px) {
  [data-pismo-min="sm"] {
    font-size: 13px;
  }
}

/* Verzálky stačí na 11 px (majitel 5. 10.: „verzálky se čtou dobře
   i menší"). Zvětšují se jen ty, které měly v předloze méně (10 px); kde
   měly 11 px a víc, zůstávají, jak byly - ty se ani neznačí. */
@media (max-width: 1023px) {
  [data-pismo-verzalky=""] {
    font-size: 11px;
  }
}

@media (max-width: 767px) {
  [data-pismo-verzalky="md"] {
    font-size: 11px;
  }
}

@media (max-width: 639px) {
  [data-pismo-verzalky="sm"] {
    font-size: 11px;
  }
}

/* Větší písmo nesmí nic nově useknout. Komponenty, které se ve 13 px
   nevešly, kam se v předloze vešly (údaje v kartách situací, štítek na
   kartě vítěze), smějí na mobilu na druhý řádek. */
@media (max-width: 1023px) {
  [data-dva-radky]:not(.hidden):not([hidden]) {
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* Odznak „R-Skóre 9,4/10" se nesmí zalomit. Na kartách vítězů se ve 13 px
   nevešel vedle počtu hodnocení; dostává totéž rozložení, jaké majitel
   schválil u mobilních karet žebříčku (odchylka 10 výše). */
@media (max-width: 1023px) {
  [data-skore-radek-mobil] {
    flex-direction: column;
    align-items: flex-start;
  }

  [data-skore-radek-mobil] > button {
    white-space: nowrap;
  }
}

/* 14 · Dotykové plochy aspoň 44 px (audit, bod 7).

   Naměřeno na 375 px před úpravou: 205 z 309 ovládacích prvků nižších
   než 44 px („+ Porovnat" 79 × 16, cenové čipy 20, drobečky 16).
   Výška se dorovnává odsazením a vystředěním, písmo se nemění.
   Odkazy uprostřed věty se nesahají (výjimka WCAG 2.5.8). Druhy značky
   jsou popsané v `zmeny.py` u UPRAV_MOBIL. */

@media (max-width: 1023px) {
  [data-dotyk="f"],
  [data-dotyk="fs"],
  [data-dotyk="g"],
  [data-dotyk="t"],
  [data-dotyk="m"],
  [data-dotyk^="b"],
  [data-dotyk^="i"] {
    min-height: 44px;
  }

  [data-dotyk="f"] {
    align-items: center;
  }

  [data-dotyk="fs"] {
    justify-content: center;
  }

  [data-dotyk="g"] {
    align-content: center;
  }

  [data-dotyk^="b"]:not(.hidden):not([hidden]) {
    display: flex;
    align-items: center;
  }

  [data-dotyk^="i"]:not(.hidden):not([hidden]) {
    display: inline-flex;
    align-items: center;
  }

  [data-dotyk="bc"],
  [data-dotyk="ic"] {
    justify-content: center;
  }

  /* Jednořádkový useknutý text: `display: flex` by zrušil tři tečky, takže
     přesně dopočítané odsazení. `1lh` = výška jeho řádku. */
  [data-dotyk="r"] {
    padding-top: calc((44px - 1lh) / 2);
    padding-bottom: calc((44px - 1lh) / 2);
  }

  /* Textová tlačítka a odkazy a malé odznaky s pozadím: viditelně zůstávají,
     jak jsou, prst trefuje neviditelnou plochu kolem nich (majitel 5. 10.:
     „všude"). Velikost plochy (`--vh` × `--vw`, posun středu `--vy` `--vx`)
     spočítal `zmeny.py`: 44 px, nejvýš ale do poloviny mezery k sousednímu
     tlačítku. Pevná velikost na středu prvku, ne přesah přes okraj - prvek
     může po načtení změnit výšku (zkrácený název) a plocha se s ním
     zmenšovat nesmí. Je-li prvek větší než plocha, kryje celý prvek.
     `z-index: 1`: bez něj plochu zakryje následující řádek s vlastní pozicí
     (naměřeno 37 px místo 44); do sousedních tlačítek nezasahuje. */
  [data-dotyk="o"] {
    position: relative;
  }

  [data-dotyk="o"]::after,
  [data-dotyk="oa"]::after {
    content: "";
    position: absolute;
    z-index: 1;
    height: max(100%, var(--vh, 0px));
    width: max(100%, var(--vw, 0px));
    top: calc(50% - max(100%, var(--vh, 0px)) / 2 + var(--vy, 0px));
    left: calc(50% - max(100%, var(--vw, 0px)) / 2 + var(--vx, 0px));
  }

  [data-dotyk-sirka] {
    min-width: 44px;
  }

  [data-dotyk-sirka="s"] {
    justify-content: center;
  }
}

/* 15 · Názvy produktů, které se nevejdou (audit, bod 10).

   Kde se nevejde plný název, vymění ho `sablona.js` za krátký
   (`data-kratky-nazev`). Kde je krátký už teď a stejně se nevejde (karty
   situací: „Dreame X40 Ultra" 111 px na 102 px místa), smí na druhý řádek
   místo useknutí. */

[data-nazev-radku] {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 16 · Délka řádku na desktopu (audit, bod 11).

   Naměřeno na 1280 px: 77 odstavců přes 90 znaků na řádek (průvodce 663
   a 1 102 px široký). Čte se nejlépe 50-75 znaků. Šířka v `em`, ať sedí
   i na odstavce s jinou velikostí písma: 36 em dává na 1280 px medián 61
   a nejvýš 75 znaků. Od 768 px, protože už na tabletu měl řádek až 94
   znaků (pod 768 px je sloupec užší než 36 em sám). */

@media (min-width: 768px) {
  /* jen odstavce - `<div>` s textem je verdikt nebo odpověď FAQ v rámečku
     a zúžil by se i s rámečkem */
  p[data-proza] {
    max-width: 36em;
  }

  .text-center > p[data-proza],
  p[data-proza].text-center {
    margin-left: auto;
    margin-right: auto;
  }

  /* Blok autora přes celou šířku sloupce vedle fotky (majitel 23. 10. 2026): dva krátké
     odstavce zúžené na 36 em nechávaly vpravo prázdný pruh. */
  #autor p[data-proza] {
    max-width: none;
  }
}

/* 18 · Šipky a počítadlo karuselu vítězů (audit, bod 9).

   Na telefonu je vidět jedna karta ze šesti a šipky předloha schovává
   (`hidden sm:flex`). Pod kartami je proto „‹ 1 / 6 ›": šipky jsou
   desktopové šipky předlohy v menším (bílé kolečko, rámeček `--border`,
   stín `shadow-lg`, ikona slate-600, po najetí `--brand`), 44 px = naše
   dotyková plocha. Číslo je obyčejný text - v rámečku vypadalo jako
   tlačítko. Ovládání zajíždí 20 px do spodního odsazení karuselu (`pb-8`),
   stránka se tak prodlouží jen o 24 px. Od 640 px, kde jsou šipky
   předlohy, se neukazuje. */

[data-karusel-ovladani] {
  display: none;
}

@media (max-width: 639px) {
  [data-karusel-ovladani] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: -20px;
    position: relative;
  }

  [data-karusel-ovladani] button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    color: #475569;
    cursor: pointer;
    transition: color .15s, opacity .15s;
  }

  [data-karusel-ovladani] button:hover {
    color: var(--brand);
  }

  [data-karusel-ovladani] button:disabled {
    opacity: .35;
    cursor: default;
    box-shadow: none;
  }

  [data-karusel-ovladani] svg {
    width: 20px;
    height: 20px;
  }

  [data-karusel-pocitadlo] {
    min-width: 3.2em;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  [data-karusel-pocitadlo] b {
    font-weight: 800;
    color: var(--ink);
  }
}

/* 19 · Mezera mezi nadpisem sekce a popisem (majitel 5. 10., mobil).

   Předloha dává čtyřem sekcím u nadpisu `!mb-1`, takže popis začíná 4 px
   pod nadpisem (ostatní sekce 22 px). Přidává se 10 px nad popis - všem
   čtyřem stejně (`data-popis-sekce`, značí `zmeny.py`). */

@media (max-width: 1023px) {
  [data-popis-sekce] {
    padding-top: 10px;
  }
}

/* 20 · Počet hodnocení v závorce u R-Skóre na kartě vítěze (majitel 5. 10.).

   „R-Skóre 9,4/10 (542)" místo „· 542 hodnocení", které se na mobilu vedle
   skóre nevešlo. Na desktopu se celé vejde, tam zůstává podle předlohy. */

[data-pocet-kratky] {
  display: none;
}

@media (max-width: 1023px) {
  [data-pocet-plny] {
    display: none;
  }

  [data-pocet-kratky] {
    display: inline;
  }
}

/* 21 · Oddělovací tečka v údajích (majitel 5. 10.: „není skoro vidět").

   „Sání 10 000 Pa · Na zvířecí chlupy: Ano" - předloha dává tečku do
   `text-slate-300` (#cbd5e1 na bílé, kontrast 1,5 : 1). Tmavší slate-400
   a tučně, ať je vidět, ale pořád ustupuje textu (ten je slate-500).
   Na všech šířkách - na desktopu je tečka stejně slabá. */

[data-tecka] {
  color: #94a3b8;
  font-weight: 700;
}

/* 23 · Nadpisy nad tělem textu na mobilu (majitel 5. 10.).

   Mezititulek v průvodci byl menší než odstavec pod ním. V předloze je
   nadpis vždy o kousek větší než text; text jsme zvětšili 16/14 = 1,14×,
   takže nadpisy stejným poměrem (hodnotu spočítal `zmeny.py`). Patří sem
   i popisky bloků velkými písmeny, pevně 13 px: průvodce („VE ZKRATCE",
   „NA CO KOUKAT"…, 11 px), recenze („KLADNÉ / SLABŠÍ STRÁNKY", 12 px)
   a mýty („MÝTUS", „VE SKUTEČNOSTI", 11,2 px). */

@media (max-width: 1023px) {
  [data-nadpis-prozy="13"] {
    font-size: 13px;
  }

  [data-nadpis-prozy="16"] {
    font-size: 16px;
  }

  [data-nadpis-prozy="17"] {
    font-size: 17px;
  }

  [data-nadpis-prozy="18"] {
    font-size: 18px;
  }

  [data-nadpis-prozy="19"] {
    font-size: 19px;
  }

  [data-nadpis-prozy="20"] {
    font-size: 20px;
  }
}

/* 24 · „Stanice: 99/100" místo „99/100 stanice" (majitel 5. 10.).

   Číslo je teď na konci, takže by ho usekávání uřízlo („Stanice: 99/1…"
   na mobilu). Údaj se proto nezmenšuje pod svou šířku a řádek se smí
   zalomit: když se vedle odznaku nevejde, spadne celý pod něj. Usekne se
   jen, kdyby byl širší než celý řádek. */

[data-radek-tematu] {
  flex-wrap: wrap;
  row-gap: 2px;
}

[data-skore-tematu] {
  flex-shrink: 0;
  max-width: 100%;
}

/* 25 · Spolehlivé hodnocení na mobilu (majitel 5. 10.).

   „R-Skóre 9,4/10 (542)" pod názvem produktu: název přes celou šířku,
   odznak spadne na řádek pod něj. Počet v závorce je UVNITŘ modrého
   odznaku (majitel 5. 10.), skrývání a ukazování podle šířky jako u bodu
   20 (`data-pocet-plny` / `data-pocet-kratky`). */

@media (max-width: 1023px) {
  [data-nazev-pres-radek] {
    flex-basis: 100%;
  }
}

/* 27 · Obrázek na kartě vítěze v Safari (5. 10.).

   Rámeček `aspect-square` s vnitřním okrajem 15 px a obrázkem `h-full`:
   Safari (WebKit) bere výšku obrázku z celého rámečku (231 px) místo
   z jeho vnitřku (201 px), rámeček se natáhne na 231×261 a karta je
   o 30 px vyšší. Dělá to i živá šablona v Safari, Chromium ne. Obrázek se
   proto v rámečku umístí absolutně přes celou plochu se stejným vnitřním
   okrajem: čtverec drží rámeček sám a obrázek (`object-contain`) se kreslí
   do jeho vnitřku 201×201 px - na totéž místo jako dřív v Chromu. */

[data-obrazek-ramecku] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: inherit;
}

/* 28 · Lišta s názvy a nabídkami v okně porovnání (majitel 11. 10. 2026).

   „Při scrolování v modalu porovnání na desktopu nahoře zadockuj název
   s odkazem." Hlavička s obrázky odjede normálně; lišta (jména, cena,
   „Nabídka") je první v obsahu, lepí se k hornímu okraji svitku a ukáže se,
   až hlavička zmizí pod ní (sablona.js `hlidejListu`). Výšku nemá, aby se
   obsah při ukázání nepohnul - pruh se kreslí přes řádky pod ní. Svitek
   proto nemá vnitřní okraj (je na obsahu), jinak by se lišta lepila 24 px
   pod horní hranu a řádky by prosvítaly nad ní. Jen na počítači: na mobilu
   by lišta zabrala velkou část výšky okna. */

[data-porovnani-lista] {
  display: none;
}

@media (min-width: 1024px) {
  [data-porovnani-lista] {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  [data-porovnani-lista][data-ukazat] {
    visibility: visible;
    opacity: 1;
  }
}

/* Hover obrázku produktu v odkazu: lehký vnitřní stín v modrém poli rámečku.

   Majitel 14. 10. 2026: „lehký vnitřní stín v modrém poli“ - bez zvětšení
   obrázku (vtlačený stín a vystupující obrázek působí proti sobě). Barva je
   `--brand` (#1a56db) s nízkou průhledností: obrys 1 px a měkký přechod dovnitř.
   Rámeček je buď sám odkaz (tabulka, recenze, průvodce, okna), nebo blok
   v odkazu (situace, „Další srovnávané“) - pravidlo pokryje obojí. Karty vítězů
   obrázek v odkazu nemají, hover nedostanou. Jen zařízení s myší: na dotyku
   by stín po klepnutí zůstal viset. */

@media (hover: hover) {
  a:has(> img.mix-blend-multiply),
  a :has(> img.mix-blend-multiply) {
    transition: box-shadow .2s var(--ease-out);
  }

  a:has(> img.mix-blend-multiply):hover,
  a:hover :has(> img.mix-blend-multiply) {
    box-shadow: inset 0 0 0 1px rgb(26 86 219 / .22), inset 0 1px 8px rgb(26 86 219 / .16);
  }
}

/* Šedé popisky údajů o produktu (počet hodnocení, „/10“, „Bez hodnocení“, obliba,
   „Nejnižší cena“, „orientační cena“, popisky údajů v recenzi).

   Majitel 14. 10. 2026: „hodně světlé - o něco málo tmavší šedou, ale stále rozdílnou
   oproti té na normálních textech“, pak „o něco světlejší šedou než je to zhodnocení
   vedle“. Šablona mezi slate-400 (popisky dosud, kontrast 2,6 : 1) a slate-500 (text
   zhodnocení v tabulce) odstín nemá - tohle je třetina cesty od slate-400 ke slate-500
   v oklch (polovina 0,629 splývala se zhodnocením), popisek zůstane světlejší než každý
   běžný text. */

.text-slate-450 {
  color: oklch(.654 .042 257);
}

/* Karty „Doporučené produkty pro každou potřebu“ na telefonu (majitel 15. 10. 2026):
   „pole jsou moc vysoká - vyšší než display“, „zmenšit odsazení mezi popisem a linkou
   pod“, „vždy jeden swipe ať je jeden produkt“.
   - přirozená výška karet: dřív se všechny natáhly na tu nejvyšší a pod kratším popisem
     zůstávalo až 68 px místa, na telefonu je vidět jedna karta, zarovnání nic nedává,
   - pod popisem 8 px místo 16 px, okraje karty 16 px místo 24 px, obrázek 4 : 3 místo
     čtverce (čtverec roste se šířkou karty): na 390 px výška ~690 → ~580 px,
   - jedno přejetí = jedna karta (`scroll-snap-stop: always` u povinného přichycení).
   Text karty má od téhož dne nejvýš 135 znaků (5 řádků i na 360 px), `synteza.DELKA_TEXTU_VITEZE`. */

@media (max-width: 639px) {
  #vitezove [data-karusel] {
    align-items: flex-start;
    scroll-snap-type: x mandatory;
  }

  #vitezove [data-karusel] > div {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    scroll-snap-stop: always;
  }

  #vitezove [data-karusel] > div p {
    margin-bottom: .5rem;
  }

  #vitezove [data-karusel] > div .aspect-square {
    aspect-ratio: 4 / 3;
  }
}

/* Okna (parametry, situace, zdroje) na výšku viditelné plochy (majitel 15. 10. 2026:
   „modal podrobných parametrů na šířku přetéká obrazovku“). Safari na iPhonu počítá `vh`
   z výšky i s lištami prohlížeče - naležato (390 px) bylo okno s 88vh vyšší než to, co je
   vidět. `dvh` je výška opravdu viditelné plochy; starší prohlížeče zůstanou u `vh`. */

@supports (height: 100dvh) {
  .max-h-\[80vh\] { max-height: 80dvh; }
  .max-h-\[85vh\] { max-height: 85dvh; }
  .max-h-\[88vh\] { max-height: 88dvh; }

  [role="dialog"].fixed.inset-0 {
    bottom: auto;
    height: 100dvh;
  }
}

/* Fotky s pozadím (majitel 23. 10. 2026, `render_v0.typ_fotky`): interiér, barevné nebo tmavé
   pozadí přes celé pole rámečku, bez prolnutí do šedého podkladu (`mix-blend-multiply` by fotku
   zabarvil). Čip v liště porovnání (w-8) si nechá svou velikost, jen fotku ořízne. */
img[data-scena]{object-fit:cover!important;mix-blend-mode:normal!important}
img[data-scena]:not(.w-8){width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
:has(> img[data-scena]:not(.w-8)){padding:0!important;overflow:hidden}
img.w-8[data-scena]{border-radius:6px}