/* ===== Catalog page ===== */
.page-head {
  background: var(--color-blue-dark);
  color: var(--color-white);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  position: relative;
  overflow: hidden;
}

.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px);
}

.page-head .container { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .6rem; }
.page-head p { color: rgba(255,255,255,.75); max-width: 560px; }

.catalog-tools {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.catalog-search {
  position: relative;
  max-width: 520px;
}

.catalog-search input {
  width: 100%;
  padding: .85rem 1rem;
  padding-inline-start: 2.8rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-white);
  border: 2px solid var(--color-line);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .2s var(--ease);
}

.catalog-search input:focus { border-color: var(--color-blue); }

.catalog-search svg {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--color-ink-soft);
  pointer-events: none;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-ink-soft);
  min-width: 56px;
}

.chip {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .88rem;
  padding: .5rem 1rem;
  background: var(--color-white);
  color: var(--color-blue);
  border: 2px solid var(--color-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.chip:hover { border-color: var(--color-blue); }

.chip.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.catalog-count {
  font-size: .9rem;
  color: var(--color-ink-soft);
  margin-bottom: 1.2rem;
}

.catalog-empty {
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-orange);
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.catalog-empty p { font-size: 1.1rem; font-weight: 700; color: var(--color-blue-dark); }

.filter-row[hidden] { display: none; }

.product-tags { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.product-review-badge {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  border-radius: var(--radius);
}

.catalog-empty[hidden],
.catalog-grid[hidden] { display: none; }

@media (max-width: 680px) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .filter-label { flex-shrink: 0; min-width: 0; }
  .chip { white-space: nowrap; flex-shrink: 0; }
}