/* ==========================================================================
   GEMHUB & CO. — collection filters (.gh-filter*)
   Mirrors gemhub.in: 240px sidebar with collapsible groups, checkbox lists
   with counts, dual price slider, active chips + Clear all, quick-filter chip
   nav, mobile "Sort By | Filter" bar with bottom-sheet drawers.
   Depends on theme.css tokens: --ink --body --muted --line --cream --sand
   --gold --gold-d --teal --serif --sans --ease
   ========================================================================== */

/* ---------- layout hook (the layout agent may override) ---------- */
.gh-catalogue-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; align-items:start}
@media (max-width:899px){ .gh-catalogue-layout{grid-template-columns:minmax(0,1fr); gap:0} }

/* ---------- sidebar panel ---------- */
.gh-filter{
  --gh-filter-w:240px;
  font-family:var(--sans); color:var(--ink); background:#fff;
}
@media (min-width:900px){
  .gh-filter{position:sticky; top:96px; max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain; padding-right:10px; scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.22) transparent}
  .gh-filter::-webkit-scrollbar{width:4px}
  .gh-filter::-webkit-scrollbar-thumb{background:rgba(201,168,76,.22); border-radius:3px}
  .gh-filter:hover::-webkit-scrollbar-thumb{background:rgba(201,168,76,.5)}
  .gh-filter__close,.gh-filter__drawer-foot,.gh-filter__apply-count{display:none}
}
.gh-filter__drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 14px; border-bottom:1px solid var(--line)}
.gh-filter__title{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin:0}
.gh-filter__form{display:block}

/* group */
.gh-filter__group{border-bottom:1px solid var(--line); padding:4px 0 12px; margin:0 0 4px}
.gh-filter__group:last-of-type{border-bottom:0}
.gh-filter__head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:0; padding:12px 0 8px; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}
.gh-filter__head svg{width:12px; height:12px; flex:none; color:var(--muted); transition:transform .22s var(--ease)}
.gh-filter__head[aria-expanded="false"] svg{transform:rotate(-90deg)}
.gh-filter__head-label{display:inline-flex; align-items:center; gap:8px}
.gh-filter__head-badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--teal); color:#fff; font-size:10px; font-weight:600; letter-spacing:0}
.gh-filter__body{padding:2px 0 4px}
.gh-filter__head[aria-expanded="false"] + .gh-filter__body{display:none}

/* checkbox list */
.gh-filter__list{list-style:none; margin:0; padding:0}
.gh-filter__list--scroll{max-height:236px; overflow-y:auto; padding-right:6px; scrollbar-width:thin}
.gh-filter__item{margin:0}
.gh-filter__item.is-disabled{opacity:.42}
.gh-filter__check{position:absolute; opacity:0; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0)}
.gh-filter__label{
  display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer;
  font-size:14px; line-height:1.3; color:var(--body); transition:color .18s var(--ease);
}
.gh-filter__label::before{
  content:""; flex:none; width:17px; height:17px; border:1.5px solid #C9C2B6; border-radius:3px; background:#fff;
  transition:all .18s var(--ease); box-sizing:border-box;
}
.gh-filter__label:hover{color:var(--ink)}
.gh-filter__label:hover::before{border-color:var(--gold)}
.gh-filter__check:checked + .gh-filter__label{color:var(--ink); font-weight:500}
.gh-filter__check:checked + .gh-filter__label::before{
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--teal);
}
.gh-filter__check:focus-visible + .gh-filter__label::before{box-shadow:0 0 0 3px rgba(13,59,62,.2)}
.gh-filter__check:disabled + .gh-filter__label{cursor:default}
.gh-filter__label-text{flex:1 1 auto}
.gh-filter__count{font-size:11.5px; color:var(--muted); letter-spacing:.02em; font-variant-numeric:tabular-nums}

