/* ============================================================
   sell-collection.css — small additions shared by the three
   collection pages (category / brand / series), on top of the
   prototype sheets (sell-brand.css / sell-series.css).
   ============================================================ */

/* Category chips on the brand page */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 42, 34, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: #0e2a22;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cat-chip:hover { background: rgba(0, 200, 150, 0.10); border-color: rgba(0, 200, 150, 0.45); }
.cat-chip.is-active {
  background: #0e2a22;
  border-color: #0e2a22;
  color: #f2efe8;
}

/* Brand-logo fallback when a brand row has no image_path */
.brand-name-fallback {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0e2a22;
  opacity: 0.75;
}

/* ---- Breadcrumb-first pages sit closer to the header ----
   --section-py (96px) suits homepage marketing sections; pages that OPEN
   with a breadcrumb shouldn't push it that far down. Top tightened,
   bottom keeps the full section rhythm. Applies to all three collection
   pages (category .brands, brand/series .series). */
.brands,
.series,
.products {
  padding-top: 36px;
  padding-bottom: var(--section-py);
}
@media (max-width: 768px) {
  .brands,
  .series,
  .products { padding-top: 22px; }
}

/* price line on brand-page fallback product tiles (series-card pattern) */
.series-card .tile-price {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(14, 42, 34, 0.65);
}
.series-card .tile-price strong { color: #0a8f6c; }