/* ============================================================
   /product/products — page-scoped styles

   COMPOSITION RULES
   -----------------
   1. Universal helpers come from globals.css:
      .eyebrow, .lede, .display, .h-display, .h-section,
      .h-section-sm, .h-card, .btn, .btn-accent, .btn-ghost,
      .btn-ink, .btn-lg, .wrap, main > section padding.
      THIS FILE DOES NOT REDEFINE THEM.
   2. Inside the .screen-body mockup, we mirror the live platform
      CSS verbatim (client/src/styles/tokens.css + the component
      CSS files). The screen-body is a self-contained "screenshot."
   3. FAQ CSS is copied verbatim from /public/audit-trail.css —
      the canonical pattern shared by every working product page.

   CORNER POLICY
   -------------
   ZERO border-radius on any frame, card, panel, table, badge,
   KPI, pipe card, pricing row, filter, alert, button. Only radii:
     - 50% on circular dots (traffic-light chrome, comp-dots,
       FAQ chevron, filter-dd-dot)
     - 4px on .faq-q:focus-visible (keyboard-focus ring only)
   ============================================================ */

/* ============== TOKENS (platform-aligned) ============== */
:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --navy: #0F1923;
  --border: #E2E6EB;
  --divider: #F0F2F5;
  --text: #0F1923;
  --text2: #4A5568;
  --text3: #6B7A8A;
  --text4: #B8C4CE;

  --accent: #B08D57;
  --accent-hover: #96773E;
  --accent-light: rgba(176, 141, 87, 0.07);
  --accent-border: rgba(176, 141, 87, 0.25);

  --red: #DC3545;      --red-bg: #FEF2F2;      --red-t: #B91C1C;
  --amber: #D97706;    --amber-bg: #FFFBEB;    --amber-t: #92400E;
  --green: #059669;    --green-bg: #ECFDF5;    --green-t: #065F46;
  --blue: #3B82F6;     --blue-bg: #EFF6FF;     --blue-t: #1E40AF;
  --purple: #7C3AED;   --purple-bg: #F5F3FF;   --purple-t: #5B21B6;
  --teal: #0D9488;     --teal-bg: #F0FDFA;     --teal-t: #115E59;

  --font: 'DM Sans', sans-serif;
  --sh: 0 1px 3px rgba(15, 25, 35, 0.05);
  --sh-h: 0 8px 24px rgba(15, 25, 35, 0.08);
}

/* ============== SECTION SCAFFOLDING ============== */
/* globals.css adds 96px var(--inner-pad) padding to main > section. */

