/* ZooFly KC catalog filters. Extends shop.css (same tokens, chips, buttons); loaded on /shop only.
   Phones and tablets: "Filter" opens a bottom sheet (#filters, shown by :target with no JS, by
   .is-open once filters.js runs). From 1000px the same form is a sticky left rail beside the grid. */

.js-only { display: none; }
.js .js-only { display: inline; }
.js .nojs-only { display: none; }

/* ---------- toolbar ---------- */
.catalog-layout { margin-top: var(--s3); }
.catalog-main { min-width: 0; }
.catalog-main > .toolbar { margin-top: 0; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 0;
  font-size: var(--t-ui); font-weight: 600; border-radius: var(--r);
  transition: background-color var(--t-fast);
}
.filter-btn svg { width: 18px; height: 18px; }
.filter-btn b, .facet summary b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--white);
  font-size: 11px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.catalog-main .toolbar .sort { margin-left: auto; }

/* ---------- the sheet (below 1000px) ---------- */
.filter-sheet { position: fixed; inset: 0; z-index: 42; display: none; }
.filter-sheet:target, .filter-sheet.is-open { display: block; }
html.filters-open { overflow: hidden; }
.sheet-scrim {
  position: absolute; inset: 0; background: var(--scrim); cursor: default;
  animation: filters-fade 220ms var(--ease-out);
}
.filter-form {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px;
  max-height: min(88dvh, 760px); display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 -16px 32px -16px rgba(17, 17, 17, .18);
  animation: filters-up 250ms var(--ease-out);
}
@keyframes filters-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes filters-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: var(--hdr); padding: 0 var(--s2) 0 var(--gut); border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: var(--t-lg); font-weight: 800; font-stretch: 90%; letter-spacing: -.01em; line-height: 1.15; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut); }
.sheet-foot {
  flex: none; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--white);
}
.sheet-foot .btn { flex: 1; min-width: 0; }
.sheet-foot .btn:disabled { background: var(--white); color: var(--meta); border-color: var(--line-strong); }
.sheet-foot .text-btn { min-height: 44px; padding: 0 var(--s2); }

/* ---------- sections ---------- */
.facet { border-bottom: 1px solid var(--line); }
.facet:last-child { border-bottom: 0; }
.facet summary {
  list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 52px; cursor: pointer;
  border-radius: var(--r);
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary h3 { flex: 1; font-size: var(--t-ui); font-weight: 700; }
.facet summary svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
.facet[open] summary svg { transform: rotate(180deg); }
.facet-body { padding: 0 0 var(--s4); }
.facet input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

/* department + price: checkbox rows */
.opt { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; }
.box {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--white); color: var(--white);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.box svg { width: 12px; height: 12px; opacity: 0; }
.opt input:checked + .box { background: var(--ink); border-color: var(--ink); }
.opt input:checked + .box svg { opacity: 1; }
.opt-label { flex: 1; min-width: 0; font-size: var(--t-base); font-weight: 500; }
.opt input:checked ~ .opt-label { font-weight: 700; }
.opt-count { font-size: var(--t-sm); color: var(--meta); font-variant-numeric: tabular-nums; }

/* size: a grid of buttons, in size order */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s2); }
.pick { position: relative; display: block; cursor: pointer; }
.pick > span {
  display: grid; place-items: center; min-height: 44px; padding: 0 6px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white);
  font-size: var(--t-ui); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform 140ms var(--ease-out);
}
.pick:active > span { transform: scale(.96); }
.pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* style + fit: pills (same as the chips) */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { position: relative; display: block; cursor: pointer; }
.pill > span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 18px; background: var(--white);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform 140ms var(--ease-out);
}
.pill:active > span { transform: scale(.96); }
.pill i { font-style: normal; font-weight: 500; color: var(--meta); font-variant-numeric: tabular-nums; }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill input:checked + span i { color: var(--on-ink-meta); }

/* nothing would match: dim, and the input is disabled so it cannot be added */
.is-zero { cursor: default; }
.is-zero .opt-label, .is-zero .opt-count { color: var(--meta); font-weight: 400; }
.is-zero.pick > span, .is-zero.pill > span { background: var(--wash); border-color: var(--line); color: var(--meta); }
.is-zero .box { background: var(--wash); border-color: var(--line); }

/* keyboard focus lands on the visible control */
.opt input:focus-visible + .box,
.pick input:focus-visible + span,
.pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (hover: hover) {
  .opt:hover .box { border-color: var(--ink); }
  .pick:hover > span, .pill:hover > span { border-color: var(--ink); }
  .is-zero:hover .box, .is-zero.pick:hover > span, .is-zero.pill:hover > span { border-color: var(--line); }
  .facet summary:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}

/* ---------- desktop: a sticky rail beside the grid ---------- */
@media (min-width: 1000px) {
  .has-rail { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: var(--s7); align-items: start; }
  .has-rail .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-btn { display: none; }
  .filter-sheet {
    position: sticky; top: calc(var(--hdr-total, var(--hdr)) + var(--s4)); z-index: auto; display: block;
    max-height: calc(100dvh - var(--hdr-total, var(--hdr)) - var(--s5)); display: flex; flex-direction: column;
  }
  .sheet-scrim, .sheet-head { display: none; }
  .filter-form {
    position: static; max-width: none; max-height: none; min-height: 0; flex: 1 1 auto; border-radius: 0;
    box-shadow: none; animation: none; border-top: 1px solid var(--line);
  }
  .sheet-body { padding: 0; scrollbar-width: thin; }
  .sheet-foot { padding: var(--s3) 0; border-top: 1px solid var(--line); }
  .js .sheet-foot .btn { display: none; }
  .opt, .pick > span, .pill > span { min-height: 36px; }
  .opt { min-height: 36px; }
  .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opt-label { font-size: var(--t-ui); }
  html.filters-open { overflow: visible; }
}