/* ==========================================================================
   parts.css — Parts landing, category pages, request form extras.
   ========================================================================== */

/* Category quick-chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: .85rem; color: var(--ink-2); background: var(--bg-2); transition: border-color .2s, color .2s, background .2s; }
.cat-chip:hover, .cat-chip.is-active { border-color: var(--accent); color: #fff; background: var(--accent-soft); }
.cat-chip .ic { width: 16px; height: 16px; color: var(--accent-300); }

/* Filter toolbar */
.parts-toolbar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto; gap: .8rem; align-items: end; }
.parts-toolbar .field { gap: .35rem; }
.parts-toolbar label { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.parts-toolbar__search { position: relative; }
.parts-toolbar__search .ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.parts-toolbar__search .input { padding-left: 2.5rem; }
.parts-toolbar__reset { height: fit-content; }
@media (max-width: 900px){ .parts-toolbar { grid-template-columns: 1fr 1fr; } .parts-toolbar__search { grid-column: 1 / -1; } }
@media (max-width: 520px){ .parts-toolbar { grid-template-columns: 1fr; } }

/* Results header */
.parts-results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.7rem 0 1.4rem; }
.parts-count { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); letter-spacing: .03em; }
.parts-count b { color: #fff; }
.parts-sort { display: flex; align-items: center; gap: .5rem; }
.parts-sort label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; }
.parts-sort .select { width: auto; padding: .55rem 2.2rem .55rem .8rem; }

/* Active filter pills */
.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.filter-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .35rem .35rem .7rem; border-radius: var(--pill); background: var(--accent-soft); border: 1px solid rgba(225,6,0,.35); color: var(--ink); font-size: .78rem; font-family: var(--font-mono); letter-spacing: .03em; }
.filter-pill button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink-2); transition: background .2s, color .2s; }
.filter-pill button:hover { background: var(--accent); color: #fff; }
.filter-pill button .ic { width: 13px; height: 13px; }

/* Empty state */
.parts-empty { text-align: center; padding: 3.2rem 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--bg-2); }
.parts-empty__icon { width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(225,6,0,.25); color: var(--accent-300); }
.parts-empty__icon .ic { width: 28px; height: 28px; }
.parts-empty h3 { margin-bottom: .5rem; }
.parts-empty p { color: var(--ink-3); margin-bottom: 1.5rem; max-width: 48ch; margin-inline: auto; }

/* Category page: sibling category nav */
.cat-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; }
.cat-meta__item { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); letter-spacing: .03em; }
.cat-meta__item .ic { width: 17px; height: 17px; color: var(--accent-300); }

/* Request form: photo upload */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-name { font-family: var(--font-mono); font-size: .8rem; color: var(--accent-300); margin-top: .5rem; }