@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/admin/AdminProductsTab.astro

@@ -0,0 +1,901 @@
+---
+/**
+ * Products tab (baseline §Products — catalog readiness and sellability),
+ * wired to the live products view model (lib/admin/services/mock, from
+ * data-view-contracts) rather than static prototype data.
+ */
+import { getProductsViewModel } from "@/lib/admin/services/mock";
+import type { ProductRow } from "@/lib/admin/viewmodels/products";
+import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
+
+interface Props {
+  envelope: AdminTenantEnvelope;
+}
+
+const { envelope } = Astro.props;
+const cspNonce = Astro.locals.cspNonce;
+
+const vm = getProductsViewModel(envelope);
+
+const STATUS_TONE: Record<ProductRow["status"], string> = {
+  active: "green",
+  draft: "amber",
+  archived: "",
+};
+
+function savedViewKeysFor(row: ProductRow): string[] {
+  const keys = ["all"];
+  if (!row.sellable) keys.push("not_sellable");
+  if (row.aiChannelReady) keys.push("ai_channel_ready");
+  return keys;
+}
+
+const totalVariants = vm.rows.reduce((sum, row) => sum + (vm.detailsById[row.id]?.variants.length ?? 0), 0);
+const needsAttentionCount = vm.rows.filter((r) => r.missingExciseCount > 0).length;
+const aiReadyCount = vm.rows.filter((r) => r.aiChannelReady).length;
+const avgReadiness = vm.rows.length
+  ? Math.round(vm.rows.reduce((sum, r) => sum + r.readinessScore, 0) / vm.rows.length)
+  : 0;
+const totalExciseGaps = vm.rows.reduce((sum, r) => sum + r.missingExciseCount, 0);
+
+const defaultView = vm.savedViews.find((v) => v.key === "not_sellable") && needsAttentionCount > 0 ? "not_sellable" : "all";
+const defaultRow = vm.rows.find((r) => !r.sellable) ?? vm.rows[0] ?? null;
+
+---
+
+<section id="products" class="band products-tab" aria-labelledby="admin-tab-products products-title" data-admin-panel data-agent-scope="products" role="tabpanel" data-products-target-tenant={vm.targetTenant}>
+  <div class="section-title">
+    <div>
+      <h2 id="products-title">Products</h2>
+      <p>Catalog, variants, pricing, inventory, media, and sellability.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
+      <button class="btn" type="button"><svg><use href="#i-refresh"></use></svg>Import</button>
+      <button class="btn primary" type="button"><svg><use href="#i-box"></use></svg>Add product</button>
+    </div>
+  </div>
+
+  <div class="grid cols-4">
+    <div class="metric"><span>Active products</span><strong>{vm.rows.length}</strong><small>In this catalog</small></div>
+    <div class="metric"><span>Variants</span><strong>{totalVariants}</strong><small>Across all products</small></div>
+    <div class="metric"><span>Needs attention</span><strong>{needsAttentionCount}</strong><small>Missing excise metadata</small></div>
+    <div class="metric"><span>AI channel ready</span><strong>{aiReadyCount}</strong><small>Of {vm.rows.length} products</small></div>
+  </div>
+
+  <div class="panel product-intelligence-panel">
+    <div class="panel-head product-panel-head">
+      <h3><svg><use href="#i-ask"></use></svg>Catalog Intelligence</h3>
+      <span class:list={["chip", totalExciseGaps > 0 ? "amber" : "green"]}>{totalExciseGaps} excise gap{totalExciseGaps === 1 ? "" : "s"}</span>
+    </div>
+    <div class="panel-body grid">
+      <div class="product-signal-grid">
+        <div class="product-signal">
+          <span class:list={["chip", avgReadiness >= 90 ? "teal" : "amber"]}>Readiness score</span>
+          <strong>{avgReadiness}%</strong>
+          <p>Catalog quality, sellability, and excise metadata across all products.</p>
+        </div>
+        <div class="product-signal">
+          <span class:list={["chip", totalExciseGaps > 0 ? "amber" : "green"]}>Excise metadata gaps</span>
+          <strong>{totalExciseGaps} field{totalExciseGaps === 1 ? "" : "s"}</strong>
+          <p>Missing tax class, wholesale basis, or volume/weight needed for regulated sale readiness.</p>
+        </div>
+        <div class="product-signal">
+          <span class="chip violet">AI channel readiness</span>
+          <strong>{aiReadyCount} of {vm.rows.length}</strong>
+          <p>Products with complete, agentic-commerce-ready listing data.</p>
+        </div>
+      </div>
+      <div class="actions">
+        <button class="btn primary" type="button">Review excise gaps</button>
+        <button class="btn" type="button">Draft catalog fixes</button>
+        <button class="btn" type="button">Schedule readiness audit</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="product-workspace">
+    <div class="panel product-list-panel">
+      <div class="panel-head product-panel-head">
+        <h3><svg><use href="#i-box"></use></svg>Catalog</h3>
+        <span class="chip teal">{vm.rows.length} products</span>
+      </div>
+      <div class="panel-body grid">
+        <div class="tabs" role="tablist" aria-label="Product saved views" data-products-view-list>
+          {vm.savedViews.map((view) => (
+            <button
+              type="button"
+              class:list={["tab", { active: view.key === defaultView }]}
+              data-products-view-button
+              data-view-key={view.key}
+            >
+              {view.label}
+            </button>
+          ))}
+        </div>
+
+        <div class="product-toolbar" aria-label="Product controls">
+          <label class="product-search">
+            <span>Search</span>
+            <input type="search" placeholder="Search products, SKUs, category" aria-label="Search products" data-products-search />
+          </label>
+          <div class="product-filters" aria-label="Product filters">
+            <label>
+              <span>Status</span>
+              <select aria-label="Filter by status" data-products-status-select>
+                <option value="">Any status</option>
+                <option value="active">Active</option>
+                <option value="draft">Draft</option>
+                <option value="archived">Archived</option>
+              </select>
+            </label>
+            <label>
+              <span>Sellability</span>
+              <select aria-label="Filter by sellability" data-products-sellability-select>
+                <option value="">Any</option>
+                <option value="sellable">Sellable</option>
+                <option value="blocked">Not sellable</option>
+              </select>
+            </label>
+          </div>
+        </div>
+
+        <div class="table-wrap products-table-wrap">
+          <table class="products-table">
+            <thead>
+              <tr>
+                <th>Product</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Readiness</th>
+                <th>Sellability</th>
+                <th>AI channel</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody data-products-tbody>
+              {vm.rows.map((row) => (
+                <tr
+                  class:list={[{ selected: row.id === defaultRow?.id }]}
+                  data-products-row
+                  data-product-id={row.id}
+                  data-view-keys={savedViewKeysFor(row).join(" ")}
+                  data-status={row.status}
+                  data-sellability={row.sellable ? "sellable" : "blocked"}
+                  data-search-haystack={`${row.name} ${row.id} ${row.category} ${row.productType}`.toLowerCase()}
+                >
+                  <td>
+                    <div class="product-title-cell">
+                      <div>
+                        <strong>{row.name}</strong>
+                        <span class="subtle">{row.category}</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td><strong>{row.productType}</strong></td>
+                  <td><span class:list={["chip", STATUS_TONE[row.status]]}>{row.status[0]!.toUpperCase() + row.status.slice(1)}</span></td>
+                  <td><strong>{row.readinessScore}%</strong>{row.missingExciseCount > 0 && <span class="subtle">{row.missingExciseCount} gap{row.missingExciseCount === 1 ? "" : "s"}</span>}</td>
+                  <td><span class:list={["chip", row.sellable ? "green" : "amber"]}>{row.sellable ? "Sellable" : "Excise gaps"}</span></td>
+                  <td><span class:list={["chip", row.aiChannelReady ? "teal" : ""]}>{row.aiChannelReady ? "Ready" : "Not ready"}</span></td>
+                  <td class="action"><button type="button" class="btn" data-products-select-row={row.id}>Open</button></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p class="products-empty-state" data-products-empty hidden>No products match the current filters.</p>
+        </div>
+      </div>
+    </div>
+
+    <aside class="panel product-detail-panel" aria-labelledby="product-detail-title" data-products-detail-root>
+      {vm.rows.map((row) => {
+        const detail = vm.detailsById[row.id]!;
+        return (
+          <div
+            class="product-detail-record"
+            data-products-detail-record={row.id}
+            hidden={row.id !== defaultRow?.id}
+          >
+            <div class="panel-head product-panel-head">
+              <h3 id={row.id === defaultRow?.id ? "product-detail-title" : undefined}><svg><use href="#i-file"></use></svg>{row.name}</h3>
+              <span class:list={["chip", row.sellable ? "green" : "amber"]}>{row.sellable ? "Sellable" : "Excise gaps"}</span>
+            </div>
+            <div class="panel-body grid">
+              <div class="product-detail-meta">
+                <div>
+                  <span class="eyebrow">Product type</span>
+                  <strong>{row.productType}</strong>
+                </div>
+                <div>
+                  <span class="eyebrow">Category</span>
+                  <strong>{row.category}</strong>
+                </div>
+                <div>
+                  <span class="eyebrow">Readiness score</span>
+                  <strong>{row.readinessScore}%</strong>
+                </div>
+              </div>
+
+              {!row.sellable && detail.complianceNotes.length > 0 && (
+                <div class="check-row blocking">
+                  <div><b>Not sellable</b><p>{detail.complianceNotes[0]}</p></div>
+                  <strong>{row.missingExciseCount} missing</strong>
+                  <span class="chip amber">Action</span>
+                </div>
+              )}
+
+              <details class="detail-section" open>
+                <summary class="detail-section-head">
+                  <h4>Variants</h4>
+                  <span class="chip">{detail.variants.length}</span>
+                </summary>
+                <div class="mini-table" role="table" aria-label="Variants">
+                  {detail.variants.map((variant) => (
+                    <div class="mini-row" role="row">
+                      <div role="cell"><strong>{variant.name}</strong><span class="subtle">{variant.sku}</span></div>
+                      <div role="cell"><span class="eyebrow">Stock</span><strong>{variant.inventory}</strong></div>
+                      <div role="cell"><span class="eyebrow">Price</span><strong>${variant.price.toFixed(2)}</strong></div>
+                    </div>
+                  ))}
+                </div>
+              </details>
+
+              <details class="detail-section">
+                <summary class="detail-section-head">
+                  <h4>Media</h4>
+                  <span class="chip">{detail.media.length}</span>
+                </summary>
+                <div class="mini-table" role="table" aria-label="Media">
+                  {detail.media.map((asset) => (
+                    <div class="mini-row" role="row">
+                      <div role="cell"><strong>{asset.kind[0]!.toUpperCase() + asset.kind.slice(1)}</strong><span class="subtle">{asset.alt}</span></div>
+                      <div role="cell"><span class="subtle">{asset.url}</span></div>
+                    </div>
+                  ))}
+                </div>
+              </details>
+
+              <details class="detail-section" open={!row.sellable}>
+                <summary class="detail-section-head">
+                  <h4>Excise metadata readiness</h4>
+                  <span class:list={["chip", row.missingExciseCount > 0 ? "amber" : "green"]}>{row.missingExciseCount} missing</span>
+                </summary>
+                <div>
+                  {detail.exciseChecks.map((check) => (
+                    <div class:list={["check-row", { blocking: !check.present }]}>
+                      <div><b>{check.label}</b><p>{check.present ? `Set to ${check.value}.` : "Not yet set — required for regulated sale readiness."}</p></div>
+                      <strong>{check.present ? check.value : "Missing"}</strong>
+                      <span class:list={["chip", check.present ? "green" : "amber"]}>{check.present ? "OK" : "Fix"}</span>
+                    </div>
+                  ))}
+                </div>
+              </details>
+
+              <details class="detail-section">
+                <summary class="detail-section-head">
+                  <h4>AI channel readiness</h4>
+                  <span class:list={["chip", row.aiChannelReady ? "teal" : "amber"]}>{row.aiChannelReady ? "Ready" : "Not ready"}</span>
+                </summary>
+                <div class="check-row">
+                  <div><b>Agentic commerce surfaces</b><p>{row.aiChannelReady ? "Listing data is complete enough for AI shopping agents to represent this product." : "Complete excise metadata and sellability first — AI channel readiness depends on a clean listing."}</p></div>
+                  <strong>{row.aiChannelReady ? "Ready" : "Blocked"}</strong>
+                  <span class:list={["chip", row.aiChannelReady ? "teal" : "amber"]}>{row.aiChannelReady ? "OK" : "Action"}</span>
+                </div>
+              </details>
+
+              <details class="detail-section">
+                <summary class="detail-section-head">
+                  <h4>Activity</h4>
+                  <span class="chip">{detail.activity.length}</span>
+                </summary>
+                <div class="mini-table" role="table" aria-label="Activity">
+                  {detail.activity.map((event) => (
+                    <div class="mini-row" role="row">
+                      <div role="cell"><strong>{event.title}</strong><span class="subtle">{event.detail}</span></div>
+                      <div role="cell"><span class="subtle">{new Date(event.at).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })}</span></div>
+                    </div>
+                  ))}
+                </div>
+              </details>
+            </div>
+          </div>
+        );
+      })}
+    </aside>
+  </div>
+</section>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    const root = document.querySelector('[data-products-target-tenant]');
+    if (!root) return;
+
+    const viewButtons = Array.from(root.querySelectorAll("[data-products-view-button]"));
+    const statusSelect = root.querySelector("[data-products-status-select]");
+    const sellabilitySelect = root.querySelector("[data-products-sellability-select]");
+    const searchInput = root.querySelector("[data-products-search]");
+    const rows = Array.from(root.querySelectorAll("[data-products-row]"));
+    const emptyState = root.querySelector("[data-products-empty]");
+    const detailRoot = root.querySelector("[data-products-detail-root]");
+    const detailRecords = detailRoot ? Array.from(detailRoot.querySelectorAll("[data-products-detail-record]")) : [];
+
+    let activeView = (viewButtons.find((b) => b.classList.contains("active")) || viewButtons[0])?.dataset.viewKey ?? "all";
+
+    const applyFilters = () => {
+      const status = statusSelect ? statusSelect.value : "";
+      const sellability = sellabilitySelect ? sellabilitySelect.value : "";
+      const term = searchInput ? searchInput.value.trim().toLowerCase() : "";
+      let visibleCount = 0;
+
+      for (const row of rows) {
+        const viewKeys = (row.dataset.viewKeys ?? "").split(" ");
+        const matchesView = viewKeys.includes(activeView);
+        const matchesStatus = !status || row.dataset.status === status;
+        const matchesSellability = !sellability || row.dataset.sellability === sellability;
+        const matchesSearch = !term || (row.dataset.searchHaystack ?? "").includes(term);
+        const visible = matchesView && matchesStatus && matchesSellability && matchesSearch;
+        row.hidden = !visible;
+        if (visible) visibleCount += 1;
+      }
+
+      if (emptyState) emptyState.hidden = visibleCount > 0;
+    };
+
+    const selectProduct = (productId) => {
+      for (const row of rows) {
+        row.classList.toggle("selected", row.dataset.productId === productId);
+      }
+      for (const record of detailRecords) {
+        record.hidden = record.dataset.productsDetailRecord !== productId;
+      }
+    };
+
+    viewButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        activeView = button.dataset.viewKey ?? "all";
+        viewButtons.forEach((b) => b.classList.toggle("active", b === button));
+        applyFilters();
+      });
+    });
+
+    statusSelect?.addEventListener("change", applyFilters);
+    sellabilitySelect?.addEventListener("change", applyFilters);
+    searchInput?.addEventListener("input", applyFilters);
+
+    root.querySelectorAll("[data-products-select-row]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const productId = button.dataset.productsSelectRow;
+        if (productId) selectProduct(productId);
+      });
+    });
+
+    rows.forEach((row) => {
+      row.addEventListener("click", (event) => {
+        if (event.target instanceof Element && event.target.closest("[data-products-select-row]")) return;
+        const productId = row.dataset.productId;
+        if (productId) selectProduct(productId);
+      });
+    });
+
+    applyFilters();
+  })();
+</script>
+
+<style>
+  .products-tab {
+    --product-split: minmax(0, 1.18fr) minmax(360px, 0.82fr);
+  }
+
+  .products-tab svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    stroke-width: 1.9;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    flex: 0 0 auto;
+  }
+
+  .products-tab button,
+  .products-tab input,
+  .products-tab select {
+    font: inherit;
+  }
+
+  .products-tab button {
+    cursor: pointer;
+  }
+
+  .products-tab .section-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .products-tab .section-title h2 {
+    margin: 0;
+    font-size: 16px;
+  }
+
+  .products-tab .section-title p {
+    margin: 4px 0 0;
+    color: var(--admin-muted);
+    font-size: 13px;
+  }
+
+  .products-tab .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .products-tab .btn {
+    min-height: 38px;
+    max-width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 0 13px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-weight: 680;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .products-tab .btn.primary {
+    border-color: var(--admin-teal-dark);
+    background: var(--admin-teal);
+    color: #ffffff;
+  }
+
+  .products-tab .grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .products-tab .grid.cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .products-tab .panel {
+    min-width: 0;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  .products-tab .panel-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 50px;
+    padding: 13px 14px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .products-tab .panel-head h3 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
+  }
+
+  .products-tab .panel-body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+    padding: 14px;
+  }
+
+  .product-intelligence-panel {
+    border-color: #b9d8d4;
+    background: #fbfefd;
+  }
+
+  .product-signal-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .product-signal {
+    display: grid;
+    gap: 7px;
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+  }
+
+  .product-signal strong {
+    font-size: 20px;
+  }
+
+  .product-signal p {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .products-tab .metric {
+    min-height: 84px;
+    padding: 14px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  .products-tab .metric span,
+  .products-tab .field label {
+    display: block;
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .products-tab .metric strong {
+    display: block;
+    margin-top: 9px;
+    font-size: 24px;
+  }
+
+  .products-tab .metric small {
+    display: block;
+    margin-top: 3px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .products-tab .tabs {
+    display: flex;
+    gap: 6px;
+    max-width: 100%;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .products-tab .tab {
+    flex: 0 0 auto;
+    min-height: 38px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 12px;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--admin-muted);
+    font-weight: 760;
+    text-decoration: none;
+  }
+
+  .products-tab .tab.active {
+    border-color: var(--admin-teal);
+    color: var(--admin-ink);
+  }
+
+  .products-tab .table-wrap {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  .products-tab table {
+    width: 100%;
+    min-width: 860px;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  .products-tab th {
+    height: 38px;
+    padding: 0 12px;
+    border-bottom: 1px solid var(--admin-line);
+    background: var(--admin-surface-soft);
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-align: left;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .products-tab td {
+    height: 46px;
+    padding: 7px 12px;
+    border-bottom: 1px solid var(--admin-line);
+    vertical-align: middle;
+  }
+
+  .products-tab tbody tr {
+    cursor: pointer;
+  }
+
+  .products-tab tr.selected {
+    background: #eef6f4;
+  }
+
+  .products-tab tr:last-child td {
+    border-bottom: 0;
+  }
+
+  .products-tab .subtle {
+    display: block;
+    margin-top: 2px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .products-tab .action {
+    text-align: right;
+  }
+
+  .products-empty-state {
+    margin: 0;
+    padding: 24px 14px;
+    color: var(--admin-muted);
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .products-tab .check-row {
+    display: grid;
+    grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .products-tab .check-row:last-child {
+    border-bottom: 0;
+  }
+
+  .products-tab .check-row.blocking {
+    margin: 4px -6px;
+    padding: 10px 6px;
+    border: 1px solid #efc477;
+    border-radius: var(--admin-radius-sm);
+    background: #fff8ec;
+  }
+
+  .products-tab .check-row b {
+    font-size: 13px;
+  }
+
+  .products-tab .check-row p {
+    margin: 2px 0 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .product-workspace {
+    display: grid;
+    grid-template-columns: var(--product-split);
+    gap: 14px;
+    align-items: start;
+    min-width: 0;
+  }
+
+  .product-list-panel,
+  .product-detail-panel {
+    min-width: 0;
+  }
+
+  .product-detail-panel {
+    position: sticky;
+    top: 86px;
+    box-shadow: var(--admin-shadow);
+  }
+
+  .product-panel-head {
+    min-width: 0;
+  }
+
+  .product-panel-head h3 {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .product-toolbar {
+    display: grid;
+    gap: 8px;
+    align-items: end;
+  }
+
+  .product-search {
+    min-width: 0;
+  }
+
+  .product-filters {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(128px, 1fr));
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .product-toolbar label,
+  .product-filters label {
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
+
+  .product-toolbar span,
+  .product-filters span,
+  .eyebrow {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .product-toolbar input,
+  .product-toolbar select,
+  .product-filters select {
+    min-width: 0;
+    width: 100%;
+    min-height: 38px;
+    padding: 0 10px;
+    overflow: hidden;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    text-overflow: ellipsis;
+  }
+
+  .products-table {
+    min-width: 900px;
+  }
+
+  .products-table td {
+    height: 58px;
+  }
+
+  .product-title-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .product-detail-meta {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .product-detail-meta > div {
+    min-width: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .product-detail-meta strong,
+  .mini-row strong {
+    display: block;
+    margin-top: 3px;
+    overflow-wrap: anywhere;
+  }
+
+  .detail-section {
+    display: grid;
+    gap: 10px;
+    padding-top: 2px;
+  }
+
+  .detail-section + .detail-section {
+    padding-top: 12px;
+    border-top: 1px solid var(--admin-line);
+  }
+
+  .detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .detail-section-head::-webkit-details-marker {
+    display: none;
+  }
+
+  .detail-section-head h4 {
+    margin: 0;
+    font-size: 13px;
+  }
+
+  .mini-table {
+    display: grid;
+    margin-top: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    overflow: hidden;
+  }
+
+  .mini-row {
+    display: grid;
+    grid-template-columns: minmax(130px, 1.25fr) 90px 90px;
+    gap: 10px;
+    align-items: center;
+    min-height: 58px;
+    padding: 9px 10px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .mini-row:last-child {
+    border-bottom: 0;
+  }
+
+  @media (max-width: 1180px) {
+    .product-workspace {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .product-detail-panel {
+      position: static;
+    }
+  }
+
+  @media (max-width: 920px) {
+    .products-tab .section-title,
+    .products-tab .panel-head {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .products-tab .grid.cols-4,
+    .product-signal-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .product-filters {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 640px) {
+    .products-tab .grid.cols-4,
+    .product-signal-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .products-tab .actions {
+      width: 100%;
+    }
+
+    .products-tab .actions .btn {
+      flex: 1 1 150px;
+    }
+
+    .products-tab .check-row {
+      grid-template-columns: 1fr;
+    }
+
+    .product-toolbar,
+    .product-filters,
+    .product-detail-meta,
+    .mini-row {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>