/* ======================================================================
   WU Product Filter – Optimized CSS (Cross-Browser, clean & consistent)
   - Safe properties for old/new browsers
   - gap fallbacks included
   - Mobile: Dropdown/Accordion layout (no overflow, everything clickable)
====================================================================== */

/* -------------------------
   Base / Reset-ish helpers
------------------------- */

.wu-pf,
.wu-pf * { box-sizing: border-box; }

.wu-pf { max-width: 100%; }

.wu-pf button,
.wu-pf input { font: inherit; }

.wu-pf button::-moz-focus-inner { border: 0; padding: 0; }

.wu-pf button:focus { outline: none; }
.wu-pf button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.wu-pf [hidden] { display: none !important; }

/* iOS/Touch: nicer tapping */
.wu-pf, .wu-pf * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.wu-pf button { touch-action: manipulation; }

/* Container */
.wu-pf {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

/* -------------------------
   Form layout
------------------------- */

.wu-pf .wu-pf-form {
  display: grid;
  gap: 12px;
}

/* Fallback if gap isn't supported */
.wu-pf .wu-pf-form > * + * { margin-top: 12px; }
@supports (gap: 12px) {
  .wu-pf .wu-pf-form > * + * { margin-top: 0; }
}

.wu-pf .wu-pf-label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.wu-pf .wu-pf-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.wu-pf .wu-pf-input:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.10);
}

/* Price inputs */
.wu-pf .wu-pf-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@supports not (gap: 12px) {
  .wu-pf .wu-pf-price { gap: 0; }
  .wu-pf .wu-pf-price > div + div { margin-top: 12px; }
}

/* -------------------------
   Active Filters (Top bar)
------------------------- */

.wu-pf-active {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}

.wu-pf-active__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.wu-pf-active__head > * + * { margin-left: 12px; }
@supports (gap: 12px) {
  .wu-pf-active__head > * + * { margin-left: 0; }
}

.wu-pf-active__title { font-weight: 700; }

/* Reset Button: schwarz */
.wu-pf .wu-pf-active__reset{
  border: 1px solid #111;
  background: #111;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf .wu-pf-active__reset:hover{
  background: #000;
  border-color: #000;
}
.wu-pf .wu-pf-active__reset:active{ transform: translateY(1px); }

.wu-pf-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wu-pf-active__chips > * { margin: 0 8px 8px 0; }
@supports (gap: 8px) {
  .wu-pf-active__chips > * { margin: 0; }
}

