/* ==========================================================================
   VPF – NOVÁ PODOBA FILTRŮ V KATEGORIÍCH
   ==========================================================================
   Patří k bloku VPF v custom_js/<SHOP>/main.js.

   POZOR, TOHLE JE KOPIE. Stejný soubor leží v custom_css e-shopů VYP_GR,
   VYP_HR, VYP_SL, VYP_DE a VYP_AT – co se opraví tady, musí se opravít i ve
   zbylých čtyřech. Až se blok přesune do společného main.js, přesune se
   tenhle styl do categories.css a kopie zmizí.

   V šabloně Shoptetu musí být soubor nalinkovaný – na rozdíl od config.css
   a promotions.css je specific.css na těchhle e-shopech nový.

   Skoro všechno visí na třídách, které vyrábí až skript (.vpf-side, .vpf-top,
   .vpf-modal), takže by to samo o sobě nikde jinde nevyskočilo.

   Výjimkou jsou dvě místa, která sahají na nativní prvky šablony: schování
   původního panelu a úprava sidebaru. Ta se musí uplatnit hned při prvním
   vykreslení, jinak původní podoba filtrů problikne, než doběhne skript.
   Místo třídy .vpf-on proto visí na :has(#filters input[data-url]) – tedy na
   stejné podmínce, podle které se skript rozhoduje, jestli panel převezme.
   ========================================================================== */
.vpf-side, .vpf-top, .vpf-modal {
  --vpf-accent: #13b1a4;
  --vpf-accent-dark: #0f9a8f;
  --vpf-head: var(--master-color-primary); /* hlavička modalu = hlavička košíku */
  --vpf-soft: #e3f5f3;
  --vpf-text: #1b2430;
  --vpf-muted: #8b95a1;
  --vpf-line: #edf0f2;
  --vpf-red: #c62828;
  --vpf-radius: 16px;
  color: var(--vpf-text);
  -webkit-font-smoothing: antialiased;
}
.vpf-side *, .vpf-top *, .vpf-modal * { box-sizing: border-box; }

/* Nativní filtry schováme hned z hlavičky, ne až třídou .vpf-on. Skript se
   linkuje až na konci <body> (a jQuery, na kterém visí zbytek custom_js, taky),
   takže .vpf-on dorazí až po prvním vykreslení a původní panel by stihl
   probliknout.

   Podmínka :has(input[data-url]) je schválně ta samá, jakou si pak ověřuje
   readModel(): schováme jen panel, ze kterého skript umí postavit ten náš. Na
   kategorii, kde jsou jen cenové posuvníky a žádný parametrický filtr, se
   pravidlo neuplatní a nativní panel se normálně vykreslí – takže se nemůže
   stát, že by kategorie zůstala bez filtrů.

   !important tam musí být: Shoptet si panel za běhu stěhuje ze sidebaru do
   #filters-wrapper v obsahu a tam na něj sedne jeho vlastní pravidlo se dvěma
   ID, které by to naše přebilo (ověřeno – bez !important se filtry v té pozici
   zase objeví).

   Druhé pravidlo pokrývá zbytek: stránky, kde se náš panel vykreslí, ale
   nejsou to kategorie (vyhledávání, výrobce). */
#filters:has(input[data-url]) { display: none !important; }
html.vpf-on #filters { display: none !important; }
html.vpf-lock, html.vpf-lock body { overflow: hidden; }
html.vpf-busy .vpf-side, html.vpf-busy #products { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* ---------- Sidebar kategorie: bez stromu kategorií, bez šedého pozadí, box zarovnaný vlevo ---------- */
/* Taky visí na :has(input[data-url]) a ne na .vpf-on – jinak by se po prvním
   vykreslení překlopil i vzhled sidebaru (šedé pozadí, strom kategorií) a
   problikávalo by to dál, i když samotné filtry už jsou schované.

   Psáno naplocho, ne zanořeně: zanořené pravidlo začínající názvem elementu
   (body) umí až Safari 17.2, starší iOS by celý blok zahodilo. */
