/* 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: 16px;
  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);
}
.hero-band .mart-hero { position: relative; z-index: 2; 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; }
}

/* Homepage hero only: the photo and the navy gradient are their own
   full-bleed layers behind the text, instead of one combined
   background-image on .hero-band — splitting them is what lets the photo
   alone slowly zoom (Ken Burns) while the gradient and the text above it
   never move, so contrast and layout stay fixed no matter what the photo
   is doing. .hero-band's own overflow:hidden (above) clips the zoomed
   edges so they never poke past the band. */
.hero-photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  z-index: 0;
  transform-origin: center center;
  animation: heroKenBurns 16s ease-in-out infinite;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}
@media (max-width: 700px) {
  /* Keeps the Mbare Musika signage centred and legible on the stacked
     mobile layout, same crop point the combined background used before. */
  .hero-photo-layer { background-position: center 60%; }
}
/* A visible zoom over the full 16s loop, eased both in and out so the
   cycle repeats with no visible cut at the seam. First shipped at 5% per
   the original brief, but that read as motionless on an actual screen —
   bumped to a size that's unmistakable at a glance without feeling like a
   dramatic push-in. */
@keyframes heroKenBurns {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-layer { animation: none; }
}
.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-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-welcome { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.pill-welcome-en { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.hero-sub { color: var(--muted); font-size: 16px; margin: 0; }
.accent-italic { font-style: italic; font-weight: 700; color: var(--teal); }
.accent-teal { color: var(--teal-ink); }

/* Glass panel grounding the search/CTA cluster against the hero photo —
   keeps the h1 punchy on the bare image while the "fine print" sits on a
   readable surface instead of relying on a text-shadow alone. */
.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin-top: 6px;
  padding: 18px 20px 20px;
  background: rgba(15, 42, 74, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-band .hero-panel .hero-sub { color: rgba(255, 255, 255, 0.96); text-shadow: none; }
/* .term-good/.term-bad are styled for the compare-section's white card
   (dark teal-ink / muted grey) — unreadable on the hero's dark glass panel,
   so this scope gets its own lighter pair instead of inheriting those. */
.hero-band .hero-panel .term-good { color: var(--teal); }
.hero-band .hero-panel .term-bad { color: rgba(255, 255, 255, 0.65); }

.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: 0;
}
.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); }
.eyebrow-flow { margin-top: 14px; }
.hero-secondary-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-secondary-link:hover { color: var(--teal-ink); }

/* ---------- Buyer / supplier split ---------- */
.split-section { margin: 36px 0; }
.split-heading { text-align: center; margin-bottom: 18px; }
.split-heading h2 { margin-top: 4px; }
.split-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.split-card h3 { margin-bottom: 8px; }
.split-link { color: var(--teal-ink); font-weight: 700; font-size: 14px; display: inline-block; margin-top: 4px; }
.split-link:hover { color: var(--navy); }
@media (max-width: 640px) {
  .split-grid { grid-template-columns: 1fr; }
}

.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);
}
/* A category icon (see {% product_placeholder_icon %}) on a soft navy
   tint, replacing the old plain "P" letter on a solid navy block — a page
   of unphotographed listings now reads as its categories at a glance
   instead of a wall of identical tiles. */
.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-soft);
  color: var(--navy);
}
/* Wraps just the image (not the whole card) so the "New" badge below can
   sit in its corner without disturbing the card's own padding/layout. */
.product-media { position: relative; margin-bottom: 10px; }
.product-media .product-img { margin-bottom: 0; }
.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.product-card .btn { display: block; margin-top: 10px; text-align: center; }

/* A missing, zero, or implausible price (see Product.has_displayable_price)
   prints as this instead of a number — same weight as a real price so the
   card doesn't look broken, just quieter, since there's nothing to compare
   it against. */
.price-request { color: var(--muted); font-weight: 700; }

