/* ==========================================================================
   DIAMOND KING — Catalog
   ========================================================================== */

.cat-hero{ padding-bottom:0; }
.cat-hero .page-lead{ margin-bottom:var(--sp-32); }

/* ---- Category rail ---- */
.cat-rail{ margin-inline:calc(var(--sp-24) * -1); padding-inline:var(--sp-24); overflow-x:auto; scrollbar-width:none; }
.cat-rail::-webkit-scrollbar{ display:none; }
.cat-rail ul{ display:flex; gap:2px; width:max-content; }
.rail-link{
  position:relative; display:flex; align-items:center; gap:10px;
  min-height:56px; padding:0 18px 0 14px;
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--steel-400); background:var(--graphite-900); white-space:nowrap;
  transition:color var(--dur-fast), background-color var(--dur-fast);
}
.rail-link svg{ width:26px; height:26px; }
.rail-link .rail-count{ font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:0; color:var(--steel-500); }
.rail-link:hover{ color:var(--white); background:var(--graphite-800); }
.rail-link[aria-current="true"]{ color:var(--white); background:var(--paper-0); color:var(--ink-950); }
.rail-link[aria-current="true"] .rail-count{ color:var(--steel-500); }
.rail-link:focus-visible{ outline-offset:-3px; }
@media (max-width:767px){ .cat-rail{ margin-inline:calc(var(--sp-16) * -1); padding-inline:var(--sp-16); } }

/* ---- Layout ---- */
.cat-body{ padding-block:var(--sp-48) var(--sp-96); }
.cat-layout{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:var(--sp-48); align-items:start; }
@media (max-width:1023px){ .cat-layout{ grid-template-columns:1fr; } }

/* ---- Filters (sidebar → bottom sheet) ---- */
.filters-panel{ position:sticky; top:calc(var(--header-h-scrolled) + var(--sp-24)); max-height:calc(100dvh - var(--header-h-scrolled) - var(--sp-48)); display:flex; flex-direction:column; }
.filters-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--sp-12); border-bottom:2px solid var(--ink-950); }
.filters-title{ font-size:1.375rem; }
.filters-reset{ min-height:44px; padding:0 4px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-600); }
.filters-reset:hover{ color:var(--accent-700); text-decoration:underline; text-underline-offset:3px; }
.filters-reset[disabled]{ color:var(--steel-500); opacity:.6; cursor:default; text-decoration:none; }
.filters-close{ display:none; }
.filters-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.filters-foot,.filters-backdrop{ display:none; }

.f-group{ border-bottom:1px solid var(--paper-line); }
.f-group summary{
  display:flex; align-items:center; justify-content:space-between; min-height:52px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-950);
}
.f-group summary::-webkit-details-marker{ display:none; }
.f-group summary svg{ width:18px; height:18px; color:var(--steel-500); transition:transform var(--dur-base) var(--ease-out); }
.f-group[open] summary svg{ transform:rotate(180deg); }
.f-group summary:focus-visible{ outline-offset:-2px; }
.f-group-body{ padding-bottom:var(--sp-16); }

.f-opt{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:38px; padding:2px 0; cursor:pointer; font-size:.9375rem; color:var(--ink-950); }
.f-opt input{
  appearance:none; width:20px; height:20px; margin:0; display:grid; place-items:center; cursor:pointer;
  background:var(--paper-0); border:1px solid var(--paper-line-strong); border-radius:2px;
  transition:background-color var(--dur-fast), border-color var(--dur-fast);
}
.f-opt input[type="radio"]{ border-radius:50%; }
.f-opt input:checked{ background:var(--ink-950); border-color:var(--ink-950); }
.f-opt input[type="checkbox"]:checked::after{ content:''; width:9px; height:5px; border-left:2px solid var(--white); border-bottom:2px solid var(--white); transform:translateY(-1px) rotate(-45deg); }
.f-opt input[type="radio"]:checked::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--white); }
.f-opt input:focus-visible{ outline:2px solid var(--accent-600); outline-offset:2px; }
.f-opt:hover input{ border-color:var(--ink-950); }
.f-opt-count{ font-family:var(--font-mono); font-size:12px; color:var(--steel-500); }
.f-opt.is-empty{ color:var(--steel-500); }
.f-opt.is-empty .f-opt-count{ opacity:.6; }

.f-range{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.f-range label{ display:flex; flex-direction:column; gap:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-600); }
.f-range input{
  width:100%; min-height:44px; padding:8px 10px; font-family:var(--font-mono); font-size:14px;
  background:var(--paper-0); color:var(--ink-950); border:1px solid var(--paper-line-strong); border-radius:var(--r-sm);
}
.f-range input:focus{ outline:none; border-color:var(--accent-600); box-shadow:0 0 0 3px rgba(163,17,27,.18); }
.f-hint{ margin-top:8px; font-size:.8125rem; color:var(--steel-500); }

@media (max-width:1023px){
  .filters{ position:fixed; inset:0; z-index:var(--z-drawer); visibility:hidden; transition:visibility 0s linear var(--dur-slow); }
  .filters.is-open{ visibility:visible; transition-delay:0s; }
  .filters-backdrop{ display:block; position:absolute; inset:0; background:rgba(4,4,5,.6); opacity:0; transition:opacity var(--dur-slow) var(--ease-out); }
  .filters.is-open .filters-backdrop{ opacity:1; }
  .filters-panel{
    position:absolute; left:0; right:0; bottom:0; top:auto; max-height:88dvh;
    background:var(--paper-0); border-top:2px solid var(--accent-600);
    transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-out);
  }
  .filters.is-open .filters-panel{ transform:none; }
  .filters-head{ padding:12px var(--sp-16); border-bottom:1px solid var(--paper-line); }
  .filters-head::before{ content:''; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--paper-line-strong); }
  .filters-close{ display:grid; color:var(--ink-950); }
  .filters-close:hover{ background:var(--paper-100); color:var(--ink-950); }
  .filters-body{ padding:0 var(--sp-16); }
  .filters-foot{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-12); padding:12px var(--sp-16); padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--paper-line); background:var(--paper-0); }
}

