/* ============================================================
   BlackSeedSource — Design System 2026
   Loaded last (after b2b.css) — overrides tokens only.
   PHP, HTML, SEO, schema: unchanged.
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Charcoal (dark base) */
  --charcoal-900: #14130f;
  --charcoal-800: #1d1c17;
  --charcoal-700: #2a2823;

  /* Olive (brand green) */
  --olive-900:   #1f2a1c;
  --olive-800:   #283626;
  --olive-700:   #3a4c34;
  --olive-500:   #5c6f4e;

  /* Beige / paper */
  --beige-100:   #faf7f0;
  --beige-200:   #f1ead8;
  --beige-300:   #e6ddc6;
  --beige-400:   #d4c8a8;

  /* Gold — single accent, used sparingly */
  --gold-500:    #c9a24a;
  --gold-400:    #d8b566;
  --gold-300:    #e6c98a;

  /* Text */
  --ink-700:     #3b3a34;
  --ink-500:     #6b6a60;

  /* Rules / dividers */
  --rule:        rgba(20,19,15,0.12);
  --rule-strong: rgba(20,19,15,0.22);
  --rule-dark:   rgba(255,247,225,0.14);

  /* Layout */
  --max:   1280px;
  --pad-x: clamp(20px, 4vw, 56px);
  --rad:   3px;

  /* Font families */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans:  "Manrope", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Map onto existing b2b-* vars so every component picks up new palette */
  --b2b-bg:           #faf7f0;
  --b2b-surface:      #ffffff;
  --b2b-text:         #3b3a34;
  --b2b-muted:        #6b6a60;
  --b2b-border:       #d4c8a8;
  --b2b-primary:      #1f2a1c;
  --b2b-primary-hover:#283626;
  --b2b-accent:       #c9a24a;
}

/* ── 2. Global Base ───────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--beige-100);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Headings → Newsreader ─────────────────────────────── */
h1, h2, h3, h4,
.b2b-home h1,
.b2b-home h2,
.b2b-home h3,
.b2b-home h4 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 400; }
h2 { font-size: clamp(32px, 4vw, 52px);   font-weight: 400; }
h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; }
h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; }

/* ── 4. Mono → JetBrains ──────────────────────────────────── */
code, pre,
.spec-value, .batch-code,
.eyebrow, [class*="eyebrow"] {
  font-family: var(--font-mono);
}

/* ── 5. Eyebrow / section label ───────────────────────────── */
.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-700);
}

/* ── 6. Border Radius — minimal (3 px) ────────────────────── */
.b2b-u-btn, .b2b-btn,
.b2b-card, .b2b-card-standard, .b2b-u-card,
.b2b-snapshot,
.b2b-badge, .b2b-u-badge,
.button, .card,
.btn-primary, .btn-dark, .btn-outline,
input, select, textarea {
  border-radius: var(--rad) !important;
}

/* ── 7. Topbar ────────────────────────────────────────────── */
.site-topbar {
  background: var(--charcoal-900) !important;
}
.site-topbar__item:hover {
  color: var(--gold-400) !important;
}

/* ── 8. Sticky header ─────────────────────────────────────── */
.site-header {
  background: rgba(250,247,240,0.97) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
}

/* Nav links */
#primary-menu > li > a,
.b2b-u-nav-link {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nav hover / active gold underline */
#primary-menu > li > a:hover,
#primary-menu > li > a.active {
  color: var(--gold-500) !important;
}

/* ── 9. Hero (homepage) ───────────────────────────────────── */
body.home-page main.b2b-home section.b2b-hero {
  background: linear-gradient(150deg, var(--charcoal-900) 0%, var(--olive-900) 100%) !important;
}

/* Gold primary CTA inside hero */
body.home-page main.b2b-home section.b2b-hero .b2b-btn-primary,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-primary,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-primary:link,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-primary:visited {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  color: var(--charcoal-900) !important;
  font-weight: 700;
}
body.home-page main.b2b-home section.b2b-hero .b2b-btn-primary:hover,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-primary:hover {
  background: var(--gold-400) !important;
  border-color: var(--gold-400) !important;
}

/* Outline secondary CTA inside hero */
body.home-page main.b2b-home section.b2b-hero .b2b-btn-secondary,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-secondary {
  border-color: var(--rule-dark) !important;
  color: var(--beige-100) !important;
}
body.home-page main.b2b-home section.b2b-hero .b2b-btn-secondary:hover,
body.home-page main.b2b-home section.b2b-hero a.b2b-btn-secondary:hover {
  background: var(--beige-100) !important;
  color: var(--charcoal-900) !important;
}

