/* modou dsp — Shop archive (FabFilter-style no-chrome grid) */

.shop-hero { padding: var(--space-xl) var(--space-lg) var(--space-lg); text-align: center; }
.shop-hero h1 { font-size: var(--text-2xl); margin: var(--space-xs) 0; }
.shop-hero p { color: var(--text-muted); }

.filter-bar {
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  max-width: 1180px; margin: var(--space-md) auto 0; padding: 0 var(--space-lg);
}
.filter-bar a {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-overlay); background: transparent; color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out-expo);
}
.filter-bar a[aria-current="true"],
.filter-bar a:hover { border-color: var(--accent-mint); color: var(--text-primary); }

.bundle-banner {
  max-width: 1180px; margin: var(--space-lg) auto 0; padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-mint) 16%, var(--bg-charcoal)), var(--bg-charcoal));
  border: 1px solid color-mix(in srgb, var(--accent-mint) 30%, var(--border-overlay));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.bundle-banner .tag {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  background: var(--accent-mint); color: var(--bg-obsidian); padding: 0.25rem 0.6rem; border-radius: 6px;
  margin-right: 0.6rem;
}
.bundle-banner strong { font-size: var(--text-lg); }

.shop-grid {
  max-width: 1180px; margin: var(--space-lg) auto 0; padding: 0 var(--space-lg) var(--space-section);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg);
}
.shop-tile { display: block; }
.shop-tile .shot {
  aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: var(--bg-charcoal);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
/* `contain`, not `cover` — see the same note in home.css. The tile is
   16:10 but the products are not: CYANO CH's interface is taller than it
   is wide (1030×1186), and cropping it to this box discards most of the
   channel strip. Letterboxing against the tile background keeps every
   product legible at the cost of a little empty space. */
.shop-tile .shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.shop-tile:hover .shot { transform: translateY(-6px); }
.shop-tile .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-sm); }
.shop-tile h3 { font-size: var(--text-lg); margin: 0; }
.shop-tile .cat { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
.shop-tile .tagline { color: var(--text-muted); font-size: var(--text-sm); margin: 0.2rem 0 0.6rem; }
.shop-tile .price-row { display: flex; justify-content: space-between; align-items: center; }
.shop-tile .price { font-family: var(--font-mono); color: var(--product-tile-accent, var(--accent-mint)); font-weight: 600; }
.shop-tile .owned { font-size: var(--text-xs); color: var(--text-faint); border: 1px solid var(--border-overlay); border-radius: var(--radius-pill); padding: 0.25rem 0.6rem; }
.shop-tile .add { font-size: var(--text-xs); font-weight: 600; color: var(--product-tile-accent, var(--accent-mint)); }

.shop-empty { max-width: 1180px; margin: var(--space-lg) auto; padding: 0 var(--space-lg) var(--space-section); color: var(--text-muted); }

@media (max-width: 980px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .shop-grid { grid-template-columns: 1fr; } }

/* ── Shop tile, job-first ───────────────────────────────────────────── */
.shop-tile .tile-job {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--product-tile-accent, var(--accent-mint));
  margin: var(--space-sm) 0 0.2rem;
}
.shop-tile .tile-name { font-size: var(--text-lg); margin: 0; }
.shop-tile .shot .tile-video { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; display: block; }

/* Explains why one category holds three CYANO products — without it the
   grid quietly contradicts "one of each kind". */
.shop-note {
  max-width: 1180px;
  margin: var(--space-md) auto 0;
  padding: var(--space-md);
  border-left: 2px solid var(--accent-mint);
  background: color-mix(in srgb, var(--accent-mint) 5%, transparent);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.shop-note strong { color: var(--text-primary); }
@media (max-width: 1220px) { .shop-note { margin-inline: var(--space-lg); } }