/* Product library search + Filters panel. Designed by Claude, 2026-10-22. Site tokens from monochrome.css:
   --bg --ink --muted --line --button --button-ink. Selected chips are black pills, same as the list tabs. */
.lfp{--lfp-soft:color-mix(in srgb,var(--ink) 5%,transparent);--lfp-card:var(--bg);position:relative;margin:24px 0 20px}
:root[data-theme=dark] .lfp{--lfp-card:#1c1c1e}

/* Bar */
.lfp-bar{display:flex;gap:12px;align-items:center}
.lfp-search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 18px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;background:var(--bg);transition:border-color .15s ease}
.lfp-search:focus-within{border-color:var(--ink)}
.lfp-search>svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.lfp .lfp-search input{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.lfp-search input::placeholder{color:var(--muted)}
.lfp-search input::-webkit-search-cancel-button{display:none}
.lfp-clear{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--lfp-soft);color:var(--ink);cursor:pointer}
.lfp-clear[hidden]{display:none}
.lfp-clear svg,.lfp-x svg,.lfp-tag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.lfp-open{display:inline-flex;align-items:center;gap:8px;flex:none;height:52px;padding:0 20px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
.lfp-open:hover,.lfp-open[aria-expanded=true]{border-color:var(--ink)}
.lfp-open>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lfp-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--button);color:var(--button-ink);font-size:12px;font-weight:700}
.lfp-count[hidden]{display:none}

/* Active tags */
.lfp-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.lfp-active[hidden]{display:none}
.lfp-tag{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 14px;border:0;border-radius:999px;background:var(--lfp-soft);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.lfp-tag:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.lfp-reset{height:34px;padding:0 6px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}

/* Panel (desktop: dropdown under the button, right-aligned) */
.lfp-panel{position:absolute;z-index:40;top:64px;right:0;width:460px;max-width:100%;max-height:min(640px,calc(100svh - 160px));display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--line);border-radius:24px;background:var(--lfp-card);color:var(--ink);box-shadow:0 18px 48px rgba(0,0,0,.12);overflow:hidden}
.lfp-panel[hidden],.lfp-scrim[hidden]{display:none}
.lfp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 6px 24px}
.lfp-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.lfp-x{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--lfp-soft);color:var(--ink);cursor:pointer}
.lfp-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 24px 8px}
.lfp-group{margin:0;padding:18px 0;border:0;border-top:1px solid var(--line)}
.lfp-group:first-child{border-top:0}
.lfp-group legend{float:left;width:100%;margin:0 0 12px;padding:0;font-size:14px;font-weight:600}
.lfp-hint{margin-left:6px;color:var(--muted);font-weight:400}
.lfp-chips{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.lfp-chip{position:relative;display:inline-flex}
.lfp-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lfp-chip span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;box-sizing:border-box;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.lfp-chip span img{width:16px;height:16px}
.lfp-chip small{color:var(--muted);font-size:12px;font-weight:500}
.lfp-chip:hover span{box-shadow:inset 0 0 0 1px var(--ink)}
.lfp-chip input:checked+span{background:var(--button);color:var(--button-ink);box-shadow:none}
.lfp-chip input:checked+span small{color:inherit;opacity:.7}
.lfp-chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
:root[data-theme=dark] .lfp-chip input:checked+span img{filter:invert(1)}
.lfp-more{margin-top:12px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}

.lfp-switches{display:grid;gap:16px}
.lfp-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.lfp-switch-row strong{display:block;font-size:14px;font-weight:600}
.lfp-switch-row small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
.lfp-switch{appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 16%,transparent);cursor:pointer;transition:background-color .15s ease}
.lfp-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s ease}
.lfp-switch:checked{background:var(--button)}
.lfp-switch:checked::after{transform:translateX(18px);background:var(--button-ink)}
.lfp-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.lfp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 18px 24px;border-top:1px solid var(--line)}
.lfp-show{height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--button);color:var(--button-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.lfp-show:hover,.lfp-open:active{opacity:.88}
.lfp-x:focus-visible,.lfp-clear:focus-visible,.lfp-open:focus-visible,.lfp-tag:focus-visible,.lfp-reset:focus-visible,.lfp-more:focus-visible,.lfp-show:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Phone: bottom sheet */
@media (max-width:640px){
 .lfp{margin:16px 0}
 .lfp-bar{gap:8px}
 .lfp-search,.lfp-open{height:48px}
 .lfp-open{padding:0 14px}
 .lfp-open>span:not(.lfp-count){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .lfp-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.36)}
 .lfp-panel{position:fixed;z-index:91;inset:auto 0 0 0;top:auto;width:100%;max-height:86svh;border:0;border-radius:24px 24px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.18);animation:lfp-up .22s ease-out}
 .lfp-head{padding:16px 16px 4px 20px}
 .lfp-head::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
 .lfp-body{padding:4px 20px 8px}
 .lfp-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom)) 20px}
 .lfp-show{flex:1;max-width:240px}
 .lfp-chip span{height:40px}
}
@keyframes lfp-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.lfp-panel{animation:none}.lfp *{transition:none!important}}

/* The workbench shell styles every "#main button" and "#main input", and plain "label" gets a margin.
   These lines win over them so the panel looks the same on the public pages and in the workbench. */
.lfp label{margin:0}
#main .lfp .lfp-search input{height:100%;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;outline:0}
/* workbench-shell.css paints inputs with ".shared-workbench #main input:not(..):not(..)" (1,3,1). A white input box
   would cover the pill's rounded right end, so this outranks it, and the pill clips anything inside it. */
.shared-workbench #main .lfp .lfp-search input[type=search]{background:transparent}
.lfp-search{overflow:hidden}
#main .lfp .lfp-open{background:var(--bg)}
#main .lfp .lfp-clear,#main .lfp .lfp-x,#main .lfp .lfp-tag{background:var(--lfp-soft)}
#main .lfp .lfp-clear,#main .lfp .lfp-x{padding:0;margin:0}
#main .lfp .lfp-reset,#main .lfp .lfp-more{background:none}
#main .lfp .lfp-show{background:var(--button);color:var(--button-ink)}
#main .lfp .lfp-switch{width:44px;height:26px;min-width:44px;padding:0;border:0;border-radius:999px;box-shadow:none;background:color-mix(in srgb,var(--ink) 16%,transparent)}
#main .lfp .lfp-switch:checked{background:var(--button)}