/* shop.css — public catalog page layout.
 *
 * Deliberately lean: this is a v1 foundation for a shop that will be
 * rewritten. It reuses the V2 design tokens (tokens.css) and the shared
 * .bi-btn / .bi-wordmark chrome (landing.css) so it reads on-brand without
 * re-deriving the design system. Palette switches with [data-theme] for free
 * because every color comes from a --bi-* token.
 */

.bi-shop {
  margin: 0;
  background: var(--bi-bg);
  color: var(--bi-ink);
  font-family: var(--bi-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Top bar moved to the shared session-aware site bar — bink/server/site_bar.py
   + /static/site_bar.css (rendered across all public pages). */

/* ── Main column ─────────────────────────────────────────────────────── */
.shop-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px) 96px;
}

.shop-hero {
  text-align: center;
  margin-bottom: clamp(32px, 6vw, 56px);
}

.shop-hero__h {
  font-family: var(--bi-font-display);
  font-weight: var(--bi-weight-semibold);
  font-size: clamp(32px, 6vw, var(--bi-size-page-title));
  line-height: 1.05;
  margin: 0 0 12px;
}

.shop-hero__sub {
  color: var(--bi-ink-soft);
  font-size: var(--bi-size-body-ui);
  max-width: 46ch;
  margin: 0 auto;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.shop-section {
  margin-bottom: clamp(36px, 6vw, 64px);
}

.shop-section__head {
  font-family: var(--bi-font-display);
  font-weight: var(--bi-weight-semibold);
  font-size: var(--bi-size-section-head);
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bi-rule-soft);
}

/* ── Card grid ───────────────────────────────────────────────────────── */
.shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.shop-card {
  margin: 0;
}

.shop-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.shop-card__cover {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bi-bg-alt);
  box-shadow: 0 2px 10px rgba(20, 12, 6, 0.16);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-card__link:hover .shop-card__cover,
.shop-card__link:focus-visible .shop-card__cover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(20, 12, 6, 0.24);
}

.shop-card__meta {
  display: block;
  padding: 10px 2px 0;
}

.shop-card__title {
  display: block;
  font-family: var(--bi-font-display);
  font-weight: var(--bi-weight-semibold);
  font-size: var(--bi-size-card-title);
  line-height: 1.15;
}

.shop-card__author {
  display: block;
  color: var(--bi-meta);
  font-size: var(--bi-size-card-meta);
  margin-top: 2px;
}

.shop-card__blurb {
  color: var(--bi-ink-soft);
  font-size: var(--bi-size-body-small);
  line-height: 1.4;
  margin: 8px 0 0;
  /* Keep cards even — clamp the blurb to three lines. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-empty {
  color: var(--bi-ink-soft);
  font-size: var(--bi-size-body-ui);
  text-align: center;
}

/* Footer moved to the shared site footer — bink/server/site_footer.py +
   /static/site_footer.css (rendered across all public pages). */