/* Hero snapshot panel */
body.home-page main.b2b-home section.b2b-hero .b2b-snapshot {
  background: var(--charcoal-800) !important;
  border: 1px solid var(--charcoal-700) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important;
}
body.home-page main.b2b-home section.b2b-hero .b2b-snapshot h2,
body.home-page main.b2b-home section.b2b-hero .b2b-snapshot h3 {
  color: var(--beige-100) !important;
}
body.home-page main.b2b-home section.b2b-hero .b2b-snapshot li {
  color: var(--beige-300) !important;
}
body.home-page main.b2b-home section.b2b-hero .b2b-snapshot li svg {
  stroke: var(--gold-300) !important;
}

/* ── 10. Section colours ──────────────────────────────────── */
/* Light sections → beige-100 */
.b2b-section:not(.b2b-hero):not(.b2b-final-cta),
.b2b-section-standard {
  background: var(--beige-100);
}

/* Alternate banding → beige-200 */
.b2b-section:nth-of-type(even):not(.b2b-hero):not(.b2b-final-cta) {
  background: var(--beige-200);
}

/* Final CTA strip */
.b2b-final-cta {
  background: var(--olive-900) !important;
  color: var(--beige-100) !important;
}
.b2b-final-cta h2,
.b2b-final-cta p {
  color: var(--beige-100) !important;
}
.b2b-final-cta .b2b-btn-primary,
.b2b-final-cta a.b2b-btn-primary {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  color: var(--charcoal-900) !important;
}
.b2b-final-cta .b2b-btn-primary:hover,
.b2b-final-cta a.b2b-btn-primary:hover {
  background: var(--gold-400) !important;
}

/* ── 11. Cards ────────────────────────────────────────────── */
.b2b-card,
.b2b-card-standard,
.b2b-u-card {
  border-color: var(--beige-400);
  box-shadow: 0 4px 14px rgba(20,19,15,0.06), inset 0 0 0 1px rgba(201,162,74,0.07);
}
.b2b-card:hover {
  border-color: rgba(201,162,74,0.4);
  box-shadow: 0 8px 20px rgba(20,19,15,0.09);
}

/* ── 12. Badges ───────────────────────────────────────────── */
.b2b-badge,
.b2b-u-badge {
  background: var(--beige-200);
  border-color: var(--beige-400);
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* ── 13. Primary buttons (global) ─────────────────────────── */
.b2b-btn-primary,
a.b2b-btn-primary,
a.b2b-btn-primary:link,
a.b2b-btn-primary:visited,
.b2b-u-btn-primary {
  background: var(--olive-900) !important;
  border-color: var(--olive-900) !important;
  color: #fff !important;
}
.b2b-btn-primary:hover,
a.b2b-btn-primary:hover,
.b2b-u-btn-primary:hover {
  background: var(--olive-800) !important;
  border-color: var(--olive-800) !important;
}

/* ── 14. Footer ───────────────────────────────────────────── */
footer,
.site-footer,
[class*="b2b-footer"],
.b2b-u-footer-grid {
  background: var(--charcoal-900) !important;
}
footer a:hover,
.site-footer a:hover {
  color: var(--gold-300) !important;
}

/* ── 15. Focus ring — gold ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* ── 16. Skip link ────────────────────────────────────────── */
.skip-link {
  background: var(--gold-500) !important;
  color: var(--charcoal-900) !important;
}

/* ── 17. Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(32px, 8vw, 48px); }
  h2 { font-size: clamp(26px, 6vw, 38px); }
}

/* ============================================================
   HERO SECTION
   Classes: .hero .hero-text .hero-eyebrow .hero-ctas
            .hero-meta .hero-card .spec-row .hero-card-foot
            .btn .btn-primary .btn-outline .container
   ============================================================ */

/* Layout container utility */
.container {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Hero wrapper ─────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--charcoal-900);
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.hero > .container {
  position: relative;
  z-index: 1;
  padding-top:    clamp(72px, 9vw, 108px);
  padding-bottom: clamp(72px, 9vw, 108px);
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ── Eyebrow ──────────────────────────────────────────────── */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 20px;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── H1 ───────────────────────────────────────────────────── */
.hero-text h1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--beige-100);
  margin: 0 0 24px;
  max-width: 16ch;
}

.hero-text h1 em {
  font-style: italic;
  color: var(--gold-400);
}

/* ── Lede paragraph ───────────────────────────────────────── */
.lede {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(250,247,240,0.76);
  max-width: 52ch;
  margin: 0 0 32px;
}

/* ── CTA buttons ──────────────────────────────────────────── */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--rad);
  cursor: pointer;
  transition: background 0.16s ease,
              color      0.16s ease,
              border-color 0.16s ease,
              transform  0.16s ease;
  white-space: nowrap;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-primary {
  background:   var(--gold-500);
  color:        var(--charcoal-900);
  border-color: var(--gold-500);
}
.btn-primary:hover {
  background:   var(--gold-400);
  border-color: var(--gold-400);
  color:        var(--charcoal-900);
  transform:    translateY(-1px);
  text-decoration: none;
}

