/* ss-filter: snabbfilter och aktiva filter ovanför produktlistan. Askås egen chipsrad (#selected_filters) ersätts
   visuellt men finns kvar i DOM:en eftersom air.filter.js skriver till den. */
html[data-ss-filter=ready] #selected_filters{display:none!important}
.ss-filterbar{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:0 1em;margin:0 0 12px;display:flex;flex-direction:column;gap:10px;color:var(--base-color1,#141414)}
.ss-filterbar *,.ss-filterbar *::before,.ss-filterbar *::after{box-sizing:border-box}
.ss-filter-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.ss-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0}
.ss-filter-group-title{font-size:14px;font-weight:600;white-space:nowrap}
/* Samma utseende som Askås "Visa filter"/"Sortera" (artgrp-min.css .filter-showmore,.sort-showmore):
   beige var(--base-background4), ingen kant, radie 3rem, BrownLLWeb-Bold, hover-ring #e3d8cc. */
.ss-filterbar button,.ss-filterbar select,.ss-filter-number{font-family:"BrownLLWeb-Bold",sans-serif;font-weight:400;font-size:1em;line-height:1.2;min-height:44px;border-radius:3rem;border:0;background:var(--base-background4,#FBF0E4);color:var(--base-color1,#141414);padding:0.5rem 1rem;margin:0;cursor:pointer;white-space:nowrap;width:auto;height:auto;text-transform:none;letter-spacing:normal;box-shadow:none}
.ss-filterbar button:hover,.ss-filterbar select:hover,.ss-filter-number:hover{box-shadow:0 0 0 1px #e3d8cc}
.ss-filterbar button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Askås egna knappar, flyttade in i raden. */
.ss-filter-quick .ss-filter-native{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:44px;margin:0;font-family:"BrownLLWeb-Bold",sans-serif!important;cursor:pointer;white-space:nowrap;text-align:left}
.ss-filter-quick .sort-showmore{order:99}
.ss-filter-quick .ss-filter-native svg.icon{position:static!important;margin:0}
.ss-filter-quick .ss-filter-native:focus-visible{outline:3px solid var(--theme-color1,#FF005C);outline-offset:2px}
.ss-filterbar button:focus-visible,.ss-filterbar select:focus-visible,.ss-filter-number:focus-visible,.ss-filter-notice:focus-visible{outline:3px solid var(--theme-color1,#FF005C);outline-offset:2px}
/* Valt snabbfilter: turkos yta med vit text (Påhittig Turkos, alltid vit text), även vid hover och fokus.
   Ovalt filter vid hover: turkos ram på den vanliga beige ytan (i stället för temats rosa hover). Efter klick på ett
   ovalt filter visas ingen rosa fokusyta; tangentbordsfokus syns som vanligt. */
.ss-filterbar .ss-filter-chip:not([aria-pressed=true]):hover,.ss-filterbar .ss-filter-chip:not([aria-pressed=true]):focus:not(:focus-visible){background:var(--base-background4,#FBF0E4)!important;color:var(--base-color1,#141414)!important}
.ss-filterbar .ss-filter-chip:not([aria-pressed=true]):hover{box-shadow:inset 0 0 0 2px #00CCA5}
.ss-filterbar .ss-filter-chip[aria-pressed=true],.ss-filterbar .ss-filter-chip[aria-pressed=true]:hover,.ss-filterbar .ss-filter-chip[aria-pressed=true]:focus{background:#00CCA5!important;color:#fff!important;box-shadow:none}
.ss-filterbar .ss-filter-chip[aria-pressed=true] *{color:inherit!important}
.ss-filter-count{margin-left:5px;opacity:.75;font-size:13px}
.ss-filter-all{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.ss-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--theme-color1,#FF005C);color:#fff;font-size:13px}
.ss-filter-range .ss-filter-number{width:6.5em;padding:0 12px;cursor:text;-moz-appearance:textfield;appearance:textfield}
.ss-filter-range .ss-filter-number::-webkit-outer-spin-button,.ss-filter-range .ss-filter-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ss-filter-unit,.ss-filter-dash{font-size:14px}
.ss-filter-apply{font-weight:600}
.ss-filter-select select{padding:0 12px;max-width:14em}
.ss-filter-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ss-filter-active[hidden]{display:none}
.ss-filter-active-chip{display:inline-flex;align-items:center;gap:8px}
.ss-filter-x{font-size:20px;line-height:1}
/* Rensa alla: en tydlig textlänk, ingen knappyta som smälter in i bakgrunden. Hover/fokus blir Geni Rosa
   (temats knapp-hover gav vit text på genomskinlig bakgrund, nästan osynlig). */
.ss-filterbar .ss-filter-clear{background:none!important;border:0!important;box-shadow:none!important;color:var(--base-color1,#141414)!important;text-decoration:underline;text-underline-offset:3px;padding:0 8px!important}
.ss-filterbar .ss-filter-clear:hover,.ss-filterbar .ss-filter-clear:focus-visible{background:none!important;color:#DD0054!important}
.ss-filter-status{margin:0;font-size:14px;min-height:1.2em}
.ss-filterbar[aria-busy=true] .ss-filter-status{opacity:.7}
.ss-filter-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-radius:8px;background:var(--base-background3,#FCF6F0);border:1px solid var(--border-color1,#e5dcd2)}
.ss-filter-notice[hidden]{display:none}
.ss-filter-notice p{margin:0;font-weight:600}
.ss-filter-notice[data-state=error]{border-color:var(--theme-color1,#FF005C)}
/* Desktop: Alla filter + snabbfilter till vänster, Sortera högerställd. */
.ss-filter-sort{position:relative;margin-left:auto;flex:0 0 auto;display:flex}
.ss-label-narrow{display:none}
/* Tom knappkolumn (knapparna är flyttade): underkategorierna vänsterställs som före flytten. Panelerna i
   kolumnen (.filter) är fasta och påverkas inte av bredden. */
html[data-ss-filter=ready] .sortfilterbuttons.ss-filter-emptied{flex:0 0 0!important;max-width:0!important;min-width:0!important;padding:0!important;margin:0!important;overflow:visible}
html[data-ss-filter=ready] .ss-filter-emptied~.ArtgrpMenu{flex-basis:100%!important;max-width:100%!important}
/* Samma vänsterkant för underkategorierna som för snabbfilterraden och produktkorten (live 1280 px: kortens innehåll
   105 px, snabbfilterraden 106 px, underkategorierna 124 px p.g.a. .snapping{padding-left:1rem}). */
html[data-ss-filter=ready] .ArtgrpMenu .snapping{padding-left:0}
/* Askås sorteringslista är en rullgardin från 46.91rem (artgrp-min.css). I snabbfilterraden högerjusteras den mot
   Sortera-knappens högerkant och växer åt vänster; sidopanelsläget under 46.91rem lämnas orört. */
@media(min-width:46.91rem){.ss-filter-sort .Sortera.canvas-right-module{left:auto!important;right:0!important;width:max-content!important;max-width:calc(100vw - 2rem)}}
/* Mobil och surfplatta (<=64rem), enligt praxis för mobila produktlistor: en rad med två lika stora, alltid
   synliga knappar "Filter" och "Sortera". Snabbfiltren nås via filterpanelen; aktiva filter visas under raden. */
@media(max-width:64rem){
  .ss-filter-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ss-filter-quick .ss-filter-group{display:none}
  .ss-filter-quick .ss-filter-native{width:100%;max-width:none!important;justify-content:center;padding:0.5rem 1rem!important}
  .ss-filter-sort{margin-left:0;width:100%}
  .ss-label-wide{display:none}
  .ss-label-narrow{display:inline}
  .ss-filter-active{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 1em 4px;margin:0 -1em}
  .ss-filter-active::-webkit-scrollbar{display:none}
  .ss-filter-active>*{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.ss-filter-quick,.ss-filter-active{scroll-behavior:auto}}