/* ============================================================
   shop.css — The Collection (shop index)
   Scoped to .page-head, .toolbar, .collection,
   .decades, .view. Uses tokens from variables.css.
   ============================================================ */

/* --- Breadcrumb (shared with production page) ---------------- */
.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 40px;
}
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs .sep { opacity: 0.4; }
.crumbs span[aria-current] { color: var(--color-paper); }

/* --- Page head ---------------------------------------------- */
.page-head {
  padding: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 20% 30%, rgba(232,163,61,0.10), transparent 60%);
  pointer-events: none;
}
.page-head__inner { position: relative; }
.page-head__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
}
.page-head__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--color-accent); }
.page-head__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.92; letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.page-head__title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.page-head__sub { max-width: 560px; font-size: 17px; line-height: 1.5; color: #cfc8b8; }
/* --- Toolbar (sticky group-by + search) --------------------- */
.toolbar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 56px;
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  background: rgba(11,11,13,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.toolbar__label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-muted);
}
.toolbar__segs {
  display: flex; gap: 2px;
  background: var(--color-line);
  padding: 2px;
  border-radius: 999px;
  justify-self: start;
}
.toolbar__seg {
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
  border-radius: 999px;
  transition: color .2s, background .2s;
  cursor: pointer;
}
.toolbar__seg:hover { color: var(--color-paper); }
.toolbar__seg.active { background: var(--color-paper); color: var(--color-ink); font-weight: 600; }
/* --- Section head variant (meta on right instead of link) --- */
.sec-head__meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

/* --- Collection: items grid (production / type cards) ------- */
.collection { padding: 0 0 clamp(80px, 12vw, 140px); }

/* --- Active filter banner (e.g. ?decade=YYYY) ---------------- */
.active-filter {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--color-accent);
  background: rgba(232,163,61,0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-paper);
}
.active-filter[hidden] { display: none; }
.active-filter strong { color: var(--color-accent); font-weight: 600; }
.active-filter__count {
  color: var(--color-muted);
  margin-right: auto;
}
.active-filter__clear {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-line-2);
  background: transparent;
  color: var(--color-paper);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.active-filter__clear:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* Larger-title treatment (matches home Featured section) */
.collection .item-card__title {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  -webkit-line-clamp: 2;
}
.collection .item-card__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* --- Decade cards ------------------------------------------ */
.decades {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.decade {
  display: grid; grid-template-columns: 180px 1fr auto;
  gap: 32px; align-items: center;
  padding: 28px 32px;
  background: var(--color-ink);
  transition: background .2s;
  cursor: pointer;
}
.decade:hover { background: var(--color-ink-soft); }
.decade__year {
  font-family: var(--font-heading);
  font-size: 48px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--color-accent);
}
.decade__year em { font-style: italic; }
.decade__prods {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #cfc8b8; line-height: 1.6;
}
.decade__prods strong { color: var(--color-paper); font-weight: 500; }
.decade__count {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; white-space: nowrap;
}
.decade__count strong {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 400;
  color: var(--color-paper); letter-spacing: -0.02em;
}

/* --- View tabs ---------------------------------------------- */
.view { display: none; }
.view.active { display: block; }

/* --- Load more --------------------------------------------- */
.loadmore { margin-top: 64px; text-align: center; }
.loadmore a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-paper);
  transition: border-color .2s, color .2s;
}
.loadmore a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --- Responsive -------------------------------------------- */
@media (max-width: 960px) {
  .decade { grid-template-columns: 1fr; gap: 12px; }
  .decade__count { flex-direction: row; align-items: baseline; gap: 12px; }
  .toolbar { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
}