/* -- Brand tokens (mirror ri_brand palette) ------------------------ */
:root {
  --ri-bg:       #F7F6F2;
  --ri-surface:  #FBFBF9;
  --ri-ink:      #1F1D18;
  --ri-muted:    #6B6A65;
  --ri-faint:    #9C9A94;
  --ri-rule:     #D4D1CA;
  --ri-tint:     #F5F2EA;
  --ri-green:    #0C4E54;
  --ri-green-d:  #083A3F;
  --ri-gold:     #B08637;
  --ri-red:      #A12C7B;
  --ri-max-w:    880px;
  --ri-radius:   4px;
  --ri-mono:     ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

/* -- Reset + base -------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ri-bg);
  color: var(--ri-ink);
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01", "cv11";
}
a { color: var(--ri-green); text-decoration: none; border-bottom: 1px solid rgba(12,78,84,0.25); }
a:hover { color: var(--ri-green-d); border-bottom-color: var(--ri-green-d); }
h1, h2, h3 { color: var(--ri-ink); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 1.15; margin: 0 0 4px; }
h2 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ri-gold); margin: 32px 0 12px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 6px; }
p  { margin: 0 0 12px; }
ul { margin: 0; padding: 0; list-style: none; }

/* -- Layout skeleton ---------------------------------------------- */
.wrap { max-width: var(--ri-max-w); margin: 0 auto; padding: 0 20px; }
.banner {
  background: var(--ri-green);
  color: #E5D9B8;
  padding: 14px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.banner .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner .brand { color: #fff; font-weight: 600; }
.banner .gtin { font-family: var(--ri-mono); letter-spacing: 0.06em; color: #B8D5D8; font-weight: 400; text-transform: none; }

/* -- Hero (product identity) -------------------------------------- */
.hero { padding: 32px 0 12px; }
.hero .kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ri-gold); font-weight: 600; margin-bottom: 8px; }
.hero .code { font-family: var(--ri-mono); color: var(--ri-muted); font-size: 13px; margin-left: 8px; }
.hero .tagline { color: var(--ri-muted); font-size: 17px; max-width: 620px; margin: 8px 0 0; }

.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: 3px;
}
.status-active      { background: rgba(67,122,34,0.12); color: #2E5416; }
.status-development { background: rgba(176,134,55,0.15); color: #7A5B22; }
.status-trial       { background: rgba(176,134,55,0.15); color: #7A5B22; }
.status-withdrawn   { background: rgba(161,44,123,0.10); color: #6B1E52; }

/* -- Spec grid (dense KV) ----------------------------------------- */
.spec-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 20px;
  border-top: 1px solid var(--ri-rule);
  border-bottom: 1px solid var(--ri-rule);
  padding: 16px 0;
  font-size: 14px;
}
.spec-grid dt { color: var(--ri-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; padding-top: 2px; }
.spec-grid dd { margin: 0; color: var(--ri-ink); }

/* -- Document rows (TDS / SDS) ------------------------------------ */
.doc-list, .lot-list { border-top: 1px solid var(--ri-rule); }
.doc-row, .lot-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ri-rule);
}
.doc-tag {
  font-family: var(--ri-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ri-green);
  background: var(--ri-tint);
  padding: 4px 8px;
  border-radius: var(--ri-radius);
  text-align: center;
}
.doc-title { font-weight: 500; color: var(--ri-ink); }
.doc-meta  { font-size: 12px; color: var(--ri-muted); margin-top: 2px; }
.doc-cta   {
  font-size: 13px;
  font-weight: 500;
  color: var(--ri-green);
  border: 1px solid var(--ri-green);
  padding: 6px 12px;
  border-radius: var(--ri-radius);
  white-space: nowrap;
  border-bottom-width: 1px;
}
.doc-cta:hover { background: var(--ri-green); color: #fff; }

/* -- Lot rows (per-batch CoAs) ------------------------------------ */
.lot-code   { font-family: var(--ri-mono); font-size: 13px; letter-spacing: 0.05em; }
.lot-meta   { font-size: 12px; color: var(--ri-muted); margin-top: 2px; }
.lot-empty  { padding: 24px 20px; background: var(--ri-tint); border-left: 3px solid var(--ri-gold); font-size: 14px; color: var(--ri-muted); border-radius: var(--ri-radius); }

/* -- Ingredients / allergens ------------------------------------- */
.declaration {
  background: var(--ri-surface);
  border: 1px solid var(--ri-rule);
  border-radius: var(--ri-radius);
  padding: 16px 18px;
  font-size: 14px;
}
.declaration p { margin: 0 0 8px; }
.declaration p:last-child { margin-bottom: 0; }
.declaration .label { color: var(--ri-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; margin-bottom: 2px; }

/* -- Market table ------------------------------------------------- */
.market-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.market-table th, .market-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ri-rule);
  vertical-align: top;
}
.market-table th { font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ri-muted); }
.market-code { font-family: var(--ri-mono); font-weight: 600; letter-spacing: 0.05em; }
.market-status { font-size: 12px; font-weight: 500; }
.market-status.permitted     { color: #2E5416; }
.market-status.pending       { color: #7A5B22; }
.market-status.pending_review{ color: #7A5B22; }
.market-status.restricted    { color: #7A5B22; }
.market-status.not_offered   { color: #6B1E52; }

/* -- Sales contact card ------------------------------------------- */
.contact-card {
  background: var(--ri-green);
  color: #fff;
  padding: 22px 24px;
  border-radius: var(--ri-radius);
  margin-top: 12px;
}
.contact-card h3 { color: #E5D9B8; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; }
.contact-card p { margin: 0; color: #F5F2EA; font-size: 15px; }
.contact-card a { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.contact-card a:hover { color: #fff; border-bottom-color: #fff; }

/* -- Footer / provenance ----------------------------------------- */
footer {
  margin: 48px 0 32px;
  padding-top: 20px;
  border-top: 1px solid var(--ri-rule);
  font-size: 12px;
  color: var(--ri-muted);
  line-height: 1.6;
}
footer .stamp { font-family: var(--ri-mono); }

/* -- Mobile ------------------------------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .spec-grid { grid-template-columns: 1fr; gap: 4px 0; padding: 14px 0; }
  .spec-grid dt { padding-top: 12px; }
  .spec-grid dt:first-of-type { padding-top: 0; }
  .doc-row, .lot-row { grid-template-columns: 1fr; gap: 8px; }
  .doc-tag { justify-self: start; }
  .doc-cta { justify-self: start; }
}

/* -- Print (buyer prints this page as a fallback TDS) ------------ */
@media print {
  body { background: #fff; }
  .banner, .contact-card, .doc-cta { display: none; }
  a { color: var(--ri-ink); border: 0; }
  .wrap { max-width: 100%; }
  footer { color: var(--ri-muted); }
}

/* -- Enquiry form (no JavaScript) ------------------------------------ */
.enq { background: var(--ri-surface); border: 1px solid var(--ri-rule); border-radius: var(--ri-radius); padding: 20px 24px; margin-top: 16px; }
.enq .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.enq label { display: block; font-size: 13px; font-weight: 600; color: var(--ri-ink); margin-bottom: 4px; }
.enq input, .enq select, .enq textarea { width: 100%; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--ri-rule); border-radius: var(--ri-radius); background: #fff; color: var(--ri-ink); }
.enq textarea { min-height: 96px; resize: vertical; }
.enq .full { grid-column: 1 / -1; }
.enq .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.enq .consent input { width: auto; margin-top: 4px; }
.enq .hp { position: absolute; left: -9999px; }
.enq button { margin-top: 14px; background: var(--ri-green); color: #fff; border: 0; border-radius: var(--ri-radius); padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.enq button:hover { background: var(--ri-green-d); }
.notice { padding: 12px 16px; border-radius: var(--ri-radius); margin: 16px 0 0; font-size: 15px; }
.notice.ok  { background: #E8F0E1; color: #2E5416; }
.notice.err { background: #F5E6EF; color: #6B1E52; }
@media (max-width: 640px) { .enq .grid { grid-template-columns: 1fr; } }

/* -- Family pages ------------------------------------------------------ */
.banner a.banner-link { color: #B8D5D8; border-bottom-color: rgba(184,213,216,0.4); }
.hero .kicker a.kicker-link { color: var(--ri-gold); border-bottom-color: rgba(176,134,55,0.35); }
.fam-long { max-width: 680px; margin: 4px 0 20px; }
.fam-list, .prod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.fam-card, .prod-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--ri-surface); border: 1px solid var(--ri-rule); border-radius: var(--ri-radius); color: var(--ri-ink); }
.fam-card:hover, .prod-card:hover { border-color: var(--ri-green); color: var(--ri-ink); }
.fam-name, .prod-name { font-weight: 600; font-size: 17px; line-height: 1.3; }
.prod-status .status-chip { margin: 0; }
.fam-desc { color: var(--ri-muted); font-size: 14px; }
.prod-code { font-family: var(--ri-mono); font-size: 12px; color: var(--ri-muted); letter-spacing: 0.04em; }
.fam-meta, .prod-meta, .prod-docs { font-size: 13px; color: var(--ri-muted); }
.prod-cta { margin-top: auto; padding-top: 6px; color: var(--ri-green); font-weight: 600; font-size: 14px; }
.status-sourced_to_order { background: rgba(12,78,84,0.10); color: #0C4E54; }