Line Sheet Generator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Harbour &amp; Co Line Sheet</title>
<style>
  * { box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #111; margin: 0; padding: 32px; font-size: 13px; line-height: 1.5; background: #fff; }
  .doc { max-width: 760px; margin: 0 auto; }
  .row { display: flex; justify-content: space-between; gap: 24px; }
  .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 16px; }
  h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #666; margin: 24px 0 8px; }
  table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3e3e3; font-size: 12.5px; }
  th { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; color: #666; border-bottom: 2px solid #111; }
  td.num, th.num { text-align: right; }
  .totals { margin-top: 12px; width: 260px; margin-left: auto; }
  .totals div { display: flex; justify-content: space-between; padding: 4px 0; }
  .totals .grand { font-weight: 700; border-top: 2px solid #111; margin-top: 4px; padding-top: 8px; font-size: 15px; }
  .muted { color: #666; }
  .box { border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; }
  .sig { margin-top: 40px; display: flex; gap: 40px; }
  .sig div { flex: 1; border-top: 1px solid #111; padding-top: 6px; font-size: 11px; color: #666; }
  @media print { body { padding: 0; } }
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.card{border:1px solid #e3e3e3;border-radius:10px;padding:12px}.card img{width:100%;height:140px;object-fit:cover;border-radius:6px}.ph{height:140px;border-radius:6px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px}.name{margin:10px 0 0;font-weight:600;font-size:13px}.sku{margin:2px 0;color:#888;font-size:11px}.price{margin:4px 0 0;font-size:13px}.min{margin:2px 0 0;font-size:11px;color:#888}@media print{.grid{grid-template-columns:repeat(2,1fr)}}</style>
</head>
<body>
<div class="doc">

    <div class="head">
      <div><h1>Harbour &amp; Co</h1><p class="muted">Fall 2026 wholesale line sheet</p></div>
      <div class="box" style="text-align:right"><p class="muted">wholesale@harbourco.com</p></div>
    </div>
    <div class="grid">
    <div class="card">
      <div class="ph">No image</div>
      <p class="name">Classic Tee</p>
      <p class="sku">TEE-001</p>
      <p class="price">$9.50 wholesale <span class="muted">/ $24.00 MSRP</span></p>
      <p class="min">Min qty: 6</p>
    </div>
    <div class="card">
      <div class="ph">No image</div>
      <p class="name">Canvas Tote</p>
      <p class="sku">TOTE-001</p>
      <p class="price">$6.00 wholesale <span class="muted">/ $16.00 MSRP</span></p>
      <p class="min">Min qty: 12</p>
    </div>
    <div class="card">
      <div class="ph">No image</div>
      <p class="name">Wool Scarf</p>
      <p class="sku">SCF-001</p>
      <p class="price">$14.00 wholesale <span class="muted">/ $36.00 MSRP</span></p>
      <p class="min">Min qty: 6</p>
    </div></div>
    <h2>Terms</h2>
    <p class="muted" style="white-space:pre-line">Net 30 for approved accounts. Minimum opening order $300. Prices valid through the season shown above.</p>
  
</div>
</body>
</html>