.catalog-header { margin-bottom:var(--space-10); }
.catalog-controls { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-8); }
.filter-bar { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.filter-btn {
  padding:var(--space-2) var(--space-4); font-size:10px;
  font-family:var(--font-mono); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  background:white; border:1px solid var(--color-border);
  border-radius:var(--radius-full); color:var(--color-grey-500);
  cursor:pointer; transition:all var(--transition-fast); box-shadow:var(--shadow-sm);
}
.filter-btn:hover { border-color:var(--color-border-accent); color:var(--color-accent); }
.filter-btn.active { background:var(--color-accent); border-color:var(--color-accent); color:white; box-shadow:0 4px 12px rgba(255,107,43,0.35); }
.catalog-search-wrap { margin-left:auto; position:relative; }
.catalog-search-wrap svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--color-grey-400); pointer-events:none; }
#catalog-search {
  background:white; border:1px solid var(--color-border);
  border-radius:var(--radius-full); padding:var(--space-2) var(--space-4) var(--space-2) 38px;
  font-size:var(--text-sm); font-family:var(--font-sans);
  color:var(--color-ink); outline:none; width:220px;
  transition:all var(--transition-fast); box-shadow:var(--shadow-sm);
}
#catalog-search::placeholder { color:var(--color-grey-400); }
#catalog-search:focus { border-color:var(--color-border-accent); box-shadow:0 0 0 3px rgba(255,107,43,0.08); }

.catalog-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }

.product-card {
  background:white; border:1px solid var(--color-border);
  border-radius:var(--radius-2xl); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-base);
}
.product-card:hover { border-color:rgba(255,107,43,0.25); transform:translateY(-4px); box-shadow:var(--shadow-xl), 0 0 0 1px rgba(255,107,43,0.08); }

.product-card__vial-link {
  display:block; text-decoration:none;
  border-bottom:1px solid var(--color-border);
  background:var(--color-grey-100);
  transition:background var(--transition-base);
}
.product-card:hover .product-card__vial-link { background:rgba(255,107,43,0.04); }
.product-card__vial-wrap { padding:var(--space-4) var(--space-6); display:flex; justify-content:center; align-items:center; height:165px; }
.product-card__vial-img { height:140px; width:auto; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.12)); transition:transform var(--transition-slow); }
.product-card:hover .product-card__vial-img { transform:scale(1.07) translateY(-5px); }

.product-card__header { display:flex; justify-content:space-between; align-items:flex-start; padding:var(--space-4) var(--space-5) 0; gap:var(--space-2); }
.product-card__category { font-size:10px; font-family:var(--font-mono); color:var(--color-accent); text-transform:uppercase; letter-spacing:var(--tracking-widest); margin-bottom:4px; }
.product-card__name { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--color-ink); }
.product-card__body { padding:var(--space-4) var(--space-5); flex:1; }
.product-card__spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-4); margin-bottom:var(--space-4); }
.product-card__spec { display:flex; flex-direction:column; gap:2px; }
.product-card__spec-label { font-size:9px; font-family:var(--font-mono); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--tracking-widest); }
.product-card__spec-value { font-size:var(--text-xs); font-family:var(--font-mono); font-weight:var(--weight-medium); color:var(--color-grey-600); }
.product-card__footer { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-border); margin-top:auto; }

@media (max-width:1200px) { .catalog-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px)  { .catalog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px)  { .catalog-grid { grid-template-columns:1fr; } }