/* PaHarsha — design tokens (Look & Feel plan, 14 Sep 2026) */
:root {
  --navy: #0f2a4a;
  --navy-soft: #e8eef6;
  --teal: #2bbbad;
  --teal-soft: #e7f7f4;
  --teal-ink: #0f6b5c;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1a202c;
  --muted: #4a5568;
  --line: #e2e8f0;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --green: #15803d;
  --green-bg: #dcfce7;
  --blue: #1d4ed8;
  --blue-bg: #dbeafe;
  --yellow: #eab308;
  --yellow-ink: #854d0e;
  --grey: #475569;
  --grey-bg: #e2e8f0;
  --gold: #92650a;
  --gold-bg: #fdf1d6;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}
a { color: var(--navy); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); margin-top: 0; }
h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 28px; font-weight: 800; }
/* Every "note"/secondary line in the app uses .muted — one place to make
   all of them consistently smaller than body text, matching the size the
   codebase already used ad hoc for hints/fine print (form-hint, fee-note,
   the terms/policy pages) before this made it the default everywhere. */
.muted { color: var(--muted); font-size: 13px; }

.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15, 42, 74, 0.06);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.brand-lockup { display: flex; align-items: center; flex: 0 0 auto; }
.brand-lockup img { height: 36px; width: auto; display: block; }
.header-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
}
.header-search-icon { color: var(--muted); display: flex; }
.header-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.btn-rfq { background: var(--teal); color: #06342d; padding: 10px 18px; border-radius: 8px; }
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
}
.header-signout { color: var(--red); }
.header-signin { color: var(--navy); }

.cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 8px 24px;
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.cat-all summary,
.cat-bar-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.cat-all summary::-webkit-details-marker { display: none; }
.cat-bar-links { display: flex; align-items: center; gap: 18px; }
.cat-bar-links a { font-weight: 600; color: var(--muted); }
.cat-accordion {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
  margin-top: 6px;
}
.cat-accordion a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 700;
  border-radius: 6px;
}
.cat-accordion a:hover { background: var(--bg); }

/* ---------- Hero ---------- */
.hero-band {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -24px;
  margin-bottom: 24px;
  padding: 48px 20px 56px;
  background-color: var(--navy);
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}
.hero-band .mart-hero { position: relative; z-index: 1; margin: 0 auto; }
.hero-band .eyebrow { color: #cdeee9; }
.hero-band h1 { color: #fff; text-shadow: 0 2px 10px rgba(6, 16, 28, 0.55); }
.hero-band .hero-sub { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(6, 16, 28, 0.5); }
.hero-band .accent-italic { color: var(--teal); }
@media (max-width: 700px) {
  .hero-band { padding: 36px 20px 40px; background-position: center 60%; }
}

/* Homepage hero only: the photo lives in its own fixed-aspect layer pinned
   to the top of the band, instead of being stretched to `cover` the whole
   (variable-height) hero. Otherwise, on tall stacked mobile layouts, cover
   forces the image to zoom in dramatically to fill the height, cropping
   the Mbare Musika signage down to an unreadable sliver. Locking the
   photo's own aspect ratio keeps it at a consistent, legible size — a
   letterboxed strip up top that fades into the solid navy background
   underneath the rest of the hero text. */
.hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 1792 / 690;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (max-width: 700px) {
  /* On the stacked mobile layout, the aspect-ratio height (~150px) ends
     mid-headline. Stretch the photo layer down to just past the "Get
     competitive quotations." line instead, so it reads as a deliberate
     banner behind the whole headline rather than cutting through it —
     the extra height crops in horizontally on the signage, which still
     keeps "Mbare Musika" centred and readable. */
  .hero-photo { aspect-ratio: auto; height: 320px; }
}
.hero-band-compact { padding: 40px 20px 44px; margin-bottom: 32px; }
@media (max-width: 700px) {
  .hero-band-compact { padding: 32px 20px 36px; }
}

.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.page-hero h1 { margin: 0; }

.step-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.step-grid li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.step-num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-grid strong { display: block; margin-bottom: 4px; }
.step-grid p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .step-grid { grid-template-columns: 1fr; }
}

.mart-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 780px;
  margin: 20px auto 40px;
  text-align: left;
}
.eyebrow {
  color: var(--teal-ink);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.pill {
  display: inline-block;
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.hero-sub { color: var(--muted); font-size: 16px; margin: 0; }
.accent-italic { font-style: italic; font-weight: 700; color: var(--teal); }

.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 620px;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 0 14px;
  margin-top: 10px;
}
.hero-search-icon { color: var(--muted); display: flex; }
.hero-search input {
  flex: 1;
  min-height: 56px;
  border: 0;
  outline: none;
  font-size: 18px;
  font-family: inherit;
  padding: 0;
}
.hero-search .btn {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 16px;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-suggest {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
}
.chip-suggest:hover { border-color: var(--teal); color: var(--teal-ink); }

.fade-in { animation: fadeUp 0.8s ease both; }
.fade-in-2 { animation-delay: 0.12s; }
.fade-in-3 { animation-delay: 0.24s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Category tiles ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 32px;
}
.cat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-icon { color: var(--navy); }
.cat-name { font-weight: 800; color: var(--navy); font-size: 15px; }
.cat-example { color: var(--muted); font-size: 12px; }

/* ---------- Product cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 12px 0 28px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 10px;
  background: var(--navy-soft);
}
.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 32px;
}
.product-card .btn { display: block; margin-top: 10px; text-align: center; }

/* ---------- Category shelves (homepage) ---------- */
/* One swipeable row per category instead of one ever-growing grid. Plain
   overflow-x + scroll-snap — no carousel library, so it still works (as a
   normal scrollable row) if JS never loads. */
.shelf { margin: 28px 0; }
.shelf-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 14px;
  margin: 12px 0 0;
  -webkit-overflow-scrolling: touch;
}
.shelf-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .shelf-card { flex-basis: 68vw; }
}
/* Soft, one-time zoom-in as a row scrolls into view — not a repeating
   bounce. prefers-reduced-motion is also honoured in the trigger script. */
