/* ============================================================
   WATZSEE — Gear catalog
   Layered on watzsee.css; uses the same tokens throughout.
   ============================================================ */

.gearHero{ padding:70px 0 32px; }
.gearHero h1{
  margin:0;
  font-size:clamp(2.7rem,5.4vw,4.8rem);
  line-height:.98; letter-spacing:-.05em;
}
.gearHero .lead{ margin-top:20px; max-width:56ch; }

/* ---------- affiliate disclosure ----------------------------- */

.disclosure{
  border-block:1px solid var(--line);
  background:rgba(89,184,255,.06);
}
.disclosure__inner{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px;
  padding:12px 0;
  color:#c2d2e2; font-size:.88rem; text-align:center;
}
.disclosure__tag{
  padding:4px 10px; border-radius:999px;
  background:linear-gradient(135deg,#8fd8ff,#4bb3ff);
  color:var(--on-accent);
  font-size:.68rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- toolbar ------------------------------------------ */

.toolbar{
  position:sticky; top:78px; z-index:15;
  background:rgba(7,17,31,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.controls{ display:flex; align-items:stretch; gap:10px; padding-block:14px; min-width:0; }

.ctl{
  display:flex; align-items:center; gap:11px;
  height:48px; margin:0; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.035);
  color:var(--text);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ctl:hover{ border-color:var(--line-2); }
.ctl:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(89,184,255,.16); }
.ctl__label{
  flex:0 0 auto;
  color:var(--dim); font-size:.68rem; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
  border-right:1px solid var(--line); padding-right:12px;
}

/* category dropdown */
.catmenu{ position:relative; flex:0 1 auto; min-width:0; }
.catmenu__trigger{
  width:100%; min-width:272px;
  cursor:pointer; text-align:left; font-family:var(--font);
}
.catmenu__trigger:hover{ border-color:rgba(89,184,255,.4); }
.catmenu__trigger[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(89,184,255,.16); }
.catmenu__current{
  flex:1; min-width:0;
  font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.catmenu__n{
  flex:0 0 auto; padding:3px 9px; border-radius:999px;
  background:linear-gradient(135deg,#8fd8ff,#4bb3ff);
  color:var(--on-accent); font-size:.72rem; font-weight:900; line-height:1.35;
}
.catmenu__caret{ width:12px; height:8px; color:var(--accent); flex:0 0 auto; transition:transform .2s ease; }
.catmenu__trigger[aria-expanded="true"] .catmenu__caret{ transform:rotate(180deg); }

.catmenu__panel{
  position:absolute; z-index:40;
  top:calc(100% + 10px); left:0;
  width:min(940px, calc(100vw - 44px));
  max-height:min(66vh,540px); overflow-y:auto;
  padding:10px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:#0b1a2c;
  box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:2px;
  animation:drop .16s ease-out;
}
.catmenu__panel[hidden]{ display:none; }
@keyframes drop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.catmenu__item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 13px;
  border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--muted);
  font-family:var(--font); font-size:.94rem; text-align:left; cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.catmenu__item:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.catmenu__item:focus-visible{ background:rgba(255,255,255,.06); color:var(--text); }
.catmenu__item[aria-current="true"]{
  background:linear-gradient(135deg,#4bb3ff,#326ff0);
  color:#fff; font-weight:700;
}
.catmenu__item .n{ font-size:.78rem; color:var(--dim); }
.catmenu__item[aria-current="true"] .n{ color:rgba(255,255,255,.8); }
.catmenu__item.is-empty{ color:var(--dim); }
.catmenu__item--all{
  grid-column:1/-1; margin-bottom:6px;
  border-bottom:1px solid var(--line); border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--text); font-weight:700;
}

/* search */
.search{ flex:1 1 210px; min-width:0; }
.search__input{
  flex:1; min-width:0;
  background:transparent; border:0; padding:0;
  color:var(--text); font-family:var(--font); font-size:.98rem;
}
.search__input:focus:not(:focus-visible){ outline:none; }
.search__input::placeholder{ color:var(--dim); }
.search__input::-webkit-search-cancel-button{ display:none; }
.search__clear{
  background:none; border:0; padding:0 2px;
  color:var(--dim); font-size:20px; line-height:1; cursor:pointer;
}
.search__clear:hover{ color:var(--accent2); }

/* meter */
.meter{ flex:0 0 auto; gap:5px; }
.meter__n{ font-size:.98rem; font-weight:800; color:var(--accent2); }
.meter__n--dim{ color:var(--muted); }
.meter__slash{ color:var(--dim); }
.meter__unit{ border-right:0; border-left:1px solid var(--line); padding-right:0; padding-left:12px; margin-left:7px; }

/* sort */
.sort{ flex:0 0 auto; position:relative; padding-right:34px; min-width:0; }
.sort__select{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:0;
  color:var(--text); font-family:var(--font); font-size:.98rem; font-weight:600; cursor:pointer;
}
.sort__select:focus:not(:focus-visible){ outline:none; }
.sort__select option{ background:#0b1a2c; color:var(--text); }
.sort__caret{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:12px; height:8px; color:var(--accent); pointer-events:none;
}

/* ---------- catalog ------------------------------------------ */

.catalog{ padding-bottom:8px; }

.filterline{
  margin:0; padding-block:22px 0;
  color:var(--dim); font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.filterline[hidden]{ display:none; }
.filterline b{ color:var(--accent2); font-weight:800; }
.filterline__clear{
  margin-left:14px; padding:6px 11px;
  border:1px solid var(--line-2); border-radius:999px;
  background:transparent; color:var(--muted);
  font-family:var(--font); font-size:.7rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.filterline__clear:hover{ border-color:var(--accent); color:var(--accent2); }

/* Portrait screens: 2 across. Landscape: 4 across. */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
  padding-bottom:8px;
}
@media (orientation: landscape){
  .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (orientation: landscape) and (max-width: 900px){
  .grid{ gap:12px; }
}

.pcard{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--surface);
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pcard:hover{
  transform:translateY(-4px);
  border-color:rgba(89,184,255,.32);
  box-shadow:0 22px 50px rgba(0,0,0,.4);
}

.pcard__frame{
  position:relative; display:block;
  aspect-ratio:1/1; overflow:hidden;
  background:#f2f5f8; text-decoration:none;
}
.pcard__img{
  width:100%; height:100%; object-fit:contain; padding:18px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard__img{ transform:scale(1.05); }

.pcard__index{
  position:absolute; top:12px; left:12px;
  padding:4px 9px; border-radius:999px;
  background:rgba(7,17,31,.82); color:var(--accent2);
  font-size:.68rem; font-weight:900; letter-spacing:.1em;
  backdrop-filter:blur(6px);
}
.pcard__badge{
  position:absolute; top:12px; right:12px;
  padding:5px 11px; border-radius:999px;
  background:linear-gradient(135deg,#8fd8ff,#4bb3ff);
  color:var(--on-accent);
  font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 8px 24px rgba(49,146,255,.35);
}
.pcard__cta{
  position:absolute; left:0; right:0; bottom:0;
  padding:11px 16px;
  background:linear-gradient(135deg, rgba(59,135,255,.96), rgba(50,111,240,.96));
  color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.04em;
  transform:translateY(101%);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard__cta,
.pcard__frame:focus-visible .pcard__cta{ transform:translateY(0); }

.pcard__body{ display:flex; flex-direction:column; gap:9px; padding:20px; flex:1; }
.pcard__cat{
  margin:0; color:var(--accent);
  font-size:.68rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase;
}
.pcard__title{ margin:0; font-size:1.05rem; font-weight:800; line-height:1.28; letter-spacing:-.025em; }
.pcard__desc{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.pcard__foot{ display:flex; margin-top:auto; padding-top:16px; }
.btn--wide{ width:100%; }

/* ---------- empty states -------------------------------------- */

.empty{
  margin:26px 0 40px;
  padding:clamp(30px,6vw,64px);
  border:1px dashed var(--line-2); border-radius:var(--r);
  background:rgba(255,255,255,.015);
}
.empty__kicker{ margin:0 0 12px; color:var(--accent); font-size:.72rem; font-weight:900; letter-spacing:.2em; }
.empty__title{
  margin:0 0 16px;
  font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1.05; letter-spacing:-.045em;
}
.empty__body{ margin:0 0 24px; max-width:62ch; color:var(--muted); font-size:1.02rem; }
.empty__steps{ margin:0 0 26px; padding:0; list-style:none; display:grid; gap:12px; max-width:74ch; }
.empty__steps li{
  display:flex; gap:16px; align-items:baseline;
  padding-top:12px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.94rem;
}
.empty__steps b{ flex:0 0 auto; color:var(--accent); font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.empty code{
  padding:2px 7px; border-radius:6px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--accent2); font-size:.85em;
}

/* ---------- responsive ---------------------------------------- */

@media (max-width: 820px){
  /* the header grows a second row on small screens, so the
     toolbar has to sit lower to stay put under it */
  .toolbar{ top:112px; }
}

@media (orientation: portrait) and (max-width: 900px){
  .controls{ flex-wrap:wrap; gap:9px; }
  .search{ flex:1 1 100%; order:1; }
  .catmenu{ flex:2 1 150px; order:2; }
  .catmenu__trigger{ min-width:0; }
  .catmenu__panel{ width:calc(100vw - 28px); grid-template-columns:1fr; }
  .meter{ display:none; }
  .sort{ flex:1 1 128px; order:3; overflow:hidden; padding-right:30px; }
  .sort__select{ width:100%; }
  .gearHero{ padding:56px 0 26px; }
  .pcard__body{ padding:15px; gap:7px; }
  .pcard__title{ font-size:.98rem; }
  .pcard__desc{ font-size:.85rem; }
  /* keep the call to action on one line in a narrow two-up grid */
  .pcard .btn{ font-size:.8rem; padding-inline:8px; gap:6px; white-space:nowrap; }
}

@media (max-width: 560px){
  .catmenu__trigger .ctl__label,
  .sort .ctl__label{ display:none; }
}