/* Filter bar on listing pages (categories, brands, /produkte/); markup from seo-generate.js, logic in /js/listing-filters.js */
/* /produkte/ has no padded .hero around the bar, so it brings its own side padding, in line with the product grid */
.listing-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;box-sizing:border-box;max-width:1100px;margin:16px auto;padding:0 24px}
.hero .listing-filters{padding:0}
/* Without JS only the sort works */
.listing-filters:not(.lf-ready)>label:not(.sort-control),.listing-filters:not(.lf-ready)>.lf-field{display:none}
.listing-filters .sort-control{margin-left:auto}
.listing-filters .sort-control span{font:inherit;font-size:13px;letter-spacing:normal;text-transform:none;color:var(--text-on-dark-secondary,#94969d)}
.listing-filters .sort-control select{min-width:170px;margin:0}
.listing-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-on-dark-secondary,#94969d)}
.listing-filters select,.listing-filters input{height:40px;background:var(--bg-dark-subtle,#18181a);color:var(--text-on-dark,#fff);border:1px solid var(--border-on-dark,#2a2a2e);border-radius:0;padding:0 12px;font:inherit;font-size:14px}
.listing-filters select{min-width:150px;max-width:200px}
/* Own chevron: the browser's default one sits right against the border */
.listing-filters select,.listing-filters .sort-control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 36px 0 12px;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394969d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.listing-filters .lf-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-on-dark-secondary,#94969d)}
.listing-filters .lf-radios{display:flex;align-items:center;gap:16px;height:40px}
.listing-filters .lf-radios label{flex:none;flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text-on-dark,#fff);cursor:pointer;white-space:nowrap}
.listing-filters .lf-radios input{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;padding:0;background:transparent;border:1px solid var(--grey-500,#71717a);border-radius:0;box-sizing:border-box;cursor:pointer}
.listing-filters .lf-radios input:hover{border-color:var(--text-on-dark,#fff)}
.listing-filters .lf-radios input:checked{border-color:var(--text-on-dark,#fff);padding:3px;background:var(--text-on-dark,#fff) content-box}
.listing-filters .lf-radios input:focus-visible{outline:2px solid var(--border-focus,#fff);outline-offset:2px}
.listing-filters .lf-size{min-width:130px}
.listing-filters input{width:84px;-moz-appearance:textfield}
.listing-filters input::-webkit-outer-spin-button,.listing-filters input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.listing-filters .lf-price{display:flex;gap:8px}
.listing-filters .lf-reset{height:40px;padding:0 14px;background:transparent;color:var(--text-on-dark,#fff);border:1px solid var(--border-on-dark,#2a2a2e);border-radius:0;font:inherit;font-size:14px;cursor:pointer}
.listing-filters .lf-reset:hover{border-color:var(--grey-500,#71717a)}
.lf-empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--text-on-dark-secondary,#94969d)}
.lf-more-wrap{display:flex;justify-content:center;padding:0 24px 64px;margin-top:-48px}
.lf-more{height:44px;padding:0 24px;background:var(--white,#fff);color:#000;border:0;border-radius:0;font:inherit;font-weight:600;cursor:pointer}
/* Fixed widths on desktop so the whole row, sort and reset included, stays on one line */
@media (min-width:761px){.listing-filters .lf-radios{gap:12px}.listing-filters select.lf-brand{min-width:0;width:160px}.listing-filters select.lf-size{min-width:0;width:130px}.listing-filters .sort-control select{min-width:0;width:165px}.listing-filters .lf-price input{width:76px}}
@media (max-width:480px){.listing-filters{padding:0 12px}.hero .listing-filters{padding:0}}
@media (max-width:760px){.listing-filters{gap:10px}.listing-filters .sort-control{margin-left:0;flex:1 1 100%}.listing-filters .sort-control select{width:100%;min-width:0}.listing-filters label{flex:1 1 45%}.listing-filters .lf-field{flex:1 1 100%}.listing-filters select{min-width:0;max-width:none;width:100%}.listing-filters .lf-price-wrap{flex:1 1 100%;min-width:0}.listing-filters .lf-price input{width:auto;flex:1 1 0;min-width:0}}