/* Supplier-only: on their own My products page, a price the display rule
   above is hiding from buyers gets a private, amber nudge to fix it — never
   shown anywhere a buyer can see. */
.product-price-nudge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--amber);
  background: var(--amber-bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin: 8px 0 0;
}
.product-price-nudge svg { flex: 0 0 auto; margin-top: 1px; }

/* ---------- Category shelves (homepage) ---------- */
/* A small fixed grid per category (2 columns on phones, 4 on desktop)
   instead of a single ever-growing grid or a swipe-to-discover row — every
   listing in the row is visible without needing to scroll sideways, and
   _build_product_rows() caps each category to 4 products so this never
   grows taller than one 2x2 block; "View all" covers the rest. Unlike
   .product-grid, this never collapses to a single column — a 2-up grid is
   the whole point on a phone. */
.shelf { margin: 28px 0; }
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 12px 0 0;
}
@media (max-width: 900px) {
  .shelf-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 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; }
}

/* ---------- Similar products (product detail page) ---------- */
/* A swipeable row, not a grid — this sits below one specific product's own
   details as a "you might also want to browse" nudge, not primary content,
   so the old shelf-row treatment (plain overflow-x + scroll-snap, no
   carousel library) still fits here even though the homepage moved to a
   fixed grid. */
.similar-products {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
/* A quiet section label, not a full h2 — a short teal dash instead of the
   usual bold navy heading, so "More in X" reads as a soft nudge to keep
   browsing rather than competing with the product's own title/price above
   it for attention. */
.similar-products-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 2px;
}
.similar-products-heading::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--teal);
  flex: 0 0 auto;
}
.similar-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;
}
.similar-scroll .product-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .similar-scroll .product-card { flex-basis: 68vw; }
}
.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
   shield-check seal, next to a bold label, rather than a thin outline+text
   pill. Now an <a> to terms.html#verification (see {% verification_badge %}
   in ph_icons.py), so it needs its own hover/focus treatment instead of
   inheriting the site's underlined-link default. */
.verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.verified-tag:hover, .verified-tag:focus-visible { text-decoration: underline; }
.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); }
/* Icon-only variant (show_label=False): no visible tier text next to a
   product card or profile header, just the seal — hovering/tapping it is
   what surfaces the tier name (title/aria-label) and links to the legend. */
.verified-tag-compact { gap: 0; }
.verified-tag-compact:hover, .verified-tag-compact:focus-visible {
  text-decoration: none;
  filter: brightness(1.15);
}

/* ---------- Trust trio ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 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); }

/* ---------- Verification tiers ---------- */
.verify-tiers { margin: 32px 0; }
.verify-tiers-heading { text-align: center; margin-bottom: 18px; }
.verify-tiers-heading p { margin: 6px 0 0; }
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 820px; margin: 0 auto; }
.tier-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 18px;
  border: 1.5px solid var(--line);
}
.tier-card-blue { border-color: var(--blue); background: var(--blue-bg); }
.tier-card-yellow { border-color: var(--gold); background: var(--gold-bg); }
.tier-icon { flex: 0 0 auto; display: flex; margin-top: 2px; }
.tier-icon-blue { color: var(--blue); }
.tier-icon-yellow { color: var(--gold); }
.tier-card h3 { font-size: 15.5px; margin-bottom: 4px; }
.tier-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* ---------- Live activity feed ---------- */
.activity-feed { margin: 32px 0; }
.activity-feed-heading { display: flex; align-items: baseline; gap: 8px; }
.activity-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: activityPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .activity-live-dot { animation: none; }
}
@keyframes activityPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 187, 173, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(43, 187, 173, 0); }
}
.activity-caption { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 2px 0 14px; }
/* A single "slot" holding the currently-visible card — cards are
   absolutely stacked so the crossfade/slide between them (a soft take on
   "card flipping") never collapses the layout's height mid-transition. */
