:root {
  /* Opt out of browser-forced dark mode; see the meta tag in base.html. */
  color-scheme: only light;
  --ih-primary: #14B8A6;
  --ih-primary-mid: #0D9488;
  --ih-primary-dark: #263238;
  --ih-heading: #263238;
  --ih-accent: #14B8A6;
  --ih-accent-dark: #0D9488;
  --ih-ink: #1e2a2e;
  --ih-muted: #607d8b;
  --ih-bg: #f4f7f7;
  --ih-card: #ffffff;
  --ih-border: var(--b-dde8e7, #dde8e7);
  --ih-radius: 14px;
  --ih-shadow: 0 6px 24px rgba(38,50,56,0.08);
  --ih-shadow-hover: 0 14px 38px rgba(38,50,56,0.18);
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--ih-bg);
  color: var(--ih-ink);
}

a { text-decoration: none; }

/* Bootstrap 5.3 defines .text-muted as rgba(33,37,41,0.75) — translucent.
   Phone browsers that force dark mode do not invert translucent text, so it
   stayed near-black while the card behind it darkened, giving 1.05:1 contrast
   and vanishing: stat labels, "No enquiries yet", the profile checklist and
   the budget captions all disappeared. An opaque value inverts like any other
   colour, and reads better on white too (4.8:1 against Bootstrap's 4.0:1). */
.text-muted { color: var(--t-5a6a72, #5a6a72) !important; }
.text-muted a, a.text-muted { color: inherit; }

/* ─── Back to top ─── */
#back-to-top {
  position: fixed;
  bottom: 96px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ih-primary-dark);
  color: var(--ih-accent);
  border: 2px solid var(--ih-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(16px);
  z-index: 490;
  font-size: 1rem;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover { background: var(--ih-accent); color: #fff; }

/* ─── Floating Action Button ─── */
#fab-rfq {
  position: fixed;
  bottom: 24px; right: 22px;
  height: 50px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--ih-accent);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 8px 28px rgba(20,184,166,0.45);
  cursor: pointer;
  z-index: 490;
  display: flex; align-items: center; gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  letter-spacing: 0.2px;
}
#fab-rfq:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(20,184,166,0.55);
  color: #fff;
}
#fab-rfq .fab-label { display: none; }
@media (min-width: 768px) {
  #fab-rfq .fab-label { display: inline; }
}
/* The mobile bottom nav already has a Post RFQ button, so this floating one was
   a second route to the same page — and it sat on top of Add Product. Keep it
   only where there is no bottom nav. */
@media (max-width: 991.98px) {
  #fab-rfq { display: none !important; }
}

/* ─── Mobile navbar row 1 ─── */
/* Menu, brand and account must share one line. Bootstrap's navbar wraps by
   default, so without trimming these three the account button dropped onto a
   line of its own and the header became three rows deep. */
@media (max-width: 991.98px) {
  .ih-navbar > .container-fluid { flex-wrap: nowrap; min-width: 0; }
  .ih-navbar .ih-brand span { font-size: 1.12rem !important; }
  .ih-navbar .ih-brand img { height: 26px !important; }
  .ih-navbar .navbar-toggler { padding: 3px 7px !important; }
  .ih-navbar .dropdown-toggle {
    max-width: 132px !important;
    font-size: 0.72rem !important;
    padding: 4px 9px !important;
  }
  /* A bordered, padded toggler ate the width the brand needed, so the name
     truncated to TRADEA…. Strip it back to the icon. */
  .ih-navbar .navbar-toggler {
    border: none !important;
    padding: 0 4px !important;
    box-shadow: none !important;
    flex-shrink: 0;
  }
  .ih-navbar .navbar-toggler-icon { width: 1.05em; height: 1.05em; }

  /* The wishlist and bell now share row 1, and they must always be reachable,
     so the brand is the one thing allowed to give way when space runs out. */
  .ih-navbar .ih-brand {
    flex-shrink: 1 !important;
    min-width: 0;
    overflow: hidden;
  }
  .ih-navbar .ih-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ih-navbar .ih-nav-icon {
    flex-shrink: 0;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
  .ih-navbar .dropdown { min-width: 0; flex-shrink: 1; }
  .ih-navbar .dropdown-toggle {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 8px !important;
  }
  .ih-acct-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 96px;
  }
  /* No overflow:hidden on these rows — it clips the account dropdown, which
     has to hang below row 1 over the search. Fit is handled by letting the
     brand shrink, with overflow-x:hidden on the page as the backstop. */
  .ih-navbar .dropdown-menu { z-index: 1060; }
}

