feat: unify pdf datasheet architecture and regenerate all products

scripts/pdf/react-pdf/DatasheetDocument.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Document, Image, Page, Text, View } from '@react-pdf/renderer';
+
+import type { DatasheetModel, DatasheetVoltageTable } from '../model/types';
+import { CONFIG } from '../model/utils';
+import { styles } from './styles';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { Section } from './components/Section';
+import { KeyValueGrid } from './components/KeyValueGrid';
+import { DenseTable } from './components/DenseTable';
+
+type Assets = {
+  logoDataUrl: string | null;
+  heroDataUrl: string | null;
+  qrDataUrl: string | null;
+};
+
+export function DatasheetDocument(props: {
+  model: DatasheetModel;
+  assets: Assets;
+}): React.ReactElement {
+  const { model, assets } = props;
+  const headerTitle = model.labels.datasheet;
+
+  // Dense tables require compact headers (no wrapping). Use standard abbreviations.
+  const firstColLabel = model.locale === 'de' ? 'Adern & QS' : 'Cores & CS';
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
+        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />
+
+        <Text style={styles.h1}>{model.product.name}</Text>
+        {model.product.categoriesLine ? (
+          <Text style={styles.subhead}>{model.product.categoriesLine}</Text>
+        ) : null}
+
+        <View style={styles.heroBox}>
+          {assets.heroDataUrl ? (
+            <Image src={assets.heroDataUrl} style={styles.heroImage} />
+          ) : (
+            <Text style={styles.noImage}>{model.labels.noImage}</Text>
+          )}
+        </View>
+
+        {model.product.descriptionText ? (
+          <Section title={model.labels.description}>
+            <Text style={styles.body}>{model.product.descriptionText}</Text>
+          </Section>
+        ) : null}
+
+        {model.technicalItems.length ? (
+          <Section title={model.labels.technicalData}>
+            <KeyValueGrid items={model.technicalItems} />
+          </Section>
+        ) : null}
+      </Page>
+
+      {/*
+        Render all voltage sections in a single flow so React-PDF can paginate naturally.
+        This avoids hard page breaks that waste remaining whitespace at the bottom of a page.
+      */}
+      <Page size="A4" style={styles.page}>
+        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
+        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />
+
+        {model.voltageTables.map((t: DatasheetVoltageTable) => (
+          <View key={t.voltageLabel} style={{ marginBottom: 14 }} break={false}>
+            <Text
+              style={styles.sectionTitle}
+            >{`${model.labels.crossSection} — ${t.voltageLabel}`}</Text>
+
+            <DenseTable
+              table={{ columns: t.columns, rows: t.rows }}
+              firstColLabel={firstColLabel}
+            />
+          </View>
+        ))}
+
+        {model.legendItems.length ? (
+          <Section title={model.locale === 'de' ? 'ABKÜRZUNGEN' : 'ABBREVIATIONS'}>
+            <KeyValueGrid items={model.legendItems} />
+          </Section>
+        ) : null}
+      </Page>
+    </Document>
+  );
+}

scripts/pdf/react-pdf/assets.ts