.activity-rotator { position: relative; min-height: 76px; max-width: 900px; margin: 0 auto; }
/* Now a real link (straight to the RFQ — sign-in-gated for a logged-out
   visitor, quotable right away for a matching supplier already signed in),
   so it gets its own hover/focus lift instead of just looking like a card. */
.activity-card {
  display: none;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  position: absolute;
  inset: 0;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.activity-card.is-active {
  display: flex;
  position: relative;
  animation: activityCardIn 0.5s ease;
}
.activity-card.is-active:hover,
.activity-card.is-active:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(15, 42, 74, 0.14);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .activity-card.is-active { animation: none; }
}
@keyframes activityCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.activity-card .chip { flex: 0 0 auto; }
.activity-row-title { flex: 1; font-size: 14px; color: var(--navy); font-weight: 500; }
.activity-row-quotes { font-size: 13px; color: var(--teal-ink); font-weight: 700; }
.activity-row-time { font-size: 12.5px; color: var(--muted); }
.activity-row-cta { font-size: 13px; color: var(--teal-ink); font-weight: 700; flex: 0 0 auto; }
.activity-empty { color: var(--muted); font-size: 14px; }
.activity-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.2s; }
.activity-dot.is-active { background: var(--teal); }

/* ---------- "Not a shop" comparison ---------- */
.compare-section { margin: 32px 0; }
.compare-section h2 { text-align: center; margin-bottom: 24px; }
.compare-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto 12px; }
.compare-head {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px;
  border-radius: 999px;
}
.compare-head-bad { background: var(--grey-bg); color: var(--muted); }
.compare-head-good { background: var(--teal-soft); color: var(--teal-ink); }
.compare-grid { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
}
.compare-card-bad { background: var(--grey-bg); color: var(--muted); }
.compare-card-good { background: var(--teal-soft); color: var(--teal-ink); font-weight: 600; }
.compare-icon { flex: 0 0 auto; display: flex; }
.compare-card-bad .compare-icon { color: var(--muted); }
.compare-card-good .compare-icon { color: var(--teal); }
.compare-note { text-align: center; color: var(--muted); font-size: 13.5px; font-style: italic; margin-top: 18px; }
.term-good { color: var(--teal-ink); font-style: normal; font-weight: 700; }
.term-bad { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) {
  .compare-heads { grid-template-columns: 1fr; }
  .compare-pair { grid-template-columns: 1fr; }
}

/* ---------- Install-app prompt (homepage) ---------- */
.install-app-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 20px;
}
.install-app-icon { border-radius: 14px; flex: 0 0 auto; }
.install-app-card h2 { margin-bottom: 4px; }
.install-app-card p { margin: 0 0 10px; }
.install-app-card p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .install-app-card { flex-direction: column; text-align: center; }
}

