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

/* ---- Page header + stats ---- */
.inv-header{padding:2.5rem 0 1.25rem;text-align:center}
.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:700}
.inv-header p{color:var(--ink-soft);font-size:1.05rem;margin-top:.9rem}
/* Sits above the h1 as a kicker: smaller than the headline, but it carries
   the thing most first-time visitors need to know — that this is free. */
.inv-header .inv-mission{margin:0 auto 1.5rem;background:var(--surface-mute);border:1px solid var(--border);border-radius:14px;padding:1.15rem 1.5rem;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.inv-header .inv-credit{margin-top:.75rem;font-size:1rem;color:var(--ink-mid)}
.inv-header .inv-pickup{margin-top:.75rem;line-height:1.55}

/* ---- how to reserve ---- */
.reserve{padding:2.5rem 0 .5rem;text-align:center}
.reserve h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);color:var(--navy);font-weight:600;margin-bottom:.75rem}
.reserve-how{font-size:1.05rem;line-height:1.6;color:var(--ink)}
.reserve-how a{color:var(--navy);font-weight:700;white-space:nowrap}
.reserve-soon{display:inline-block;margin-top:1rem;background:var(--surface-mute);border:1px dashed var(--border);border-radius:999px;padding:.5rem .95rem;font-size:.9rem;font-weight:600;color:var(--ink-mid)}
.reserve-caveat{margin-top:1rem;font-size:.95rem;line-height:1.55;color:var(--ink-mid)}

.inv-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem auto 0;max-width:32rem;text-align:left}
.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}
.home-search{padding:0 0 1.5rem}
.suggest{background:#fff;border:1px solid var(--border);border-left:4px solid var(--pink);border-radius:12px;padding:1rem 1.15rem;margin:0 0 1.25rem}
.suggest-lead{margin:0 0 .75rem;font-size:1rem;color:var(--ink)}
.suggest-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.suggest-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;background:var(--cream,#faf6ee);border:1.5px solid var(--navy);border-radius:10px;padding:.55rem .8rem;font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--navy);cursor:pointer;text-align:left}
.suggest-chip:hover{background:var(--navy);color:#fff}
.suggest-chip-qty{font-size:.8rem;font-weight:400;opacity:.75}
.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;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.inv-card:hover{border-color:var(--navy)}
/* The cards are links now, so they need to look pressable on touch too. */
.inv-card:active{transform:scale(.985)}
.inv-card:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ---- single item ---- */
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;padding:0 0 3rem}
/* The card grid crops to 4:3 so the tiles line up. Here the whole photo has
   to be visible top to bottom — a walker shot in portrait loses its wheels
   and handles to a cover crop, which is the half you came to look at. */
.detail-media .photo{
  aspect-ratio:auto;
  min-height:260px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-mute)
}
.detail-media .photo img{
  /* relative, not static: it has to stay in flow so the box grows to the
     photo, but it also needs z-index to keep working — the fallback icon is
     absolutely positioned underneath, and z-index is ignored on a static
     element, so a static img renders behind the placeholder. */
  position:relative;
  z-index:2;
  width:100%;
  height:auto;       /* natural aspect: the full frame, top to bottom */
  display:block
}
/* Thumbnail strip under the big photo. Wraps rather than scrolls: the cap is
   seven photos, which fits two rows on a phone, and a horizontal scroller
   with no visible affordance hides the last one. */
.detail-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.detail-thumb{width:72px;height:56px;padding:0;border:2px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-mute);cursor:pointer;position:relative;opacity:.7;transition:opacity .12s,border-color .12s}
.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.detail-thumb:hover{border-color:var(--navy);opacity:1}
/* The selected thumbnail needs to stay distinguishable while the mouse is
   over a different one, so it carries a ring that hover does not. */
.detail-thumb.is-current{border-color:var(--navy);opacity:1;box-shadow:0 0 0 3px rgba(0,50,160,.22)}
.detail-thumb:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

.detail-cat{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:.4rem}
.detail-name{font-family:var(--serif,var(--sans));font-size:2rem;line-height:1.15;color:var(--navy);margin:0 0 1rem}
.detail-stock{font-size:1.05rem;color:var(--ink);background:var(--cream-warm,#f6f1e6);border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.detail-stock strong{font-size:1.6rem;color:var(--navy);margin-right:.35rem}
.detail-stock-out{color:var(--ink-mid)}
.detail-desc{font-size:1.05rem;line-height:1.6;color:var(--ink);margin:0 0 1rem;white-space:pre-line}
.detail-note{font-size:.95rem;line-height:1.55;color:var(--ink-mid);margin:0 0 1.5rem}
.detail-directions{display:inline-flex}
@media (max-width:760px){
  .detail{grid-template-columns:1fr;gap:1.25rem}
  .detail-name{font-size:1.6rem}
}
.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}
}

/* ---- All out on loan ----
   Shown in place of "nothing matches that" when we do carry the thing and
   every one of them is lent out. Deliberately not styled as an error: it is
   a real, useful answer, and the phone number is the point of it. */
.on-loan{background:#fff;border:1px solid var(--border);border-left:4px solid var(--sky);border-radius:14px;padding:1.5rem 1.5rem 1.25rem;margin-bottom:2.5rem}
.on-loan h3{font-family:var(--sans);font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:.85rem}
.on-loan p{color:var(--ink-mid);font-size:1rem;line-height:1.55}
.on-loan a{color:var(--navy);font-weight:700;white-space:nowrap}
.on-loan-list{list-style:none;margin:0 0 .85rem;display:flex;flex-wrap:wrap;gap:.5rem}
.on-loan-list li{background:var(--surface-mute);border-radius:999px;padding:.4rem .85rem;font-size:.95rem;color:var(--ink)}
.on-loan-more{margin-bottom:.85rem;font-size:.9rem}
/* A tile whose shelf is empty still invites the click — the page behind it
   explains itself — so this reads as information, not as a disabled state. */
.cat-tile-count.cat-tile-out{color:var(--ink-mid);font-style:italic}