:root {
  --brand: #0A3A67;
  --brand-2: #00A0DF;
  --accent: #FF7A00;
  --muted: #64748b;
  --line: #e2e8f0;
  color: #0f172a;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body { margin:0; background:#fff; }
a { color:var(--brand-2); text-decoration:none; }
a.underline:hover { text-decoration:underline; }

/* Header */
.site-header { background:#fff; border-bottom:1px solid var(--line); padding:12px 0; }
.nav-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { height:48px; }
.brand-title { font-weight:800; font-size:20px; color:var(--brand); }
.brand-strap { font-size:12px; color:var(--muted); }
.site-nav a { margin:0 8px; font-weight:600; color:#0f172a; }
.site-nav a.active { color:var(--brand-2); }

/* Layout */
.container { width:90%; max-width:1100px; margin:auto; }
.section-title { font-size:24px; font-weight:800; margin:16px 0 8px; color:var(--brand); }
.section-sub { color:var(--muted); margin-bottom:12px; }

.btn { background:#eee; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:600; }
.btn.primary { background:var(--brand-2); color:#fff; }
.btn.secondary { background:var(--brand); color:#fff; }

/* Search bar */
.search-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center; }
.search-bar input, .search-bar select {
  padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px;
}
.search-bar input { flex:1; min-width:220px; }

/* Table */
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:10px 12px; border-bottom:1px solid #eef2f7; text-align:left; font-size:14px; }
.data-table thead th { background:#f8fafc; font-weight:700; white-space:nowrap; }
.data-table td:nth-child(3) { white-space: normal; } /* allow Description to wrap */
.muted { color:var(--muted); font-size:13px; }

/* Footer */
footer { background:#f8fafc; padding:24px 0; border-top:1px solid var(--line); margin-top:32px; }
.f-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }

/* Utility */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }


/* Hero */
.hero { text-align:center; padding:40px 0; }
.highlight { color:var(--brand-2); }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }
.stat { background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:12px; }
.stat .value { font-size:20px; font-weight:800; color:var(--brand-2); }

/* Product Range */
.range-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px; }
.range-card { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:.2s; }
.range-card:hover { transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.range-img-wrap { height:120px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; }
.range-img { width:100%; height:100%; object-fit:cover; }
.chip { border-top:1px solid #eef2f7; padding:10px; font-weight:700; }

/* === Product Focus Card === */
.spotlight-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

@media (min-width: 900px) {
  .spotlight-card {
    flex-direction: row;
  }
}

.sp-img-wrap {
  flex: 1 1 40%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-content {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
}

.sp-eyebrow { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.sp-title { font-size: 20px; font-weight: 800; margin: 6px 0 8px; color: var(--brand); }
.sp-meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.sp-bullets { margin-bottom: auto; } /* pushes actions to the bottom */
.sp-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}


/* BOM Upload Card */
.card { border:1px solid var(--line); border-radius:10px; padding:16px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.upload-area { display:flex; align-items:center; gap:8px; }
.bom-preview { overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.bom-preview table { width:100%; border-collapse:collapse; }
.bom-preview th, .bom-preview td { padding:8px; border-bottom:1px solid #eee; font-size:13px; }
.bom-preview th { background:#f8fafc; }


/* === Franchises grid === */
.fr-grid { display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px; margin:16px 0 28px; }
@media (min-width:640px){ .fr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .fr-grid{ grid-template-columns:repeat(4,1fr); } }

.fr-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px; box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:10px;
}
.fr-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,58,103,.08); }

.fr-logo-wrap{
  width:100%; height:56px; background:#f8fafc; border:1px dashed #e5e7eb;
  border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fr-logo-img{ max-width:90%; max-height:80%; object-fit:contain; display:block; }

.fr-name{ font-weight:800; color:var(--brand); }
.fr-prod{ color:var(--muted); font-size:13px; min-height:36px; }

.fr-actions{ display:flex; justify-content:flex-end; gap:8px; }
.fr-actions .btn{ padding:6px 10px; }

/* Generic card system */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04);padding:16px;transition:transform .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,58,103,.06)}
.card-title{font-weight:800;margin:0 0 8px;color:var(--brand)}

/* Responsive grids for cards */
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Bullets reused from spotlight */
.sp-bullets{display:grid;gap:6px;margin:12px 0;color:#0f172a}

.search-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center; }
.search-bar input, .search-bar select { padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* News */
.news-grid { display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0 28px; }
@media(min-width:800px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }

.news-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden; display:flex; gap:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,58,103,.08); }

.news-img{ width:38%; min-height:160px; background:#f1f5f9; display:none; }
.news-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(min-width:700px){ .news-img{ display:block; } }

.news-body{ padding:14px; flex:1; display:flex; flex-direction:column; }
.news-meta{ color:var(--muted); font-size:12px; margin-bottom:4px; }
.news-title{ margin:0 0 6px; font-size:18px; color:var(--brand); font-weight:800; }
.news-summary{ margin:0; color:#0f172a; }
.news-actions{ margin-top:auto; display:flex; justify-content:flex-end; gap:8px; }

.pager{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:8px; }