/* price */
.gh-filter__price{padding:6px 0 4px}
.gh-filter__price-inputs{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.gh-filter__price-field{
  display:flex; align-items:center; flex:1 1 0; min-width:0; border:1px solid var(--line); border-radius:2px; background:var(--cream);
  padding:0 8px; height:36px; transition:border-color .18s var(--ease);
}
.gh-filter__price-field:focus-within{border-color:var(--gold)}
.gh-filter__price-sym{font-size:12px; color:var(--muted); margin-right:4px}
.gh-filter__price-field input{
  width:100%; min-width:0; border:0; background:transparent; font-family:var(--sans); font-size:13.5px; color:var(--ink); outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
.gh-filter__price-field input::-webkit-outer-spin-button,.gh-filter__price-field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.gh-filter__price-dash{color:var(--muted); font-size:13px}
.gh-filter__slider{position:relative; height:22px; margin:0 9px}
.gh-filter__slider-track{position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:#DCD5C9}
.gh-filter__slider-fill{position:absolute; top:0; bottom:0; left:var(--gh-fill-left,0%); right:var(--gh-fill-right,0%); background:var(--gold)}
.gh-filter__range{
  position:absolute; left:-9px; right:-9px; top:0; width:calc(100% + 18px); height:22px; margin:0; background:none;
  -webkit-appearance:none; appearance:none; pointer-events:none; outline:none;
}
.gh-filter__range::-webkit-slider-runnable-track{background:transparent; height:22px}
.gh-filter__range::-moz-range-track{background:transparent; height:22px}
.gh-filter__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:#fff; border:2px solid var(--gold); box-shadow:0 1px 4px rgba(28,28,28,.22); cursor:grab;
}
.gh-filter__range::-moz-range-thumb{
  pointer-events:auto; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--gold); box-shadow:0 1px 4px rgba(28,28,28,.22); cursor:grab;
}
.gh-filter__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(201,168,76,.28)}
.gh-filter__range:active::-webkit-slider-thumb{cursor:grabbing; transform:scale(1.1)}
.gh-filter__price-meta{display:flex; justify-content:space-between; margin-top:10px; font-size:11px; letter-spacing:.06em; color:var(--muted)}

