/* One flat product grid; a compact panel offers optional category filters. */
.product-filter-panel {
  padding: 24px;
  margin: 0 0 22px;
  border: 1px solid #e4eaf2;
  border-radius: 20px;
  background: #f7f9fc;
}
.product-filter-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; }
.product-filter-label { color: #202e43; font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.product-filter-hint { color: #7b8798; font-size: 13px; line-height: 1.7; }
.product-category-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.product-category-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 12px 16px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: #fff;
  color: #43516a;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.product-category-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #f0f4fa; color: #7788a4; }
.product-category-label { min-width: 0; overflow-wrap: anywhere; }
.product-category-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: 7px; background: #f1f4f9; color: #7a879b; font-size: 12px; font-variant-numeric: tabular-nums; }
.product-category-button:hover { border-color: #b5ccf5; background: #fbfdff; color: #1556dc; box-shadow: 0 3px 12px rgb(36 69 120 / 5%); }
.product-category-button[aria-pressed="true"] { border-color: #1556dc; background: #1556dc; color: #fff; box-shadow: 0 4px 12px rgb(21 86 220 / 15%); }
.product-category-button[aria-pressed="true"] .product-category-icon,
.product-category-button[aria-pressed="true"] .product-category-count { background: rgb(255 255 255 / 16%); color: #fff; }
.product-category-button:focus-visible { outline: 2px solid #1556dc; outline-offset: 3px; }
.product-result-status { margin: 0 0 28px; color: #6c778a; font-size: 14px; line-height: 1.8; }
.product-catalog-grid > .card[hidden] { display: none !important; }
.product-catalog-grid > .card a[href$="/ar-display-table.html"] .card-media img,
.product-catalog-grid > .card a[href$="/ai-medical-assessment-interview.html"] .card-media img,
.product-catalog-grid > .card a[href$="/immersive-led-interaction-system.html"] .card-media img { object-fit: contain; }
.product-catalog-grid > .card .card-media.card-media--contain img { object-fit: contain; }
.product-catalog-grid .card h3 { min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-catalog-grid .card p { min-height: 5.34em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) {
  .product-category-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-category-button { grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 9px; padding: 12px; font-size: 14px; }
  .product-category-icon { width: 30px; height: 30px; }
}
@media (max-width: 720px) {
  .product-filter-panel { padding: 16px; border-radius: 16px; }
  .product-filter-heading { margin-bottom: 14px; }
  .product-category-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-category-button[data-product-filter="all"] { grid-column: 1 / -1; }
  .product-category-button { grid-template-columns: 24px minmax(0, 1fr) 20px; min-height: 60px; gap: 8px; padding: 10px; }
  .product-category-icon { width: 24px; height: 28px; border-radius: 6px; background: transparent; }
  .product-category-icon svg { width: 21px; height: 21px; }
  .product-category-count { min-width: 20px; min-height: 22px; }
  .product-filter-hint { font-size: 12px; }
}
@media (max-width: 620px) {
  .product-result-status { margin-bottom: 22px; }
  .product-catalog-grid .card h3, .product-catalog-grid .card p { min-height: 0; }
}
@media (max-width: 360px) {
  .product-category-button { grid-template-columns: minmax(0, 1fr) 20px; }
  .product-category-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .product-category-button { transition: none; } }