/* Shop filter bar — minimal editorial style */
/* No horizontal padding. The parent .shop already carries the page gutter
   (64px at 1440, 20px at 390) and .shopgrid sits flush inside it, so the
   gutter here was a SECOND one: the controls were inset to 128..1312 against
   a grid running 64..1376, which is what left them looking stranded once
   Price was gone. Bottom padding is the gap down to the grid and stays. */
.shopfilter{max-width:1440px;margin:0 auto;padding:0 0 clamp(20px,3vh,28px);display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.shopfilter__cats{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.6vw,36px)}
.shopfilter__cats button{background:none;border:none;padding:0;cursor:pointer;line-height:1;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);transition:color .3s}
.shopfilter__cats button:hover{color:var(--text-strong)}
.shopfilter__cats button[aria-pressed="true"]{color:var(--text-strong);font-weight:600}
/* Colour / Sort — one row, no wrapping, aligned on the same line.
   The gap is the same clamp the category row uses, so the two controls sit on
   the same rhythm as the categories opposite them; .shopfilter is
   space-between, so dropping Price pulls the pair right rather than leaving a
   hole, and the last control's right edge stays on the grid's gutter. */
.shopfilter__side{display:flex;flex-wrap:nowrap;gap:clamp(20px,2.6vw,36px);align-items:center}
.sf-dd{position:relative;display:flex;align-items:center}
.sf-dd__btn{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);transition:color .3s}
.sf-dd__btn:hover,.sf-dd.open .sf-dd__btn{color:var(--accent)}
.sf-dd__btn svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .3s var(--ease-out)}
.sf-dd.open .sf-dd__btn svg{transform:rotate(180deg)}
.sf-dd__panel{position:absolute;top:calc(100% + 16px);right:0;z-index:40;min-width:220px;background:var(--paper);border:1px solid var(--line);border-radius:0;box-shadow:0 20px 50px -20px rgba(28,26,24,.3);padding:20px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s}
.sf-dd.open .sf-dd__panel{opacity:1;visibility:visible;transform:none}
.sf-dd__opt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-family:var(--font-sans);font-size:13px;color:var(--text-body)}
.sf-dd__opt input{accent-color:var(--ocean-900);width:15px;height:15px;cursor:pointer}
.sf-dd__swatch{width:16px;height:16px;border-radius:0;border:1px solid rgba(0,0,0,.1);flex:none}
.sf-dd__sort{display:flex;flex-direction:column;gap:2px}
.sf-dd__sort button{background:none;border:none;text-align:left;padding:7px 0;cursor:pointer;font-family:var(--font-sans);font-size:13px;color:var(--text-body);transition:color .2s}
.sf-dd__sort button:hover{color:var(--accent)}
.sf-dd__sort button[aria-pressed="true"]{color:var(--text-strong);font-weight:600}
/* The .sf-range* block (dual range slider: track, fill, value labels and both
   -webkit/-moz thumb styles) was deleted with the Price control. */
.pc.sf-hide{display:none}
@media(max-width:560px){.shopfilter{gap:14px 20px}.shopfilter__side{flex-wrap:wrap;gap:16px 22px}}