/* The in-stock page. Built on the same palette as the rest of the site. */

.stock-head { padding: clamp(40px, 6vw, 72px) 0 24px; background: linear-gradient(170deg, var(--cyan-soft) 0%, #fff 70%); }
.stock-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: .3em; }
.stock-head .lede { margin-bottom: .6rem; }
.updated { font-size: .82rem; color: var(--ink-soft); margin: 0; }

.stock-tools { padding: 20px 0 8px; position: sticky; top: 72px; z-index: 20;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

.search-field input {
  width: 100%; padding: 14px 16px; font-size: 1rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff;
}
.search-field input:focus { outline: none; border-color: var(--cyan); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 12px; scrollbar-width: thin; }
.chip-filter {
  flex: none; font: inherit; font-size: .84rem; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); white-space: nowrap;
}
.chip-filter:hover { border-color: var(--cyan); }
.chip-filter.on { background: var(--cyan); border-color: var(--cyan); color: #fff; }

.stock-list { padding: 24px 0 clamp(48px, 7vw, 80px); }
.count { font-size: .88rem; color: var(--ink-soft); margin-bottom: 18px; }
.empty { color: var(--ink-soft); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.stock-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff;
  display: grid; gap: 4px; align-content: start;
}
.stock-card:hover { border-color: var(--cyan); }
.s-name { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; }
.s-cat { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0; }
.s-price { margin: 6px 0 0; font-size: 1.1rem; color: var(--ink); }
.s-price s { color: var(--ink-soft); font-size: .85rem; font-weight: 400; }
.s-sale { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-dark); font-weight: 600; }
.s-stock { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.s-stock.low { color: #A8590B; }
.s-stock.last { color: #B42318; font-weight: 600; }

@media (max-width: 900px) { .stock-tools { top: 0; } }