/* Hlavička výpisu: pět hlavních filtrů + „Další filtry", panel filtrů na
   mobilu a řádek počtu nad zbožím (majitel 2. 10. 2026, koncept 3; spec
   docs/superpowers/specs/2026-10-02-hlavicka-vypisu-design.md).
   Načítá se ZA mlv-vypis.css a jen doplňuje: otevírání skupin na počítači
   (mlv-vypis.js) ani vzhled tlačítek se nemění. Vše, co něco schovává,
   platí jen pod html.mlv-js - bez JS zůstane celá lišta vidět. */

/* --- Počítač: Další filtry ------------------------------------------ */
.mlv-filtr-dalsi{font:600 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  flex:none;background:#fff;color:var(--wp--preset--color--cervena,#E00103);
  border:1px solid var(--wp--preset--color--cervena,#E00103);border-radius:0;
  padding:8px 12px;cursor:pointer;white-space:nowrap}
.mlv-filtr-dalsi:hover{background:var(--wp--preset--color--cervena,#E00103);color:#fff}
.mlv-filtr-dalsi:focus-visible{outline:2px solid var(--wp--preset--color--inkoust,#0A0A0C);
  outline-offset:2px}
html:not(.mlv-js) .mlv-filtr-dalsi{display:none}
html.mlv-js .mlv-filtr:not(.je-rozbaleno) .mlv-filtr-skupina-dalsi{display:none}
@media(prefers-reduced-motion:no-preference){
  html.mlv-js .mlv-filtr.je-rozbaleno .mlv-filtr-skupina-dalsi{
    animation:mlv-filtr-objev .32s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * 40ms)}
}
/* Jen průhlednost: transform (i doběhlý, držený přes fill-mode) dělá ze
   skupiny containing block a panel skupiny (position:absolute, počítaný
   vůči .mlv-filtr v mlv-vypis.js) by se otevřel posunutý - náhled 2. 10.
   ukázal panel „Zapínání" o 386 px vpravo od tlačítka. */
@keyframes mlv-filtr-objev{from{opacity:0}to{opacity:1}}

/* Chipy zvolených filtrů jsou teď uvnitř lišty (kvůli panelu na mobilu) -
   na počítači zabírají vlastní řádek pod tlačítky. */
.mlv-filtr-lista > .mlv-filtr-aktivni{flex:1 0 100%;margin:2px 0 0}

/* Řádek počtu a „Na stránku" těsně nad zbožím. Horní skupina ze šablony
   WooCommerce (počet + řazení) se schová, jen když tenhle řádek existuje. */
.mlv-vypis-meta{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 16px;margin:14px 0 0}
.mlv-vypis-meta .woocommerce-result-count{margin:0;
  color:var(--wp--preset--color--sediva,#4E4E52)}
body:has(.mlv-vypis-meta) .wp-block-group:has(> .wp-block-woocommerce-product-results-count){display:none}
/* Řazení na počítači v řádku počtu vedle „Na stránku" (v liště po rozbalení
   spadalo do samostatného řádku); na mobilu je vedle tlačítka Filtry. */
.mlv-vypis-meta-vpravo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-left:auto}
.mlv-vypis-meta .wc-block-catalog-sorting,.mlv-vypis-meta form.woocommerce-ordering{margin:0}

/* Řazení (majitel 2. 10. 2026, koncept 3 ze tří: přestylovaný nativní
   select, ne vlastní seznam - na telefonu zůstává výběr systému). Stejné
   bílé pole se sraženým rohem 6 px jako volby „Na stránku" vedle, najetí
   a fokus červeně. „Řadit:" je jen obraz (::before) - čtečka čte
   aria-label selectu („Řazení obchodu"), nic se nezdvojí. Select leží přes
   celé pole, takže klik kamkoli do něj otevře výběr. */
.mlv-vypis-razeni form.woocommerce-ordering,
.mlv-filtr-mobil-razeni form.woocommerce-ordering{position:relative;display:flex;
  align-items:center;margin:0;background:#fff;
  color:var(--wp--preset--color--inkoust,#0A0A0C);
  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);
  transition:background-color .18s cubic-bezier(.16,1,.3,1),color .18s cubic-bezier(.16,1,.3,1)}
.mlv-vypis-razeni form.woocommerce-ordering::before,
.mlv-filtr-mobil-razeni form.woocommerce-ordering::before{content:"Řadit:";
  position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:400 14px/1 var(--wp--preset--font-family--text,Barlow);
  color:var(--wp--preset--color--sediva,#4E4E52)}
.mlv-vypis-razeni form.woocommerce-ordering::after,
.mlv-filtr-mobil-razeni form.woocommerce-ordering::after{content:"▾";
  position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:14px;line-height:1}
.mlv-vypis-razeni select.orderby,
.mlv-filtr-mobil-razeni select.orderby{-webkit-appearance:none;appearance:none;
  width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;
  background:transparent;color:inherit;cursor:pointer;
  font:600 14px/1.2 var(--wp--preset--font-family--text,Barlow);
  padding:10px 32px 10px 58px}
.mlv-vypis-razeni select.orderby:focus{outline:0}
.mlv-vypis-razeni form.woocommerce-ordering:has(select:focus-visible),
.mlv-filtr-mobil-razeni form.woocommerce-ordering:has(select:focus-visible){
  background:var(--wp--preset--color--cervena,#E00103);color:#fff}
.mlv-vypis-razeni form.woocommerce-ordering:has(select:focus-visible)::before,
.mlv-filtr-mobil-razeni form.woocommerce-ordering:has(select:focus-visible)::before{color:#fff}
/* Najetí jen s myší - iOS po klepnutí drží :hover a pole by zůstalo červené. */
@media(hover:hover){
  .mlv-vypis-razeni form.woocommerce-ordering:hover,
  .mlv-filtr-mobil-razeni form.woocommerce-ordering:hover{
    background:var(--wp--preset--color--cervena,#E00103);color:#fff}
  .mlv-vypis-razeni form.woocommerce-ordering:hover::before,
  .mlv-filtr-mobil-razeni form.woocommerce-ordering:hover::before{color:#fff}
}
/* Fokus z klávesnice: obrys by clip-path uřízl, proto vnitřní bílá linka
   (stejně jako .mlv-pocet-volba:focus-visible v mlv-vypis.css). */
.mlv-vypis-razeni select.orderby:focus-visible,
.mlv-filtr-mobil-razeni select.orderby:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff}
/* Rozbalený seznam voleb kreslí systém - čitelný bez ohledu na barvu pole. */
.mlv-vypis-razeni select.orderby option,
.mlv-filtr-mobil-razeni select.orderby option{color:#0A0A0C;background:#fff}
@media(prefers-reduced-motion:reduce){
  .mlv-vypis-razeni form.woocommerce-ordering,
  .mlv-filtr-mobil-razeni form.woocommerce-ordering{transition:none}
}

/* Prvky jen pro mobilní panel: na počítači nejsou. */
.mlv-filtr-mobil-lista,.mlv-filtr-panel-hlavicka,.mlv-filtr-zobrazit{display:none}

/* --- Mobil: dvě tlačítka a panel přes celou obrazovku ---------------- */
@media(max-width:760px){
  html.mlv-js .mlv-filtr-mobil-lista{display:grid;grid-template-columns:1fr 1fr;
    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)}
  /* Pevné sloupce: WooCommerce do řádku vkládá vlastní kontejner hlášek
     (.wc-block-components-notices) jako PRVNÍ dítě - v Safari na iPhonu pak
     „Filtry" skončilo vpravo a řazení pod ním (snímek majitele 2. 10.,
     zopakováno ve WebKitu). Cizí prvek jde přes celou šířku nahoru, prázdný
     se schová. */
  .mlv-filtr-mobil-otevrit{grid-column:1}
  .mlv-filtr-mobil-razeni{grid-column:2}
  /* Pod 375 px (iPhone SE 1. gen.) by se „Nejprodávanější" v půlce řádku
     nevešlo - řazení dostane víc místa než krátké „Filtry". */
  @media(max-width:374px){
    html.mlv-js .mlv-filtr-mobil-lista{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  }
  .mlv-filtr-mobil-lista > :not(.mlv-filtr-mobil-otevrit):not(.mlv-filtr-mobil-razeni){
    grid-column:1 / -1;order:-1}
  /* Prázdný kontejner hlášek obsahuje jen bílé znaky, :empty na něj nesedí. */
  .mlv-filtr-mobil-lista > :not(.mlv-filtr-mobil-otevrit):not(.mlv-filtr-mobil-razeni):not(:has(*)){display:none}
  .mlv-filtr-mobil-otevrit{font:700 15px/1.2 var(--wp--preset--font-family--text,Barlow);
    background:var(--wp--preset--color--inkoust,#0A0A0C);color:#fff;border:0;
    border-radius:0;padding:12px;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-filtr-mobil-otevrit:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff;
    background:var(--wp--preset--color--cervena,#E00103)}
  .mlv-filtr-mobil-razeni,.mlv-filtr-mobil-razeni .wc-block-catalog-sorting{margin:0;height:100%}
  /* Obal bloku WooCommerce se jinak smrští na obsah a pole nevyplní sloupec. */
  .mlv-filtr-mobil-razeni .wc-block-catalog-sorting,
  .mlv-filtr-mobil-razeni form.woocommerce-ordering{width:100%;height:100%;box-sizing:border-box}
  /* V půlce řádku by „Řadit:" uťalo i „Doporučené" (náhled ve WebKitu);
     pole se šipkou vedle „Filtry" se jako řazení čte samo. */
  .mlv-filtr-mobil-razeni form.woocommerce-ordering::before{content:none}
  .mlv-filtr-mobil-razeni select.orderby{font-size:14px;padding-left:12px;padding-right:28px}
  /* Pás rolovaných tlačítek s červenou hranou už na mobilu není. */
  html.mlv-js .mlv-filtr::after{display:none}
  html.mlv-js .mlv-filtr:not(.je-panel) > .mlv-filtr-lista{display:none}

  /* Panel. Pod souhlasem s cookies (99990), nad čipem „Nastavení cookies"
     (99980) - jinak by čip kradl klik na „Zobrazit" vpravo dole.
     z-index MUSÍ dostat .mlv-filtr: má position:relative;z-index:2
     (mlv-vypis.css), tedy vlastní kontext vrstvení, a z-index panelu
     uvnitř by platil jen v něm - hlavička webu ležela nad panelem
     (náhled 2. 10., elementFromPoint). */
  html.mlv-js .mlv-filtr.je-panel{z-index:99985}
  html.mlv-js .mlv-filtr.je-panel > .mlv-filtr-lista{position:fixed;inset:0;
    z-index:1;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;padding:0 16px;border:0}
  @media(prefers-reduced-motion:no-preference){
    html.mlv-js .mlv-filtr.je-panel > .mlv-filtr-lista{
      animation:mlv-filtr-panel .28s cubic-bezier(.16,1,.3,1) both}
  }
  html.mlv-zamek,html.mlv-zamek body{overflow:hidden}
  .je-panel .mlv-filtr-panel-hlavicka{display:flex;order:-3;position:sticky;top:0;
    z-index:1;align-items:center;justify-content:space-between;background:#fff;
    padding:14px 0;border-bottom:2px solid var(--wp--preset--color--inkoust,#0A0A0C)}
  .mlv-filtr-panel-titulek{font:800 26px/1 var(--wp--preset--font-family--nadpis,"Big Shoulders")}
  .mlv-filtr-zavrit{font:600 15px/1.2 var(--wp--preset--font-family--text,Barlow);
    background:none;border:0;padding:10px 0 10px 12px;cursor:pointer;
    color:var(--wp--preset--color--cervena,#E00103);text-decoration:underline}
  .je-panel > .mlv-filtr-lista > .mlv-filtr-aktivni{order:-2;margin:12px 0 4px}
  /* Specificita nad html.mlv-js .mlv-filtr:not(.je-rozbaleno) … výš. */
  html.mlv-js .mlv-filtr.je-panel .mlv-filtr-skupina-dalsi{display:block}
  .je-panel .mlv-filtr-dalsi{display:none}
  .je-panel > .mlv-filtr-lista:focus{outline:0}
  .je-panel .mlv-filtr-skupina-obal{width:100%;
    border-bottom:1px solid var(--wp--preset--color--linka,#E1E2E5)}
  .je-panel .mlv-filtr-tlacitko{display:flex;justify-content:space-between;
    border:0;padding:16px 0;font-size:16px;background:none;color:inherit}
  .je-panel .mlv-filtr-tlacitko.ma-aktivni{color:var(--wp--preset--color--cervena,#E00103)}
  .je-panel .mlv-filtr-skupina-obal.je-otevreno > .mlv-filtr-tlacitko{border:0}
  /* Klepnutí prstem dá skupině fokus a globální červený obrys by zůstal
     viset na řádku; klávesnice (:focus-visible) ho dál vidí. */
  .je-panel .mlv-filtr-tlacitko:focus:not(:focus-visible){outline:0}
  html.mlv-js .je-panel .mlv-filtr-panel-skupiny{position:static;width:auto;
    opacity:1;pointer-events:auto;transform:none;box-shadow:none;border:0;
    padding:0 0 16px;margin:0}
  .je-panel .mlv-filtr-panel-skupiny .mlv-filtr-hodnoty{max-height:none;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Zvolená hodnota nemá vlastní padding - sražený roh 6px (mlv-vypis.css)
     jinak v úzkém sloupci uřízl závorku počtu („kompozit (283"). */
  .je-panel .mlv-filtr-hodnota-odkaz.je-zvoleno{padding:2px 10px 2px 4px}
  .je-panel .mlv-filtr-zobrazit{display:block;order:10;position:sticky;bottom:0;
    margin:auto -16px 0;padding:12px 16px 16px;background:#fff;
    border-top:1px solid var(--wp--preset--color--linka,#E1E2E5)}
  .mlv-filtr-zobrazit a{display:block;text-align:center;text-decoration:none;
    font:700 16px/1.2 var(--wp--preset--font-family--text,Barlow);padding:14px;
    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-zobrazit a:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff;
    background:var(--wp--preset--color--cervena,#E00103)}
  .mlv-vypis-meta{margin-top:10px}
  .mlv-vypis-meta .mlv-vypis-razeni{display:none}
}
@keyframes mlv-filtr-panel{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}