/* 商品库页 · 从 public/exact/products.html 内联 <style> 忠实移植,整段 scope 进 .products-page。
   page-head/toolbar/chip/search-inline 走全局 design-restraint;此处覆盖 products 专属版式。 */
.products-page {
  .page-head { position: sticky; top: 0; z-index: 5; background: var(--background-base); padding-top: 4px; margin-top: -4px; }
  .products-main { display: flex; flex-direction: column; }
  .products-main .result-meta { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
  .chip-wrap { position: relative; }

  .product-grid-wrap { margin: 0 -8px; padding: 2px 8px 24px; }
  .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .product-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s, border-color .15s; position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .product-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
  .product-thumb { aspect-ratio: 1.4 / 1; }
  .product-body { padding: 14px 14px 12px; flex: 1; }
  .product-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 11.5px; }
  .product-date { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; }

  .product-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-faint); font-size: 11.5px; color: #6f6f6f; background: var(--background-base); }
  .product-footer .stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; justify-self: center; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
  .product-footer .stat svg { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; stroke-width: 1.25; transition: color var(--t-base); }
  .product-footer .stat b { color: var(--accent-black); font-weight: 600; transition: color var(--t-base); }
  .product-footer .sep { color: #b8b8b8; font-family: var(--font-mono); flex-shrink: 0; }

  .view-tog { display: inline-flex; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 2px; flex-shrink: 0; }
  .view-tog button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--black-alpha-48); cursor: pointer; border-radius: 4px; transition: background var(--t-base), color var(--t-base); }
  .view-tog button:hover { color: var(--accent-black); }
  .view-tog button.active { background: var(--accent-black); color: var(--accent-white); }
  .view-tog button svg { width: 13px; height: 13px; }

  /* 编辑模式 checkbox(默认隐藏) */
  .product-card .card-check { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--black-alpha-32); display: none; place-items: center; color: var(--accent-white); z-index: 5; pointer-events: none; }
}