/* Chips */
.wu-pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dcdcdc;
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1.1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf-chip:hover { border-color: #111; }
.wu-pf-chip:active { transform: translateY(1px); }

.wu-pf-chip__label { font-weight: 700; }
.wu-pf-chip__value { font-weight: 600; opacity: 0.9; }
.wu-pf-chip__x { margin-left: 6px; font-weight: 900; opacity: 0.7; }

/* -------------------------
   Orange Empty Hint (UX)
------------------------- */

.wu-pf-emptyhint { margin-top: 10px; }

.wu-pf-emptyhint__box {
  border: 1px solid #f2b36a;
  background: #fff3e5;
  border-radius: 12px;
  padding: 12px;
}

.wu-pf-emptyhint__title {
  font-weight: 800;
  margin-bottom: 4px;
}

.wu-pf-emptyhint__sub {
  opacity: 0.9;
  margin-bottom: 10px;
}

.wu-pf-emptyhint__reset {
  border: 1px solid #f2b36a;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf-emptyhint__reset:hover { border-color: #111; }
.wu-pf-emptyhint__reset:active { transform: translateY(1px); }

/* -------------------------
   Categories (Vertical)
------------------------- */

.wu-pf .wu-pf-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wu-pf .wu-pf-cats > * { margin: 0 8px 8px 0; }
@supports (gap: 8px) {
  .wu-pf .wu-pf-cats > * { margin: 0; }
}

.wu-pf-cats--vertical {
  display: grid;
  gap: 10px;
}
.wu-pf-cats--vertical > * + * { margin-top: 10px; }
@supports (gap: 10px) {
  .wu-pf-cats--vertical > * + * { margin-top: 0; }
}

.wu-pf-cat-item {
  display: grid;
  gap: 8px;
}
.wu-pf-cat-item > * + * { margin-top: 8px; }
@supports (gap: 8px) {
  .wu-pf-cat-item > * + * { margin-top: 0; }
}

.wu-pf .wu-pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  width: 100%;
  justify-content: flex-start;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf .wu-pf-pill:active { transform: translateY(1px); }

.wu-pf .wu-pf-pill.is-active {
  border-color: #111;
  background: #fafafa;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.wu-pf .wu-pf-pill-text { line-height: 1.1; }

.wu-pf .wu-pf-cat-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid #eee;
  flex: 0 0 28px;
}
.wu-pf .wu-pf-cat-img--empty { background: #f3f3f3; }

.wu-pf-subcats { margin-left: 42px; }

.wu-pf-subcats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wu-pf-subcats-row > * { margin: 0 8px 8px 0; }
@supports (gap: 8px) {
  .wu-pf-subcats-row > * { margin: 0; }
}

/* Subcats: grün (#95c11f) */
.wu-pf .wu-pf-subcat{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #95c11f;
  background: #95c11f;
  color: #fff;
  cursor: pointer;
  line-height: 1.1;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.wu-pf .wu-pf-subcat:hover{
  background: #7faa1a;
  border-color: #7faa1a;
}
.wu-pf .wu-pf-subcat:active{ transform: translateY(1px); }
.wu-pf .wu-pf-subcat.is-active{
  background: #95c11f;
  border-color: #95c11f;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(149,193,31,0.22);
}
.wu-pf .wu-pf-subcat:focus-visible{
  outline: 2px solid #95c11f;
  outline-offset: 2px;
}

/* -------------------------
   Attributes (Size/Color/…)
------------------------- */

.wu-pf-attr-block {
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.wu-pf-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wu-pf-attrs > * { margin: 0 8px 8px 0; }
@supports (gap: 8px) {
  .wu-pf-attrs > * { margin: 0; }
}

.wu-pf-attr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf-attr:hover { border-color: #111; }
.wu-pf-attr:active { transform: translateY(1px); }

.wu-pf-attr.is-active {
  border-color: #111;
  background: #fafafa;
}

.wu-pf-attr.is-disabled,
.wu-pf-attr:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wu-pf-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  flex: 0 0 14px;
}

/* -------------------------
   Actions / Buttons
------------------------- */

.wu-pf .wu-pf-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.wu-pf .wu-pf-actions > * + * { margin-left: 10px; }
@supports (gap: 10px) {
  .wu-pf .wu-pf-actions > * + * { margin-left: 0; }
}

.wu-pf .wu-pf-btn {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf .wu-pf-btn:hover { border-color: #111; }
.wu-pf .wu-pf-btn:active { transform: translateY(1px); }

/* -------------------------
   Results / Loading / No results
------------------------- */

.wu-pf .wu-pf-results { margin-top: 14px; }
.wu-pf .wu-pf-loading { padding: 10px; }
.wu-pf.is-loading { opacity: 0.85; }

.wu-pf .wu-pf-products ul.products { margin: 0; }

.wu-pf .wu-pf-no-results {
  padding: 14px;
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: #fff;
}

/* -------------------------
   Pagination (clean)
------------------------- */

.wu-pf-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 14px 0 0;
}
.wu-pf-pager > * + * { margin-left: 8px; }
@supports (gap: 8px) {
  .wu-pf-pager > * + * { margin-left: 0; }
}

.wu-pf-page {
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.wu-pf-page:hover { border-color: #111; }
.wu-pf-page:active { transform: translateY(1px); }

.wu-pf-page.is-active {
  border-color: #111;
  background: #111;
  color: #fff;
}

/* -------------------------
   Search suggest
------------------------- */

.wu-pf-searchwrap { position: relative; }

.wu-pf-suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.wu-pf-suggest__item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.wu-pf-suggest__item:hover { background: #fafafa; }
.wu-pf-suggest__item:last-child { border-bottom: 0; }

/* Small screens: price stack */
@media (max-width: 480px) {
  .wu-pf .wu-pf-price { grid-template-columns: 1fr; }
}

/* ======================================================================
   Mobile: Dropdown/Accordion Layout (fix: nichts läuft raus, alles klickbar)
   -> setzt voraus: .wu-pf-mobile-toggle + .wu-pf-mobile-panel im Markup
====================================================================== */

@media (max-width: 720px){

  /* Container darf NICHT rauslaufen */
  .wu-pf{
    overflow: hidden;
    padding: 12px;
    border-radius: 14px;
  }

  .wu-pf .wu-pf-label{
    font-size: 14px;
    margin-bottom: 8px;
  }

  .wu-pf .wu-pf-input{
    padding: 12px 12px;
    border-radius: 12px;
    font-size: 16px; /* iOS Zoom verhindern */
  }

  /* Toggle Button oben */
  .wu-pf .wu-pf-mobile-toggle{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: #111;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .wu-pf .wu-pf-mobile-toggle__icon{
    font-size: 16px;
    line-height: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform .15s ease;
    transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease;
  }
  .wu-pf .wu-pf-mobile-toggle[aria-expanded="true"] .wu-pf-mobile-toggle__icon{
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  /* Panel (Dropdown Inhalt) */
  .wu-pf .wu-pf-mobile-panel{
    margin-top: 12px;
    padding-top: 2px;
  }

  /* Active Bar sticky kann Klicks blocken -> auf Mobile NICHT sticky */
  .wu-pf-active{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Touch Targets */
  .wu-pf button,
  .wu-pf .wu-pf-btn,
  .wu-pf .wu-pf-pill,
  .wu-pf .wu-pf-attr,
  .wu-pf .wu-pf-subcat,
  .wu-pf .wu-pf-chip{
    min-height: 44px;
  }

  /* Auf Mobile: KEIN horizontales Scroll in Filterreihen -> alles umbrechen */
  .wu-pf .wu-pf-cats,
  .wu-pf .wu-pf-subcats-row,
  .wu-pf .wu-pf-attrs,
  .wu-pf .wu-pf-active__chips{
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    flex-wrap: wrap !important;
  }

  /* Kategorien wieder vertikal & volle Breite */
  .wu-pf .wu-pf-cats--vertical{
    display: grid;
    gap: 10px;
  }
  .wu-pf .wu-pf-pill{
    width: 100%;
    white-space: normal;
  }

  /* Subcats: nicht eingerückt */
  .wu-pf-subcats{ margin-left: 0; margin-top: 8px; }

  /* Suggest Dropdown: innerhalb bleiben */
  .wu-pf-suggest{
    max-height: 220px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Pagination größer */
  .wu-pf-page{
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
  }
}

/* Extra-small Phones */
@media (max-width: 420px){
  .wu-pf{ padding: 10px; }
  .wu-pf .wu-pf-pill-text{ font-size: 14px; }
}

/* Desktop: kein Toggle anzeigen, Panel immer sichtbar */
.wu-pf .wu-pf-mobile-toggle { display: none; }
.wu-pf .wu-pf-mobile-panel { display: block; }
.wu-pf .wu-pf-mobile-panel[hidden] { display: block !important; } /* Desktop ignoriert hidden */

/* Mobile: Toggle sichtbar, Panel kann hidden sein */
@media (max-width: 720px){
  .wu-pf .wu-pf-mobile-toggle { display: flex; }
  .wu-pf .wu-pf-mobile-panel[hidden] { display: none !important; }
}