@@ -0,0 +1,87 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+type SharpLike = (
+  input?: unknown,
+  options?: unknown,
+) => { png: () => { toBuffer: () => Promise<Buffer> } };
+
+let sharpFn: SharpLike | null = null;
+async function getSharp(): Promise<SharpLike> {
+  if (sharpFn) return sharpFn;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mod: any = await import('sharp');
+  sharpFn = (mod?.default || mod) as SharpLike;
+  return sharpFn;
+}
+
+const PUBLIC_DIR = path.join(process.cwd(), 'public');
+
+async function fetchBytes(url: string): Promise<Uint8Array> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status} ${res.statusText}`);
+  return new Uint8Array(await res.arrayBuffer());
+}
+
+async function readBytesFromPublic(localPath: string): Promise<Uint8Array> {
+  const abs = path.join(PUBLIC_DIR, localPath.replace(/^\//, ''));
+  return new Uint8Array(fs.readFileSync(abs));
+}
+
+function transformLogoSvgToPrintBlack(svg: string): string {
+  return svg
+    .replace(/fill\s*:\s*white/gi, 'fill:#000000')
+    .replace(/fill\s*=\s*"white"/gi, 'fill="#000000"')
+    .replace(/fill\s*=\s*'white'/gi, "fill='#000000'")
+    .replace(/fill\s*:\s*#[0-9a-fA-F]{6}/gi, 'fill:#000000')
+    .replace(/fill\s*=\s*"#[0-9a-fA-F]{6}"/gi, 'fill="#000000"')
+    .replace(/fill\s*=\s*'#[0-9a-fA-F]{6}'/gi, "fill='#000000'");
+}
+
+async function toPngBytes(inputBytes: Uint8Array, inputHint: string): Promise<Uint8Array> {
+  const ext = (path.extname(inputHint).toLowerCase() || '').replace('.', '');
+  if (ext === 'png') return inputBytes;
+
+  if (
+    ext === 'svg' &&
+    (/\/media\/logo\.svg$/i.test(inputHint) || /\/logo-blue\.svg$/i.test(inputHint))
+  ) {
+    const svg = Buffer.from(inputBytes).toString('utf8');
+    inputBytes = new Uint8Array(Buffer.from(transformLogoSvgToPrintBlack(svg), 'utf8'));
+  }
+
+  const sharp = await getSharp();
+  return new Uint8Array(await sharp(Buffer.from(inputBytes)).png().toBuffer());
+}
+
+function toDataUrlPng(bytes: Uint8Array): string {
+  return `data:image/png;base64,${Buffer.from(bytes).toString('base64')}`;
+}
+
+export async function loadImageAsPngDataUrl(src: string | null): Promise<string | null> {
+  if (!src) return null;
+  try {
+    if (src.startsWith('/')) {
+      const bytes = await readBytesFromPublic(src);
+      const png = await toPngBytes(bytes, src);
+      return toDataUrlPng(png);
+    }
+    const bytes = await fetchBytes(src);
+    const png = await toPngBytes(bytes, src);
+    return toDataUrlPng(png);
+  } catch {
+    return null;
+  }
+}
+
+export async function loadQrAsPngDataUrl(data: string): Promise<string | null> {
+  try {
+    const safe = encodeURIComponent(data);
+    const url = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${safe}`;
+    const bytes = await fetchBytes(url);
+    const png = await toPngBytes(bytes, url);
+    return toDataUrlPng(png);
+  } catch {
+    return null;
+  }
+}