/* ---- Toolbar ---- */
.cat-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--sp-12) var(--sp-16); padding-bottom:var(--sp-16); border-bottom:1px solid var(--paper-line); }
.cat-search{ position:relative; display:flex; align-items:center; }
.cat-search > span{ position:absolute; left:14px; width:20px; height:20px; color:var(--steel-500); pointer-events:none; }
.cat-search > span svg{ width:100%; height:100%; }
.cat-search input{
  width:100%; min-height:48px; padding:0 14px 0 44px; font-size:1rem;
  background:var(--paper-50); color:var(--ink-950); border:1px solid var(--paper-line); border-radius:var(--r-sm);
  transition:border-color var(--dur-fast), background-color var(--dur-fast);
}
.cat-search input::placeholder{ color:var(--steel-500); }
.cat-search input:focus{ outline:none; background:var(--paper-0); border-color:var(--ink-950); }
.cat-count{ font-family:var(--font-mono); font-size:13px; color:var(--steel-600); white-space:nowrap; }
.cat-count b{ color:var(--ink-950); font-weight:500; }
.cat-sort{ display:flex; align-items:center; gap:8px; }
.cat-sort span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-500); }
.cat-sort select{
  appearance:none; min-height:48px; padding:0 40px 0 12px; font-size:.9375rem; cursor:pointer;
  background:var(--paper-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7178' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='5,8.5 12,15.5 19,8.5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color:var(--ink-950); border:1px solid var(--paper-line-strong); border-radius:var(--r-sm);
}
.cat-sort select:focus-visible{ outline:2px solid var(--accent-600); outline-offset:2px; }
.filters-toggle{ display:none; }
.filters-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent-600); color:var(--white); font-family:var(--font-mono); font-size:11px; line-height:20px; letter-spacing:0; }

@media (max-width:1023px){
  .cat-toolbar{ grid-template-columns:minmax(0,1fr) auto; }
  .cat-search{ grid-column:1 / -1; }
  .filters-toggle{ display:inline-flex; justify-self:start; }
  .cat-count{ grid-column:1 / -1; order:5; }
}
@media (max-width:480px){ .cat-sort span{ display:none; } .cat-sort select{ max-width:170px; } }

/* sticky compact toolbar on mobile */
@media (max-width:1023px){
  .cat-sticky{ position:sticky; top:var(--header-h-scrolled); z-index:5; margin-inline:calc(var(--sp-24) * -1); padding:var(--sp-12) var(--sp-24) 0; background:var(--paper-0); }
}
@media (max-width:767px){ .cat-sticky{ margin-inline:calc(var(--sp-16) * -1); padding-inline:var(--sp-16); } }

/* ---- Active chips ---- */
.cat-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-block:var(--sp-16); }
.cat-chips:empty{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 6px 0 12px;
  background:var(--ink-950); color:var(--white); font-size:.875rem; border-radius:2px;
  transition:background-color var(--dur-fast);
}
.chip svg{ width:16px; height:16px; }
.chip:hover{ background:var(--accent-600); }
.chip-k{ color:var(--steel-400); }
.chip:hover .chip-k{ color:rgba(255,255,255,.8); }
.chip-clear{ min-height:36px; padding:0 8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-600); }
.chip-clear:hover{ text-decoration:underline; text-underline-offset:3px; }

.cat-main .p-grid{ margin-top:var(--sp-24); grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); }
.cat-chips:not(:empty) + .p-grid{ margin-top:var(--sp-8); }
@media (max-width:600px){ .cat-main .p-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.task-note{ margin-top:var(--sp-16); padding:var(--sp-16); border-left:3px solid var(--accent-600); background:var(--paper-50); font-size:.9375rem; color:var(--steel-600); }
.task-note:empty{ display:none; }
.task-note b{ color:var(--ink-950); }

/* search-hit highlight inside card */
.p-card-match{ font-family:var(--font-mono); font-size:11px; color:var(--steel-600); }
.p-card-match b{ color:var(--ink-950); font-weight:500; }

/* ---- Empty / more ---- */
.cat-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-16); margin-top:var(--sp-24); padding:var(--sp-48) var(--sp-32); background:var(--paper-50); border:1px dashed var(--paper-line-strong); }
.cat-empty h2{ font-size:var(--fs-h3); }
.cat-empty p{ max-width:52ch; color:var(--steel-600); }
.cat-empty-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); }

.cat-more-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-12); margin-top:var(--sp-48); }
.cat-progress{ font-family:var(--font-mono); font-size:12px; color:var(--steel-500); }
.cat-progress-bar{ width:200px; height:2px; background:var(--paper-line); }
.cat-progress-bar span{ display:block; height:100%; background:var(--ink-950); transform-origin:left; transition:transform var(--dur-slow) var(--ease-out); }
@media (max-width:600px){ .cat-more-wrap .btn{ width:100%; } }

/* ---- Bottom CTA ---- */
.cat-cta{ padding-block:var(--sp-64); border-top:1px solid var(--graphite-line); }
.cat-cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-24); }
.cat-cta h2{ font-size:var(--fs-h2); }
.cat-cta p{ margin-top:var(--sp-8); color:var(--steel-400); }
.cat-cta-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); }
@media (max-width:600px){ .cat-cta-actions .btn{ flex:1 1 100%; } }