/* A small phone with the system font turned up pushed the bell past the edge.
   Claw back padding, gap and icon size at that end of the range. */
@media (max-width: 400px) {
  .ih-navrow2 {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  .ih-navbar .ih-nav-icon {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }
  /* Safety net: nothing should ever scroll the page itself sideways. Scoped to
     mobile so it cannot interfere with the sticky filter sidebar on desktop,
     which needs overflow visible on its ancestors. */
  html, body { overflow-x: hidden; }
}

/* ─── Home hero ─── */
/* Stays on one line on a phone, just smaller, so it reads as a strapline
   rather than filling the width edge to edge. */
@media (max-width: 991.98px) {
  .ih-hero-title { font-size: 0.95rem !important; }
}
@media (max-width: 360px) {
  .ih-hero-title { font-size: 0.86rem !important; }
}

/* ─── Horizontally scrollable tables ─── */
/* The enquiry tables were squeezing six columns into the phone's width, which
   crushed the cells and clipped "Updated" to "Upd…". Give the table a real
   minimum width so the columns keep their space, and let the wrapper scroll. */
.ih-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ih-enq-table { min-width: 580px; }
.ih-enq-table th,
.ih-enq-table td { white-space: nowrap; }
/* A hint, so it is obvious the row continues past the edge. */
.ih-scroll-hint { display: none; }
@media (max-width: 767.98px) {
  .ih-scroll-hint {
    display: block;
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 4px;
  }
}

/* ─── Mobile bottom nav ─── */
#mobile-bottom-nav .mnav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 2px 2px 0;
  text-decoration: none;
  color: #B3B7B9;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.1;
}
#mobile-bottom-nav .mnav-item:active { color: var(--ih-accent); }
#mobile-bottom-nav .mnav-item > i { font-size: 1.2rem; }
#mobile-bottom-nav .mnav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
#mobile-bottom-nav .mnav-fab {
  width: 42px; height: 42px;
  background: var(--ih-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -18px;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.45);
  flex-shrink: 0;
}
#mobile-bottom-nav .mnav-fab i { font-size: 1.3rem; color: #fff; }
/* Narrow phones: shrink rather than let labels collide. */
@media (max-width: 360px) {
  #mobile-bottom-nav .mnav-item { font-size: 0.54rem; }
  #mobile-bottom-nav .mnav-item > i { font-size: 1.1rem; }
}