.btn-outline {
  background:   transparent;
  color:        var(--beige-100);
  border-color: rgba(255,247,225,0.32);
}
.btn-outline:hover {
  background:   rgba(255,247,225,0.07);
  border-color: rgba(255,247,225,0.55);
  color:        var(--beige-100);
  transform:    translateY(-1px);
  text-decoration: none;
}

/* ── Meta trust row ───────────────────────────────────────── */
.hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  color: rgba(250,247,240,0.52);
}

.hero-meta .check {
  color: var(--gold-400);
  margin-right: 4px;
}

/* ── Spec card (right column) ─────────────────────────────── */
.hero-card {
  background:    var(--charcoal-800);
  border:        1px solid var(--charcoal-700);
  border-radius: var(--rad);
  padding:       24px;
  box-shadow:    0 16px 48px rgba(0,0,0,0.5);
}

.hero-card-label {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-family:     var(--font-mono);
  font-size:       0.6875rem;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--gold-300);
  margin-bottom:   16px;
  padding-bottom:  14px;
  border-bottom:   1px solid var(--charcoal-700);
}

.hero-card-label .pill {
  background:    rgba(201,162,74,0.14);
  border:        1px solid rgba(201,162,74,0.32);
  border-radius: var(--rad);
  color:         var(--gold-400);
  font-size:     0.5625rem;
  letter-spacing:0.12em;
  padding:       3px 7px;
}

/* ── Spec rows ────────────────────────────────────────────── */
.spec-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             12px;
  padding:         9px 0;
  border-bottom:   1px solid rgba(255,247,225,0.07);
}

.spec-row:last-of-type {
  border-bottom: none;
}

.spec-row .k {
  font-family:    var(--font-mono);
  font-size:      0.6875rem;
  letter-spacing: 0.04em;
  color:          rgba(250,247,240,0.45);
  white-space:    nowrap;
  flex-shrink:    0;
}

.spec-row .v {
  font-family: var(--font-mono);
  font-size:   0.8125rem;
  color:       var(--beige-200);
  text-align:  right;
}

.spec-row .v b {
  color:       var(--gold-300);
  font-weight: 600;
}

/* ── Card footer ──────────────────────────────────────────── */
.hero-card-foot {
  display:         flex;
  justify-content: space-between;
  margin-top:      14px;
  padding-top:     14px;
  border-top:      1px solid var(--charcoal-700);
  font-family:     var(--font-mono);
  font-size:       0.5625rem;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           rgba(250,247,240,0.3);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero > .container {
    grid-template-columns: 1fr;
    padding-top:    clamp(56px, 8vw, 80px);
    padding-bottom: clamp(56px, 8vw, 80px);
  }
  .hero-text h1 { max-width: none; }
  .hero-card   { max-width: 500px; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; }
  .hero-ctas  { flex-direction: column; }
  .btn        { justify-content: center; }
  .hero-meta  { flex-direction: column; gap: 8px; }
  .hero-card-foot { font-size: 0.5rem; }
}


/* ══════════════════════════════════════════════
   FORMATS GRID — 4-column supply format cards
   ══════════════════════════════════════════════ */