/* Hero — centered, matches canonical /product/* hero pattern */
.s-hero {
  background: var(--paper, #fff);
  text-align: center;
}
.s-hero-inner {
  max-width: 920px;
  margin: 0 auto;
}
.s-hero .eyebrow { display: inline-block; margin-bottom: 28px; }
.s-hero h1 { margin-bottom: 24px; }
.s-hero .lede { max-width: 820px; margin: 0 auto 36px; }
.cta-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.s-screen {
  background: var(--paper, #fff);
  padding-top: 0;
  padding-bottom: 96px;
  overflow-x: clip;
}

.s-connections { background: var(--paper, #fff); }

.s-num {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.s-head {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
  padding: 96px var(--inner-pad, 32px) 36px;
}
.s-head h2 { margin: 0 0 22px 0; max-width: 30ch; }
.s-head .lede { max-width: 70ch; }

/* ============== BROWSER-MOCKUP "SCREENSHOT" FRAME ============== */
.screen-frame {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--inner-pad, 32px);
}
.screen-chrome {
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.screen-chrome-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text4);
  opacity: 0.5;
}
.screen-chrome-dot:nth-child(1) { background: #ED6A5E; opacity: 0.85; }
.screen-chrome-dot:nth-child(2) { background: #F4BF50; opacity: 0.85; }
.screen-chrome-dot:nth-child(3) { background: #61C554; opacity: 0.85; }
.screen-chrome-url {
  margin-left: 16px;
  font-size: 14px;
  color: var(--text3);
  font-family: var(--font);
}
.screen-body {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 24px 28px 28px;
}

/* ============================================================
   PLATFORM CSS — copied verbatim from client/src/...
   ============================================================ */

/* ── Page header (page-header pattern, simplified) ── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.page-header-h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.page-header-sub { font-size: 15px; color: var(--text3); margin: 2px 0 0; }

/* ── PageTabs (tabs.css) ── */
.page-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ptab {
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  display: inline-block;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.12s;
}
.ptab:hover { color: var(--text); }
.ptab-active, .ptab.on {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ── SubTabs (sub-tabs.css) ── */
.sub-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sub-tab {
  padding: 7px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.sub-tab:hover { color: var(--text); border-color: var(--text3); }
.sub-tab.on {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

/* ── KPI cards (kpi.css) ── */
.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.pd-kpis.cols-6 { grid-template-columns: repeat(6, 1fr); }
.pd-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 24px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
}
.pd-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.pd-kpi-val {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
}
.pd-kpi-sub {
  font-size: 14px;
  color: var(--text3);
  margin: 8px 0 0;
}

/* KPI value colour tints (compliance.css) */
.kpi-green { color: var(--green-t); }
.kpi-amber { color: var(--amber-t); }
.kpi-red   { color: var(--red-t); }

/* Section label (kpi.css) */
.pd-sec-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 12px;
}

/* ── .input (Input/input.css) ── */
.input {
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  font-family: var(--font);
  border: 1px solid var(--border);
  outline: none;
  background: var(--surface);
  color: var(--text);
  min-height: 36px;
  border-radius: 0;
}
.input::placeholder { color: var(--text4); }

/* ── .btn-add-product (utilities.css) ── */
.btn-add-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--text);
  color: var(--bg);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
}

/* ── Filter bar (filter.css) ── */
.filter-bar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  border: none;
  padding: 0;
  margin: 0;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.filter-item:hover { color: var(--text); background: var(--bg); }
.filter-item-active {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

/* FilterDropdown (custom-select pattern) — used for Status/Stock/Margin chips */
.fdrop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 15px;
  font-weight: 500;
  color: var(--text2);
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.fdrop-caret { color: var(--text3); font-size: 12px; }

/* Toolbar row (search + filters + add button) */
.tool-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tool-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 12px;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  min-height: 36px;
}
.tool-search-icon { color: var(--text3); font-size: 16px; }
.tool-search-text { color: var(--text3); font-size: 15px; }
.tool-spacer { flex: 1; }

/* ── Table (table.css) ── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.tbl th {
  padding: 10px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td { padding: 10px 16px; }
.tbl tbody tr { border-bottom: 1px solid var(--divider); }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr.bg { background: var(--bg); }
.tbl .tc { text-align: center; }
.tbl .tr { text-align: right; }
.tbl-dim { color: var(--text3); margin: 2px 0 0; font-size: 14px; }

/* Compact table for inner panels */
.tbl-compact th { padding: 8px 12px; }
.tbl-compact td { padding: 8px 12px; }

/* Single-source-risk warning text in a table cell */
.cell-warn { color: var(--red-t); font-weight: 700; }

/* Margin colour helper (used in Catalog + Pricing) */
.mg-good { color: var(--green-t); font-weight: 700; }
.mg-warn { color: var(--amber-t); font-weight: 700; }
.mg-bad  { color: var(--red-t); font-weight: 700; }

/* Table footer / pagination */
.tbl-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  font-size: 15px;
  color: var(--text3);
}

/* Density override for tables inside the screen-body mockup */
.screen-body .tbl { font-size: 15px; }
.screen-body .tbl th { padding: 8px 10px; font-size: 13px; }
.screen-body .tbl td { padding: 8px 10px; }
.screen-body .tbl-dim { font-size: 13px; }
.screen-body .tbl-foot { padding: 10px 12px; font-size: 14px; }
.tbl-pager { display: inline-flex; align-items: center; gap: 10px; }
.tbl-page-btn {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
}
.tbl-page-disabled { color: var(--text4); cursor: default; }
.csv-link { font-size: 16px; font-weight: 500; color: var(--accent); cursor: pointer; }

/* ── Badge (badge.css) ── */
.badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-green   { background: var(--green-bg); color: var(--green-t); }
.badge-amber   { background: var(--amber-bg); color: var(--amber-t); }
.badge-red     { background: var(--red-bg); color: var(--red-t); }
.badge-blue    { background: var(--blue-bg); color: var(--blue-t); }
.badge-purple  { background: var(--purple-bg); color: var(--purple-t); }
.badge-teal    { background: var(--teal-bg); color: var(--teal-t); }
.badge-accent  { background: rgba(176, 141, 87, 0.12); color: var(--accent); }
.badge-neutral { background: var(--bg); color: var(--text3); }

/* ── Product Row accordion (product-row.css) ── */
.pm-list-head {
  display: grid;
  grid-template-columns: 1fr 120px 100px 100px 36px;
  gap: 12px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pm-row {
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 4px;
  box-shadow: var(--sh);
  overflow: hidden;
}
.pm-row-head {
  display: grid;
  grid-template-columns: 1fr 120px 100px 100px 36px;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  cursor: pointer;
}
.pm-row.open .pm-row-head { background: var(--accent-light); }
.pm-prod-name { font-size: 17px; font-weight: 600; color: var(--text); margin: 0; }
.pm-prod-cat  { font-size: 15px; color: var(--text3); margin: 2px 0 0; }
.pm-row-badge { text-align: center; }
.pm-row-arrow {
  color: var(--text4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.pm-row.open .pm-row-arrow { color: var(--accent); }
.pm-expand {
  display: none;
  border-top: 1px solid var(--divider);
  background: var(--bg);
  padding: 0;
}
.pm-row.open .pm-expand { display: block; }

/* ── Pricing grid (pricing-grid.css) ── */
.pm-row-val { text-align: right; }
.pm-row-val-main { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.pm-row-val-sub  { font-size: 13px; color: var(--text3); margin: 2px 0 0; }

.pm-supp-head {
  display: grid;
  grid-template-columns: 180px 100px 90px 90px 1fr 160px;
  gap: 12px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.pm-supp-row {
  display: grid;
  grid-template-columns: 180px 100px 90px 90px 1fr 160px;
  gap: 12px;
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid var(--divider);
}
.pm-supp-row:last-child { border-bottom: none; }
.pm-supp-name { font-size: 17px; font-weight: 600; color: var(--text); }
.pm-supp-name .star { color: var(--green-t); font-size: 13px; margin-left: 4px; font-weight: 700; }
.pm-supp-val { font-size: 16px; font-weight: 600; color: var(--text); }
.pm-supp-light { font-size: 15px; color: var(--text2); }
.pm-supp-meta  { font-size: 13px; color: var(--text3); margin: 2px 0 0; }

.pm-status {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.pm-status.active     { color: var(--green-t); }
.pm-status.expiring   { color: var(--amber-t); }
.pm-status.expired    { color: var(--red-t); }
.pm-status.negotiating{ color: var(--blue-t); }

.pm-tiers-inline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-tier-pill {
  font-size: 13px;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}
.pm-tier-pill strong { color: var(--text); font-weight: 700; }

/* ── Compliance dots indicator (NEW — compliance.css pattern) ── */
.comp-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.comp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.comp-dot.valid    { background: var(--green); }
.comp-dot.expiring { background: var(--amber); }
.comp-dot.expired  { background: var(--red); }
.comp-dot.missing  { background: transparent; border: 1.5px solid var(--text4); }

/* ── Alert strips (compliance.css) ── */
.alert-strip {
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
}
.alert-strip-red   { background: rgba(239, 68, 68, 0.06); color: var(--red-t); }
.alert-strip-amber { background: rgba(251, 191, 36, 0.06); color: var(--amber-t); }

/* Compliance nested cert table inside pm-expand */
.comp-nested-table { padding: 0 22px 14px; background: var(--bg); }
.comp-nested-table .tbl { box-shadow: none; }

/* ── Inventory: expanded action panel (InventoryPage pattern) ── */
.inv-name { white-space: nowrap; }
.inv-expand-panel {
  padding: 18px 22px;
  background: var(--bg);
  border-top: 1px solid var(--divider);
}
.inv-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inv-summary-item p:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
.inv-summary-item p:last-child {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.inv-summary-item p:last-child.c-green-t { color: var(--green-t); }
.inv-summary-item p:last-child.t-14 {
  font-size: 16px;
  font-weight: 600;
}

.inv-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.inv-action-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
}
.inv-action-btn:hover { color: var(--text); border-color: var(--text3); }
.inv-action-btn.on {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

/* ── Utility classes used by JSX ── */
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }
.t-11 { font-size: 13px; }
.t-12 { font-size: 14px; }
.t-13 { font-size: 15px; }
.t-14 { font-size: 16px; }
.t-16 { font-size: 17px; }
.c-text2 { color: var(--text2); }
.c-text3 { color: var(--text3); }
.c-text4 { color: var(--text4); }
.c-green-t { color: var(--green-t); }
.c-amber-t { color: var(--amber-t); }
.c-red-t   { color: var(--red-t); }
.c-accent  { color: var(--accent); }
.ml-8 { margin-left: 8px; }

/* ============================================================
   CONNECTIONS GRID — Products is the most-connected entity
   ============================================================ */
.conn-grid {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.conn-card {
  background: var(--surface);
  border: 1px solid var(--line, #e5e5e5);
  padding: 22px 24px;
}
.conn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink, #0F1923);
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.conn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}
.conn-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #525252);
  margin: 0;
}
.conn-card code {
  font-family: var(--font);
  background: var(--accent-light);
  color: var(--accent);
  padding: 1px 5px;
  font-size: 14px;
}

/* ============================================================
   FAQ — VERBATIM from marketing/site/product/index.html
   non-interactive: all Q&A visible, no accordion, no chevron
   ============================================================ */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--line, #e5e5e5);
}
.faq-item {
  border-bottom: 1px solid var(--line, #e5e5e5);
  padding: 24px 0;
}
.faq-q {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #0F1923);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.faq-a {
  font-size: 17px;
  color: var(--muted, #525252);
  line-height: 1.65;
  max-width: 760px;
  margin: 0;
}

/* ============================================================
   FINAL CTA STRIP
   ============================================================ */
.s-cta {
  background: var(--ink, #0F1923);
  color: #fff;
}
.s-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.s-cta-h2 {
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 18px 0;
}
.s-cta-lede {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 32px 0;
}
.s-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.s-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.s-cta .btn-ghost:hover { border-color: #fff; }

/* ============================================================
   GRID ITEM MIN-WIDTH FIX
   ─────────────────────────────────────────────────────────────
   Grid items default to `min-width: auto` (= min-content of the
   cell). When min-content exceeds the 1fr allocation, the column
   overflows the container. Setting `min-width: 0` lets the grid
   honor 1fr. Scoped to .screen-body mockup screens.
   ============================================================ */
.screen-body .grid-2 > *,
.screen-body .grid-3 > *,
.screen-body .grid-4 > *,
.screen-body .pd-kpis > *,
.screen-body .pipe-cols > * {
  min-width: 0;
}

/* ============== PROBLEM SECTION ============== */
.s-problem { padding: 96px var(--inner-pad, 32px); }
.s-problem-inner { max-width: var(--max-w, 1200px); margin: 0 auto; }
.s-problem-head { max-width: 860px; margin-bottom: 56px; }
.s-problem-head .eyebrow { color: var(--accent); margin-bottom: 16px; }
.s-problem-head h2 { margin-bottom: 16px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem-card {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e5e5e5);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.problem-card h3 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.3;
  color: var(--ink, #0F1923);
  margin: 0;
}
.problem-card p {
  font-size: 16.5px; line-height: 1.65;
  color: var(--muted, #525252);
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .pd-kpis { grid-template-columns: repeat(2, 1fr); }
  .pd-kpis.cols-6 { grid-template-columns: repeat(3, 1fr); }
  .pm-supp-head,
  .pm-supp-row { grid-template-columns: 140px 80px 70px 70px 1fr 140px; }
}
@media (max-width: 768px) {
  /* Problem section: stack to 1 col, tighter padding */
  .s-problem { padding: 56px 20px; }
  .s-problem-head { margin-bottom: 32px; }
  .problem-grid { grid-template-columns: 1fr; gap: 16px; }
  .problem-card { padding: 24px 22px; }
  .problem-card h3 { font-size: 19px; }
  .problem-card p { font-size: 15px; }
  .s-head { padding: 64px 20px 28px; }
  .screen-frame { padding: 0 16px; }
  .screen-body { padding: 16px 14px 18px; }
  .pd-kpis, .pd-kpis.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .pd-kpi-val { font-size: 22px; }
  .pd-kpi { padding: 14px 16px; }
  .pm-supp-head { display: none; }
  .pm-supp-row  { grid-template-columns: 1fr auto auto; gap: 8px; }
  .conn-grid { grid-template-columns: 1fr; }
  .ptab { font-size: 16px; padding: 8px 12px; }

  /* Scroll wrapper */
  .tbl-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Catalog: Catalog tab only, All margin hidden, footer text hidden ── */
  [aria-labelledby="cat-h2"] .ptab:nth-child(1),
  [aria-labelledby="cat-h2"] .ptab:nth-child(3),
  [aria-labelledby="cat-h2"] .ptab:nth-child(4),
  [aria-labelledby="cat-h2"] .ptab:nth-child(5),
  [aria-labelledby="cat-h2"] .ptab:nth-child(6) { display: none; }
  [aria-labelledby="cat-h2"] .screen-frame { padding: 0; }
  [aria-labelledby="cat-h2"] .tbl { min-width: 560px; max-width: none; }
  [aria-labelledby="cat-h2"] .tbl th { white-space: normal; }
  /* Hide All status (2nd fdrop) so All stock + All margin show on same row */
  [aria-labelledby="cat-h2"] .fdrop:nth-of-type(2) { display: none; }
  .cat-count { display: none; }
  .cat-csv { display: none; }

  /* ── Pricing & Economics: tab only, expanded rows collapsed, full scroll ── */
  [aria-labelledby="pr-h2"] .ptab:nth-child(1),
  [aria-labelledby="pr-h2"] .ptab:nth-child(2),
  [aria-labelledby="pr-h2"] .ptab:nth-child(4),
  [aria-labelledby="pr-h2"] .ptab:nth-child(5),
  [aria-labelledby="pr-h2"] .ptab:nth-child(6) { display: none; }
  [aria-labelledby="pr-h2"] .pm-row.open .pm-expand { display: none; }
  [aria-labelledby="pr-h2"] .screen-frame { padding: 0; }
  [aria-labelledby="pr-h2"] .pm-list-head { width: 520px; max-width: none; }
  [aria-labelledby="pr-h2"] .pm-row { width: 520px; max-width: none; }
  [aria-labelledby="pr-h2"] .pm-row-head { width: 520px; max-width: none; }

  /* ── Inventory: Inventory tab only; filter-bar as dropdown next to All warehouses ── */
  [aria-labelledby="inv-h2"] .ptab:nth-child(1),
  [aria-labelledby="inv-h2"] .ptab:nth-child(2),
  [aria-labelledby="inv-h2"] .ptab:nth-child(3),
  [aria-labelledby="inv-h2"] .ptab:nth-child(4),
  [aria-labelledby="inv-h2"] .ptab:nth-child(6) { display: none; }
  [aria-labelledby="inv-h2"] .tbl { min-width: 480px; max-width: none; }
  [aria-labelledby="inv-h2"] .tbl th { white-space: normal; }
  /* Convert filter-bar to single dropdown trigger */
  [aria-labelledby="inv-h2"] .filter-item:not(.filter-item-active) { display: none; }
  [aria-labelledby="inv-h2"] .filter-item-active {
    background: var(--surface); color: var(--text2);
    border: 1px solid var(--border); min-height: 36px;
  }
  [aria-labelledby="inv-h2"] .filter-item-active::after { content: ' ▾'; margin-left: 4px; }

  /* ── Compliance: Compliance tab only; sub-tabs as dropdown; cert filter as dropdown ── */
  [aria-labelledby="comp-h2"] .ptab:nth-child(1),
  [aria-labelledby="comp-h2"] .ptab:nth-child(2),
  [aria-labelledby="comp-h2"] .ptab:nth-child(3),
  [aria-labelledby="comp-h2"] .ptab:nth-child(4),
  [aria-labelledby="comp-h2"] .ptab:nth-child(5) { display: none; }
  .comp-head-sub { display: none; }
  /* Sub-tabs as full-width dropdown (Certificates active) */
  [aria-labelledby="comp-h2"] .sub-tabs { display: flex; }
  [aria-labelledby="comp-h2"] .sub-tab:not(.on) { display: none; }
  [aria-labelledby="comp-h2"] .sub-tab.on { flex: 1; }
  [aria-labelledby="comp-h2"] .sub-tab.on::after { content: ' ▾'; margin-left: 6px; }
  /* Cert filter-bar as compact dropdown next to search */
  [aria-labelledby="comp-h2"] .filter-item:not(.filter-item-active) { display: none; }
  [aria-labelledby="comp-h2"] .filter-item-active {
    background: var(--surface); color: var(--text2);
    border: 1px solid var(--border); min-height: 36px;
  }
  [aria-labelledby="comp-h2"] .filter-item-active::after { content: ' ▾'; margin-left: 4px; }
  [aria-labelledby="comp-h2"] .tool-search { flex: 1 1 auto; min-width: 0; }
  /* pm-list scroll */
  [aria-labelledby="comp-h2"] .screen-frame { padding: 0; }
  [aria-labelledby="comp-h2"] .pm-list-head,
  [aria-labelledby="comp-h2"] .pm-row-head { width: 520px; max-width: none; }
  [aria-labelledby="comp-h2"] .pm-row { width: 520px; max-width: none; }

  /* ─── COMPRESSION RULE (Option C): catalog is the hero. Pricing, Inventory,
     Compliance replaced with a compact summary card on mobile —
     section title (h1) + caption (page-header-sub) + 4-KPI compact strip.
     Everything else inside the mock (chrome, tabs, search, table) hidden. ─── */
  [aria-labelledby="pr-h2"] .screen-chrome,
  [aria-labelledby="pr-h2"] .page-tabs,
  [aria-labelledby="pr-h2"] .sub-tabs,
  [aria-labelledby="pr-h2"] .tool-row,
  [aria-labelledby="pr-h2"] .pm-list-head,
  [aria-labelledby="pr-h2"] .pm-row,
  [aria-labelledby="pr-h2"] .tbl-scroll-wrap,
  [aria-labelledby="pr-h2"] .cat-footer,
  [aria-labelledby="inv-h2"] .screen-chrome,
  [aria-labelledby="inv-h2"] .page-tabs,
  [aria-labelledby="inv-h2"] .sub-tabs,
  [aria-labelledby="inv-h2"] .tool-row,
  [aria-labelledby="inv-h2"] .tbl-scroll-wrap,
  [aria-labelledby="inv-h2"] .cat-footer,
  [aria-labelledby="inv-h2"] table,
  [aria-labelledby="comp-h2"] .screen-chrome,
  [aria-labelledby="comp-h2"] .page-tabs,
  [aria-labelledby="comp-h2"] .sub-tabs,
  [aria-labelledby="comp-h2"] .tool-row,
  [aria-labelledby="comp-h2"] .pm-list-head,
  [aria-labelledby="comp-h2"] .pm-row,
  [aria-labelledby="comp-h2"] .tbl-scroll-wrap,
  [aria-labelledby="comp-h2"] .cat-footer,
  [aria-labelledby="comp-h2"] .comp-head-sub,
  [aria-labelledby="comp-h2"] .pd-sec-label,
  [aria-labelledby="comp-h2"] .btn-add-product { display: none; }

  /* Compact KPI strip — 4 cols, smaller padding + fonts so it fits on one row */
  [aria-labelledby="pr-h2"] .pd-kpis,
  [aria-labelledby="inv-h2"] .pd-kpis,
  [aria-labelledby="comp-h2"] .pd-kpis {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 0;
  }
  [aria-labelledby="pr-h2"] .pd-kpi,
  [aria-labelledby="inv-h2"] .pd-kpi,
  [aria-labelledby="comp-h2"] .pd-kpi {
    padding: 10px 6px;
  }
  [aria-labelledby="pr-h2"] .pd-kpi-label,
  [aria-labelledby="inv-h2"] .pd-kpi-label,
  [aria-labelledby="comp-h2"] .pd-kpi-label {
    font-size: 9px;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
  }
  [aria-labelledby="pr-h2"] .pd-kpi-val,
  [aria-labelledby="inv-h2"] .pd-kpi-val,
  [aria-labelledby="comp-h2"] .pd-kpi-val {
    font-size: 16px;
  }
  [aria-labelledby="pr-h2"] .pd-kpi-sub,
  [aria-labelledby="inv-h2"] .pd-kpi-sub,
  [aria-labelledby="comp-h2"] .pd-kpi-sub { display: none; }
}
/* cache-bust 1779549529 */