scripts/pdf/react-pdf/components/DenseTable.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { Text, View } from '@react-pdf/renderer';
+
+import type { DatasheetVoltageTable } from '../../model/types';
+import { styles } from '../styles';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, n));
+}
+
+function normTextForMeasure(v: unknown): string {
+  return String(v ?? '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function textLen(v: unknown): number {
+  return normTextForMeasure(v).length;
+}
+
+function distributeWithMinMax(
+  weights: number[],
+  total: number,
+  minEach: number,
+  maxEach: number,
+): number[] {
+  const n = weights.length;
+  if (!n) return [];
+
+  const mins = Array.from({ length: n }, () => minEach);
+  const maxs = Array.from({ length: n }, () => maxEach);
+
+  // If mins don't fit, scale them down proportionally.
+  const minSum = mins.reduce((a, b) => a + b, 0);
+  if (minSum > total) {
+    const k = total / minSum;
+    return mins.map((m) => m * k);
+  }
+
+  const result = mins.slice();
+  let remaining = total - minSum;
+  let remainingIdx = Array.from({ length: n }, (_, i) => i);
+
+  // Distribute remaining proportionally, respecting max constraints.
+  // Loop is guaranteed to terminate because each iteration either:
+  // - removes at least one index due to hitting max, or
+  // - exhausts `remaining`.
+  while (remaining > 1e-9 && remainingIdx.length) {
+    const wSum = remainingIdx.reduce((acc, i) => acc + Math.max(0, weights[i] || 0), 0);
+    if (wSum <= 1e-9) {
+      // No meaningful weights: distribute evenly.
+      const even = remaining / remainingIdx.length;
+      for (const i of remainingIdx) result[i] += even;
+      remaining = 0;
+      break;
+    }
+
+    const nextIdx: number[] = [];
+    for (const i of remainingIdx) {
+      const w = Math.max(0, weights[i] || 0);
+      const add = (w / wSum) * remaining;
+      const capped = Math.min(result[i] + add, maxs[i]);
+      const used = capped - result[i];
+      result[i] = capped;
+      remaining -= used;
+      if (result[i] + 1e-9 < maxs[i]) nextIdx.push(i);
+    }
+    remainingIdx = nextIdx;
+  }
+
+  // Numerical guard: force exact sum by adjusting the last column.
+  const sum = result.reduce((a, b) => a + b, 0);
+  const drift = total - sum;
+  if (Math.abs(drift) > 1e-9) result[result.length - 1] += drift;
+
+  return result;
+}
+
+export function DenseTable(props: {
+  table: Pick<DatasheetVoltageTable, 'columns' | 'rows'>;
+  firstColLabel: string;
+}): React.ReactElement {
+  const cols = props.table.columns;
+  const rows = props.table.rows;
+
+  const headerText = (label: string): string => {
+    // Table headers must NEVER wrap into a second line.
+    // react-pdf can wrap on spaces, so we replace whitespace with NBSP.
+    return String(label || '')
+      .replace(/\s+/g, '\u00A0')
+      .trim();
+  };
+
+  // Column widths: use explicit percentages (no rounding gaps) so the table always
+  // consumes the full content width.
+  // Goal:
+  // - keep the designation column *not too wide*
+  // - distribute data columns by estimated content width (header + cells)
+  //   so columns better fit their data
+  // Make first column denser so numeric columns get more room.
+  // (Long designations can still wrap in body if needed, but table scanability
+  // benefits more from wider data columns.)
+  const cfgMin = 0.14;
+  const cfgMax = 0.23;
+
+  // A content-based heuristic.
+  // React-PDF doesn't expose a reliable text-measurement API at render time,
+  // so we approximate width by string length (compressed via sqrt to reduce outliers).
+  const cfgContentLen = Math.max(
+    textLen(props.firstColLabel),
+    ...rows.map((r) => textLen(r.configuration)),
+    8,
+  );
+  const dataContentLens = cols.map((c, ci) => {
+    const headerL = textLen(c.label);
+    let cellMax = 0;
+    for (const r of rows) cellMax = Math.max(cellMax, textLen(r.cells[ci]));
+    // Slightly prioritize the header (scanability) over a single long cell.
+    return Math.max(headerL * 1.15, cellMax, 3);
+  });
+
+  // Use mostly-linear weights so long headers get noticeably more space.
+  const cfgWeight = cfgContentLen * 1.05;
+  const dataWeights = dataContentLens.map((l) => l);
+  const dataWeightSum = dataWeights.reduce((a, b) => a + b, 0);
+  const rawCfgPct = dataWeightSum > 0 ? cfgWeight / (cfgWeight + dataWeightSum) : 0.28;
+  let cfgPct = clamp(rawCfgPct, cfgMin, cfgMax);
+
+  // Ensure a minimum per-data-column width; if needed, shrink cfgPct.
+  // These floors are intentionally generous. Too-narrow columns are worse than a
+  // slightly narrower first column for scanability.
+  const minDataPct =
+    cols.length >= 14 ? 0.045 : cols.length >= 12 ? 0.05 : cols.length >= 10 ? 0.055 : 0.06;
+  const cfgPctMaxForMinData = 1 - cols.length * minDataPct;
+  if (Number.isFinite(cfgPctMaxForMinData)) cfgPct = Math.min(cfgPct, cfgPctMaxForMinData);
+  cfgPct = clamp(cfgPct, cfgMin, cfgMax);
+
+  const dataTotal = Math.max(0, 1 - cfgPct);
+  const maxDataPct = Math.min(0.24, Math.max(minDataPct * 2.8, dataTotal * 0.55));
+  const dataPcts = distributeWithMinMax(dataWeights, dataTotal, minDataPct, maxDataPct);
+
+  const cfgW = `${(cfgPct * 100).toFixed(4)}%`;
+  const dataWs = dataPcts.map((p, idx) => {
+    // Keep the last column as the remainder so percentages sum to exactly 100%.
+    if (idx === dataPcts.length - 1) {
+      const used = dataPcts.slice(0, -1).reduce((a, b) => a + b, 0);
+      const remainder = Math.max(0, dataTotal - used);
+      return `${(remainder * 100).toFixed(4)}%`;
+    }
+    return `${(p * 100).toFixed(4)}%`;
+  });
+
+  const headerFontSize =
+    cols.length >= 14 ? 5.7 : cols.length >= 12 ? 5.9 : cols.length >= 10 ? 6.2 : 6.6;
+
+  return (
+    <View style={styles.tableWrap} break={false}>
+      <View style={styles.tableHeader} wrap={false}>
+        <View style={{ width: cfgW }}>
+          <Text
+            style={[
+              styles.tableHeaderCell,
+              styles.tableHeaderCellCfg,
+              { fontSize: headerFontSize, paddingHorizontal: 3 },
+              cols.length ? styles.tableHeaderCellDivider : null,
+            ]}
+            wrap={false}
+          >
+            {headerText(props.firstColLabel)}
+          </Text>
+        </View>
+        {cols.map((c, idx) => {
+          const isLast = idx === cols.length - 1;
+          return (
+            <View key={c.key} style={{ width: dataWs[idx] }}>
+              <Text
+                style={[
+                  styles.tableHeaderCell,
+                  { fontSize: headerFontSize, paddingHorizontal: 3 },
+                  !isLast ? styles.tableHeaderCellDivider : null,
+                ]}
+                wrap={false}
+              >
+                {headerText(c.label)}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+
+      {rows.map((r, ri) => (
+        <View
+          key={`${r.configuration}-${ri}`}
+          style={[styles.tableRow, ri % 2 === 0 ? styles.tableRowAlt : null]}
+          wrap={false}
+          // If the row doesn't fit, move the whole row to the next page.
+          // This prevents page breaks mid-row.
+          minPresenceAhead={16}
+        >
+          <View style={{ width: cfgW }} wrap={false}>
+            <Text
+              style={[
+                styles.tableCell,
+                styles.tableCellCfg,
+                // Denser first column: slightly smaller type + tighter padding.
+                { fontSize: 6.2, paddingHorizontal: 3 },
+                cols.length ? styles.tableCellDivider : null,
+              ]}
+              wrap={false}
+            >
+              {r.configuration}
+            </Text>
+          </View>
+          {r.cells.map((cell, ci) => {
+            const isLast = ci === r.cells.length - 1;
+            return (
+              <View key={`${cols[ci]?.key || ci}`} style={{ width: dataWs[ci] }} wrap={false}>
+                <Text
+                  style={[styles.tableCell, !isLast ? styles.tableCellDivider : null]}
+                  wrap={false}
+                >
+                  {cell}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}

scripts/pdf/react-pdf/components/Footer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Text, View } from '@react-pdf/renderer';
+
+import { styles } from '../styles';
+
+export function Footer(props: { locale: 'en' | 'de'; siteUrl?: string }): React.ReactElement {
+  const date = new Date().toLocaleDateString(props.locale === 'en' ? 'en-US' : 'de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  const siteUrl = props.siteUrl || 'https://klz-cables.com';
+
+  return (
+    <View style={styles.footer} fixed>
+      <Text>{siteUrl}</Text>
+      <Text>{date}</Text>
+      <Text render={({ pageNumber, totalPages }) => `${pageNumber}/${totalPages}`} />
+    </View>
+  );
+}

scripts/pdf/react-pdf/components/Header.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Image, Text, View } from '@react-pdf/renderer';
+
+import { styles } from '../styles';
+
+export function Header(props: {
+  title: string;
+  logoDataUrl?: string | null;
+  qrDataUrl?: string | null;
+}): React.ReactElement {
+  return (
+    <View style={styles.header} fixed>
+      <View style={styles.headerLeft}>
+        {props.logoDataUrl ? (
+          <Image src={props.logoDataUrl} style={styles.logo} />
+        ) : (
+          <View style={styles.brandFallback}>
+            <Text style={styles.brandFallbackKlz}>KLZ</Text>
+            <Text style={styles.brandFallbackCables}>Cables</Text>
+          </View>
+        )}
+      </View>
+      <View style={styles.headerRight}>
+        <Text style={styles.headerTitle}>{props.title}</Text>
+        {props.qrDataUrl ? <Image src={props.qrDataUrl} style={styles.qr} /> : null}
+      </View>
+    </View>
+  );
+}

scripts/pdf/react-pdf/components/KeyValueGrid.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Text, View } from '@react-pdf/renderer';
+
+import type { KeyValueItem } from '../../model/types';
+import { styles } from '../styles';
+
+export function KeyValueGrid(props: { items: KeyValueItem[] }): React.ReactElement | null {
+  const items = (props.items || []).filter((i) => i.label && i.value);
+  if (!items.length) return null;
+
+  // 4-column layout: (label, value, label, value)
+  const rows: Array<[KeyValueItem, KeyValueItem | null]> = [];
+  for (let i = 0; i < items.length; i += 2) {
+    rows.push([items[i], items[i + 1] || null]);
+  }
+
+  return (
+    <View style={styles.kvGrid}>
+      {rows.map(([left, right], rowIndex) => {
+        const isLast = rowIndex === rows.length - 1;
+        const leftValue = left.unit ? `${left.value} ${left.unit}` : left.value;
+        const rightValue = right ? (right.unit ? `${right.value} ${right.unit}` : right.value) : '';
+
+        return (
+          <View
+            key={`${left.label}-${rowIndex}`}
+            style={[
+              styles.kvRow,
+              rowIndex % 2 === 0 ? styles.kvRowAlt : null,
+              isLast ? styles.kvRowLast : null,
+            ]}
+            wrap={false}
+          >
+            <View style={[styles.kvCell, { width: '23%' }]}>
+              <Text style={styles.kvLabelText}>{left.label}</Text>
+            </View>
+            <View style={[styles.kvCell, styles.kvMidDivider, { width: '27%' }]}>
+              <Text style={styles.kvValueText}>{leftValue}</Text>
+            </View>
+            <View style={[styles.kvCell, { width: '23%' }]}>
+              <Text style={styles.kvLabelText}>{right?.label || ''}</Text>
+            </View>
+            <View style={[styles.kvCell, { width: '27%' }]}>
+              <Text style={styles.kvValueText}>{rightValue}</Text>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

scripts/pdf/react-pdf/components/Section.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Text, View } from '@react-pdf/renderer';
+
+import { styles } from '../styles';
+
+export function Section(props: {
+  title: string;
+  children: React.ReactNode;
+  boxed?: boolean;
+  minPresenceAhead?: number;
+}): React.ReactElement {
+  const boxed = props.boxed ?? true;
+  return (
+    <View
+      style={boxed ? styles.section : styles.sectionPlain}
+      minPresenceAhead={props.minPresenceAhead}
+    >
+      <Text style={styles.sectionTitle}>{props.title}</Text>
+      {props.children}
+    </View>
+  );
+}

scripts/pdf/react-pdf/generate-datasheet-pdf.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { renderToBuffer } from '@react-pdf/renderer';
+
+import type { ProductData } from '../model/types';
+import { buildDatasheetModel } from '../model/build-datasheet-model';
+import { loadImageAsPngDataUrl, loadQrAsPngDataUrl } from './assets';
+import { DatasheetDocument } from './DatasheetDocument';
+
+export async function generateDatasheetPdfBuffer(args: {
+  product: ProductData;
+  locale: 'en' | 'de';
+}): Promise<Buffer> {
+  const model = buildDatasheetModel({ product: args.product, locale: args.locale });
+
+  const logoDataUrl =
+    (await loadImageAsPngDataUrl('/logo-blue.svg')) ||
+    (await loadImageAsPngDataUrl('/logo-white.svg')) ||
+    null;
+
+  const heroDataUrl = await loadImageAsPngDataUrl(model.product.heroSrc);
+  const qrDataUrl = await loadQrAsPngDataUrl(model.product.productUrl);
+
+  const element = (
+    <DatasheetDocument model={model} assets={{ logoDataUrl, heroDataUrl, qrDataUrl }} />
+  );
+  return await renderToBuffer(element);
+}

scripts/pdf/react-pdf/styles.ts

@@ -0,0 +1,155 @@
+import { Font, StyleSheet } from '@react-pdf/renderer';
+
+// Prevent automatic word hyphenation, which can create multi-line table headers
+// even when we try to keep them single-line.
+Font.registerHyphenationCallback((word) => [word]);
+
+export const COLORS = {
+  navy: '#0E2A47',
+  mediumGray: '#6B7280',
+  darkGray: '#1F2933',
+  lightGray: '#E6E9ED',
+  almostWhite: '#F8F9FA',
+  headerBg: '#F6F8FB',
+} as const;
+
+export const styles = StyleSheet.create({
+  page: {
+    paddingTop: 54,
+    paddingLeft: 54,
+    paddingRight: 54,
+    paddingBottom: 72,
+    fontFamily: 'Helvetica',
+    fontSize: 10,
+    color: COLORS.darkGray,
+    backgroundColor: '#FFFFFF',
+  },
+
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.headerBg,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+    marginBottom: 16,
+  },
+  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  logo: { width: 110, height: 24, objectFit: 'contain' },
+  brandFallback: { flexDirection: 'row', alignItems: 'baseline', gap: 6 },
+  brandFallbackKlz: { fontSize: 18, fontWeight: 700, color: COLORS.navy },
+  brandFallbackCables: { fontSize: 10, color: COLORS.mediumGray },
+  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  headerTitle: { fontSize: 9, fontWeight: 700, color: COLORS.navy, letterSpacing: 0.2 },
+  qr: { width: 34, height: 34, objectFit: 'contain' },
+
+  footer: {
+    position: 'absolute',
+    left: 54,
+    right: 54,
+    bottom: 36,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.lightGray,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    fontSize: 8,
+    color: COLORS.mediumGray,
+  },
+
+  h1: { fontSize: 18, fontWeight: 700, color: COLORS.navy, marginBottom: 6 },
+  subhead: { fontSize: 10.5, color: COLORS.mediumGray, marginBottom: 14 },
+
+  heroBox: {
+    height: 110,
+    borderWidth: 1,
+    borderColor: COLORS.lightGray,
+    backgroundColor: COLORS.almostWhite,
+    marginBottom: 16,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
+  noImage: { fontSize: 8, color: COLORS.mediumGray, paddingHorizontal: 12 },
+
+  section: {
+    borderWidth: 1,
+    borderColor: COLORS.lightGray,
+    padding: 14,
+    marginBottom: 14,
+  },
+  sectionPlain: {
+    paddingVertical: 2,
+    marginBottom: 12,
+  },
+  sectionTitle: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: COLORS.navy,
+    marginBottom: 8,
+    letterSpacing: 0.2,
+  },
+  body: { fontSize: 10, lineHeight: 1.5, color: COLORS.darkGray },
+
+  kvGrid: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: COLORS.lightGray,
+  },
+  kvRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+  },
+  kvRowAlt: { backgroundColor: COLORS.almostWhite },
+  kvRowLast: { borderBottomWidth: 0 },
+  kvCell: { paddingVertical: 6, paddingHorizontal: 8 },
+  // Visual separator between (label,value) pairs in the 4-col KV grid.
+  // Matches the engineering-table look and improves scanability.
+  kvMidDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.lightGray,
+  },
+  kvLabelText: { fontSize: 8.5, fontWeight: 700, color: COLORS.mediumGray },
+  kvValueText: { fontSize: 9.5, color: COLORS.darkGray },
+
+  tableWrap: { width: '100%', borderWidth: 1, borderColor: COLORS.lightGray, marginBottom: 14 },
+  tableHeader: {
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+  },
+  tableHeaderCell: {
+    paddingVertical: 5,
+    paddingHorizontal: 4,
+    fontSize: 6.6,
+    fontWeight: 700,
+    color: COLORS.navy,
+  },
+  tableHeaderCellCfg: {
+    paddingHorizontal: 6,
+  },
+  tableHeaderCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.lightGray,
+  },
+  tableRow: {
+    width: '100%',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+  },
+  tableRowAlt: { backgroundColor: COLORS.almostWhite },
+  tableCell: { paddingVertical: 4, paddingHorizontal: 4, fontSize: 6.6, color: COLORS.darkGray },
+  tableCellCfg: {
+    paddingHorizontal: 6,
+  },
+  tableCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.lightGray,
+  },
+});