.shelf-card .product-img {
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  transform: scale(0.92);
}
.shelf-card.in-view .product-img { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .shelf-card .product-img { transition: none; opacity: 1; transform: none; }
}
.product-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.product-card-actions .btn { margin-top: 0; flex: 1; }
.product-card-actions form { flex: 1; }
.product-edit-current-photo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.product-edit-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--navy-soft); }
.chip-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 700;
}
/* Bold, solid verification badges — a filled colour disc with a white
   checkmark, next to a bold label, rather than a thin outline+text pill. */
.verified-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.verified-tag-blue { color: var(--blue); }
.verified-tag-yellow { color: var(--yellow-ink); }
.badge-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.badge-verified svg { width: 12px; height: 12px; }
.badge-verified-blue { background: var(--blue); }
.badge-verified-yellow { background: var(--yellow); }

/* ---------- Trust trio ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.trust-strip article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.trust-icon {
  color: var(--teal-ink);
  background: var(--teal-soft);
  border-radius: 999px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-strip span { display: block; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  min-height: 44px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.06), 0 1px 3px rgba(15, 42, 74, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 42, 74, 0.14); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 42, 74, 0.1); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-accent { background: var(--teal); color: #06342d; }
.btn-green { background: #16a34a; color: #fff; }
.btn-green:hover { background: var(--green); }
.btn-red { background: #dc2626; color: #fff; }
.btn-amber { background: #d97706; color: #fff; }
.btn-outline-primary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 13px; }

.danger-zone { border-color: #fecaca; }
.danger-zone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.danger-zone-item:first-of-type { border-top: none; padding-top: 10px; }
.danger-zone-item p { margin: 4px 0 0; max-width: 480px; }
.danger-zone-item form { flex-shrink: 0; }

/* ---------- Cards, forms, tables ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.form { display: grid; gap: 12px; max-width: 520px; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
}
.form-fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0; }
.form-fieldset legend { font-weight: 700; color: var(--navy); padding: 0 4px; }
.form-hint { margin: 2px 0 10px; font-size: 13px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.checkbox-option { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.checkbox-option input { width: auto; }
@media (max-width: 500px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}
/* Country-code + number pair (WhatsApp field at registration). */
.phone-field { display: flex; gap: 8px; }
.form .phone-field select.phone-code { flex: 0 0 46%; width: auto; }
.form .phone-field input.phone-number { flex: 1 1 auto; width: auto; }
@media (max-width: 480px) {
  .phone-field { flex-direction: column; }
  .form .phone-field select.phone-code, .form .phone-field input.phone-number { width: 100%; }
}
/* City field on RFQ creation: a text input backed by a <datalist> of major
   Zimbabwean cities — pick one from the list or just type your own. */