/* ─── Trust ticker ─── */
.trust-ticker-wrap {
  background: var(--ih-primary-dark);
  padding: 5px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(20,184,166,0.2);
}
.trust-ticker {
  display: flex;
  gap: 40px;
  animation: ticker-scroll 36s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.trust-ticker:hover { animation-play-state: paused; }
.trust-ticker-item {
  color: #B3B7B9;
  font-size: 0.7rem;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.trust-ticker-item i { color: var(--ih-accent); font-size: 0.72rem; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Navbar ─── */
.ih-navbar {
  background: var(--ih-primary-dark);
  border-bottom: 1px solid rgba(20,184,166,0.15);
}
.ih-brand {
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff !important;
  letter-spacing: -0.3px;
  white-space: nowrap;
  line-height: 1.15;
}
.ih-brand:hover, .ih-brand:focus { color: #fff !important; text-decoration: none; }
.ih-brand .ih-brand-accent { color: var(--ih-accent) !important; }
.ih-navbar .nav-link {
  font-weight: 500;
  color: #D8DADB;
  transition: color 0.18s;
  white-space: nowrap;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  font-size: 0.9rem;
}
.ih-navbar .nav-link:hover { color: var(--ih-accent); }
.ih-navbar .navbar-toggler { border-color: rgba(255,255,255,0.3); }
.ih-navbar .navbar-toggler-icon { filter: invert(1); }
.ih-navbar .dropdown-menu { background: var(--s-1d2c31, #1d2c31); border: 1px solid rgba(255,255,255,0.1); }
.ih-navbar .dropdown-menu .dropdown-item { color: #D8DADB; transition: background 0.15s; }
.ih-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.08); color: var(--ih-accent); }
.ih-navbar .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,0.1); }
.ih-navbar .btn-outline-ih { border-color: rgba(255,255,255,0.4); color: #fff; }
.ih-navbar .btn-outline-ih:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.6); }

.btn-ih-primary {
  background: var(--ih-primary-dark);
  border: 2px solid var(--ih-accent);
  color: #fff; font-weight: 600;
}
.btn-ih-primary:hover { background: var(--s-1c2b30, #1c2b30); border-color: var(--ih-accent-dark); color: #fff; }
.btn-ih-accent {
  background: var(--ih-primary-dark);
  border: 2px solid var(--ih-accent);
  color: #fff; font-weight: 600;
}
.btn-ih-accent:hover { background: var(--s-1c2b30, #1c2b30); border-color: var(--ih-accent-dark); color: #fff; }
.btn-outline-ih {
  border: 1.5px solid var(--ih-primary-dark);
  color: var(--ih-primary-dark); font-weight: 600;
}
.btn-outline-ih:hover { background: var(--ih-primary-dark); color: #fff; }

.notif-badge {
  position: absolute;
  top: -6px; right: -8px;
  font-size: 0.62rem;
  padding: 2px 6px;
}

/* ─── Hero ─── */
.hero {
  background: linear-gradient(160deg, #1b272c 0%, #263238 60%, #2d3f47 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 5rem;
}
.hero::after {
  content: "";
  position: absolute; right: -100px; top: -60px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(20,184,166,0.18), transparent 68%);
  border-radius: 50%;
}
.hero::before {
  content: "";
  position: absolute; left: -80px; bottom: 20px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(20,184,166,0.10), transparent 70%);
  border-radius: 50%;
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.hero .hero-sub { color: #CFD2D3; font-size: 1rem; max-width: 580px; }
.hero-search {
  background: var(--s-fff, #fff); border-radius: 60px; padding: 7px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.40);
  display: flex; gap: 8px; max-width: 660px;
}
.hero-search input {
  border: 0; outline: 0; flex: 1;
  padding: 0 20px; font-size: 1rem;
  color: var(--ih-ink); background: transparent;
}
.hero-search button {
  border-radius: 50px; padding: 11px 28px;
  white-space: nowrap;
  background: var(--ih-primary-dark);
  border: 2px solid var(--ih-accent);
  color: #fff; font-weight: 600;
}
.hero-search button:hover { background: var(--s-1c2b30, #1c2b30); border-color: var(--ih-accent-dark); }
.hero-cats a {
  color: #DEE0E1;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 40px; padding: 5px 14px;
  font-size: 0.82rem; transition: 0.18s;
  background: rgba(255,255,255,0.06);
}
.hero-cats a:hover { background: var(--ih-primary-dark); border-color: var(--ih-accent); color: #fff; }
.hero-cats .view-all-link {
  color: var(--ih-accent); border: 1px solid rgba(20,184,166,0.4);
  border-radius: 40px; padding: 5px 14px;
  font-size: 0.82rem; font-weight: 600;
  background: rgba(20,184,166,0.1); transition: 0.18s;
}
.hero-cats .view-all-link:hover { background: var(--ih-accent); color: #fff; }

/* ─── Stats counter ─── */
.stat-num {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--ih-primary-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-num span { color: var(--ih-accent); }
.stat-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 1.5px; color: var(--t-9e9e9e, #9e9e9e);
  text-transform: uppercase; margin-top: 4px;
}

/* ─── RFQ Banner ─── */
.rfq-banner {
  background: linear-gradient(120deg, #f0fdfa 0%, #e6faf7 100%);
  border: 1.5px solid rgba(20,184,166,0.3);
  border-radius: var(--ih-radius);
  padding: 1.5rem 2rem;
}
.rfq-banner .rfq-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(20,184,166,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rfq-banner .rfq-icon i { font-size: 1.6rem; color: var(--ih-accent); }

/* ─── Supplier cards ─── */
.supplier-card {
  background: var(--ih-card);
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  padding: 1.4rem;
  transition: 0.22s ease;
  height: 100%;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ih-ink);
}
.supplier-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ih-shadow-hover);
  border-color: rgba(20,184,166,0.4);
  color: var(--ih-ink);
}
.supplier-logo {
  width: 56px; height: 56px; border-radius: 12px;
  object-fit: contain; background: var(--s-f0f4f4, #f0f4f4);
  border: 1px solid var(--ih-border); flex-shrink: 0;
}
.supplier-logo-placeholder {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, #f0fdfa, #e6faf7);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: var(--ih-primary); flex-shrink: 0;
}

/* ─── Section titles ─── */
.section-title {
  /* Its own token: identical to the old colour in light mode, but text,
     so it must flip in dark - unlike --ih-primary-dark, which is a surface. */
  font-weight: 700; color: var(--ih-heading);
  letter-spacing: -0.4px; position: relative;
}
.section-title::after {
  content: ""; display: block;
  width: 44px; height: 3px;
  background: var(--ih-accent); border-radius: 4px; margin-top: 8px;
}
.section-sub { color: var(--ih-muted); }

/* ─── Category tiles ─── */
.category-tile {
  display: block; background: var(--ih-card);
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  padding: 1.6rem 1rem; text-align: center;
  transition: 0.25s ease; height: 100%;
}
.category-tile:hover { transform: translateY(-6px); box-shadow: var(--ih-shadow-hover); border-color: transparent; }
.cat-icon {
  width: 62px; height: 62px; margin: 0 auto 0.9rem;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--ih-primary);
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
  transition: 0.25s ease;
}
.category-tile:hover .cat-icon {
  background: linear-gradient(135deg, var(--ih-primary), var(--ih-primary-mid));
  color: #fff;
}
.cat-name { font-weight: 600; font-size: 0.92rem; color: var(--ih-ink); }

/* ─── Product cards ─── */
.feat-card {
  background: var(--ih-card);
  border: 1px solid var(--ih-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  height: 100%; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; user-select: none;
}
.feat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(20,184,166,0.13), 0 2px 8px rgba(0,0,0,0.06);
  border-color: rgba(20,184,166,0.4);
}

/* Image — fixed height avoids all flex/aspect-ratio ambiguity */
.feat-card .feat-img {
  /* Square, whatever shape the photo is. Product images arrive square and
     rectangular, so a fixed box left letterbox bars in our own dark colour -
     which merged into the charcoal card and hid where the photo ended. */
  aspect-ratio: 1 / 1;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Plain white behind every photo. Most product shots are already on white,
     so they blend in, and the rest get a clean neutral surround instead of
     our dark colour bleeding into the charcoal card. */
  background: #ffffff;
}
.feat-card .feat-img img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; display: block;
  /* Fill the square and crop, rather than fitting the whole photo inside it.
     Uploads range from 4000x3000 to 1080x2340 phone screenshots; contained,
     the tall ones became narrow strips with wide empty margins. */
  object-fit: cover;
  object-position: center;
  transition: transform 0.38s ease;
}
.feat-card:hover .feat-img img { transform: scale(1.07); }
.feat-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: #c8d6dc;
}

/* Badges */
.card-badges { position: absolute; top: 9px; left: 9px; display: flex; gap: 5px; flex-direction: column; }
.card-badge {
  display: inline-block; font-size: .65rem; font-weight: 700;
  padding: 3px 9px; border-radius: 50px; letter-spacing: .2px;
}
.cb-teal   { background: var(--ih-accent); color: #fff; }
.cb-dark   { background: var(--ih-primary-dark); color: #fff; }
.cb-purple { background: var(--s-d97706, #d97706); color: #fff; }

/* Hover overlay — clean gradient + single CTA */
.feat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,26,30,0.82) 0%, rgba(15,26,30,0) 52%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 14px;
  opacity: 0; transition: opacity 0.22s;
}
.feat-card:hover .feat-overlay { opacity: 1; }
.feat-overlay-btn {
  font-size: .75rem; font-weight: 700;
  padding: 7px 20px; border-radius: 50px;
  background: var(--ih-accent); color: #fff;
  text-decoration: none; border: none;
  transition: background 0.15s, transform 0.15s;
  display: inline-flex; align-items: center;
}
.feat-overlay-btn:hover { background: #0f9e8f; color: #fff; transform: scale(1.04); }

/* Body */
.feat-card .feat-body {
  padding: .9rem 1rem 1rem;
  display: flex; flex-direction: column; flex: 1;
  /* Brand charcoal, the same dark used on the navbar, footer and image
     backdrop, so the whole card reads as one block. Everything inside is
     recoloured for this ground below. */
  background: #263238;
}

/* ── Card details on the deep teal ── */
.feat-card .feat-body .feat-cat      { color: #5eead4; }
.feat-card .feat-body .feat-title    { color: #ffffff; }
.feat-card .feat-body .feat-price,
.feat-card .feat-body .feat-price-main { color: #14b8a6; }
.feat-card .feat-body .feat-price-req  { color: #5eead4; }
.feat-card .feat-body .feat-unit,
.feat-card .feat-body .feat-meta,
.feat-card .feat-body .feat-stats    { color: #b9ded9; }
.feat-card .feat-body .feat-verified { color: #5eead4; }
.feat-card .feat-body .feat-moq,
.feat-card .feat-body .feat-moq strong { color: #ffffff; }
.feat-card .feat-body .text-muted    { color: #b9ded9 !important; }
.feat-card .feat-body i              { color: inherit; }
/* Outline rather than the pale fill, which disappeared on this ground. */
.feat-card .feat-body .btn-compare-card {
  background: transparent;
  border-color: rgba(255,255,255,0.45);
  color: #ffffff;
}
.feat-card .feat-body .btn-compare-card:hover,
.feat-card .feat-body .btn-compare-card.in-compare {
  background: rgba(255,255,255,0.14);
  border-color: #5eead4;
  color: #ffffff;
}
.feat-card .feat-cat {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ih-primary); font-weight: 700; margin-bottom: 4px;
}
.feat-card .feat-title {
  font-weight: 600; font-size: .93rem; color: var(--ih-ink);
  margin-bottom: 10px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.feat-card .feat-price {
  font-weight: 800; color: var(--ih-accent); font-size: 1rem;
}
/* New prominent price */
.feat-price-main {
  font-weight: 800; color: var(--ih-accent); font-size: 1.08rem; line-height: 1.2;
}
.feat-unit {
  font-size: .7rem; font-weight: 400; color: var(--ih-muted); margin-left: 2px;
}
.feat-price-req {
  font-weight: 700; font-size: .9rem; color: var(--ih-primary);
}
.feat-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: .7rem; color: var(--ih-muted); margin-top: 6px;
}
.feat-verified {
  font-size: .68rem; color: var(--t-0d9488, #0d9488); font-weight: 600; margin-top: 5px;
}
/* Star rating row */
.feat-stars {
  display: flex; align-items: center; gap: 2px; margin-bottom: 6px;
}
/* MOQ row */
.feat-moq {
  font-size: .75rem; font-weight: 500; color: var(--ih-ink);
  margin-top: 5px;
}
.feat-moq strong { color: var(--ih-ink); }
/* Sold + views row */
.feat-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: .67rem; color: var(--ih-muted); margin-top: 4px;
}

.badge-new { background: var(--ih-accent); color: #fff; }
.badge-featured { background: var(--ih-primary); color: #fff; }

/* ─── How it works ─── */
.how-step { text-align: center; padding: 1.5rem 1rem; }
.how-step .how-num {
  width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--ih-primary), var(--ih-primary-mid));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  box-shadow: 0 8px 20px rgba(20,184,166,0.3);
}

/* ─── Seller CTA ─── */
.seller-cta {
  background: linear-gradient(120deg, #1C2833 0%, #263238 50%, #2E3F47 100%);
  border-radius: 20px; color: #fff;
  overflow: hidden; position: relative;
  border: 1px solid rgba(20,184,166,0.3);
}
.seller-cta::before {
  content: ""; position: absolute; left: -60px; bottom: -60px;
  width: 240px; height: 240px;
  background: rgba(20,184,166,0.15); border-radius: 50%;
}

/* ─── Sticky buy bar (product detail) ─── */
#sticky-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--s-fff, #fff);
  border-top: 2px solid var(--b-edf0f0, #edf0f0);
  box-shadow: 0 -8px 32px rgba(38,50,56,0.14);
  padding: 10px 0;
  z-index: 400;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#sticky-buy-bar.visible { transform: translateY(0); }

/* ─── Image lightbox ─── */
#img-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1100;
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out;
}
#img-lightbox.open { display: flex; }
#img-lightbox img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  object-fit: contain;
}
#lightbox-close {
  position: absolute; top: 20px; right: 24px; z-index: 1;
  color: #fff; font-size: 2rem; cursor: pointer;
  background: rgba(255,255,255,0.12); border: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s;
}
#lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ─── Scroll-reveal animation ─── */
.reveal {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.reveal.revealed { opacity: 1; }

/* ─── Toast ─── */
#ih-toast-container {
  position: fixed; bottom: 84px; left: 50%;
  transform: translateX(-50%);
  z-index: 800; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
/* "Added to compare" fires exactly when the compare dock opens, and at 84px it
   landed on top of the dock — hiding the Compare Now button behind the very
   toast announcing it. Lift toasts clear of the dock while it is open. */
#compare-dock.active ~ #ih-toast-container { bottom: 112px; }
/* Back-to-top sat at 96px, landing on the dock's Clear button. Lift it too. */
#compare-dock.active ~ #back-to-top { bottom: 112px; }
@media (max-width: 991.98px) {
  #compare-dock.active ~ #ih-toast-container {
    bottom: calc(156px + env(safe-area-inset-bottom));
  }
  #compare-dock.active ~ #back-to-top {
    bottom: calc(156px + env(safe-area-inset-bottom));
  }
}
.ih-toast {
  background: var(--ih-primary-dark);
  color: #fff; border-radius: 50px;
  padding: 10px 22px; font-size: 0.88rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: toast-in 0.3s ease, toast-out 0.35s ease 2.5s forwards;
  white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.ih-toast i { color: var(--ih-accent); }
@keyframes toast-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { to { opacity:0; transform:translateY(-10px); } }

/* ─── Industry filter strip ─── */
.industry-filter-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.industry-filter-strip::-webkit-scrollbar { display: none; }
.ifilter-pill {
  flex-shrink: 0;
  border: 1.5px solid var(--b-e0e8e8, #e0e8e8);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.8rem; font-weight: 600; color: var(--ih-ink);
  cursor: pointer; background: var(--s-fff, #fff);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.ifilter-pill:hover, .ifilter-pill.active {
  background: var(--ih-primary-dark);
  border-color: var(--ih-accent);
  color: #fff;
}

/* ─── Footer ─── */
.ih-footer {
  background: var(--ih-primary-dark);
  color: #C9CCCD;
  padding: 3rem 0 1.5rem;
}
.ih-footer h6 { color: #fff; font-weight: 600; letter-spacing: 0.3px; }
.ih-footer a { color: #C2C6C7; }
.ih-footer a:hover { color: var(--ih-accent); }
.ih-footer .footer-brand { font-size: 1.3rem; font-weight: 700; color: #fff; }
.ih-footer hr { border-color: rgba(255,255,255,0.14); }

/* ─── Generic card ─── */
.ih-card {
  background: var(--ih-card);
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-radius);
  box-shadow: var(--ih-shadow);
}
.rfq-strip {
  background: linear-gradient(120deg, #f0fdfa, #e6faf7);
  border: 1px solid var(--ih-border);
  border-left: 5px solid var(--ih-primary);
  border-radius: var(--ih-radius);
}

.verified-badge { color: var(--t-17a672, #17a672); font-weight: 600; }

/* ─── Feature 1: Quick View modal ─── */
#quick-view-modal .modal-content { border-radius: 16px; border: none; overflow: hidden; }
#quick-view-modal .qv-img { width: 100%; height: 240px; object-fit: cover; background: var(--s-f4f7f7, #f4f7f7); }
#quick-view-modal .qv-price { font-size: 1.5rem; font-weight: 700; color: var(--ih-accent); }
#quick-view-modal .qv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--s-f0fdfa, #f0fdfa); border: 1px solid var(--b-c7f0ea, #c7f0ea);
  border-radius: 50px; padding: 4px 12px;
  font-size: 0.76rem; font-weight: 600; color: var(--t-0d9488, #0d9488);
}

/* Feature 1: Quick View button in overlay */
.btn-ov-qv {
  background: rgba(255,255,255,0.95); color: var(--t-263238, #263238);
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 13px; border-radius: 50px;
  border: none; cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.btn-ov-qv:hover { background: var(--s-fff, #fff); transform: scale(1.06); }

/* Feature 3: Compare floating dock */
#compare-dock {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--s-1a2a32, #1a2a32); border-top: 2px solid var(--ih-accent);
  z-index: 460; padding: 10px 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  /* Off-screen means off-limits: without this the hidden dock still catches
     taps along the bottom edge. */
  visibility: hidden;
}
#compare-dock.active { transform: translateY(0); visibility: visible; }

/* On phones the dock used to be hidden entirely (d-none d-lg-block), so a
   buyer could add products to compare but had no way to open the comparison.
   Show it, sitting above the fixed bottom nav, and shrink it to fit. */
@media (max-width: 991.98px) {
  #compare-dock {
    bottom: calc(56px + env(safe-area-inset-bottom));
    padding: 8px 0;
    /* Clear both the dock's own height and the nav below it when hidden. */
    transform: translateY(calc(100% + 70px));
  }
  #compare-dock.active { transform: translateY(0); }
  #compare-dock .compare-dock-label { display: none; }
  #compare-dock .container > .d-flex { gap: 0.5rem !important; }
  .compare-dock-item { width: 46px; height: 46px; border-radius: 8px; }
  #compare-dock .btn { padding: 6px 14px !important; font-size: 0.8rem; }
  /* Empty "+ Add" slots are desktop affordance; on a phone they only eat the
     width the Compare Now button needs. */
  .compare-dock-item.is-placeholder { display: none; }
}

/* The thumbnail strip grows to fill the dock, but a flex item will not shrink
   below its content width without min-width:0 — so three thumbnails pushed the
   Compare Now button off the right edge of narrow screens. Let the strip
   shrink and scroll, and never let the buttons be squeezed out. */
#compare-dock-items { min-width: 0; overflow-x: auto; scrollbar-width: none; }
#compare-dock-items::-webkit-scrollbar { display: none; }
#compare-dock .container > .d-flex > .btn,
#compare-dock .container > .d-flex > button { flex-shrink: 0; }
.compare-dock-item {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.15); background: var(--s-263238, #263238);
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.compare-dock-item img { width: 100%; height: 100%; object-fit: cover; }
.compare-dock-item .remove-x {
  position: absolute; top: 2px; right: 3px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; border-radius: 50%; width: 18px; height: 18px;
  font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.btn-compare-card {
  width: 100%; border: 1px solid var(--b-e2e8f0, #e2e8f0); border-radius: 6px;
  background: var(--s-f8fafc, #f8fafc); color: var(--t-64748b, #64748b);
  font-size: 0.7rem; font-weight: 600; padding: 5px 8px;
  cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.btn-compare-card:hover { border-color: #14B8A6; color: var(--t-0d9488, #0d9488); background: var(--s-f0fdfa, #f0fdfa); }
.btn-compare-card.in-compare { border-color: #14B8A6; color: var(--t-0d9488, #0d9488); background: var(--s-f0fdfa, #f0fdfa); }

/* Feature 4: Hot Deal badge */
.badge-hot { background: var(--s-ef4444, #ef4444); color: #fff; }
.badge-popular { background: #f59e0b; color: #fff; }

/* Feature 5: Seller response chip */
.seller-response-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--s-f0fdf4, #f0fdf4); border: 1px solid var(--b-bbf7d0, #bbf7d0);
  border-radius: 50px; padding: 4px 12px;
  font-size: 0.76rem; font-weight: 600; color: var(--t-16a34a, #16a34a);
}

/* ─── Responsive ─── */
@media (max-width: 576px) {
  .hero { padding: 2.5rem 0 3.5rem; }
  .hero-search { flex-direction: column; border-radius: 18px; }
  .hero-search input { padding: 12px 16px; }
  .hero-search button { width: 100%; border-radius: 12px; }
}

/* ─── Dark mode (disabled) ───────────────────────────────────────────────
   This partial dark mode pre-dates the theme work. It darkened the body,
   navbar and cards but not the colours written inline in the templates,
   which is what left text dark-on-dark. The site now renders light on every
   device, so it is commented out rather than deleted — uncomment it, and set
   DARK_ENABLED = True in scripts/gentokens.py, to bring dark mode back.
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
       --ih-bg: #131d20; --ih-card: #1c2b2f;
       --ih-ink: #e0f2f1; --ih-muted: #80a8a5; --ih-border: var(--b-243238, #243238);
     }
     :root:not([data-theme="light"]) body { background: var(--ih-bg); color: var(--ih-ink); }
     :root:not([data-theme="light"]) .ih-navbar { background: var(--s-0f1a1d, #0f1a1d); }
     :root:not([data-theme="light"]) .feat-card .feat-title,
     :root:not([data-theme="light"]) .cat-name { color: var(--ih-ink); }
     :root:not([data-theme="light"]) .feat-card .feat-img,
     :root:not([data-theme="light"]) .feat-placeholder { background: var(--s-1c2b2f, #1c2b2f) !important; color: var(--t-4a5f6a, #4a5f6a); }
     :root:not([data-theme="light"]) .rfq-banner { background: var(--s-1c2b2f, #1c2b2f); border-color: rgba(20,184,166,0.3); }
     :root:not([data-theme="light"]) .rfq-banner * { color: var(--ih-ink); }
     :root:not([data-theme="light"]) .supplier-card { background: var(--ih-card); }
     :root:not([data-theme="light"]) .supplier-logo-placeholder { background: var(--s-1c3530, #1c3530); }
     :root:not([data-theme="light"]) .ih-navbar .dropdown-menu { background: var(--s-0f1a1d, #0f1a1d); }
     :root:not([data-theme="light"]) #sticky-buy-bar { background: var(--s-1c2b2f, #1c2b2f); border-top-color: var(--b-2a3d42, #2a3d42); }
     :root:not([data-theme="light"]) .ifilter-pill { background: var(--s-1c2b2f, #1c2b2f); border-color: var(--b-2a3d42, #2a3d42); color: var(--ih-ink); }
   }
*/
:root[data-theme="dark"] {
  --ih-bg: #131d20; --ih-card: #1c2b2f;
  --ih-ink: #e0f2f1; --ih-muted: #80a8a5; --ih-border: var(--b-243238, #243238);
}


/* ── Subscription tier badges on product cards ── */
.ih-tier-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.62rem; font-weight: 700; padding: 2px 6px;
  border-radius: 50px; white-space: nowrap; letter-spacing: 0.2px;
}
.ih-tier-platinum {
  background: linear-gradient(90deg, #14B8A6, #0e8a7f);
  color: #fff;
}
.ih-tier-gold {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
}
.ih-tier-silver {
  background: linear-gradient(90deg, #94a3b8, #64748b);
  color: #fff;
}

/* ─── Category tiles ───────────────────────────────────────────────────── */
/* Full-bleed photo with the name laid over it, rather than a photo sitting in
   a padded white card — the name reads as part of the image. */
.cat-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #e7edee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile .cat-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #f0fdfa; color: #0D9488; font-size: 1.35rem;
  margin-bottom: 18px;
}
.cat-tile .cat-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 8px 7px;
  /* Gradient rather than a solid bar, so the photo stays visible behind it. */
  background: linear-gradient(to top, rgba(0,0,0,0.78) 10%, rgba(0,0,0,0));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* ─── Horizontal product rows ─────────────────────────────────────────── */
/* A row per category on the home page. Scrolls sideways inside its own
   container, so it never widens the page. */
.h-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.h-scroll::-webkit-scrollbar { height: 5px; }
.h-scroll::-webkit-scrollbar-thumb { background: #cfd8dc; border-radius: 10px; }
.h-scroll-item {
  flex: 0 0 auto;
  width: 158px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .h-scroll-item { width: 200px; }
}

/* ── Hero action buttons ──
   Display is set here rather than with d-flex so the phone rule can switch it
   to grid; Bootstrap's display utilities are !important and would win. */
.ih-hero-actions {
  display: flex;
  flex-wrap: wrap;
  /* Four buttons do not fit one row on a laptop; right-aligning keeps the
     wrapped row flush with the one above instead of hanging off to the left. */
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  /* The buttons wrapped into ragged rows of unequal width. Two even columns
     line their edges up, and an odd last button takes the full width instead
     of sitting alone in the left column. */
  .ih-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .ih-hero-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    white-space: nowrap;
  }
  .ih-hero-actions > .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ── Subcategory checkboxes on the product form ──
   Django renders one wrapper div per choice; laying them out as wrapping
   chips keeps a 20-subcategory list from becoming a very long column. */
.ih-subcats > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ih-subcats > div > div {
  flex: 0 0 auto;
}
.ih-subcats label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid #cdeee8;
  border-radius: 50px;
  background: #f0fdfa;
  color: #0D9488;
  font-size: 0.78rem;
  cursor: pointer;
}
.ih-subcats label:hover { border-color: #14B8A6; }
.ih-subcats input { margin: 0; cursor: pointer; }
.ih-subcats input:checked + span,
.ih-subcats label:has(input:checked) {
  background: #263238;
  border-color: #263238;
  color: #fff;
}

/* ── Arrows on the horizontal product rows ──
   The wrapper and buttons are injected by ihInitScrollRows in base.html, so a
   row only needs the .h-scroll class. */
.h-scroll-wrap { position: relative; }

.h-scroll-nav {
  position: absolute;
  /* Sits over the photo rather than the card's text block below it. */
  top: 38%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e0e8ea;
  background: #ffffff;
  color: #263238;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  z-index: 3;
  /* Hidden until the row is actually scrollable in that direction, so an
     arrow never promises movement that is not there. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, background 0.15s ease;
}
.h-scroll-wrap.is-scrollable .h-scroll-nav.is-on { opacity: 1; visibility: visible; }
.h-scroll-nav:hover { background: #14B8A6; color: #fff; border-color: #14B8A6; }
.h-scroll-nav:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; }
.h-scroll-prev { left: -6px; }
.h-scroll-next { right: -6px; }

@media (max-width: 767.98px) {
  .h-scroll-nav { width: 28px; height: 28px; font-size: 0.8rem; }
  .h-scroll-prev { left: -2px; }
  .h-scroll-next { right: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-scroll-nav { transition: none; }
}