/* ============================================================
   Inventory page only. Shared rules live in css/site.css
   ============================================================ */

/* ---- Page header + stats ---- */
.inv-header{padding:2.5rem 0 1.25rem}
.inv-header h1{font-family:var(--serif);font-size:clamp(2rem,4.8vw,2.9rem);line-height:1.15;letter-spacing:-.01em;color:var(--navy);font-weight:600;max-width:32rem}
.inv-header p{color:var(--ink-soft);font-size:1.05rem;margin-top:.9rem;max-width:36rem}
.updated{margin-top:.85rem;font-size:.95rem;color:var(--ink-mid)}

.inv-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.5rem;max-width:32rem}
.inv-stat{background:var(--surface-mute);border-radius:12px;padding:1rem 1.15rem}
.inv-stat .label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:.25rem}
.inv-stat .value{font-family:var(--sans);font-size:1.85rem;color:var(--navy);line-height:1.1;font-weight:700}
.inv-stat .value small{font-size:.55em;color:var(--ink-mid);font-weight:400;margin-left:.35rem;letter-spacing:0;text-transform:none}

/* ---- Category tile grid (landing view) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-bottom:2.5rem}
.cat-tile{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;font-family:var(--sans);padding:0;color:inherit;text-decoration:none}
.cat-tile:hover{border-color:var(--navy);text-decoration:none}
.cat-tile:hover .cat-tile-name{color:var(--navy)}
.cat-tile-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem}
.cat-tile-name{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);line-height:1.25}
.cat-tile-count{font-size:.95rem;color:var(--ink-mid)}
.cat-tile .photo{aspect-ratio:5/4}

/* ---- Item view (after clicking a category tile) ---- */
.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:1rem;font-weight:600;color:var(--navy);padding:1.25rem 0 .5rem;background:none;border:none;cursor:pointer;font-family:var(--sans)}
.back-link:hover{text-decoration:underline}
.cat-header{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;padding:.25rem 0 1.25rem;border-bottom:1px solid var(--border-soft)}
.cat-header h2{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--navy);font-weight:600;letter-spacing:-.005em}
.cat-header-count{font-size:1.05rem;color:var(--ink-mid)}

.toolbar-inline{padding:1.25rem 0;display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center}
.search-box{display:flex;align-items:center;background:#fff;border:2px solid var(--navy);border-radius:12px;padding:.7rem 1rem;gap:.6rem}
.search-box svg{width:22px;height:22px;color:var(--navy);flex-shrink:0}
.search-box input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:1.05rem;color:var(--ink);background:transparent;min-width:0}
.search-box input::placeholder{color:var(--ink-mid)}
.search-clear{background:none;border:none;color:var(--ink-mid);cursor:pointer;font-size:.95rem;padding:.35rem .6rem;border-radius:6px;display:none;font-family:var(--sans)}
.search-clear.show{display:inline-flex}
.search-clear:hover{color:var(--pink)}
.sort-select{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:.7rem 1rem;font-family:var(--sans);font-size:1rem;color:var(--ink);cursor:pointer;font-weight:500;min-height:48px}
.sort-select:focus{border-color:var(--navy)}

.results-meta{padding:.25rem 0 1rem;font-size:.95rem;color:var(--ink-mid)}
.results-meta strong{color:var(--ink);font-weight:700}

.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-bottom:2.5rem}
.inv-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.inv-card:hover{border-color:var(--navy)}
.inv-card-status{position:absolute;top:.7rem;right:.7rem;background:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green);padding:.35rem .65rem;border-radius:999px;border:1px solid var(--border);z-index:3}
.inv-card-status.low{color:#a05a00;border-color:#e8c68a}
.inv-card-status.out{color:var(--ink-mid)}
.inv-card-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.inv-card h3{font-family:var(--sans);font-size:1.1rem;color:var(--ink);line-height:1.3;font-weight:600}
.inv-card-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-soft)}
.inv-card-qty{font-family:var(--sans);color:var(--green);font-size:1.2rem;font-weight:700}
.inv-card-qty small{color:var(--ink-mid);font-family:var(--sans);font-size:.85rem;font-weight:500;margin-left:.35rem}

.no-results,.loading,.fetch-error{padding:2.5rem 1.25rem;text-align:center;background:#fff;border:1px solid var(--border);border-radius:14px;color:var(--ink-soft);margin-bottom:2.5rem}
.no-results h3,.fetch-error h3{font-family:var(--sans);color:var(--ink);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.fetch-error{border-color:var(--pink)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .cat-grid,.inv-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .cat-grid,.inv-grid{grid-template-columns:repeat(2,1fr)}
  .toolbar-inline{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cat-grid,.inv-grid{grid-template-columns:1fr}
  .inv-header{padding-top:1.75rem}
}