/* ---------- 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;
  /* Mobile Safari/Chrome auto-zoom the page on focus for any text field
     under 16px — form controls don't inherit the body's font-size by
     default, so without this they were quietly falling back to the
     browser's smaller default control font. 16px sits right at the
     threshold that keeps focus from triggering that zoom, on login,
     register, RFQ and every other .form field. */
  font-size: 16px;
}
.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;
  /* A confirmation banner after a redirect (extend a deadline, cancel a
     request...) needs to read as "something just happened," not sit
     there looking identical to page furniture that was already there —
     a one-off pulse on load draws the eye without being an ongoing
     distraction. prefers-reduced-motion users skip it and just get the
     static banner, which is still fully legible on its own. */
  animation: banner-in 0.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .banner-error, .banner-success, .banner-warning, .banner-info, .banner-debug {
    animation: none;
  }
}
@keyframes banner-in {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.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 is a <details> element now (see base_app.html) — closed by
   default with zero JS, so on a phone it collapses to this one-line
   "Menu" toggle and the actual page content is simply the next thing on
   the page, nothing tall to scroll past first. Same visual chevron
   treatment as .faq-item summary, for a consistent disclosure affordance
   across the app. */
.sidebar summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after { content: "\25BC"; font-size: 11px; color: var(--teal-ink); }
.sidebar[open] summary::after { content: "\25B2"; }
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-radius: 10px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  transition: background-color 0.12s ease;
}
.sidebar a:hover, .sidebar a:focus-visible { background: var(--bg); }
.sidebar a.is-active { background: var(--navy-soft); }
.sidebar-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sidebar a.is-active .sidebar-icon { background: var(--navy); color: #fff; }
.sidebar-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; padding: 0 7px; }
.sidebar a.sign-out {
  color: var(--red);
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  border-radius: 0 0 10px 10px;
}
.sidebar a.sign-out .sidebar-icon { background: var(--red-bg); color: var(--red); }
.sidebar a.sign-out:hover, .sidebar a.sign-out:focus-visible { background: var(--red-bg); }
/* Desktop keeps the permanent left-column look this always had — the
   sidebar starts open (see the `open` attribute in base_app.html) and
   only the inline script there ever closes it, on a phone-width screen.
   This rule just hides the "Menu" toggle line itself on desktop, since
   there's nothing to disclose when it's never going to be closed.
   (An earlier version of this rule tried to force the details element
   open purely in CSS by overriding its children's `display` — that
   doesn't work: a browser hides a closed details element's content
   through an internal mechanism a CSS display override can't reach,
   so the box rendered but every link inside stayed invisible.) */
@media (min-width: 901px) {
  .sidebar summary { display: none; }
}
.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); }

/* Dashboard KPI cards: a short, scannable preview (capped at 4 rows in the
   template) rather than the full list dumped as plain bullets — a "View
   all N" link covers the rest so a busy account (many open RFQs, quotes,
   orders) doesn't turn the card into an overwhelming wall of text. */
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-head span { display: inline; }
.kpi-count {
  flex: 0 0 auto;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
}
.kpi-list { list-style: none; margin: 10px 0 0; padding: 0; }
.kpi-list li + li { border-top: 1px solid var(--line); }
.kpi-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 2px;
  min-width: 0;
}
.kpi-ref {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-ink);
  background: var(--teal-soft);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.kpi-title {
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.kpi-empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.kpi-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-ink);
}

/* 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: 10px; }
.notif-list li.muted { padding: 4px 12px; }
/* Each notification is one full-row link (icon + text + "View" cue all
   point at the same place) rather than a plain bulleted line — reads as a
   card, like an inbox or activity feed, and the whole row is the click
   target instead of just the text. */
.notif-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.notif-row:hover, .notif-row:focus-visible {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  border-color: var(--teal);
}
.notif-text { flex: 1 1 auto; font-weight: 600; color: var(--text); }
.notif-view { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
/* A touch bigger here than .chip-icon's base 28px — this is the sole visual
   anchor of a whole card row, rather than a small inline marker next to
   text elsewhere (company_detail.html, ops_home.html, etc. keep the base
   size), so it earns a little more presence. */
.notif-row .chip-icon { width: 32px; height: 32px; }
.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; font-family: inherit; font-size: 16px; }
.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;
}

/* ---------- Account page: profile header, role toggle, settings rows ---------- */
.profile-card { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 auto;
}
.profile-card-name { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.profile-card-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* Buyer/Supplier role indicator — reflects the account's actual roles,
   it isn't a switch the person clicks (each side lights up when that role
   applies; both can be active at once). */