.formats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(31,42,28,.15);border-radius:3px;overflow:hidden;margin-top:2.5rem}
.format{padding:0 0 28px;border-right:1px solid rgba(31,42,28,.12);background:#faf7f0;transition:background .18s;display:flex;flex-direction:column;gap:0}
.format:last-child{border-right:none}
.format:hover{background:#f1ead8}
.format-visual{height:220px;overflow:hidden;background:#e8e0cc;flex-shrink:0;margin-bottom:20px}
.format-visual[style]{background-size:cover !important;background-position:center !important}
.format-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#3a4c34;padding:0 24px;margin-bottom:8px}
.format-name{font-family:'Newsreader',Georgia,serif;font-size:24px;font-weight:600;color:#14130f;line-height:1.2;margin:0 0 8px;padding:0 24px}
.format-cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:#c9a24a;letter-spacing:.05em;padding:0 24px;margin-bottom:12px}
.format-desc{font-size:14px;color:#6b6a60;line-height:1.6;flex:1;padding:0 24px;margin-bottom:16px}
.format-link{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#1f2a1c;text-decoration:underline;text-underline-offset:3px;transition:color .15s;padding:0 24px;margin-top:auto}
.format-link:hover{color:#c9a24a;text-decoration:underline}
@media(max-width:900px){
  .formats{grid-template-columns:repeat(2,1fr)}
  .format:nth-child(2){border-right:none}
  .format:nth-child(1),.format:nth-child(2){border-bottom:1px solid rgba(31,42,28,.12)}
}
@media(max-width:560px){
  .formats{grid-template-columns:1fr}
  .format{border-right:none;border-bottom:1px solid rgba(31,42,28,.12)}
  .format:last-child{border-bottom:none}
}



/* ══════════════════════════════════════════════════════════════
   PAGE-HEADER — Inner page hero (products / markets / quality /
                 about / how-to-order)
   ══════════════════════════════════════════════════════════════ */
.page-header{background:#1f2a1c !important;color:#faf7f0 !important;padding:80px 0 64px;position:relative;overflow:hidden}
.page-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(201,162,74,.10),transparent 60%)}
.page-header .b2b-u-container{position:relative;z-index:1}

/* Breadcrumb */
.page-header .breadcrumb{display:flex !important;gap:10px;align-items:center;font-family:'JetBrains Mono',ui-monospace,monospace !important;font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:rgba(230,221,198,.55) !important;margin-bottom:28px;list-style:none;padding:0}
.page-header .breadcrumb a{color:#e6c98a !important}
.page-header .breadcrumb a:hover{color:#d8b566 !important}
.page-header .breadcrumb .sep{color:rgba(230,221,198,.3) !important}

/* H1 */
.page-header h1{font-family:'Newsreader',Georgia,serif !important;font-size:clamp(40px,5vw,64px);font-weight:400 !important;color:#faf7f0 !important;margin-bottom:24px;max-width:900px;letter-spacing:-.01em;line-height:1.06}
.page-header h1 em{font-style:italic !important;color:#d8b566 !important;font-weight:400 !important}

/* Sub */
.ph-sub{font-size:18px;max-width:640px;color:rgba(250,247,240,.72) !important;line-height:1.6;margin:0}

/* Stats row */
.page-header-meta{display:flex;gap:36px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,247,225,.14) !important;flex-wrap:wrap}
.page-header-meta .stat .v{font-family:'Newsreader',Georgia,serif !important;font-size:32px;color:#d8b566 !important;line-height:1;margin-bottom:6px;display:block}
.page-header-meta .stat .k{font-family:'JetBrains Mono',ui-monospace,monospace !important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,221,198,.6) !important;display:block}

/* Two-column variant */
.page-header-two{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.page-header-card{background:rgba(20,19,15,.5) !important;border:1px solid rgba(255,247,225,.14) !important;padding:36px;border-radius:4px}
.page-header-card .card-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#e6c98a !important;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,247,225,.14);display:block}
.page-header-card .card-row{display:grid;grid-template-columns:1fr auto;padding:13px 0;border-bottom:1px dashed rgba(255,247,225,.14);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.page-header-card .card-row:last-child{border-bottom:none}
.page-header-card .card-row .ck{color:rgba(230,221,198,.6) !important;font-size:10px;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.page-header-card .card-row .cv{color:#faf7f0 !important;font-weight:500;text-align:right}
.page-header-card .card-row .cv b{color:#d8b566 !important}

/* CTA buttons in hero */
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.ph-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:3px;font-family:'Manrope',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:transform .12s,background .15s;cursor:pointer;text-decoration:none !important}
.ph-btn:hover{transform:translateY(-1px)}
.ph-btn-primary{background:#c9a24a !important;color:#14130f !important}
.ph-btn-primary:hover{background:#d8b566 !important;color:#14130f !important}
.ph-btn-outline{background:transparent !important;color:#faf7f0 !important;border:1px solid rgba(255,247,225,.35) !important}
.ph-btn-outline:hover{border-color:#d8b566 !important;color:#e6c98a !important}
.ph-btn svg{width:14px;height:14px;flex-shrink:0}

/* Gradient variants */
.ph-products::before{background:radial-gradient(ellipse 55% 60% at 100% 0%,rgba(201,162,74,.11),transparent 55%),radial-gradient(ellipse 40% 50% at 0% 100%,rgba(201,162,74,.05),transparent 55%)}
.ph-markets::before{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(201,162,74,.09),transparent 60%)}
.ph-about::before{background:radial-gradient(ellipse 50% 70% at 0% 50%,rgba(201,162,74,.10),transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(201,162,74,.05),transparent 50%)}
.ph-order::before{background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(201,162,74,.09),transparent 60%)}

@media(max-width:960px){
  .page-header-two{grid-template-columns:1fr}
  .page-header-card{display:none !important}
}
@media(max-width:640px){
  .page-header{padding:56px 0 44px}
  .hero-ctas{flex-direction:column;align-items:flex-start}
}