/* Etapa 2: výpis kategorie podle návrhu AB.
   Mřížku kreslí blok Product Collection; tady se oblékají karty. */
:root{--mlv-rez-karta:9px}
.wc-block-product-template{gap:20px}
li.wc-block-product{background:#fff;border:1px solid var(--wp--preset--color--linka,#E1E2E5);
  padding:12px;margin:0;position:relative;
  clip-path:polygon(var(--mlv-rez-karta) 0,calc(100% - var(--mlv-rez-karta)) 0,
    100% var(--mlv-rez-karta),100% calc(100% - var(--mlv-rez-karta)),
    calc(100% - var(--mlv-rez-karta)) 100%,var(--mlv-rez-karta) 100%,
    0 calc(100% - var(--mlv-rez-karta)),0 var(--mlv-rez-karta))}
li.wc-block-product:hover{border-color:var(--wp--preset--color--inkoust,#0A0A0C)}
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a{font:400 16px/1.3 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--inkoust,#0A0A0C);text-decoration:none}
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .price{font:800 22px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders");
  color:var(--wp--preset--color--inkoust,#0A0A0C)}
/* Task 5b: karta ukazovala DVĚ vizuálně identické ceny (obě 22px Big
   Shoulders černá, dědily z pravidla výš) - "bez DPH" (.mlv-price-excl-tax,
   markup obsahuje i popisek "bez DPH") a "s DPH" (.mlv-price-incl-tax).
   mlv-size-swatches.css tohle na detailu odlišuje, na výpisu se ale
   nenačítá. Cena s DPH zůstává hlavní (dědí pravidlo výš beze změny), cena
   bez DPH se posune pod ní menší a šedá tokenem - .mlv-price-wrap obaluje
   obě, ale v DOM (viz Mlv_Cena_S_Bez_Dph) je excl-tax PŘED incl-tax, proto
   sloupec + order místo přehazování markupu. */
li.wc-block-product .mlv-price-wrap{display:flex;flex-direction:column;align-items:center}
li.wc-block-product .mlv-price-incl-tax{order:-1}
li.wc-block-product .mlv-price-excl-tax{font:400 14px/1.3 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--sediva,#4E4E52)}
/* Tlačítko "Vybrat možnosti" / "Do košíku" má z WP core button bloku
   výchozí border-radius:9999px (ověřeno computed style) - na kartě podle
   AB nesmí být žádné zaoblení. */
li.wc-block-product .wp-block-button__link{border-radius:0}
/* Etapa 4, Task 5 (5. 9. 2026): badge dostupnosti NAHRAZUJE dřívější
   "Vyprodáno" (CSS `content` výš - čtečky obrazovky ho číst nemusí, viz
   functions.php, render_block filtr v sekci "Etapa 2: výpis"). ODSTRANĚNO
   (jediná povolená výjimka z nemazání, viz task-5-brief.md) - staré pravidlo
   se spínalo nativní třídou `li.outofstock`, kterou WooCommerce odvozuje z
   `_stock_status` RODIČE; Task 4 (functions.php, mlv_klauzule_dostupnosti)
   ověřil na datech, že tahle hodnota umí lhát (~70+ produktů s "instock"
   rodičem, co mají zároveň varianty jen u výrobce, a naopak - viz
   task-4-report.md). Nové pravidlo se proto spíná VLASTNÍ třídou
   (`mlv-obrazek-vyprodano`), kterou do wrapperu vkládá STEJNÝ PHP výpočet,
   co dává badge text - obrázek a text tak nikdy nemůžou být v rozporu. */
li.wc-block-product .wc-block-components-product-image{position:relative}
li.wc-block-product .wc-block-components-product-image.mlv-obrazek-vyprodano img{
  filter:grayscale(.85) opacity(.55)}
/* Štítky dostupnosti (rozhodnutí zadavatele 7. 9. 2026): dva pod sebou
   místo jednoho. Obal drží pozici, jednotlivé štítky jsou v toku pod
   sebou - dřív měl pozici sám štítek. */
/* Stoh sedí UVNITŘ odkazu na fotku, takže klik projde na <a> tak jako tak;
   pointer-events:none tu nic nechrání ani nemůže rozbít - jen propouští
   kliknutí skrz stoh k tomu odkazu pod ním. */
.mlv-badge-stoh{position:absolute;left:12px;top:12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  z-index:2;pointer-events:none}
.mlv-badge-dostupnost{
  font:600 14px/1 var(--wp--preset--font-family--text,Barlow);
  color:#fff;padding:5px 9px;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
/* Červená = vezmi si to teď (stejně jako tlačítko "do košíku"),
   černá = musíme objednat, šedá = hned to nebude.
   "Vyprodáno" se z černé stěhuje schválně: kdyby zůstalo černé, splynulo
   by s "U výrobce" - tedy zboží, které koupit JDE, by vypadalo jako to,
   které nejde. Druhý signál mu zůstává, fotku ztlumuje (mlv-obrazek-
   vyprodano níž). Semafor se zelenou zadavatel zamítl: zelená není
   v paletě ani v logu a červená už na webu znamená "kup". */
.mlv-badge-dostupnost.mlv-badge-u-nas{
  background:var(--wp--preset--color--cervena,#E00103)}
.mlv-badge-dostupnost.mlv-badge-u-vyrobce{
  background:var(--wp--preset--color--inkoust,#0A0A0C)}
.mlv-badge-dostupnost.mlv-badge-dotaz,
.mlv-badge-dostupnost.mlv-badge-vyprodano{
  background:var(--wp--preset--color--sediva,#4E4E52)}

/* Štítky na úzkých obrazovkách: na 390 px má fotka jen 129 px a text
   „U nás skladem 4 velikosti" se při 14px lámal na tři řádky přes
   celé zboží. Menší písmo ho srovná na jeden řádek; text zůstává
   celý (rozhodnutí zadavatele 8. 9. 2026 — varianta B ze čtyř). */
@media(max-width:760px){
  .mlv-badge-stoh{left:6px;top:6px;gap:3px}
  .mlv-badge-dostupnost{font-size:10px;padding:3px 6px;
    clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),
      calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
}

/* Task 3/3b (etapa 2): filtry jako levý sloupec (>=1100 px), společná
   třída mlv-vypis-mrizka na rodiče panelu a mřížky, panel jako vnější
   <details> s vlastními <details> skupinami uvnitř. NAHRAZENO Etapou 4,
   Task 1 (5. 9. 2026, rozhodnutí zadavatele): filtry jsou teď vodorovná
   lišta NAD mřížkou (viz "Etapa 4, Task 1" níž) - PHP obal
   (woocommerce/mlv-attribute-filter.php) žádnou mlv-vypis-mrizka třídu
   ani vnější/vnitřní <details> už negeneruje, celý blok níž tedy nemá co
   stylovat. Zakomentováno, ne smazáno (konvence projektu), ať jde
   couvnout - viz i mlv-vypis.js.

@media(min-width:1100px){
  .mlv-vypis-mrizka{display:grid;grid-template-columns:260px minmax(0,1fr);
    gap:24px;align-items:start}
  .mlv-vypis-mrizka > *{grid-column:1 / -1}
  .mlv-vypis-mrizka > .mlv-filtr{grid-column:1;position:sticky;top:140px}
  .mlv-vypis-mrizka > .mlv-filtr + *{grid-column:2}
}
.mlv-filtr > details{background:#fff;border:1px solid var(--wp--preset--color--linka,#E1E2E5);
  border-radius:0;padding:0}
.mlv-filtr summary{font:800 16px/1.2 var(--wp--preset--font-family--nadpis,"Big Shoulders");
  text-transform:uppercase;padding:12px 14px;cursor:pointer}
.mlv-filtr-skupina + .mlv-filtr-skupina{border-top:1px solid var(--wp--preset--color--linka,#E1E2E5)}
*/

/* Etapa 4, Task 1 (5. 9. 2026): filtry ve vodorovné liště nad mřížkou -
   vzor otvírání = panel podkategorií v hlavičce (mlv-ram.css/mlv-ram.js):
   sdílené třídy .t-dropdown/.is-open/.is-closing a proměnné --dropdown-* se
   NEdefinují znovu, mlv-ram.css se načítá na KAŽDÉ stránce bez podmínky
   (viz functions.php) včetně výpisu.

   .mlv-filtr je containing block (position:relative) pro panel skupiny;
   .mlv-filtr-lista i .mlv-filtr-skupina-obal zůstávají position:static
   (stejně jako .kat/.koren v mlv-ram.css) - ověřeno na živé liště kategorií
   (curl/DOM), že containing block MUSÍ přeskočit přes pozicované rodiče:
   kdyby .mlv-filtr-skupina-obal bylo position:relative, panel by byl vůči
   NÍ a overflow-x:auto řádku (mobil, níž) by ho na 390 px ořízl - takhle
   panel patří rovnou pod .mlv-filtr a overflow-x scrollovaného řádku ho
   neovlivní. */
.mlv-filtr{position:relative;z-index:2;margin:0 0 20px;
  font-family:var(--wp--preset--font-family--text,Barlow)}
.mlv-filtr-lista{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;
  border-top:1px solid var(--wp--preset--color--linka,#E1E2E5);
  border-bottom:1px solid var(--wp--preset--color--linka,#E1E2E5)}
/* Reset staršího mlv-attribute-filter.css (needituje se), které dává
   .mlv-filtr-skupina min-width:12rem - to byl rozestup pro STOJÍCÍ
   sloupec, na tlačítku v liště by zbytečně roztahoval mezery.
   flex:none (= grow 0, shrink 0) je nutné navíc: bez něj flex-shrink:1
   (výchozí) na 14 skupinách v úzkém .mlv-filtr-lista tlačítka NAMÁČKL a
   text se překrýval (ověřeno na 390 px - "Výrobce" a "Pohlaví" se
   vizuálně kryly, i když jejich vlastní box zůstal na místě - text v
   tlačítku white-space:nowrap přetekl přes zmáčknutého rodiče). Řádek se
   má přetéct a rolovat (overflow-x:auto výš), ne zmáčknout skupiny.
   Task 1b: třída přejmenovaná z .mlv-filtr-skupina na .mlv-filtr-skupina-obal
   (obal je teď <details>, viz woocommerce/mlv-attribute-filter.php a Past
   níž u .mlv-filtr-panel-skupiny). */
.mlv-filtr-skupina-obal{min-width:0;flex:none}
/* Tlačítko je teď nativní <summary> (Task 1b) - má bez vlastního stylu
   UA marker (trojúhelník, display:list-item) - potlačeno, nahrazeno
   vlastní šipkou v ::after (vzor .kat .koren>a .sip, mlv-ram.css). */
.mlv-filtr-tlacitko{font:600 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  background:#fff;color:var(--wp--preset--color--inkoust,#0A0A0C);
  border:1px solid var(--wp--preset--color--linka,#E1E2E5);border-radius:0;
  padding:8px 12px;cursor:pointer;white-space:nowrap;list-style:none}
.mlv-filtr-tlacitko::-webkit-details-marker{display:none}
.mlv-filtr-tlacitko::after{content:"▾";margin-left:6px;display:inline-block;
  color:var(--wp--preset--color--sediva,#4E4E52)}
.mlv-filtr-tlacitko:hover{border-color:var(--wp--preset--color--inkoust,#0A0A0C)}
/* Skupina s aktivním filtrem: tlačítko černé (stejná řeč jako zvolená
   hodnota v panelu, .je-zvoleno níž), jen "kolik je zvoleno" v liště - bez
   sraženého rohu, ten je vyhrazený chipům a hodnotám. */
.mlv-filtr-tlacitko.ma-aktivni{background:var(--wp--preset--color--inkoust,#0A0A0C);
  color:#fff;border-color:var(--wp--preset--color--inkoust,#0A0A0C)}
/* Task 1b (oprava recenze, Minor #3): .je-otevreno přidává/odebírá
   otevri()/zavri() v mlv-vypis.js - dřív se v CSS vůbec nepoužívala.
   Stejná řeč jako aktivní stav v liště kategorií (.kat .koren.otevreno,
   mlv-ram.css): červené podtržení + otočená šipka (barva šipky se
   neplení, stejně jako u .sip - mění se jen natočení). */
.mlv-filtr-skupina-obal.je-otevreno > .mlv-filtr-tlacitko{
  border-bottom-color:var(--wp--preset--color--cervena,#E00103);
  color:var(--wp--preset--color--cervena,#E00103)}
.mlv-filtr-skupina-obal.je-otevreno > .mlv-filtr-tlacitko::after{transform:scaleY(-1)}

/* Panel skupiny: bílý, linka - beze změny bez ohledu na JS (báze).
   Task 1b (oprava recenze, Important #1): panel je teď obsah <details>,
   ne zvlášť schovávaný <div> - NEsmí mít vlastní `display` deklaraci,
   protože by přebila UA styl "details:not([open]) > *:not(summary)
   {display:none}" (autorské `display` má vždy přednost před UA stylem
   bez ohledu na specificitu) a panel by zůstal vidět i po ZAVŘENÍ
   <details>. Bez `display` tu žádný autorský styl UA pravidlo nepřebíjí -
   nativní [open] tedy sám rozhoduje, jestli se obsah vůbec renderuje
   (zavřeno = display:none, otevřeno = výchozí block).
   box-sizing:border-box je potřeba schválně - theme nemá globální reset
   na border-box (žádný `*{box-sizing:border-box}` v CSS), takže bez téhle
   deklarace by `width` (viz níž, jen pod html.mlv-js) počítal jen obsah
   a padding/border by se PŘIČETLY navrch (past č. 2 z Tasku 1). */
.mlv-filtr-panel-skupiny{background:#fff;box-sizing:border-box;
  border:1px solid var(--wp--preset--color--linka,#E1E2E5);padding:14px 16px}
/* Plovoucí dropdown (position:absolute + sdílený .t-dropdown, mlv-ram.css)
   JEN se zapnutým JS (html.mlv-js, přidává mlv-vypis.js co nejdřív).
   Bez JS musí <details> fungovat nativně - panel se rozbalí v běžném
   toku a odsune obsah pod sebou (přijatelný fallback, viz task-1-report).
   top/left dopočítá umistiPanel() (mlv-vypis.js) vůči SVÉMU tlačítku -
   hodnoty tady jsou jen výchozí, přepsané inline stylem při každém
   otevření. */
html.mlv-js .mlv-filtr-panel-skupiny{position:absolute;top:100%;left:0;
  margin-top:1px;box-shadow:0 14px 30px rgba(10,10,12,.13);z-index:1;
  width:min(620px,calc(100vw - 32px))}
/* .t-dropdown (mlv-ram.css, sdílené s panelem podkategorií) dává VŽDY
   opacity:0;pointer-events:none, dokud JS nepřidá .is-open - bez JS by tak
   panel zůstal neviditelný a neklikatelný i po nativním otevření <details>
   (přesně dnešní bug, Important #1). Bez html.mlv-js proto .t-dropdown
   přebíjíme zpátky na viditelný/klikatelný - specificita (0,2,1) je vyšší
   než .t-dropdown (0,1,0), pořadí v souboru tedy nerozhoduje. */
html:not(.mlv-js) .mlv-filtr-panel-skupiny{opacity:1;pointer-events:auto;
  transform:none;transition:none}
/* Hodnoty v gridu, max 5 sloupců (minmax 110px na 620px šířce panelu
   vychází floor((620+16)/(110+16)) = 5). Panel má PEVNOU šířku (ne
   max-content) schválně - auto-fill v gridu se zmenšovacím
   (max-content/fit-content) kontejneru neumí spolehlivě spočítat počet
   sloupců (prohlížeče se v tom rozcházejí) a spadal by na jeden sloupec.
   Užší panel (mobil, viz calc výš) sloupce sám zúží, nikdy nepřeteče. */
.mlv-filtr-panel-skupiny .mlv-filtr-hodnoty{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px 16px;
  max-height:60vh;overflow-y:auto}
.mlv-filtr-hodnota{margin:0}

/* Hodnoty filtru: 14px Barlow, počet šedě (token), aktivní hodnota
   černá výplň s bílým textem a zkosením 6px (stejná formule jako badge
   "Vyprodáno" na kartě výš). */
.mlv-filtr-hodnota-odkaz{font:400 14px/1.3 var(--wp--preset--font-family--text,Barlow)}
.mlv-filtr-pocet{color:var(--wp--preset--color--sediva,#4E4E52)}
.mlv-filtr-hodnota-odkaz.je-zvoleno{background:var(--wp--preset--color--inkoust,#0A0A0C);
  color:#fff;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mlv-filtr-hodnota-odkaz.je-zvoleno .mlv-filtr-pocet{color:#fff}

/* Task 4: řadicí lišta, stránkování, drobečky. Selektory ověřeny proti
   živému markupu (curl /product-category/pracovni-odevy/, >16 výsledků,
   stránkování MÁ existovat): select.orderby, .woocommerce-result-count,
   .wp-block-query-pagination (aktivní strana = <span class="page-numbers
   current">, tedy potomek s třídou .current - ".wp-block-query-pagination
   .current" sedí), .woocommerce-breadcrumb - shoda s briefem, hodnoty
   beze změny.
   Lišta nad výpisem: počet výsledků vlevo, řazení vpravo, jedna linka. */
.woocommerce-result-count{font:400 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--sediva,#4E4E52)}
select.orderby{font:600 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--inkoust,#0A0A0C);background:#fff;
  border:1px solid var(--wp--preset--color--linka,#E1E2E5);border-radius:0;
  padding:8px 10px}
/* Stránkování: čísla v Big Shoulders, aktivní černá dlaždice se zkosením. */
.wp-block-query-pagination a,.wp-block-query-pagination .current,
.wc-block-pagination a,.woocommerce-pagination a,.woocommerce-pagination span.current{
  font:800 16px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders");
  text-decoration:none;padding:9px 13px;display:inline-block}
.woocommerce-pagination span.current,.wp-block-query-pagination .current{
  background:var(--wp--preset--color--inkoust,#0A0A0C);color:#fff;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.woocommerce-breadcrumb{font:400 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--sediva,#4E4E52)}
.woocommerce-breadcrumb a{color:inherit}

/* Nález kontrolora (mimo brief, stejná oblast jako výš, etapa 2): starší
   mlv-attribute-filter.css (needituje se) dává `.mlv-filtr-skupiny
   {display:flex;flex-wrap:wrap}` - v šířkách 768-1100 px (nad mobilním
   zlomem 48em toho souboru, pod dvousloupcovou mřížkou 1100 px tady výš)
   běžel panel na plnou šířku obsahu a skupiny (`.mlv-filtr-skupina`,
   min-width:12rem) se zalamovaly VEDLE SEBE, ne pod sebe. NAHRAZENO
   Etapou 4, Task 1 (5. 9. 2026): skupiny mají teď vždy vedle sebe (viz
   .mlv-filtr-lista výš) - to je záměr nového vodorovného návrhu, ne bug.
   Zakomentováno, ne smazáno (konvence projektu).

.mlv-filtr-skupina{display:block;width:100%}
*/

/* Aktivní chipy POD lištou (brief Tasku 1), ne nad ní jako v etapě 2.
   Starší mlv-attribute-filter.css (needituje se) dává chipům červenou
   výplň a kulatý roh (border-radius:999px) - přebíjí se tady na
   černou/bílou se sraženým rohem 6px, stejná formule jako "je-zvoleno"
   hodnota a badge Vyprodáno výš. */
.mlv-filtr-aktivni{margin:10px 0 0;padding-top:0;border-top:0;display:flex;
  flex-wrap:wrap;align-items:center;gap:8px}
.mlv-filtr-aktivni-nadpis{font-size:14px;color:var(--wp--preset--color--sediva,#4E4E52)}
.mlv-filtr-chip a{background:var(--wp--preset--color--inkoust,#0A0A0C);color:#fff;
  border-radius:0;padding:6px 10px;font-size:14px;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mlv-filtr-chip a:hover,.mlv-filtr-chip a:focus-visible{
  background:var(--wp--preset--color--sediva,#4E4E52)}
.mlv-filtr-zrusit-vse{color:var(--wp--preset--color--cervena,#E00103)}

/* Mobil <=760: lišta se roluje vodorovně, stejně jako .kat ul
   (mlv-ram.css) - panely zůstávají zavěšené na .mlv-filtr (position:static
   rodiče výš), takže tenhle overflow-x jejich absolutní obsah neořízne. */
@media(max-width:760px){
  .mlv-filtr-lista{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mlv-filtr-lista::-webkit-scrollbar{display:none}
}

/* Etapa 4, Task 2 (5. 9. 2026): skupina "Cena". Panel sdílí základ
   .mlv-filtr-panel-skupiny (bílá, linka, box-sizing, plovoucí dropdown pod
   html.mlv-js) - tady se stylují jen vnitřní prvky NAVÍC a užší pevná
   šířka (dva posuvníky nepotřebují 5sloupcový grid hodnot jako atributy). */
.mlv-filtr-panel-cena{width:280px}

/* Dvě varianty přepínané html.mlv-js (stejný vzor jako <details>/.t-dropdown
   výš): bez JS obyčejný <form method=get> se dvěma number inputy
   (.mlv-cena-form-bez-js), s JS dvojitý posuvník + odkaz (.mlv-cena-js). */
html.mlv-js .mlv-cena-form-bez-js{display:none}
html:not(.mlv-js) .mlv-cena-js{display:none}

.mlv-cena-cisla{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.mlv-cena-cislo{font:600 16px/1.2 var(--wp--preset--font-family--text,Barlow);
  width:5.5em;box-sizing:border-box;border:1px solid var(--wp--preset--color--linka,#E1E2E5);
  border-radius:0;padding:6px 8px;color:var(--wp--preset--color--inkoust,#0A0A0C)}
.mlv-cena-jednotka{color:var(--wp--preset--color--sediva,#4E4E52);font-size:14px}

/* "Použít": tlačítko (bez JS) a odkaz (s JS) sdílí stejný vzhled - černá
   výplň, sražený roh 6px jako chip a "je-zvoleno" hodnota výš. */
.mlv-cena-pouzit{display:inline-block;background:var(--wp--preset--color--inkoust,#0A0A0C);
  color:#fff;font:600 14px/1 var(--wp--preset--font-family--text,Barlow);
  padding:8px 16px;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mlv-cena-pouzit:hover,.mlv-cena-pouzit:focus-visible{background:var(--wp--preset--color--sediva,#4E4E52)}

/* Aktuální hodnoty nad posuvníkem: 22 px Big Shoulders (zadání briefu Tasku
   2), stejný stupeň jako cena karty ve výpisu (mlv-vypis.css výš). */
.mlv-cena-hodnoty{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin:0 0 10px}
.mlv-cena-hodnota{font:800 22px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders");
  color:var(--wp--preset--color--inkoust,#0A0A0C);font-style:normal}

/* Dvojitý posuvník: dva <input type=range> přesně přes sebe (bez knihoven).
   Track obou je natvrdo průhledný (-webkit/-moz pseudo-elementy) - vidět a
   klikatelný zůstává jen "úchyt" (thumb), track propouští myš/dotyk na
   input POD sebou (pointer-events:none na celém inputu, auto jen na
   thumbu - past: klávesnice na pointer-events NEZÁVISÍ, Tab i šipky
   fungují na obou inputech beze změny, proto se tu nic zvlášť neřeší). */
.mlv-cena-posuvnik{position:relative;height:24px;margin:0 0 14px}
.mlv-cena-range{position:absolute;left:0;top:0;width:100%;height:24px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;z-index:1}
.mlv-cena-range::-webkit-slider-runnable-track{-webkit-appearance:none;
  height:4px;background:var(--wp--preset--color--linka,#E1E2E5)}
.mlv-cena-range::-moz-range-track{height:4px;
  background:var(--wp--preset--color--linka,#E1E2E5);border:0}
.mlv-cena-range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;margin-top:-7px;background:var(--wp--preset--color--inkoust,#0A0A0C);
  border:0;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),
    calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.mlv-cena-range::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;
  background:var(--wp--preset--color--inkoust,#0A0A0C);border:0;border-radius:0}
/* Oprava recenze Task 2b (5. 9. 2026), Important #2: z-index se dřív
   dával natvrdo maxu (past dvojitého posuvníku: bez toho by na společné
   pozici min=max šel uchopit jen spodní/min úchyt) - jenže to znamená, že
   na ÚZKÉM rozsahu (např. jen 20 Kč mezi min a max) ležel max úchyt VŽDY
   navrch a min šel uchopit jen mimo překryv, často vůbec ne. mlv-vypis.js
   teď při pointerdown/focus na úchytu přidá tuhle třídu JEMU, ne natvrdo
   maxu - navrch je vždy ten, se kterým zákazník naposledy pracoval. */
.mlv-cena-range-aktivni{z-index:3}
/* appearance:none dokáže v některých prohlížečích potlačit i výchozí
   ohniskový obrys - explicitní focus-visible tady jistí požadavek zadání
   "posuvník nesmí rozbít... focus". */
.mlv-cena-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--wp--preset--color--cervena,#E00103);outline-offset:2px}
.mlv-cena-range:focus-visible::-moz-range-thumb{outline:2px solid var(--wp--preset--color--cervena,#E00103);outline-offset:2px}

/* Etapa 4, Task 3 (5. 9. 2026): skupiny "Gramáž" (pa_material_gramaz -
   NAHRAZUJE dřívější checkbox seznam téhož atributu, viz task-3-report.md)
   a "Hmotnost" (pa_hmotnost, dřív ve filtru vůbec nebyla - 48 hodnot by na
   checkbox seznam bylo moc, teď posuvník). Panel sdílí základ
   .mlv-filtr-panel-skupiny (bílá, linka, box-sizing, plovoucí dropdown pod
   html.mlv-js) - stejně jako .mlv-filtr-panel-cena výš, jen užší pevná
   šířka (dva posuvníky nepotřebují 5sloupcový grid hodnot). */
.mlv-filtr-panel-posuvnik{width:280px}

/* Dvě varianty přepínané html.mlv-js (stejný vzor jako "Cena" výš): bez JS
   zůstává STÁVAJÍCÍ seznam hodnot (.mlv-filtr-hodnoty - "seznam hodnot jako
   dřív, details fallback zůstává", brief Tasku 3), s JS dvojitý posuvník
   (.mlv-rozsah-js) seznam NAHRADÍ (schovaný jen uvnitř
   .mlv-filtr-panel-posuvnik - ostatní atributy svůj seznam vidí pořád). */
html.mlv-js .mlv-filtr-panel-posuvnik > .mlv-filtr-hodnoty{display:none}
html:not(.mlv-js) .mlv-rozsah-js{display:none}

/* Hodnoty nad posuvníkem NEJSOU čísla jako u Ceny (22px Big Shoulders Kč) -
   jsou to skutečné NÁZVY termů ("300 g/m²", "do 150 g/m²", "150–200 g/m²"),
   ať zákazník vidí přesně to, co je i v bez-JS seznamu výš, ne pomocnou
   hodnotu spočtenou jen pro řazení/kroky (viz functions.php,
   mlv_cislo_z_termu - u rozsahových termů je to průměr mezí, nikde se
   samostatně nezobrazuje). */
.mlv-rozsah-hodnoty{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin:0 0 10px}
.mlv-rozsah-hodnota{font:800 22px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders");
  color:var(--wp--preset--color--inkoust,#0A0A0C);font-style:normal}

/* "Použít": stejný vzhled jako chip / "je-zvoleno" hodnota / tlačítko Cena
   výš - černá výplň, sražený roh 6px. */
.mlv-rozsah-pouzit{display:inline-block;background:var(--wp--preset--color--inkoust,#0A0A0C);
  color:#fff;font:600 14px/1 var(--wp--preset--font-family--text,Barlow);
  padding:8px 16px;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mlv-rozsah-pouzit:hover,.mlv-rozsah-pouzit:focus-visible{background:var(--wp--preset--color--sediva,#4E4E52)}

/* Dvojitý posuvník - STEJNÝ mechanismus bez knihoven jako .mlv-cena-range
   výš (Task 2/2b, VZOR z briefu Tasku 3): dva <input type=range> přes sebe,
   track natvrdo průhledný, klikatelný jen "úchyt" (pointer-events:none na
   celém inputu, auto jen na thumbu), z-index navrch dostává úchyt, se
   kterým se naposledy pracovalo (mlv-vypis.js, .mlv-rozsah-range-aktivni) -
   rovnou přebíráme OPRAVENOU verzi z Tasku 2b, ne původní natvrdo z-index na
   maxu. Hodnota inputu je INDEX do setříděného pole kroků (data-kroky), ne
   přímo gramáž/hmotnost - "kroky = skutečné hodnoty", ne lineární škála. */
.mlv-rozsah-posuvnik{position:relative;height:24px;margin:0 0 14px}
.mlv-rozsah-range{position:absolute;left:0;top:0;width:100%;height:24px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;z-index:1}
.mlv-rozsah-range::-webkit-slider-runnable-track{-webkit-appearance:none;
  height:4px;background:var(--wp--preset--color--linka,#E1E2E5)}
.mlv-rozsah-range::-moz-range-track{height:4px;
  background:var(--wp--preset--color--linka,#E1E2E5);border:0}
.mlv-rozsah-range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;margin-top:-7px;background:var(--wp--preset--color--inkoust,#0A0A0C);
  border:0;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),
    calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.mlv-rozsah-range::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;
  background:var(--wp--preset--color--inkoust,#0A0A0C);border:0;border-radius:0}
.mlv-rozsah-range-aktivni{z-index:3}
/* appearance:none dokáže v některých prohlížečích potlačit i výchozí
   ohniskový obrys - explicitní focus-visible jistí "posuvník nesmí rozbít
   klávesnici ani focus" (stejné zdůvodnění jako u Ceny výš). */
.mlv-rozsah-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--wp--preset--color--cervena,#E00103);outline-offset:2px}
.mlv-rozsah-range:focus-visible::-moz-range-thumb{outline:2px solid var(--wp--preset--color--cervena,#E00103);outline-offset:2px}