.role-toggle {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.role-toggle-seg {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.role-toggle-seg.is-active { background: var(--card); color: var(--navy); box-shadow: var(--shadow); }

/* Nudge banners — verification / add-a-role prompts on the account page. */
.nudge-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.nudge-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card);
  color: var(--teal-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nudge-banner-body { flex: 1 1 auto; }
.nudge-banner-body strong { display: block; color: var(--text); }
.nudge-banner-body p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.nudge-banner form { flex: 0 0 auto; }
.settings-chevron {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-ink);
}
.settings-chevron svg { transform: rotate(-90deg); }

/* Settings rows — icon-square + label/value + trailing action, one row per
   account fact, replacing the old plain label/value pairs. */
.settings-group { display: grid; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.settings-group .settings-row:first-child { border-top: none; padding-top: 6px; }
.settings-row-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--navy-soft);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.settings-row-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.settings-row-value { font-size: 14px; color: var(--text); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.settings-row-action { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
@media (max-width: 480px) {
  .nudge-banner { flex-wrap: wrap; }
  .settings-row { flex-wrap: wrap; }
  .settings-row-action { margin-left: 48px; }
}

/* ---------- 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;
  background: var(--navy);
  padding: 40px 20px 32px;
  margin-top: 48px;
}
.footer-inner { max-width: 520px; margin: 0 auto; }
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.footer-dot { color: var(--teal); }
.footer-tagline { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin: 6px 0 0; }
.footer-welcome { color: rgba(255, 255, 255, 0.5); font-size: 13px; font-style: italic; margin: 2px 0 0; }
.footer-social { display: flex; justify-content: center; gap: 14px; margin: 16px 0; }
.footer-social a { color: rgba(255, 255, 255, 0.75); display: inline-flex; }
.footer-social a:hover { color: var(--teal); }
.footer-links { margin-top: 4px; font-size: 13px; }
.footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 2px; }
.footer-links a:hover { color: #fff; }

/* ---------- Social proof (homepage reel embed) ---------- */
.social-proof { margin-top: 28px; }
.social-embed-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}
.social-embed-wrap > blockquote.instagram-media { margin: 0 !important; width: 100% !important; max-width: 400px !important; }

/* ---------- Feedback widget (floating, site-wide) ---------- */
.feedback-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
}
.feedback-fab > summary {
  list-style: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.feedback-fab > summary::-webkit-details-marker { display: none; }
.feedback-fab > summary:hover { background: var(--teal-ink); }
.feedback-panel {
  position: absolute;
  right: 0;
  bottom: 58px;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.feedback-panel-title { font-weight: 600; margin: 0 0 10px; }
.feedback-panel select,
.feedback-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font: inherit;
  color: inherit;
  background: var(--bg);
}
.feedback-panel textarea { resize: vertical; }
.feedback-panel .btn { width: 100%; }
@media (max-width: 480px) {
  .feedback-fab { right: 12px; bottom: 12px; }
  .feedback-panel { width: calc(100vw - 48px); right: -6px; }
}

/* ---------- 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; font-size: 16px; }
.browse-filters select { padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 16px; }
.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: 170px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; 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 { grid-template-columns: repeat(2, 1fr); }
  .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; }
  /* Pricing / Help / FAQ / WhatsApp / phone used to just disappear here
     (display: none) with no other way to reach them on a phone. Give this
     row the same horizontal-scroll treatment as .header-actions above,
     on its own full-width line under "All categories", so every link
     stays reachable by swiping instead of vanishing. */
  .cat-bar { flex-wrap: wrap; }
  .cat-all { flex: 1 1 100%; }
  .cat-bar-links {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .cat-bar-links a { flex: 0 0 auto; }
  .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; }

/* KPI cards that link through to a breakdown page/section (ops home) */
a.kpi-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.kpi-link:hover {
  box-shadow: 0 8px 20px rgba(15, 42, 74, 0.14);
  transform: translateY(-2px);
}

/* Ops company directory / company detail */
.company-list-table td, .company-list-table th { vertical-align: middle; }
.company-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.company-detail-section { margin-bottom: 20px; }
.company-detail-section h2 { font-size: 16px; margin-bottom: 10px; }
.company-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; font-size: 14px; }
.company-fact-grid dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.company-fact-grid dd { margin: 0 0 10px; }
@media (max-width: 900px) {
  .company-detail-grid { grid-template-columns: 1fr; }
}

.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;
  font-size: 16px;
}
.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: 16px;
  resize: vertical;
}