@media (min-width: 768px) {
  body.type-category:has(#filters input[data-url]) .sidebar { background: none !important; }
  body.type-category:has(#filters input[data-url]) .sidebar::before,
  body.type-category:has(#filters input[data-url]) .sidebar::after { display: none !important; }
  body.type-category:has(#filters input[data-url]) .sidebar-inner { padding-top: 0 !important; padding-left: 0 !important; }
  body.type-category:has(#filters input[data-url]) .box-categories { display: none !important; }
  body.type-category:has(#filters input[data-url]) .box-filters { padding-top: 0 !important; }
  /* Shoptet dává každému boxu v sidebaru spodní linku. S novým panelem je
     nechceme – ani pod filtry, ani mezi bannery pod nimi. Řeší to zároveň
     čáru, co visela v sidebaru, než se panel stihl vykreslit. */
  body.type-category:has(#filters input[data-url]) .sidebar-inner > div { border-bottom: 0; }
}

/* POZOR na .box-filters (box Shoptetu, ve kterém filtry sedí): nikdy mu
   nedávat display:none. Shoptet si podle něj rozhoduje, kam filtry umístí, a
   když ho nevidí, přestěhuje #filters ze sidebaru do #filters-wrapper
   v obsahu – náš panel jde s ním a roztáhne se přes celou šířku výpisu.
   Ověřeno a reprodukovatelné, takže prázdný box radši jen odbarvujeme
   (viz border-bottom výš), ne schováváme. */

/* ---------- Sidebar ---------- */
.vpf-side {
  padding: 16px 16px 18px;
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  font-size: 13.5px;
}
.vpf-side-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--vpf-line);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.vpf-clear, .vpf-clearall {
  color: var(--vpf-red) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
}
.vpf-clear span { font-size: 15px; }

/* ---------- Sekce ---------- */
.vpf-sec { padding: 16px 0 15px; border-bottom: 1px solid var(--vpf-line); }
.vpf-side .vpf-sec:last-of-type { border-bottom: 0; }
.vpf-sec-h {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
}
.vpf-title { display: inline-flex; align-items: center; gap: 7px; }
.vpf-sec-h:focus-visible { outline: 2px solid var(--vpf-accent); outline-offset: 3px; }

/* ---------- Otazník a vysvětlivka ----------
   Otazník je tlačítko, vysvětlivka se rozbalí až po kliknutí (nativní title
   bublina tím padá). Obsah je v obou místech stejný, liší se jen obal:
   v sidebaru plovoucí bublina u otazníku, v modalu blok rozbalený v sekci. */
.vpf-tipw { position: relative; display: inline-flex; }
.vpf-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vpf-accent);
  color: #fff;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}
.vpf-tip[aria-expanded="true"] { background: var(--vpf-text); }

/* V sidebaru vysvětlivka sedí v hlavičce sekce, takže musí shodit její
   verzálky, prostrkání i tučnost – jinak by text vypadal jako nadpis. */
.vpf-help {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--vpf-text);
}
.vpf-help[hidden] { display: none; }
.vpf-help-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vpf-help-h b { font-size: 14px; font-weight: 800; line-height: 1.3; }
.vpf-help-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin: -4px -5px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vpf-muted);
  cursor: pointer;
}
.vpf-help-x svg { width: 15px; height: 15px; }
.vpf-help p { margin: 7px 0 0; color: #566270; }
.vpf-help dl { display: grid; grid-template-columns: auto 1fr; margin: 11px 0 0; }
.vpf-help dt, .vpf-help dd { padding: 8px 0; border-top: 1px solid var(--vpf-line); }
.vpf-help dt { padding-right: 16px; font-weight: 700; white-space: nowrap; }
.vpf-help dd { margin: 0; color: #566270; }
.vpf-help dl > dt:first-child, .vpf-help dl > dt:first-child + dd { border-top: 0; }
.vpf-help-n {
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
}

/* Sidebar: plovoucí bublina u otazníku, přetéká přes výpis vedle */
.vpf-side .vpf-help {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: -11px;
  width: 290px;
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(20, 40, 35, .17);
}
.vpf-side .vpf-help-n { background: #f5f8f9; }

/* Modal: rozbalený blok nad výčtem hodnot */
.vpf-db .vpf-help {
  margin: 0 0 14px;
  padding: 14px 15px 16px;
  background: #f2f8f8;
  border-radius: 14px;
}
.vpf-db .vpf-help-x { background: #fff; }
.vpf-db .vpf-help dt, .vpf-db .vpf-help dd { border-top-color: #e0ebeb; }
.vpf-db .vpf-help-n { background: #fff; border: 1px solid #e0ebeb; }

/* ---------- Volby ---------- */
.vpf-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 0;
  padding: 5px 0 5px 30px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.vpf-opt input, .vpf-sw input { position: absolute; opacity: 0; pointer-events: none; }
.vpf-cb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 1.5px solid #d3d9df;
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.vpf-opt:hover .vpf-cb { border-color: var(--vpf-accent); }
.vpf-opt input:checked + .vpf-cb {
  border-color: var(--vpf-accent);
  background-color: var(--vpf-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vpf-opt input:focus-visible + .vpf-cb { box-shadow: 0 0 0 3px rgba(19, 177, 164, .25); }
.vpf-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vpf-txt b { font-weight: 500; }
.vpf-opt input:checked ~ .vpf-txt b { font-weight: 700; }
.vpf-txt small { font-size: 11px; color: var(--vpf-muted); }
.vpf-opt em {
  margin-left: auto;
  padding-left: 8px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vpf-muted);
}
.vpf-zero { opacity: .4; }
.vpf-sec:not(.is-more) .vpf-hide { display: none; }

.vpf-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vpf-accent-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.vpf-more::after {
  content: "";
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.is-more .vpf-more::after { transform: rotate(-45deg); margin-top: 3px; }

/* ---------- Barvy ---------- */
.vpf-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.vpf-sw { position: relative; display: block; margin: 0; cursor: pointer; }
.vpf-sw img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.vpf-sw span {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 6px;
  transition: box-shadow .15s;
}
.vpf-sw:hover span { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c9d0d7; }
.vpf-sw input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--vpf-accent); }
.vpf-sw input:focus-visible + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(19, 177, 164, .5); }

/* ---------- Posuvník (cena, gramáž) ---------- */
.vpf-range { --a: 0; --b: 1; --t: 16px; }
.vpf-range-vals {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.vpf-range-track { position: relative; height: var(--t); }
.vpf-range-track::before,
.vpf-range-track i {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  height: 4px;
  border-radius: 4px;
}
.vpf-range-track::before { left: 0; right: 0; background: #e4e8ec; }
.vpf-range-track i {
  left: calc(var(--t) / 2 + (100% - var(--t)) * var(--a));
  right: calc(var(--t) / 2 + (100% - var(--t)) * (1 - var(--b)));
  background: var(--vpf-accent);
}
.vpf-range input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: var(--t);
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.vpf-range input:focus { outline: none; }
.vpf-range input::-webkit-slider-runnable-track { height: var(--t); background: none; }
.vpf-range input::-moz-range-track { background: none; }
.vpf-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--t);
  height: var(--t);
  border: 0;
  border-radius: 4px;
  background: var(--vpf-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  pointer-events: auto;
  cursor: grab;
}
.vpf-range input::-moz-range-thumb {
  width: var(--t);
  height: var(--t);
  border: 0;
  border-radius: 4px;
  background: var(--vpf-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  pointer-events: auto;
  cursor: grab;
}
.vpf-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(19, 177, 164, .3); }
.vpf-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(19, 177, 164, .3); }

/* ---------- Tlačítka ---------- */
.vpf-all, .vpf-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--vpf-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
.vpf-all:hover, .vpf-apply:hover { background: var(--vpf-accent-dark); }
.vpf-all { width: 100%; margin-top: 14px; padding: 13px 16px; box-shadow: 0 4px 12px rgba(19, 177, 164, .25); }
.vpf-all::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 1.75px 1.75px 0 0;
  transform: rotate(45deg);
}

/* ---------- Nad výpisem ---------- */
.vpf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.vpf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #bfe6e2;
  border-radius: 999px;
  background: var(--vpf-soft);
  color: var(--vpf-text) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
}
.vpf-chip::after { content: "×"; font-size: 15px; line-height: 1; }
.vpf-chip:hover { border-color: var(--vpf-accent); }
.vpf-clearall { margin-left: 4px; font-size: 12.5px; }

.vpf-mbar { display: none; }
.vpf-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #dfe3e7;
  border-radius: 999px;
  background: #fff;
  color: var(--vpf-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.vpf-pill svg { width: 16px; height: 16px; }
.vpf-pill.is-dark { background: var(--vpf-text); border-color: var(--vpf-text); color: #fff; }
.vpf-pill.is-on { border-color: var(--vpf-accent); background: var(--vpf-soft); color: var(--vpf-accent-dark); }
.vpf-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--vpf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.vpf-n[hidden] { display: none; }
.vpf-pill.is-dark .vpf-n { background: #fff; color: var(--vpf-text); }

/* ---------- Modal (stejný jako okno košíku) ---------- */
.vpf-modal { position: fixed; inset: 0; z-index: 2147483002; font-size: 13.5px; }
.vpf-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .25s;
}
.vpf-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(430px, 100%);
  overflow: hidden;
  background: #fff;
  border-radius: 0 5px 5px 0;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.vpf-modal.is-open .vpf-backdrop { opacity: .45; }
.vpf-modal.is-open .vpf-dialog { transform: none; }

.vpf-dh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 10px 0 20px;
  background: var(--vpf-head);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.vpf-dh > span { display: inline-flex; align-items: center; gap: 9px; }
.vpf-dh svg { width: 18px; height: 18px; }
.vpf-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.vpf-x:hover { opacity: .8; }
.vpf-x svg { width: 22px; height: 22px; stroke-width: 3; }

.vpf-db { position: relative; flex: 1; overflow-y: auto; padding: 0 18px; overscroll-behavior: contain; }
.vpf-db .vpf-sec:last-child { border-bottom: 0; }

/* akordeon */
.vpf-modal .vpf-sec[data-k] .vpf-sec-h { margin: 0; cursor: pointer; }
.vpf-modal .vpf-sec.is-open .vpf-sec-h { margin-bottom: 10px; }
.vpf-modal .vpf-sec[data-k]:not(.is-open) .vpf-body { display: none; }
.vpf-ind { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.vpf-chev {
  width: 7px;
  height: 7px;
  margin: -3px 3px 0;
  border: solid var(--vpf-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform .2s;
}
.vpf-sec.is-open .vpf-chev { margin-top: 3px; transform: rotate(-135deg); border-color: var(--vpf-accent); }

.vpf-df {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--vpf-line);
}
.vpf-reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vpf-red);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.vpf-apply { flex: 1; height: 46px; padding: 0 12px; white-space: nowrap; }
.vpf-modal .vpf-colors { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.vpf-apply:disabled { background: #c5ccd3; cursor: default; }
.vpf-modal.is-loading .vpf-apply { opacity: .7; }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .vpf-side, .vpf-active { display: none; }
  .vpf-mbar {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vpf-mbar::-webkit-scrollbar { display: none; }

  .vpf-dialog {
    top: auto;
    right: 0;
    width: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--vpf-radius) var(--vpf-radius) 0 0;
    transform: translateY(100%);
  }
  .vpf-df { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}