@tokenoftrust/storefront-runner 2.0.2 → 2.0.3

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

@@ -1,901 +0,0 @@
----
-/**
- * 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>