/* buttons (drawer footer / noscript) */
.gh-filter__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 0; height:46px; padding:0 18px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; border-radius:2px; cursor:pointer;
  text-decoration:none; transition:all .2s var(--ease); line-height:1;
}
.gh-filter__btn--apply{background:var(--teal); color:#fff; border:1px solid var(--teal)}
.gh-filter__btn--apply:hover{background:var(--teal-2,#0a2d30)}
.gh-filter__btn--ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.gh-filter__btn--ghost:hover{border-color:var(--gold)}
.gh-filter__apply-count{letter-spacing:.04em; opacity:.85}

/* ---------- active bar: count + chips ---------- */
.gh-filter-bar{display:flex; flex-direction:column; gap:12px; margin:0 0 22px}
.gh-filter-bar__count{margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.gh-filter-bar__count strong{font-weight:600; color:var(--ink)}
.gh-filter-bar__active{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.gh-filter-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); font-size:12.5px; color:var(--ink); text-decoration:none; transition:all .18s var(--ease); line-height:1.2;
}
.gh-filter-chip svg{width:10px; height:10px; color:var(--muted)}
.gh-filter-chip:hover{border-color:var(--gold); background:#fff}
.gh-filter-chip:hover svg{color:var(--ink)}
.gh-filter-chip--clear{background:none; border-color:transparent; padding-left:6px; text-decoration:underline; text-underline-offset:3px; color:var(--gold-d); font-weight:500; letter-spacing:.04em}
.gh-filter-chip--clear:hover{border-color:transparent; color:var(--ink)}

/* ---------- sort select (desktop) ---------- */
.gh-filter-sort{display:flex; align-items:center; gap:10px; margin:0}
.gh-filter-sort__label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.gh-filter-sort__select{
  border:1px solid var(--line); border-radius:2px; padding:10px 34px 10px 14px; background:var(--cream);
  font-family:var(--sans); font-size:12.5px; color:var(--ink); letter-spacing:.04em; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236B6459' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
.gh-filter-sort__select:focus-visible{outline:none; border-color:var(--gold)}

/* ---------- quick-filter chip nav ---------- */
.gh-filter-quick{display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; margin:0 0 26px}
.gh-filter-quick__group{display:contents}
.gh-filter-quick__label{font-family:var(--accent,var(--sans)); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-d); margin:0 4px 0 6px}
.gh-filter-quick__group:first-child .gh-filter-quick__label{margin-left:0}
.gh-filter-quick__chip{
  display:inline-flex; align-items:center; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:12.5px; color:var(--ink); text-decoration:none; white-space:nowrap; transition:all .18s var(--ease);
}
.gh-filter-quick__chip:hover{border-color:var(--gold); color:var(--gold-d)}
.gh-filter-quick__chip.is-active{background:var(--teal); border-color:var(--teal); color:#fff}
@media (max-width:899px){
  .gh-filter-quick{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px 18px; padding:0 20px 4px}
  .gh-filter-quick::-webkit-scrollbar{display:none}
  .gh-filter-quick__group{display:inline-flex; align-items:center; gap:6px; flex:none}
  .gh-filter-quick__label{margin:0 2px 0 8px}
}

/* ---------- mobile bar + drawers (≤899px) ---------- */
.gh-filter-mobile-bar,.gh-filter-drawer,.gh-filter-overlay{display:none}
@media (max-width:899px){
  body.gh-has-filters{padding-bottom:64px}
  .gh-filter-mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1001; height:54px; background:#fff;
    border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(28,28,28,.08); padding-bottom:env(safe-area-inset-bottom);
  }
  .gh-filter-mobile-bar__btn{
    flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:9px; background:#fff; border:0; cursor:pointer;
    font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  }
  .gh-filter-mobile-bar__btn + .gh-filter-mobile-bar__btn{border-left:1px solid var(--line)}
  .gh-filter-mobile-bar__btn:active{background:var(--cream)}
  .gh-filter-mobile-bar__btn svg{width:17px; height:17px; color:var(--gold-d)}
  .gh-filter-mobile-bar__badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--teal); color:#fff; font-size:10px; letter-spacing:0}

  .gh-filter-overlay{display:block; position:fixed; inset:0; z-index:1050; background:rgba(28,28,28,.45); opacity:0; transition:opacity .25s var(--ease); pointer-events:none}
  .gh-filter-overlay.is-open{opacity:1; pointer-events:auto}

  /* the sidebar becomes the filter bottom sheet */
  .gh-filter,.gh-filter-drawer{
    display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:1100; max-height:82vh; background:#fff;
    border-radius:14px 14px 0 0; box-shadow:0 -12px 34px rgba(28,28,28,.2); transform:translateY(102%); visibility:hidden;
    transition:transform .3s var(--ease), visibility 0s linear .3s; overflow:hidden;
  }
  .gh-filter.is-open,.gh-filter-drawer.is-open{transform:translateY(0); visibility:visible; transition:transform .3s var(--ease), visibility 0s}
  .gh-filter-drawer--sort{max-height:70vh}
  body.gh-filter-drawer-open{overflow:hidden}

  .gh-filter__drawer-head{padding:16px 20px; border-bottom:1px solid var(--line); flex:none}
  .gh-filter__title{font-size:12.5px}
  .gh-filter__close{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:0; background:var(--sand); color:var(--ink); cursor:pointer; padding:0}
  .gh-filter__close svg{width:16px; height:16px}
  .gh-filter__form{display:flex; flex-direction:column; min-height:0; flex:1 1 auto}
  .gh-filter__drawer-body{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 20px 20px}
  .gh-filter__drawer-foot{flex:none; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff}
  .gh-filter__group{padding-bottom:10px}
  .gh-filter__head{padding:14px 0 8px}
  .gh-filter__label{padding:8px 0; font-size:14.5px}
  .gh-filter__label::before{width:19px; height:19px}

  /* sort drawer radio list */
  .gh-filter-sortlist{list-style:none; margin:0; padding:6px 20px 20px; overflow-y:auto}
  .gh-filter-sortlist__item{border-bottom:1px solid var(--line)}
  .gh-filter-sortlist__item:last-child{border-bottom:0}
  .gh-filter-sortlist__radio{position:absolute; opacity:0; width:1px; height:1px}
  .gh-filter-sortlist__item label{display:flex; align-items:center; gap:12px; padding:14px 0; font-size:14.5px; color:var(--body); cursor:pointer}
  .gh-filter-sortlist__item label::before{content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid #C9C2B6; box-sizing:border-box; flex:none; transition:all .18s var(--ease)}
  .gh-filter-sortlist__radio:checked + label{color:var(--ink); font-weight:500}
  .gh-filter-sortlist__radio:checked + label::before{border:5px solid var(--teal)}

  .gh-filter-sort{display:none} /* desktop select hidden; the bar's "Sort By" replaces it */
  .gh-filter-bar{margin-bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  .gh-filter,.gh-filter-drawer,.gh-filter-overlay,.gh-filter__head svg{transition:none}
}