/* ================================
   JAIFORE — CATEGORY PAGE CSS
   styles/category.css
   ================================ */

.cat-page-hero {
  padding: 5.5rem 2rem 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cat-page-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.back-link {
  font-size: 0.82rem;
  color: var(--muted, var(--muted));
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.back-link:hover { color: var(--ink); }

/* ── TOOLBAR ───────────────────────────────────────── */
.cat-toolbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
}

.cat-count {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.cat-filters {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.filter-select:focus { border-color: var(--purple); }

/* ── MAIN GRID ─────────────────────────────────────── */
.cat-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cat-main .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2rem 1.5rem;
}

/* ── EMPTY STATE ───────────────────────────────────── */
.cat-empty {
  text-align: center;
  padding: 5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* FIX: .cat-empty's own `display: flex` has the same specificity as a
   plain `.hidden { display: none; }` rule defined elsewhere (services.css,
   loaded before this file), so on a cascade tie the later stylesheet wins —
   meaning .cat-empty could keep the "hidden" class in the DOM while still
   rendering visually. Combining both classes in one selector raises
   specificity above either rule alone, so hidden reliably wins regardless
   of stylesheet load order. */
.cat-empty.hidden {
  display: none;
}

.empty-icon {
  font-size: 3rem;
  color: var(--border);
}

.cat-empty p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 600px) {
  .cat-page-hero { padding: 5rem 1.2rem 2rem; }
  .cat-toolbar   { padding: 0 1.2rem 1.5rem; }
  .cat-main      { padding: 2rem 1.2rem 3rem; }
  .cat-toolbar   { flex-direction: column; align-items: flex-start; }
}

/* Phones: two photos per row, like a catalogue */
@media (max-width: 768px) {
  .cat-main .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.75rem; }
}