input.city-input { width: 100%; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; }
.table th { background: var(--navy); color: #fff; font-weight: 700; }
/* Reserved for the one table that genuinely can't be read once its columns
   are squeezed onto a phone (Orders, 9 columns) — everything else keeps its
   natural, stable layout rather than turning into a swipeable strip. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-swipe-hint { display: none; font-size: 12px; margin: -6px 0 10px; }
@media (max-width: 900px) {
  .table-scroll .table { min-width: 640px; }
  .table-swipe-hint { display: block; }
}
.banner-error, .banner-success, .banner-warning, .banner-info, .banner-debug {
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
  margin: 0 0 14px;
}
.banner-error {
  background: var(--red-bg);
  color: #991b1b;
  border: 1px solid #fecaca;
}
.banner-success {
  background: var(--green-bg);
  color: #14532d;
  border: 1px solid #bbf7d0;
}
.banner-warning {
  background: var(--amber-bg);
  color: #78350f;
  border: 1px solid #fde68a;
}
.banner-info, .banner-debug {
  background: var(--navy-soft);
  color: var(--navy);
  border: 1px solid var(--line);
}
.page-messages { max-width: 960px; margin: 0 auto; padding: 16px 20px 0; }
.page-messages:empty { padding: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 8px; }

/* ---------- Dashboard shell ---------- */
/* minmax(0, 1fr) — not bare 1fr — stops a wide child (e.g. the Orders
   table) from stretching this whole grid track past the viewport, which is
   what was dragging the entire dashboard sideways instead of just the one
   element meant to scroll. */
.app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.app-main { min-width: 0; }
.sidebar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; height: fit-content; }
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}
.sidebar-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
.sidebar a.sign-out {
  color: var(--red);
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.dash-title { font-size: 34px; font-weight: 800; margin: 0 0 6px; }
.dash-subtitle { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.kpi span { color: var(--muted); display: block; }
.kpi strong { font-size: 28px; color: var(--navy); }

/* Notification centre */
.notif-card { margin: 16px 0; padding: 18px; }
.notif-heading { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 8px; }
.notif-heading-action { color: var(--red); }
.notif-heading-done { color: var(--green); }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notif-list li { display: flex; align-items: center; gap: 10px; }
.chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.chip-icon-red { background: var(--red-bg); color: var(--red); }
.chip-icon-amber { background: var(--amber-bg); color: var(--amber); }
.chip-icon-blue { background: var(--blue-bg); color: var(--blue); }
.chip-icon-green { background: var(--green-bg); color: var(--green); }

/* Generic chips (status labels — text, never the words red/blue/green) */
.chip { background: var(--bg); border-radius: 999px; padding: 3px 10px; font-size: 12px; display: inline-block; font-weight: 700; }
.chip-red { background: var(--red-bg); color: var(--red); }
.chip-amber { background: var(--amber-bg); color: var(--amber); }
.chip-blue { background: var(--blue-bg); color: var(--blue); }
.chip-green { background: var(--green-bg); color: var(--green); }
.chip-grey { background: var(--grey-bg); color: var(--grey); }
.chip-gold { background: var(--gold-bg); color: var(--gold); font-weight: 700; }
.chip-teal { background: var(--teal-soft); color: var(--teal-ink); }

/* --- Subscription plans --- */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.plan-card-featured { border-color: var(--gold); border-width: 2px; }
.plan-price { font-size: 26px; font-weight: 700; color: var(--navy); margin: 4px 0; }
.plan-annual { margin-top: -6px; }
.plan-features { list-style: none; padding: 0; margin: 12px 0; }
.plan-features li { padding: 4px 0 4px 22px; position: relative; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-ink); font-weight: 700; }
.plan-pick-forms { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.plan-pick-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plan-pick-form input[type="text"] { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.plan-pending-notice, .plan-upsell { display: flex; gap: 12px; align-items: flex-start; }
.plan-howto { margin-top: 16px; }
@media (max-width: 700px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.account-title { display: flex; align-items: center; gap: 10px; }
.account-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Product / featured item detail page ---------- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: 24px;
  padding: 20px;
}
.product-detail-img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.product-detail-info h1 { margin-top: 4px; }
.product-detail-price { font-size: 28px; font-weight: 800; margin: 8px 0; }
.product-detail-price-sm { font-size: 22px; font-weight: 700; }

@media (max-width: 700px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-detail-img { max-height: 280px; }
}

.site-footer { text-align: center; color: var(--muted); padding: 24px; }
.footer-logo { height: 36px; }
.footer-links { margin-top: -8px; }
.footer-links a { color: var(--muted); text-decoration: underline; }

/* ---------- Verification ---------- */
.verify-status-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.terms-badge-grid { display: grid; gap: 14px; margin: 14px 0; }
.terms-badge-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: start; }
.terms-badge-row p { margin: 0; }
@media (max-width: 600px) {
  .terms-badge-row { grid-template-columns: 1fr; }
}
.ops-verify-actions { display: flex; gap: 8px; margin-top: 6px; }
.ops-verify-actions form { display: inline; }

/* ---------- Browse & filters ---------- */
.browse-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.browse-filters input[type="search"] { flex: 1 1 220px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.browse-filters select { padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.browse-count { margin: 0 0 12px; }
.browse-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0; }

/* ---------- Supplier profile ---------- */
.supplier-header { margin-bottom: 24px; }
.supplier-header-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.supplier-header-top h1 { font-size: 30px; margin: 0; }
.supplier-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.supplier-meta span { display: inline-flex; align-items: center; gap: 4px; }
.supplier-industries { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.supplier-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.supplier-links .chip { font-weight: 600; }

/* ---------- Ratings & reviews ---------- */
.rating-summary { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.rating-summary .rating-star { color: var(--yellow); font-size: 14px; line-height: 1; }
.rating-summary .rating-count { color: var(--muted); font-weight: 400; }
.rating-summary.rating-empty { color: var(--muted); font-weight: 400; }

.star-display { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.star-display .star-filled { color: var(--yellow); }
.star-display .star-empty { color: var(--line); }

.star-rate-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.star-rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rate label { font-size: 22px; line-height: 1; color: var(--line); cursor: pointer; transition: color 0.1s ease; }
.star-rate input:checked ~ label,
.star-rate label:hover,
.star-rate label:hover ~ label { color: var(--yellow); }
.star-comment-input { width: 140px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-family: inherit; }
.review-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border-bottom: none; }
.review-item .review-comment { margin: 2px 0 0; font-size: 13px; }

/* ---------- Terms & Conditions (small type, document feel) ---------- */
.terms-doc { max-width: 720px; margin: 0 auto; }
.terms-doc > p.muted { font-size: 13px; }
.terms-doc .card { padding: 18px 20px; }
.terms-doc h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.terms-doc p, .terms-doc li { font-size: 13px; line-height: 1.7; color: var(--muted); }
.terms-doc strong { color: var(--text); }

/* ---------- Policies page (Community Guidelines / Privacy / Cookies) ---------- */
/* Three whole documents behind one collapsed toggle each, so the page never
   shows more than one policy's worth of reading at a time — opening one
   doesn't push the others off-screen forever, just further down. */
.policy-doc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 14px;
  overflow: hidden;
}
.policy-doc summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.policy-doc summary::-webkit-details-marker { display: none; }
.policy-doc summary::after {
  content: "+ Expand";
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-ink);
}
.policy-doc[open] summary::after { content: "– Collapse"; }
.policy-doc summary h2 {
  margin: 0;
  font-size: 17px;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  padding: 0;
  color: var(--navy);
}
.policy-doc summary .muted { font-size: 13px; }
.policy-doc-body { padding: 0 20px 18px; }
.policy-doc-body .card { padding: 16px 18px; }

/* ---------- FAQ page ---------- */
.faq-doc { max-width: 720px; margin: 0 auto; }
.faq-section { margin: 0 0 28px; }
.faq-section h2 { font-size: 19px; margin: 0 0 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 8px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--teal-ink); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item-body { padding: 12px 18px 16px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.faq-cta { text-align: center; margin-top: 20px; }

/* ---------- Ops moderation controls on public listing pages ---------- */
.ops-moderation { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip, .kpi-grid { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 32px; }
}
@media (max-width: 640px) {
  .header-row { flex-wrap: wrap; }
  .header-search { order: 3; flex: 1 1 100%; max-width: none; }
  /* The action links (Browse products / Request a quote / Dashboard / Sign
     out) no longer fit on one line on a phone. Rather than letting them run
     off the edge of the screen, turn the row into its own horizontal-scroll
     strip so every link, including Sign out, is reachable by swiping. */
  .header-actions {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .header-actions > a, .header-actions > .btn-rfq { flex: 0 0 auto; }
  .cat-bar-links { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------- Analytics dashboards (ops-wide + per-company) ---------- */
.analytics-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 24px; }
.analytics-kpi { display: flex; align-items: center; gap: 14px; padding: 16px; }
.analytics-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.analytics-kpi-icon-navy { background: var(--navy-soft); color: var(--navy); }
.analytics-kpi-icon-teal { background: var(--teal-soft); color: var(--teal-ink); }
.analytics-kpi-icon-amber { background: var(--amber-bg); color: var(--amber); }
.analytics-kpi-icon-blue { background: var(--blue-bg); color: var(--blue); }
.analytics-kpi-icon-green { background: var(--green-bg); color: var(--green); }
.analytics-kpi-icon-red { background: var(--red-bg); color: var(--red); }
.analytics-kpi-label { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.analytics-kpi-value { font-size: 24px; color: var(--navy); }
.analytics-kpi-of { font-size: 14px; color: var(--muted); font-weight: 600; }

.analytics-chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 28px; }
.analytics-chart-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 28px; }
.analytics-chart-card { padding: 18px; }
.analytics-chart-card h2 { font-size: 16px; margin-bottom: 12px; }

.analytics-table-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 24px; align-items: start; }
.ops-verify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ops-verify-list li { display: flex; align-items: flex-start; gap: 10px; }
.ops-verify-list strong { display: block; font-size: 14px; }
.ops-verify-note { font-size: 13px; margin-top: 12px; }
.analytics-section-title { display: flex; align-items: center; gap: 8px; margin: 28px 0 4px; }
.analytics-empty { padding: 24px; text-align: center; color: var(--muted); }

@media (max-width: 1000px) {
  .analytics-chart-grid, .analytics-chart-grid-2 { grid-template-columns: 1fr; }
  .analytics-table-grid { grid-template-columns: 1fr; }
  .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .analytics-kpi-grid { grid-template-columns: 1fr; }
}

/* ---------- Messaging ---------- */
.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  margin: 10px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.msg-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.msg-bubble.msg-mine {
  align-self: flex-end;
  background: var(--teal-soft);
  border-color: var(--teal-soft);
}
.msg-meta { margin: 0 0 2px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.msg-body { margin: 0; font-size: 14px; color: var(--text); word-wrap: break-word; }
.msg-empty { padding: 8px 0; }
.msg-form { display: flex; gap: 8px; max-width: 520px; margin: 10px 0; }
.msg-form input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
}
.msg-disclosure summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.msg-disclosure summary::-webkit-details-marker { display: none; }
.msg-disclosure[open] summary { margin-bottom: 6px; }

/* Facebook-style unread count, shared by the header icon and sidebar link. */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
}

/* ---------- Inbox ---------- */
.inbox-list { display: flex; flex-direction: column; gap: 2px; max-width: 720px; }
.inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.inbox-row:hover { background: var(--bg); }
.inbox-row-unread { background: var(--teal-soft); }
.inbox-row-icon { color: var(--teal); flex: 0 0 auto; margin-top: 2px; }
.inbox-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.inbox-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inbox-row-ref { font-size: 12px; }
.inbox-row-preview {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Commitment fee ---------- */
.fee-amount { display: block; font-size: 12px; margin-top: 2px; }
.fee-inline-form { margin-top: 6px; }
.fee-note { font-size: 12px; margin: 6px 0 0; }
.fee-dispute-form { display: flex; flex-direction: column; gap: 6px; max-width: 260px; margin-top: 6px; }
.fee-dispute-form textarea {
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}