/* ==========================================================================
   MAGU · products.css — catálogo: busca, filtros e índice de produtos
   ========================================================================== */

.finder { display: grid; gap: 16px; margin-bottom: 28px; }
.search { position: relative; max-width: 520px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ti-3); pointer-events: none; }
.search input { padding-left: 42px; border-radius: 999px; }
.search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 var(--t-xs) var(--f-body);
  color: var(--ti-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; }
@media (hover: none) { .search kbd { display: none; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ti-2); font-size: var(--t-sm); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { color: var(--ti-1); border-color: var(--line-2); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { color: var(--ti-1); border-color: var(--core); background: var(--core-soft); }
.chip .n { color: var(--ti-3); font-variant-numeric: tabular-nums; }
.chip-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; }

.result-count { font-size: var(--t-sm); color: var(--ti-3); }

/* índice: cada produto é uma linha, com o nome como âncora visual */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index li { border-bottom: 1px solid var(--line); }
.index li[hidden] { display: none; }
.row {
  display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline;
  padding: 20px 4px; text-decoration: none; position: relative;
}
.row-name { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: .01em; }
.row-kind { display: block; font-family: var(--f-body); font-size: var(--t-sm); color: var(--ti-2); letter-spacing: 0; margin-top: 4px; }
.row-desc { color: var(--ti-2); max-width: 40em; }
.row-meta { display: grid; justify-items: end; gap: 4px; font-size: var(--t-xs); color: var(--ti-3); text-align: right; }
.row-meta .ext::after { content: ' ↗'; }
a.row:hover .row-name { color: var(--core-hi); }
:root[data-theme="light"] a.row:hover .row-name { color: var(--core); }
a.row:hover { background: linear-gradient(90deg, var(--core-soft), transparent 60%); }
div.row { cursor: default; }
.index li:has(.status[data-s="off"]) .row { opacity: .6; }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr auto; padding: 18px 2px; }
  .row-desc { grid-column: 1 / -1; grid-row: 2; }
  .row-meta { grid-row: 1; grid-column: 2; }
}

.empty-state { padding: 40px 0; color: var(--ti-2); display: grid; gap: 12px; justify-items: start; }
.empty-state[hidden] { display: none; }

.tool { padding-top: 8px; }