/* =========================================================
   Base / Reset
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f4f5f7;
  color: #374151;
  line-height: 1.6;
}

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

/* =========================================================
   Header (match homepage)
   ========================================================= */
.is-embed .brand-header { display: none; }

/* Hide "Cart" label on desktop */
.cart-label { display: none; }

.brand-header {
  position: sticky; top: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: #072908;
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  color: #fff;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-logo {
  height: 65px; max-width: 250px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
  cursor: pointer; transition: transform .25s ease;
}
.brand-logo:hover { transform: scale(1.02); }

.brand-actions { display: inline-flex; align-items: center; gap: 10px; color: #fff; flex-wrap: wrap; }
.auth-status { opacity: .85; font-weight: 600; white-space: nowrap; margin-right: 12px; }

/* Pill buttons on dark header */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-weight: 600; border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer; line-height: 1;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
  text-decoration: none;
}
/* Mobile label swap */
.btn-label-short { display: none; }

.brand-header .btn.btn-secondary {
  background: transparent; color: #fff; border: none;
  box-shadow: none; font-weight: 600; font-size: 14px; text-decoration: none;
}
.brand-header .btn.btn-secondary:hover { background: transparent; color: rgba(255,255,255,0.75); transform: none; text-decoration: none; }
.brand-header .btn.btn-secondary:focus-visible { outline: 2px solid #9bd3b5; outline-offset: 2px; }

/* Beta feedback button — prominent in header */
.btn-feedback { background: #e8a020; color: #fff; border: none; font-size: 14px; text-decoration: none; }
.btn-feedback:hover { background: #d18f18; color: #fff; transform: none; text-decoration: none; }

/* =========================================================
   Category Navigation (matches homepage)
   ========================================================= */
.category-nav {
  position: sticky; top: 85px; z-index: 999;
  background: #e8eaed;
  border-bottom: 1px solid #d1d5db;
  box-shadow: none;
}
.category-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1500px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-nav-inner::-webkit-scrollbar { display: none; }

.category-nav-link {
  display: inline-flex; align-items: center;
  flex-direction: column; gap: 4px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  color: #6b7280; text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.cat-nav-icon { width: 22px; height: 22px; flex-shrink: 0; }
.cat-nav-label { line-height: 1; }
.category-nav-link:hover {
  color: #072908;
  border-bottom-color: #072908;
}
.category-nav-link.active {
  color: #072908;
  border-bottom-color: #072908;
  font-weight: 700;
}

/* =========================================================
   Cards (shared)
   ========================================================= */
.card,
.product-card {
  background: #FFFFFF;
  color: #000;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10), inset 0 1px 1px rgba(255,255,255,.60);
}

/* Supplier card = transparent container; each child section is its own card */
.card.supplier-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.suggested-column {
  background: transparent;
  color: #000;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  box-shadow: none;
}

/* =========================================================
   Product + Replacements Row (side-by-side on desktop)
   ========================================================= */
.product-replacements-row {
  display: flex;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 24px;
}
.product-card-col {
  flex: 0 0 420px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}
.product-card-col .product-card {
  margin-bottom: 0;
  flex: 1;
}
.product-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}
.suggested-replacements-col {
  flex: 1;
  min-width: 0;
}
/* Items fill row equally, aligning right edge with supplier card */
.suggested-replacements-col .suggested-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.suggested-replacements-col .suggested-item,
.suggested-replacements-col .suggested-placeholder {
  flex: 1 1 0;
  min-width: 0;
}
/* Taller cards to reduce gap below product card */
.suggested-replacements-col .suggested-image {
  height: 120px;
  padding: 10px;
}
.suggested-replacements-col .suggested-content {
  padding: 10px 10px 12px;
}
/* Empty placeholder slots */
.suggested-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f5f5f5;
  border: 2px dashed #e0e0e0;
  flex: 0 0 180px;
  min-width: 180px;
  min-height: 220px;
  scroll-snap-align: start;
}
/* Skeleton cards shown until renderSuggestedReplacements resolves */
.suggested-skel-card {
  list-style: none;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.suggested-replacements-col .suggested-skel-card {
  flex: 1 1 0;
  min-width: 0;
}
.suggested-skel-image {
  width: 100%;
  height: 120px;
  border-radius: 0;
}
.suggested-skel-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suggested-skel-line {
  height: 10px;
  width: 100%;
}
.suggested-skel-line--short { width: 60%; }
.suggested-skel-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.suggested-skel-pill {
  height: 16px;
  width: 44px;
  border-radius: 999px;
}
.suggested-skel-price {
  height: 12px;
  width: 70%;
  margin-top: 4px;
}
/* Suggested items when inside the row */
.suggested-replacements-col .suggested-column > h2 {
  font-size: 0.95rem;
  margin: 0 0 10px;
  padding: 0;
}
.suggested-replacements-col .suggested-title a {
  font-size: 0.7rem;
}
.suggested-replacements-col .suggested-grid {
  gap: 14px;
}
.suggested-replacements-col .suggested-score-pill {
  padding: 3px 7px;
  font-size: 10px;
  gap: 3px;
  bottom: 5px;
  left: 5px;
}
.suggested-replacements-col .suggested-pill-num { font-size: 11px; }
.suggested-replacements-col .suggested-pill-dot { width: 5px; height: 5px; }
.suggested-replacements-col .suggested-pill-label { font-size: 7px; }
.suggested-replacements-col .suggested-values-badge {
  font-size: 10px;
  padding: 2px 6px;
}
/* =========================================================
   Product Details Card (top product on supplier page)
   ========================================================= */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}
.product-card .product-image-wrap {
  position: relative;
  flex-shrink: 0;
  background: #fafafa;
  padding: 18px 18px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-image {
  max-width: 100%; max-height: 260px; object-fit: contain;
  border-radius: 8px; background: transparent; padding: 0;
  border: none;
}

/* Swipeable image track (built only when a product has more than one image).
   One full-width slide per image, snapped. overscroll-behavior-x: contain is
   not optional — without it a swipe past the last image chains to the page and
   can trigger the browser's back-navigation gesture. */
.product-image-track {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
}
.product-image-track::-webkit-scrollbar { display: none; }
.product-image-track > .product-image {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  /* A slow drag on the image otherwise starts a native image-drag on desktop
     and a text selection on touch, either of which cancels the scroll. */
  user-select: none;
  -webkit-user-drag: none;
}

/* Carousel nav arrows on hero product card */
.product-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  color: #333;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
  padding: 0;
}
.product-image-nav svg { width: 18px; height: 18px; display: block; }
.product-image-nav--prev { left: 10px; }
.product-image-nav--next { right: 10px; }
.product-card .product-image-wrap:hover .product-image-nav { opacity: 1; }
.product-image-nav:hover { background: #fff; }

/* Carousel dot indicators on hero product card */
.product-image-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.product-image-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.product-image-dot.active {
  background: rgba(0,0,0,0.7);
  transform: scale(1.2);
}

/* Score pill on product card */
.product-card .product-score-pill {
  display: inline-flex;
  position: absolute;
  top: 18px;
  left: 18px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  z-index: 5;
}
.product-card .product-score-pill .score-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.product-card .product-score-pill .score-pill-num {
  font-weight: 800; font-size: 14px;
}
.product-card .product-score-pill .score-pill-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px; opacity: 0.9;
}

/* Heart button on product card */
.product-card .product-heart-btn {
  display: flex;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.85);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background 0.15s;
}
.product-card .product-heart-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: #555; stroke-width: 2;
}
.product-card .product-heart-btn.hearted svg {
  fill: #e53935; stroke: #e53935;
}
.product-card .product-heart-btn:hover {
  background: rgba(255,255,255,1);
}

/* "I purchased this" — compact check-icon button, same style as the heart,
   sitting just left of it. Label lives in the tooltip; turns green once saved. */
.product-card .product-purchased-btn {
  position: absolute;
  top: 18px;
  right: 62px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);   /* white circle pops off the image, like the heart */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, border-color 0.15s;
}
.product-card .product-purchased-btn svg {
  width: 18px;
  height: 18px;
  stroke: #555;
}
.product-card .product-purchased-btn:hover { background: rgba(255,255,255,1); }
.product-card .product-purchased-btn.purchased {
  background: #1a7a1a;
  border-color: #1a7a1a;
}
.product-card .product-purchased-btn.purchased svg { stroke: #fff; }

/* Brand · Category subtitle */
.product-subtitle {
  display: block;
  font-size: 13px;
  color: #666;
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

/* "See price on Amazon" CTA */
.product-cta-actions {
  display: block;
  padding: 12px 18px 0;
}

/* CTA button base styles */
.btn-cta-amazon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 16px 24px;
  background: #16304D;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  animation: cta-pulse 2.5s ease-in-out infinite;
}
.btn-cta-amazon:hover {
  animation: none;
  background: #0C1E3A;
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(22, 48, 77, 0.25);
}
.cta-arrow { font-size: 17px; line-height: 1; }

@keyframes cta-pulse {
  0%   { box-shadow: 0 2px 8px rgba(22, 48, 77, 0.10);  background-color: #16304D; }
  50%  { box-shadow: 0 4px 18px rgba(22, 48, 77, 0.25); background-color: #24406A; }
  100% { box-shadow: 0 2px 8px rgba(22, 48, 77, 0.10);  background-color: #16304D; }
}

/* FTC affiliate disclosure near CTA */
.cta-disclosure {
  font-size: 10px;
  color: #999;
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
  padding: 0 8px;
}
.product-info { flex: none; width: 100%; padding: 4px 18px 6px; box-sizing: border-box; }
.product-title { margin: 0 0 6px; font-size: 18px; font-family: Montserrat, Inter; color: #000; }
.product-link { text-decoration: none; font-weight: 700; color: #000; font-size: 18px; }
.product-link:hover { color: #1769AA; text-decoration: underline; }
.product-divider { display: none; }

/* Stars on product card */
.product-card .rating .stars .star { width: 16px; height: 16px; }
.product-card .rating .stars .star path { stroke-width: 1; }
.product-card .rating .stars .star--empty path { fill: rgba(0,0,0,0.18); stroke: rgba(0,0,0,0.18); }
.product-card .rating .stars .star--full  path,
.product-card .rating .stars .star--half  path { fill: #C9A227; stroke: #C9A227; }
.product-card .rating .stars { display: inline-flex; flex-direction: row; gap: 4px; }

/* Rating row — stars/demographics on the left, price on the right.
   Was hidden in the pre-PA-API era when prices weren't allowed; now that
   HAS_PA_API_ACCESS is true, the row shows again. */
.product-card .rating-row.rating-row--inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 8px 0 4px;
}
.rating-row-left {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Product price — clean text, no pill */
.product-card .product-price {
  display: flex; flex-direction: column; align-items: flex-end;
}
.product-price-amount {
  font-size: 22px; font-weight: 700; color: #000;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* Show only the VALUES badge on the product card — hide the FEATURES count. */
.product-card .suggested-values--blue { display: none; }
.product-card .price-timestamp {
  font-size: 9px; font-weight: 400; color: #999;
  line-height: 1.2; margin-top: 1px;
}

/* =========================================================
   Supplier Card Layout (header + sections)
   ========================================================= */

/* --- Three-band header layout --- */
.supplier-card-header {
  grid-area: header;
  display: flex;
  flex-direction: column;
}

/* Shared band styles */
.header-band { padding: 24px; }
.header-band + .header-band { border-top: 1px solid #e5e7eb; }

/* ── Band 1: Identity + Score ── */
.header-band--identity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px 20px;
  align-items: center;
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 18px 18px 0 0;
}
.header-score-area { flex-shrink: 0; }
.header-info-area  { min-width: 0; }
.header-tier-area  { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* "SUPPLIER" label */
.header-type-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

/* Verified badge inline with type label */
.header-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  vertical-align: middle;
}
.header-verified-badge .certified-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.header-verified-badge span {
  font-size: 10px;
  font-weight: 700;
  color: #1a7a1a;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.header-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.supplier-title {
  color: #111;
  font-weight: 800;
  font-size: 28px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

/* Metadata row: sector · HQ · listing status */
.header-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.header-meta-item {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.header-meta-item strong {
  color: #374151;
  font-weight: 600;
}
.header-meta-item:not(:last-child):not([style*="display: none"])::after {
  content: '\00B7';
  margin-left: 6px;
  color: #d1d5db;
  font-weight: 700;
}

/* Tier pill in header */
.header-tier-pill {
  min-width: 70px;
  height: 34px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 0 16px;
}

/* Sector delta text below tier pill */
.header-sector-delta {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.header-sector-delta--positive { color: #15803d; }
.header-sector-delta--negative { color: #dc2626; }

/* Legacy "ABOVE SECTOR AVG" — kept for compat */
.header-sector-context { display: none; }

/* Band 2 (metrics tiles) removed 2026-08-11 along with its markup: the
   controversy / commitment counts moved into the tabs that explain them.
   The whole .metrics-* family went with it. */

/* ── Band 3: Narrative ── */
.header-band--narrative {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border-radius: 0 0 18px 18px;
}

/* Estimated per-pillar outlook (context-only brands) — fills the space under
   the brand blurb where verified pages show their scored pillar tiles. */
.header-band--likely-pillars {
  padding: 16px 24px 20px;
  border-radius: 0 0 18px 18px;
}
.header-band--narrative:has(+ .header-band--likely-pillars) {
  border-radius: 0;
  padding-bottom: 8px;
}
.likely-pillars-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 11px;
}
.likely-pillars-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 2px 7px;
}
.likely-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.likely-pillar-tile {
  background: #f9fafb;
  border: 1px solid #eceef1;
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.likely-pillar-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #6b7280;
}
.likely-pillar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 12px;
  font-weight: 800;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px 10px;
}
.likely-pillar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.likely-pillar-caption {
  font-size: 10.5px;
  color: #9ca3af;
  line-height: 1.3;
}
/* ---- Generating-state loaders (fresh AI profile still being generated) ---- */
.likely-pillar-pill--loading {
  color: #9ca3af;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.likely-pillar-dot--loading {
  background: #d1d5db;
  animation: likelyPillarPulse 1.2s ease-in-out infinite;
}
.likely-pillar-skel {
  display: inline-block;
  width: 60px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: likelyPillarShimmer 1.3s linear infinite;
}
.likely-pillar-caption--loading { color: #b0b6be; font-style: italic; }
@keyframes likelyPillarShimmer { to { background-position: -200% 0; } }
@keyframes likelyPillarPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.summary-generating-loader {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #6b7280;
  font-size: 13.5px;
  line-height: 1.4;
}
/* boat loader (utils/page-loader.js mounts it); was a spinning ring */
.summary-gen-spinner {
  display: block;
  width: 30px;
  aspect-ratio: 597 / 421;
  flex: none;
  --leif-loader-bg: #fff;
}
.summary-gen-text { font-style: italic; }
@media (max-width: 640px) {
  .likely-pillars-grid { grid-template-columns: 1fr; }
}
.header-narrative-text {
  flex: 1;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
/* Bulleted context-only summary — one sentence per line, tighter than a paragraph */
.header-narrative-text .header-narrative-bullets {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.header-narrative-text .header-narrative-bullets li {
  margin: 0 0 6px;
  padding-left: 2px;
}
.header-narrative-text .header-narrative-bullets li:last-child {
  margin-bottom: 0;
}
/* Highlighted phrases in narrative */
.header-narrative-text .hl-strength {
  background: #dcfce7;
  padding: 1px 4px;
  border-radius: 3px;
}
.header-narrative-text .hl-weakness {
  background: #fee2e2;
  padding: 1px 4px;
  border-radius: 3px;
}
/* "See full breakdown ↓" link */
.header-breakdown-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  margin-top: 2px;
}
.header-breakdown-link:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.breakdown-arrow {
  font-size: 15px;
  line-height: 1;
}

/* Legacy — hide old classes no longer used in header */
.score-data-quality { display: none; }
.supplier-name { display: none; }

/* Summary toggle tabs */
.summary-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #f9fafb;
  width: fit-content;
}
.summary-toggle__tab {
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.summary-toggle__tab:hover {
  background: rgba(0, 0, 0, 0.04);
}
.summary-toggle__tab--active {
  background: #072908;
  color: #fff;
}
.summary-toggle__tab--active:hover {
  background: #0b4f2d;
}

/* (Parent data toggle removed — now uses clickable badge) */

/* Sections — each is its own card */
.supplier-section--summary,
.supplier-section--peers,
.supplier-section--checks {
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
}

/* Header section also gets card treatment */
.supplier-card-header {
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 0; /* bands have their own padding */
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
  overflow: hidden;
}
.supplier-section-title,
.supplier-section--checks h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: #111; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.02em; }

.supplier-section--summary p,
.supplier-section--summary #supplierSummary {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  letter-spacing: 0;
}

/* =========================================================
   User Score switch (same look as homepage)
   ========================================================= */
.score-mode { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; user-select: none; }
.score-mode__label { color: #fff; opacity: 1; font-weight: 600; font-size: 14px; }
.score-switch {
  --w: 42px; --h: 24px; --p: 3px;
  appearance: none; width: var(--w); height: var(--h);
  background: #c9c9c9; border-radius: var(--h);
  position: relative; outline: none; cursor: pointer; transition: background 120ms ease;
}
.score-switch::after {
  content: ''; position: absolute; top: var(--p); left: var(--p);
  width: calc(var(--h) - 2*var(--p)); height: calc(var(--h) - 2*var(--p));
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform 120ms ease;
}
.score-switch:checked { background: #0b4f2d; }
.score-switch:checked::after { transform: translateX(calc(var(--w) - var(--h))); }

/* =========================================================
   Pillar Score Breakdown (circles + sub-category expansion)
   ========================================================= */
.pillar-hint {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  margin: 0 0 12px;
}
.pillar-circles-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* Shared detail panel — only visible on mobile (desktop shows inline sub-panels) */
@media (min-width: 641px) {
  .pillar-detail-panel { display: none !important; }
}
.pillar-circle-col {
  flex: 1 1 0;
  min-width: 160px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pillar-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 14px;
  border-radius: 14px;
  border: 3px solid transparent;
  background: #ffffff;
  user-select: none;
  width: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pillar-circle-wrap:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.pillar-wheel-holder {
  margin-bottom: 8px;
}
.pillar-circle-label {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  text-align: center;
  line-height: 1.25;
  margin-top: 2px;
}
.pillar-raw-score {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
.pillar-pct-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f7f9fb;
  border: 1px solid rgba(0,0,0,0.10);
  color: #333;
}
.pillar-pct-tag--high { background: #e8f5ed; border-color: rgba(58,138,94,0.35); color: #2a6b45; }
.pillar-pct-tag--mid  { background: #f0ecf5; border-color: rgba(122,94,154,0.35); color: #53407a; }
.pillar-pct-tag--low  { background: #eaf0f5; border-color: rgba(90,122,154,0.30); color: #3e5e7a; }

/* Tier badge base styles (mirror of extension/styles/product-card.css since
   supplier.html doesn't load product-card.css). Five qualitative tiers + unrated.
   Cutoffs grounded in the supplier score distribution; see extension/utils/tier.js. */
.product-tier-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.product-tier-badge-label {
  display: block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.product-tier-badge--great   { background: #3a8a5e; }
.product-tier-badge--good    { background: #5a8a42; }
.product-tier-badge--above   { background: #9a8a3a; color: #fff; }
.product-tier-badge--average { background: #b08a3a; color: #fff; }
.product-tier-badge--below   { background: #a06060; }
.product-tier-badge--unrated {
  background: #f5f5f5;
  color: #757575;
  border: 2px dashed #c4c4c4;
}

/* Pillar tier badge (replaces "Raw: X" + percentile tag in the breakdown box) */
.pillar-circle-wrap .pillar-tier-badge {
  margin-top: 8px;
  min-width: 88px;
  height: 32px;
  border-radius: 8px;
  font-size: 11px;
  padding: 0 8px;
}

/* Tier badge in the supplier header (sits next to the raw score wheel) */
.supplier-tier-badge {
  min-width: 80px;
  height: 56px;
  border-radius: 12px;
  font-size: 12px;
  padding: 0 8px;
}

/* Sub-category expansion panel */
.pillar-sub-panel {
  width: 100%;
  margin-top: 12px;
  padding: 12px 0 0;
  border-top: 1px solid #e5e7eb;
}
.pillar-sub-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 5px 12px;
  padding: 10px 6px;
  border-radius: 6px;
}
.pillar-sub-row:hover {
  background: rgba(0,0,0,0.02);
}
.pillar-sub-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  grid-column: 1;
  grid-row: 1;
}
.pillar-sub-scores {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  text-align: right;
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}
.pillar-sub-bar-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.pillar-sub-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Legacy peer badges */
.peer-badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.peer-badge {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; background: #fafbfc; border: 1px solid rgba(0,0,0,0.08);
  opacity: 1;
}
.peer-badge__label { font-weight: 600; color: #000; }
.peer-badge__value { font-weight: 700; color: #000; }
.peer-badge--high { background: #e9f5ee; border-color: rgba(76,175,80,0.35); }
.peer-badge--mid  { background: #fff6e5; border-color: rgba(201,162,39,0.35); }
.peer-badge--low  { background: #fdecec; border-color: rgba(229,57,53,0.30); }

/* =========================================================
   Attributes — categorized pill chips
   ========================================================= */
.supplier-section--checks .supplier-section-title { color: #000; opacity: 1; }

/* "enhanced with AI" hint on Summary title for verified suppliers */
.summary-ai-hint {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  color: #7a8a9a;
  font-style: italic;
  margin-left: 8px;
  vertical-align: middle;
}

/* Verified badge on section titles */
.verified-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 4px 12px;
  background: #e8f5e9;
  border: 1.5px solid #66bb6a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  vertical-align: middle;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.verified-data-badge svg {
  flex-shrink: 0;
}

/* AI-estimated badge on section titles — context-only (likely) brands.
   Slate/indigo to read as "informational", distinct from the green Verified. */
.ai-estimated-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 4px 12px;
  background: #eef2ff;
  border: 1.5px solid #a5b4fc;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  vertical-align: middle;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ai-estimated-badge svg {
  flex-shrink: 0;
}

/* Explanatory subtitle */
.checks-subtitle {
  font-size: 13px; color: #9ca3af; line-height: 1.5;
  margin: 0 0 16px; font-style: italic;
}

/* Category group */
.attr-group { margin-bottom: 10px; }
.attr-group:last-child { margin-bottom: 0; }

/* Category label */
.attr-group-label {
  width: 100%; margin: 12px 0 6px; padding: 0;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280;
}
.attr-group:first-of-type .attr-group-label { margin-top: 0; }

/* Pill container */
.attr-pill-wrap { display: flex; flex-wrap: wrap; gap: 10px; }

/* Individual pill */
.attr-pill {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1;
  user-select: none;
}

/* "Yes" pill — default green with checkmark */
.attr-pill--yes {
  background: #e8f5e9;
  border: 1.5px solid #4caf50;
  color: #1b5e20;
  box-shadow: none;
}
.attr-pill--yes::before {
  content: '\2713';
  margin-right: 5px;
  font-weight: 800;
  font-size: 12px;
  color: #2e7d32;
}

/* Per-group attribute pill colors (matching category bubble palette) */
.attr-pill--yes[data-attr-group="Brand Values"]   { background: #f5f0ea; border-color: #7a6a5a; color: #5a4a3a; }
.attr-pill--yes[data-attr-group="Brand Values"]::before { color: #7a6a5a; }
.attr-pill--yes[data-attr-group="Environmental"]  { background: #e8f5ea; border-color: #2e8b3e; color: #1a5a28; }
.attr-pill--yes[data-attr-group="Environmental"]::before { color: #2e8b3e; }
.attr-pill--yes[data-attr-group="Human Rights"]   { background: #eaf2f5; border-color: #5a7a8a; color: #3a5a6a; }
.attr-pill--yes[data-attr-group="Human Rights"]::before { color: #5a7a8a; }
.attr-pill--yes[data-attr-group="Workplace & DEI"] { background: #f0edf3; border-color: #7a6e8a; color: #5a4e6a; }
.attr-pill--yes[data-attr-group="Workplace & DEI"]::before { color: #7a6e8a; }
.attr-pill--yes[data-attr-group="Animal Welfare"] { background: #f3edec; border-color: #8a6e6e; color: #6a4e4e; }
.attr-pill--yes[data-attr-group="Animal Welfare"]::before { color: #8a6e6e; }
.attr-pill--yes[data-attr-group="Governance"]     { background: #eceef3; border-color: #5a6a8a; color: #3a4a6a; }
.attr-pill--yes[data-attr-group="Governance"]::before { color: #5a6a8a; }

/* "No" pill — muted with x styling */
.attr-pill--no {
  background: #f9fafb;
  border: 1.5px solid rgba(0,0,0,0.10);
  color: #6b7280;
}
.attr-pill--no::before {
  content: '\2717';
  margin-right: 5px;
  font-weight: 800;
  font-size: 12px;
  color: #9ca3af;
}

/* Collapsible "not met" toggle */
.checks-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 16px; margin-top: 14px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #6b7280;
  cursor: pointer; transition: all 0.15s;
}
.checks-toggle:hover { color: #333; background: #f9fafb; border-color: #d1d5db; }
.checks-toggle__arrow { font-size: 14px; }
.checks-no-group { margin-top: 6px; }

/* =========================================================
   Suggested Replacements
   ========================================================= */
/* Mobile scroll layout hidden by default — shown only inside 640px media query */
.suggested-section-mobile { display: none; }

.suggested-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
.suggested-replacements-col .suggested-grid { margin-top: 0; }

/* --- Hero headers for replacement sections --- */
.suggested-column .section-hero,
.suggested-section-mobile .section-hero {
  display: flex;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
}
.section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}
.section-hero .section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
/* Score hero — green/teal to match Leif List brand */
.section-hero--score {
  background: rgba(46, 139, 62, 0.10);
  color: #1a5a28;
}
.section-hero--score .section-icon { color: #2e8b3e; }
.section-hero--score .section-title { color: #1a5a28; }
/* Price hero — amber/gold */
.section-hero--price {
  background: rgba(180, 140, 50, 0.10);
  color: #6a5a20;
}
.section-hero--price .section-icon { color: #b48c32; }
.section-hero--price .section-title { color: #6a5a20; }

.suggested-column > h2 { margin: 0 0 12px; font-size: 1.1rem; color: #000; }
.suggested-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.suggested-list::-webkit-scrollbar { display: none; }
.suggested-list { scrollbar-width: none; }

/* Shown when filters drop every candidate — honest UX beats garbage cards */
.suggested-empty-state {
  padding: 28px 20px;
  margin-top: 4px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #fafafa;
}

.suggested-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0; border-radius: 10px; background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 180px;
  min-width: 180px;
  scroll-snap-align: start;
}
.suggested-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: #d1d5db;
}

/* Image wrapper — relative container for score pill + verified badge */
.suggested-image-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}
.suggested-image {
  width: 100%; height: 110px; object-fit: contain;
  display: block; background: #fff;
  border: none; border-radius: 10px 10px 0 0;
  box-shadow: none; padding: 10px;
  box-sizing: border-box;
}

/* Score pill — overlaid on bottom-left of image (mirrors homepage cards) */
.suggested-score-pill {
  position: absolute; bottom: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(4px);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1; z-index: 5;
}
.suggested-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.suggested-pill-num { font-weight: 800; font-size: 13px; }
.suggested-pill-sep { opacity: 0.5; font-size: 13px; }
.suggested-pill-label { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; opacity: 0.9; }

/* Affiliate (Partner-tier) replacement pills — lift Great/Excellent so rare,
   high-quality partners read as special, matching the card pills in
   supplier-partner.css (.product-score-pill--likely_*). */
.suggested-score-pill--likely_great {
  box-shadow: 0 0 0 1.5px rgba(67,160,71,0.9), 0 2px 8px rgba(0,0,0,0.30);
}
.suggested-score-pill--likely_excellent {
  background: linear-gradient(100deg, rgba(0,80,45,0.92), rgba(0,40,25,0.92));
  box-shadow: 0 0 0 1.5px rgba(0,230,118,0.95), 0 0 14px rgba(0,230,118,0.45);
}
.suggested-score-pill--likely_excellent .score-pill-star {
  font-size: 10px; color: #ffd54f; margin-left: 1px; line-height: 1;
  text-shadow: 0 0 6px rgba(255,213,79,0.7);
}

/* Leif Verified badge — top-left of image */
.suggested-verified-badge {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px; z-index: 10;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}
.suggested-verified-badge svg { width: 100%; height: 100%; }

.suggested-content {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  padding: 8px 10px 10px; box-sizing: border-box; flex: 1;
}
.suggested-title a { color: #000; text-decoration: none; font-weight: 600; font-size: .78rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; }
.suggested-title a:hover { color: #1769AA; text-decoration: underline; }

.suggested-title { margin-bottom: 6px; width: 100%; }

/* Footer row: price + source button side by side */
.suggested-footer {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: auto; gap: 6px;
}

.suggested-price { font-size: .78rem; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.suggested-price .see-on-amazon-link { color: #555; font-size: .75rem; font-weight: 500; text-decoration: none; }
.suggested-price .see-on-amazon-link:hover { text-decoration: underline; color: #1769AA; }
.suggested-price .price-timestamp {
  display: block; font-size: 8px; font-weight: 400; color: #888;
  letter-spacing: 0.02em; line-height: 1.2; margin-top: 1px;
}

/* Source button (Amazon / Target / Walmart) */
.suggested-source-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
  flex-shrink: 0;
}
.suggested-source-btn--amazon  { background: #072908; color: #fff; }
.suggested-source-btn--amazon:hover  { background: #0b4f2d; }
.suggested-source-btn--target  { background: #cc0000; color: #fff; }
.suggested-source-btn--target:hover  { background: #a30000; }
.suggested-source-btn--walmart { background: #0071ce; color: #fff; }
.suggested-source-btn--walmart:hover { background: #005fa3; }
.suggested-source-arrow { font-size: 11px; line-height: 1; }

/* Heart / wishlist button */
.suggested-heart-btn {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.suggested-heart-btn:hover { transform: scale(1.15); box-shadow: 0 3px 12px rgba(0,0,0,0.18); background: #fff; }
.suggested-heart-btn svg {
  width: 14px; height: 14px; stroke: #999; fill: none; stroke-width: 2;
  transition: stroke 0.2s ease, fill 0.3s ease, transform 0.3s ease;
}
.suggested-heart-btn.hearted svg { stroke: #e91e63; fill: #e91e63; }
@keyframes sugHeartPop {
  0% { transform: scale(1); } 30% { transform: scale(1.4); }
  60% { transform: scale(0.9); } 100% { transform: scale(1); }
}
.suggested-heart-btn.heart-pop svg { animation: sugHeartPop 0.4s ease; }

/* Values-match badges */
.suggested-values-row {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  width: 100%; margin-bottom: 6px;
}
.suggested-values-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 5px;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: default;
}
.suggested-values-fraction { font-weight: 800; font-size: 10px; }
.suggested-values-text { font-weight: 700; font-size: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.suggested-values--amber { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.suggested-values--blue  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
/* Larger values badges in the main product card */
.product-card .suggested-values-row { margin-top: 8px; margin-bottom: 0; }
.product-card .suggested-values-badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.product-card .suggested-values-fraction { font-size: 12px; }
.product-card .suggested-values-text { font-size: 9px; }

/* Stars in replacements (slightly smaller) */
.suggested-stars .rating { display: inline-flex; align-items: center; gap: 6px; }
.suggested-stars .rating .stars { display: inline-flex; flex-direction: row; gap: 4px; }
.suggested-stars .rating .stars .star { width: 14px; height: 14px; }
.suggested-stars .stars .star--empty path { fill: rgba(0,0,0,0.18); stroke: rgba(0,0,0,0.18); }
.suggested-stars .stars .star--full  path,
.suggested-stars .stars .star--half  path { fill: #C9A227; stroke: #C9A227; }

/* =========================================================
   Misc (small utilities)
   ========================================================= */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* === Supplier card GRID LAYOUT ===
   Attributes (checks) sit immediately under the header on every viewport so
   users can see commitments without scrolling past the score breakdown. */
.card.supplier-card {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "checks"
    "peers"
    "summary";
}

.supplier-card-header      { grid-area: header; }
.supplier-section--summary { grid-area: summary; }
.supplier-section--peers   { grid-area: peers;   }
.supplier-section--checks  { grid-area: checks;  }

/* Wide screens: breakdown left, attributes right, summary full-width below */
@media (min-width: 900px) {
  .card.supplier-card {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header  header"
      "peers   checks"
      "summary summary";
  }
  .card.supplier-card.supplier-card--context-only {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "checks"
      "summary";
  }
}
/* =========================================================
   Product Tags — grouped by category
   ========================================================= */
.product-tags-grouped {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.product-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: #333;
  line-height: 1.3;
}
.product-tag-icon { font-size: 11px; line-height: 1; }
.product-tag--material { background: #edf5f0; border-color: rgba(11,122,79,0.25); color: #0b5e3f; }
.product-tag--feature { background: #eef3fa; border-color: rgba(23,105,170,0.25); color: #1a5276; }
.product-tag--demographic { background: #f5f0eb; border-color: rgba(139,109,71,0.25); color: #5c4a2e; }
.product-tag--origin { background: #f0eef5; border-color: rgba(93,71,139,0.25); color: #3d2e5c; }
.product-tag--health { background: #e8f5e9; border-color: rgba(46,125,50,0.35); color: #1b5e20; }
.product-tag--health .product-tag-icon { color: #2e7d32; }
.product-tag--certification { background: #fff8e1; border-color: rgba(183,143,28,0.35); color: #7b6a1c; }
.product-tag--certification .product-tag-icon { color: #b78f1c; }
.product-tag--sustainability { background: #e0f2f1; border-color: rgba(0,121,107,0.3); color: #00695c; }
.product-tag--sustainability .product-tag-icon { color: #00897b; }
.product-tag--diet { background: #fff3e0; border-color: rgba(183,110,28,0.3); color: #7b4b1c; }
.product-tag--diet .product-tag-icon { color: #e65100; }

/* Demographics/origin inline with rating row */
.product-inline-tags {
  display: inline-flex;
  gap: 5px;
  margin-left: 4px;
}
.product-inline-tags .product-tag {
  font-size: 11px;
  padding: 3px 9px;
}

/* Attribute card grid (full-width row below product info) */
/* Flowing tag row — all product attributes in one line */
.product-tag-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.product-tag-flow .product-tag {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
}

/* Inline feature bullets — hidden to keep card compact */
.product-bullets-inline {
  display: none;
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.product-bullets-header {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.product-bullets-inline .product-bullets-list {
  padding: 0 0 0 18px;
  margin: 0;
  font-size: 13px;
  color: #444;
  line-height: 1.65;
}
.product-bullets-inline .product-bullets-list li {
  margin-bottom: 4px;
}
.product-bullets-inline .product-bullets-list li:last-child {
  margin-bottom: 0;
}
.product-bullets-toggle {
  background: none;
  border: none;
  color: #1769AA;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0 0;
  transition: color 0.15s;
}
.product-bullets-toggle:hover {
  color: #0b5e3f;
  text-decoration: underline;
}

/* supplier.css */
.product-actions { margin-top: 0; width: 100%; padding: 4px 18px 18px; box-sizing: border-box; text-align: center; }
.btn.btn-purchase {
  display: inline;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 6px 8px;
}
.btn.btn-purchase:hover { color: #333; }
.purchase-check { display: inline; margin-right: 2px; font-size: 11px; }

/* Heart pop animation (reused from suggested items) */
@keyframes product-heart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.product-heart-btn.heart-pop { animation: product-heart-pop 0.35s ease; }

/* --- Rotating "thinking" loader (shown while AI data loads) --- */
.thinking-loader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 8px;
  color: #072908;
  font-size: 14px;
  font-weight: 600;
  user-select: none;
}

/* boat loader (utils/page-loader.js mounts it); was a spinning ring */
.thinking-loader__spinner {
  display: block;
  flex-shrink: 0;
  width: 36px;
  aspect-ratio: 597 / 421;
  --leif-loader-bg: #fff;
}

.thinking-loader__text {
  transition: opacity .3s ease;
}

/* --- AI typing experience for the Summary section --- */
.ai-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #072908;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
}

/* boat loader (utils/page-loader.js mounts it); was a spinning ring */
.ai-loader__spinner {
  display: block;
  flex: none;
  width: 30px;
  aspect-ratio: 597 / 421;
  --leif-loader-bg: #fff;
}

@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Alternative: three pulsing dots (we’ll keep both and pick one in JS) */
.ai-dots {
  display: inline-flex;
  gap: 4px;
}
.ai-dots > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #072908;
  opacity: .25;
  animation: ai-dot 1s ease-in-out infinite;
}
.ai-dots > i:nth-child(2) { animation-delay: .15s; }
.ai-dots > i:nth-child(3) { animation-delay: .30s; }

@keyframes ai-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: .25; }
  40%          { transform: translateY(-3px); opacity: 1;   }
}

/* Reveal effect when typing finishes */
.ai-typed {
  white-space: pre-wrap;           /* keep line breaks if present */
  overflow-wrap: anywhere;         /* prevent overflow */
}
/* =========================================================
   Product Modal (for supplier preview)
   ========================================================= */
.product-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.product-modal .modal-content {
  background: #fff; border-radius: 12px; padding: 24px;
  max-width: 600px; width: 90%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3); animation: fadeIn 0.3s ease forwards;
}
.product-modal .modal-content--supplier-preview {
  max-width: 960px; width: 92vw; height: min(80vh, 720px);
  display: flex; flex-direction: column; padding: 0;
  position: relative; border: 8px solid #fff;
}

.btn-primary {
  background: #072908; color: #fff; border-color: rgba(0,0,0,0.35);
}
.btn-primary:hover {
  background: #0b4f2d; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transform: translateY(-1px);
}
.btn-primary:focus-visible { outline: 2px solid #57b58c; outline-offset: 2px; }

.btn-secondary {
  background: var(--surface-2); color: #111; border-color: rgba(0,0,0,0.14);
}
.btn-secondary:hover { background: #e7eaee; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transform: translateY(-1px); }
.btn-secondary:focus-visible { outline: 2px solid #b6c2d1; outline-offset: 2px; }

.modal-frame { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* Source badge (Amazon, Target, Walmart, etc.) */
.source-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  margin-left: 8px;
  vertical-align: middle;
}
.source-badge--amazon {
  background: #072908;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(7, 41, 8, 0.3);
}
.source-badge--target {
  background: linear-gradient(135deg, #cc0000 0%, #b30000 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(204, 0, 0, 0.25);
}
.source-badge--walmart {
  background: linear-gradient(135deg, #0071ce 0%, #005fa3 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 113, 206, 0.25);
}

/* Make suggested items look clickable */
.suggested-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.suggested-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.25);
}

/* =========================================================
   Tablet Optimizations (≤ 900px)
   ========================================================= */
@media (max-width: 900px) {
  .page-container { padding: 16px 24px; }
  /* Row goes single-column on tablet */
  .product-replacements-row {
    flex-direction: column;
  }
  .product-card-col {
    flex: none;
    max-width: 100%;
  }
  .product-title { font-size: 18px; }
  .supplier-title { font-size: 24px; }
  .suggested-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Mobile Optimizations (≤ 640px)
   ========================================================= */
@media (max-width: 640px) {
  .btn-label-full { display: none; }
  .btn-label-short { display: none; }

  /* Surface the Tutorial (ⓘ) button directly in the mobile bar on the supplier
     page so the tour is reachable without opening the hamburger menu. The
     global mobile-header.css hides #tutorialBtn (display:none !important); the
     extra `header` qualifier raises specificity to override it scoped to here.
     mobile-header.css's .btn-secondary rules still render it icon-only. */
  header.brand-header #tutorialBtn { display: inline-flex !important; }

  /* --- Header: match category mobile layout --- */
  .brand-header { padding: 12px 16px 10px; gap: 0; flex-wrap: wrap; }
  .brand-logo { height: 40px; max-width: 100px; order: 1; }
  .brand-actions { order: 2; margin-left: auto; gap: 6px; flex-wrap: nowrap; }
  .brand-header .auth-status { display: none; }
  .brand-header .btn.btn-secondary {
    padding: 5px 8px; font-size: 12px; gap: 5px; white-space: nowrap;
  }
  .brand-header .btn.btn-secondary svg { width: 14px; height: 14px; flex-shrink: 0; }
  /* Score mode: smaller on mobile to match category */
  .brand-header .score-mode {
    font-size: 12px;
    gap: 5px;
    margin-left: 0;
  }
  .brand-header .score-mode__label {
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.1;
  }
  .brand-header .score-switch {
    --w: 34px;
    --h: 20px;
  }
  /* All header buttons → icon only on mobile */
  #userProfileBtn { padding: 6px !important; }
  .cart-label { display: none !important; }
  .cart-btn { padding: 6px !important; }
  .cart-btn svg { width: 14px !important; height: 14px !important; }
  #userProfileBtn svg { width: 14px; height: 14px; }
  .btn-feedback {
    font-size: 0 !important;
    padding: 6px !important;
    gap: 0 !important;
    border: none;
  }
  .btn-feedback svg { width: 16px; height: 16px; flex-shrink: 0; }
  #tutorialBtn { font-size: 11px; }

  /* Category nav mobile */
  .category-nav { top: auto; position: sticky; }
  .category-nav-inner { justify-content: flex-start; padding: 0 8px; }
  .category-nav-link { padding: 10px 14px; font-size: 12px; }

  /* --- Page container: reduce side padding --- */
  .page-container { padding: 12px 12px; }

  /* --- Product card: mobile-specific tweaks --- */
  .product-card-col > .product-card-title { display: none; }
  .product-replacements-row {
    flex-direction: column;
    gap: 12px;
  }
  .product-card-col {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  /* Compact side-by-side hero: image in a fixed left column (larger than the
     old 112px stacked thumbnail), brand/title/rating/tags beside it, and the
     CTA + disclosure spanning full width beneath. Shrinks the card's height so
     the supplier scorecard is easy to see without a long scroll. */
  .product-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: stretch;
    max-width: 100%;
    margin: 0;
  }
  .product-card .product-image-wrap {
    grid-column: 1;
    padding: 12px 10px;
    min-height: 100%;
  }
  .product-card .product-image { max-height: 158px; }
  /* Hide the score pill on the product card in mobile view — the score is shown
     in the supplier scorecard just below, so it's redundant here and frees up
     the image. Covers both the numeric and LIKELY pills (both carry
     .product-score-pill); scoped through .product-image-wrap to out-specify
     theme.css's `.ed-theme .product-score-pill`, which loads after this file. */
  .product-card .product-image-wrap .product-score-pill { display: none; }
  .product-card .product-heart-btn { top: 8px; right: 8px; width: 30px; height: 30px; }
  .product-card .product-purchased-btn { top: 8px; right: 44px; width: 30px; height: 30px; }
  .product-card .product-info {
    grid-column: 2;
    align-self: center;
    padding: 10px 14px 8px;
    min-width: 0;   /* let the 1fr column shrink so the tag carousel scrolls
                       internally instead of widening the card */
  }
  /* CTA, disclosure, and (when present) product bullets span the full width
     beneath the image + info row. */
  .product-card .product-cta-actions,
  .product-card .product-bullets-inline {
    grid-column: 1 / -1;
  }
  .product-title, .product-link { font-size: 13px; }
  .product-cta-actions { padding: 8px 14px 0; }
  .btn-cta-amazon { padding: 9px 18px; font-size: 13px; }
  .cta-arrow { font-size: 14px; }
  .cta-disclosure { margin-top: 4px; font-size: 9px; }

  /* Price: smaller on mobile */
  .product-card .product-price-amount { font-size: 17px; }
  .product-card .price-timestamp { font-size: 8px; }

  /* Attribute tags: single-line horizontal scroll carousel (was wrapping to
     ~3 rows) + smaller pills. Last tag peeks past the edge to hint at scroll. */
  .product-card .product-tag-flow {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin-top: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;            /* Firefox */
    -webkit-overflow-scrolling: touch;
  }
  .product-card .product-tag-flow::-webkit-scrollbar { display: none; }  /* WebKit */
  .product-card .product-tag-flow .product-tag {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 10px;
  }
  .product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* --- Supplier card: tighter spacing --- */
  .card.supplier-card { padding: 0; gap: 12px; }

  /* --- Supplier header: stack vertically on mobile --- */
  .header-band { padding: 16px; }
  .header-band--identity {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    text-align: left;
  }
  .header-band--identity .header-tier-area {
    grid-column: 1 / -1;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
  .header-label-row { justify-content: flex-start; }
  .header-meta-row { justify-content: flex-start; }
  .supplier-title { font-size: 22px; font-weight: 800; }

  /* Narrative: stack link below text */
  .header-band--narrative {
    flex-direction: column;
    gap: 12px;
  }
  .header-breakdown-link { align-self: flex-start; }

  /* --- Sections: mobile padding + card styling --- */
  .supplier-section--summary,
  .supplier-section--peers,
  .supplier-section--checks { padding: 16px; }

  /* --- Pillar hint: tap instruction on mobile --- */
  .pillar-hint { font-size: 12px; margin: 0 0 8px; color: #6b7280; }

  /* --- Pillar circles: fit all 3 in one row on mobile --- */
  .pillar-circles-row {
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .pillar-circle-col {
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    cursor: pointer;
  }
  .pillar-circle-wrap {
    padding: 10px 6px 8px;
    border-radius: 12px;
    border-width: 2.5px;
  }
  .pillar-wheel-holder {
    margin-bottom: 4px;
  }
  .pillar-wheel-holder svg {
    width: 52px !important;
    height: 52px !important;
  }
  .pillar-circle-label {
    font-size: 10px;
    line-height: 1.15;
  }
  .pillar-circle-wrap .pillar-tier-badge {
    margin-top: 4px;
    min-width: 60px;
    height: 22px;
    border-radius: 6px;
    font-size: 8px;
    padding: 0 4px;
  }

  /* Hide inline sub-panels on mobile — shown in shared detail panel below */
  .pillar-sub-panel {
    display: none !important;
  }

  /* Visual indicator that circle is tappable */
  .pillar-circle-wrap::after {
    content: '▾';
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 2px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .pillar-circle-col.expanded .pillar-circle-wrap {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
  .pillar-circle-col.expanded .pillar-circle-wrap::after {
    transform: rotate(180deg);
    color: #333;
  }

  /* Keep circles in a single non-wrapping row */
  .pillar-circles-row {
    flex-wrap: nowrap;
  }

  /* Shared detail panel below circles */
  .pillar-detail-panel {
    margin-top: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    animation: fadeIn 0.2s ease;
  }
  .pillar-detail-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }
  .pillar-detail-panel .pillar-sub-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 6px 4px;
  }
  .pillar-detail-panel .pillar-sub-label { font-size: 12px; }
  .pillar-detail-panel .pillar-sub-scores { font-size: 12px; }
  .pillar-detail-panel .pillar-sub-bar-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
  }
  .pillar-detail-panel .pillar-sub-bar {
    height: 100%;
    border-radius: 3px;
  }

  /* --- Legacy peer badges: stack vertically --- */
  .peer-badge-row { flex-direction: column; gap: 6px; }
  .peer-badge { padding: 6px 12px; font-size: 13px; }

  /* --- Attribute pills: smaller on mobile --- */
  .attr-pill { padding: 6px 12px; font-size: 12px; }
  .attr-group-label { font-size: 11px; }
  .checks-subtitle { font-size: 11.5px; }

  /* --- Mobile: horizontal scroll carousel for suggested replacements --- */
  .suggested-section-mobile {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 12px;
    margin-top: 12px;
  }
  /* Hide "Explore Alternatives" label on mobile — redundant with "Potential Replacements" */
  .suggested-replacements-col > .product-card-title { display: none; }

  .suggested-mobile-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
  }
  .suggested-section-mobile .section-hero {
    margin-bottom: 10px;
  }
  .suggested-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    scroll-snap-type: x mandatory;
  }
  .suggested-scroll-row::-webkit-scrollbar { display: none; }

  .suggested-item.suggested-item--scroll {
    flex: 0 0 calc(50% - 16px);
    width: calc(50% - 16px);
    min-width: calc(50% - 16px);
    max-width: calc(50% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
  }
  .suggested-item--scroll .suggested-image-wrap {
    width: 100%;
    flex-shrink: 0;
  }
  .suggested-item--scroll .suggested-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding: 8px;
    box-sizing: border-box;
  }
  .suggested-item--scroll .suggested-content {
    padding: 8px 10px 10px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
  }
  .suggested-item--scroll .suggested-title { margin-bottom: 4px; width: 100%; }
  .suggested-item--scroll .suggested-title a {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .suggested-item--scroll .suggested-values-row {
    gap: 3px;
    margin-bottom: 3px;
    flex-wrap: nowrap;
  }
  .suggested-item--scroll .suggested-values-badge {
    padding: 1px 4px;
    border-radius: 4px;
  }
  .suggested-item--scroll .suggested-values-fraction { font-size: 9px; }
  .suggested-item--scroll .suggested-values-text { font-size: 7px; }
  .suggested-item--scroll .suggested-price { font-size: .7rem; }
  .suggested-item--scroll .suggested-price .see-on-amazon-link { font-size: .68rem; }
  .suggested-item--scroll .suggested-score-pill {
    padding: 2px 6px;
    gap: 3px;
    font-size: 10px;
  }
  .suggested-item--scroll .suggested-pill-num { font-size: 10px; }
  .suggested-item--scroll .suggested-pill-label { font-size: 7px; }
  .suggested-item--scroll .suggested-pill-dot { width: 5px; height: 5px; }
  .suggested-item--scroll .suggested-heart-btn {
    width: 26px;
    height: 26px;
    top: 4px;
    right: 4px;
  }
  .suggested-item--scroll .suggested-heart-btn svg { width: 12px; height: 12px; }

  /* Show mobile scroll layout, hide desktop columns */
  .suggested-grid { display: none !important; }
  .suggested-column { display: none !important; }
  .suggested-section-mobile { display: block; }
  /* The desktop shared banner sits outside .suggested-grid, so it would stack a
     second "Potential Replacements" header above the mobile carousel — hide it;
     the carousel's own banner carries the By Score / By Price toggle here. */
  #suggestedReplacementsMount .alt-shared-hero { display: none !important; }
  .suggested-section-mobile .alt-sort-toggle { margin-top: 8px; }

  /* --- Product tags: smaller on mobile --- */
  .product-tags-grouped { gap: 4px; margin-top: 8px; }
  .product-tag { font-size: 10px; padding: 3px 8px; }

  /* --- Purchase button: full width --- */
  .btn.btn-purchase { width: auto; text-align: center; }

  /* --- Heart button: larger touch target --- */
  .suggested-heart-btn { width: 36px; height: 36px; }
  .suggested-heart-btn svg { width: 16px; height: 16px; }

  /* --- Verified badge: smaller on mobile --- */
  .header-verified-badge .certified-icon { width: 14px; height: 14px; }
  .header-verified-badge span { font-size: 9px; }

  /* --- Modal padding on mobile --- */
  .product-modal .modal-content { width: 95vw; padding: 16px; border-radius: 10px; }
}

/* =========================================================
   AI-generated disclaimer
   ========================================================= */
.ai-disclaimer {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f8f9fa;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 12.5px;
  font-family: Inter, system-ui, sans-serif;
  color: #555;
  line-height: 1.55;
}
.ai-disclaimer strong {
  color: #374151;
}

/* Affiliate disclosure bar */
.affiliate-bar {
  text-align: center;
  padding: 12px 20px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  margin-top: 32px;
}
.affiliate-bar p {
  margin: 0;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.affiliate-bar-links {
  margin-top: 6px !important;
}
.affiliate-bar-links a {
  color: #666;
  text-decoration: underline;
}
.affiliate-bar-links a:hover {
  color: #333;
}
.see-on-amazon-link {
  font-size: 12px;
  font-weight: 600;
  color: #1a6b3c;
  text-decoration: none;
  white-space: nowrap;
}
.see-on-amazon-link:hover {
  text-decoration: underline;
  color: #145530;
}

/* =========================================================
   Context-Only Supplier (ai_context source — no scores)
   ========================================================= */
.context-only-badge {
  text-align: center;
  padding: 8px 0;
}
.context-only-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #d0dae4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  background: #f0f4f8;
}
.context-only-label {
  font-size: 11px;
  font-weight: 600;
  color: #5a7a9a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Structured context sections */
.ai-context-sections {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ctx-section {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ctx-section--env {
  border-left: 3px solid #4caf50;
}
.ctx-section--labor {
  border-left: 3px solid #2196f3;
}
.ctx-section--certs {
  border-left: 3px solid #7b1fa2;
}
.ctx-section--ai-context {
  border-left: 3px solid #9ca3af;
}
.ctx-section--controversies {
  border-left: 3px solid #e65100;
  background: #fff;
}
.ctx-section--positives {
  border-left: 3px solid #2e7d32;
  background: #fff;
}
.ctx-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
}
.ctx-section--env .ctx-section-title { color: #2e7d32; }
.ctx-section--labor .ctx-section-title { color: #1565c0; }
.ctx-section--certs .ctx-section-title { color: #7b1fa2; }
.ctx-section--ai-context .ctx-section-title { color: #374151; }
.ctx-section--controversies .ctx-section-title { color: #374151; }
.ctx-section--positives .ctx-section-title { color: #374151; }

/* AI-generated Additional Context styling */
.ctx-section--ai-warning {
  border-left: none;
  background: #fff;
}
.ctx-section-title--ai-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-warn-icon {
  font-size: 16px;
  line-height: 1;
  color: #d32f2f;
}
.ai-warn-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  background: #f0f1f3;
  border: 1px solid #ddd;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: auto;
}
.ai-context-caveat {
  font-size: 11px;
  color: #999;
  margin: 8px 0 0;
  font-style: italic;
  line-height: 1.4;
}

.ctx-section-body {
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
  margin: 0;
}
.ctx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ctx-list li {
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}
/* Controversy & positive items styled as mini-cards */
.ctx-list--controversies li,
.ctx-list--positives li {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s ease;
}
.ctx-list--controversies li:hover,
.ctx-list--positives li:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.ctx-list li strong {
  color: #1a1a1a;
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
}
.ctx-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 6px;
  margin-bottom: 4px;
  vertical-align: middle;
}
.ctx-tag--environmental { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.ctx-tag--labor { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.ctx-tag--governance { background: #f3e5f5; color: #7b1fa2; border: 1px solid #e1bee7; }

/* Severity badges for controversies */
.ctx-severity {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 6px;
  margin-bottom: 4px;
  vertical-align: middle;
}
.ctx-severity--minor { background: #fef9e7; color: #b7950b; border: 1px solid #f9e79f; }
.ctx-severity--moderate { background: #fef3e0; color: #e65100; border: 1px solid #fcd9b6; }
.ctx-severity--severe { background: #fdedec; color: #c62828; border: 1px solid #f5b7b1; }
.ctx-severity--critical { background: #4a0000; color: #fff; border: 1px solid #4a0000; }

/* The web rubric uses high/medium/low; the legacy parametric path used
   minor/moderate/severe/critical. Both vocabularies render, so both need chips —
   without these the sourced concerns show an unstyled bare label. */
.ctx-severity--high   { background: #fdedec; color: #c62828; border: 1px solid #f5b7b1; }
.ctx-severity--medium { background: #fef3e0; color: #e65100; border: 1px solid #fcd9b6; }
.ctx-severity--low    { background: #f6f7f8; color: #6b7280; border: 1px solid #d8dde2; }

/* The pages we ACTUALLY fetched and read. Not AI-recalled source names — real
   URLs, clickable. This is the difference between "trust us" and "check us".

   A brand can have 17+ fetched pages, so they render as wrapping chips rather
   than one full-width row each. Selectors are ul-qualified because the list also
   carries .ctx-list--sources, whose `li` card styling is defined later in this
   file and would otherwise win on source order. */
ul.ctx-list--fetched {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Each host is a collapsible accordion group. */
ul.ctx-list--fetched li.source-group {
  border: 1px solid #e8eaed;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  padding: 0;
}
/* Accordion header: host name, page count, chevron. */
.source-host-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.source-host-toggle:hover { background: #f6f9fa; }
.source-host-toggle .source-host {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #2f4858;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-host-toggle .source-count {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7480;
  background: #eef1f3;
  border-radius: 999px;
  padding: 1px 8px;
}
.source-host-toggle .source-chevron {
  flex: none;
  color: #5b6470;
  transition: transform 0.18s ease, color 0.15s ease;
}
.source-host-toggle:hover .source-chevron { color: #2f4858; }
li.source-group:not(.collapsed) .source-host-toggle .source-chevron {
  transform: rotate(180deg);
}
/* Numbered citation list, revealed on expand. */
ol.source-cites {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  counter-reset: cite;
  border-top: 1px solid #f0f2f4;
}
li.source-group.collapsed ol.source-cites { display: none; }
/* Reset the .ctx-list--sources mini-card treatment (shared class on the ul) so
   citation rows are clean list items, not bordered cards. */
ol.source-cites li {
  counter-increment: cite;
  display: block;
  border: none;
  background: none;
  padding: 0;
}
ol.source-cites a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  text-decoration: none;
  color: #41505c;
  font-size: 12px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
ol.source-cites a:hover { background: #f4f8f9; color: #1f6f66; }
ol.source-cites a::before {
  content: counter(cite);
  flex: none;
  min-width: 16px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa4ae;
  text-align: right;
}
ol.source-cites .source-cite-title {
  flex: 1 1 auto;
  min-width: 0;
}
ol.source-cites .cite-arrow {
  flex: none;
  color: #b4bcc4;
  font-size: 11px;
}

/* Citation line under a sourced concern — the named outlet + date, linked. This
   is what earns the right NOT to score these: the shopper can go read it. */
.ctx-concern-cite {
  margin-top: 5px;
  font-size: 11px;
  color: #6b7280;
}
.ctx-concern-cite a {
  color: #5a7a8a;
  text-decoration: underline;
}
.ctx-concern-cite a:hover { color: #2f4858; }

/* AI modifier explanation note in score breakdown */
.ai-mod-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #666;
  background: #fafbfc;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 6px 0 10px;
  line-height: 1.4;
}
.ai-mod-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* Certification point impact badge */
.ctx-cert-impact {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  background: #e8f5e9;
  color: #2e7d32;
}

/* Registry-VERIFIED certifications — a fact group at the top of the
   Certifications tab, above the AI-recalled list, with no AI caveat. */
.verified-certs-group {
  margin-bottom: 12px;
}
.verified-certs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1b5e20;
  margin: 0 0 6px;
}
/* Verified cert cards reuse the AI-positive card shape, with a green left
   accent so they read as facts. */
.ctx-list--verified li.ctx-cert--verified {
  border-left: 3px solid #2e7d32;
}
/* The "✓ Verified" chip — same footprint as a category .ctx-tag, green. */
.ctx-tag--verified {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}
/* Brand-stated chip: a reviewer confirmed the BRAND publishes this, not that a
   certifier does. Deliberately amber rather than green — it must not read as a
   third-party fact at a glance, which is the whole point of the distinction. */
.ctx-tag--brandstated {
  background: #fff8e1;
  color: #8d6e00;
  border: 1px solid #ffe082;
}

/* Verified VALUES chip (e.g. The Climate Label): real, but not a score factor. */
.ctx-tag--verified-values {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.ctx-cert-src { font-size: 12px; color: #2563eb; text-decoration: none; white-space: nowrap; }
.ctx-cert-src:hover { text-decoration: underline; }
.ctx-no-data {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}

/* Sources section — collapsible dropdown bar */
.ctx-section--sources {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 0;
  margin-top: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.ctx-section--sources .ctx-section-title--collapsible {
  cursor: pointer;
  user-select: none;
  padding: 12px 16px;
  margin: 0;
  background: #fafbfc;
  border-bottom: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.15s, border-color 0.15s;
}
.ctx-section--sources:not(.collapsed) .ctx-section-title--collapsible {
  border-bottom-color: rgba(0,0,0,0.06);
  border-radius: 12px 12px 0 0;
}
.ctx-section--sources .ctx-section-title--collapsible:hover {
  background: #f0f1f3;
  opacity: 1;
}
.ctx-section--sources .ctx-list--sources,
.ctx-section--sources .sources-disclaimer,
.ctx-section--sources .sources-loading-text {
  padding: 12px 16px;
}
.ctx-section-title--collapsible {
  cursor: pointer;
  user-select: none;
}
.ctx-section-title--collapsible:hover {
  opacity: 0.7;
}
.collapse-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ctx-section--sources.collapsed .ctx-list--sources,
.ctx-section--sources.collapsed .sources-disclaimer,
.ctx-section--sources.collapsed .sources-loading-text {
  display: none;
}
.ctx-section--sources.collapsed .collapse-chevron {
  transform: rotate(-90deg);
}
/* Sources as clean stacked mini-cards: type badge on its own line, then the
   citation text, then the "— re:" context. The source text is a bare text node
   between the badge and context spans, so making the badge + context block-level
   brackets it onto its own line instead of the old ragged baseline-wrap flex. */
.ctx-list--sources li {
  display: block;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  background: #fff;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #374151;
}
.ctx-list--sources .source-icon { display: none; }
.source-type-badge {
  display: block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f0f4f8;
  color: #5a7a9a;
  margin: 0 0 5px;
}
.source-context {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}
.sources-disclaimer {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}

/* Inline caveat under section headers (controversies, positives) */
.ctx-section-caveat {
  font-size: 11.5px;
  color: #8a8a8a;
  font-style: italic;
  line-height: 1.45;
  margin: 4px 0 10px 0;
  padding: 0;
}
.sources-loading .sources-loading-text {
  animation: pulse-fade 1.5s ease-in-out infinite;
}
@keyframes pulse-fade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* =========================================================
   Tutorial overlay
   ========================================================= */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.tut-overlay[hidden] { display: none !important; }
.tut-overlay > * { pointer-events: auto; }

.tut-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  transition: opacity .3s ease;
}

.tut-spotlight {
  position: fixed;
  border-radius: 14px;
  border: 3px solid var(--brand-500, #0b7a4f);
  transition: all .4s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: 10002;
}
.tut-spotlight::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 2px solid rgba(11,122,79,0.3);
  animation: tutPulse 2s ease-in-out infinite;
}
@keyframes tutPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.01); }
}

.tut-tooltip {
  position: fixed;
  z-index: 10003;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
  padding: 20px 22px 16px;
  max-width: 380px;
  min-width: 280px;
  transition: all .4s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(11,122,79,0.15);
}

.tut-step-indicator {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.tut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  transition: all .2s ease;
}
.tut-dot.active {
  background: var(--brand-500, #0b7a4f);
  transform: scale(1.25);
}
.tut-dot.done {
  background: var(--brand-100, #d4edda);
  border: 1.5px solid var(--brand-500, #0b7a4f);
}

.tut-content h4 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #1a1a1a;
}
.tut-content p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #444;
}

.tut-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.tut-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  transition: all .15s ease;
}
.tut-btn--skip {
  background: transparent;
  color: #888;
  padding: 8px 12px;
}
.tut-btn--skip:hover {
  color: #444;
  background: rgba(0,0,0,0.04);
}
.tut-btn--next {
  background: var(--brand-600, #0b4f2d);
  color: #fff;
  padding: 8px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.tut-btn--next:hover:not(:disabled) {
  background: var(--brand-500, #0b7a4f);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

body.tut-active {
  /* allow scroll so user can see highlighted sections */
}

@media (max-width: 700px) {
  .tut-tooltip { max-width: calc(100vw - 24px); min-width: unset; padding: 14px 14px 10px; }
  .tut-content { max-height: calc(100vh - 200px); overflow-y: auto; }
  .tut-content h4 { font-size: 15px; }
  .tut-content p { font-size: 12px; line-height: 1.45; margin-bottom: 6px; }
  .tut-content .tut-action { font-size: 11px; padding: 5px 10px; }
  .tut-actions { margin-top: 10px; padding-top: 8px; }
  .tut-btn { font-size: 13px; padding: 7px 14px; }
  .tut-step-indicator { margin-bottom: 8px; }
}

/* Verdict takeaway (legacy — no longer rendered) */
.verdict-takeaway { display: none; }

/* =========================================================
   Visual Hierarchy — Primary / Secondary / Tertiary
   ========================================================= */
/* Summary section — context subsections inherit card look */
.supplier-section--summary .ctx-section {
  border-color: rgba(0,0,0,0.06);
  background: #fafbfc;
}

/* Primary: suggested replacements */
.suggested-grid--primary {
  margin-bottom: 4px;
}

/* =========================================================
   Mobile: collapsed-by-default is even more important
   ========================================================= */
@media (max-width: 640px) {
  .header-narrative-text { font-size: 13px; }
}

/* =========================================================
   Layout reorder additions (2026-05-02)
   New top-to-bottom order:
     1. #productReplacementsRow: product card (left) + condensed scorecard (right)
     2. #suggestedReplacementsMount: alternatives, full width
     3. .supplier-section--summary (id="controversies"): standalone
     4. .card.supplier-card.supplier-card--reduced: peers + checks two-col
   See reorderSupplierLayout() in supplier.js. Rollback:
     1. Delete this block
     2. Comment out the reorderSupplierLayout() call at end of loadByUrl()
     3. Delete the reorderSupplierLayout function definition
   ========================================================= */

/* Top-row right column: spacer (h2 placeholder) + scorecard + alternatives.
   Uses flex column with margin-top: auto on the alternatives mount to
   push it to the bottom of the (stretched) column, so its bottom edge
   lines up with the product card's bottom edge across the row. */
#supplierScorecardCol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Invisible spacer above the scorecard — mirrors the "Your Product"
   label's height so both card tops align. Uses the same class so its
   metrics scale together with the YOUR PRODUCT label. */
#supplierScorecardCol > .product-card-title {
  visibility: hidden;
}
#supplierScorecardCol .supplier-card-header { margin: 0 0 20px; }
/* (The replacements mount left this column — see .replacements-section.) */

/* Make alternative tiles fill the available column width on desktop
   (mobile carousel uses .suggested-item--scroll with fixed widths,
   left untouched). */
#supplierScorecardCol .suggested-list .suggested-item:not(.suggested-item--scroll) {
  flex: 1 1 180px;
  /* Reset the base 180px min-width so 4 tiles shrink to fit the scorecard
     column instead of overflowing it (they lost the .suggested-replacements-col
     min-width:0 when the mount moved into #supplierScorecardCol). */
  min-width: 0;
}
/* Let the grid column shrink too (grid items default to min-width:auto). */
#supplierScorecardCol .suggested-column { min-width: 0; }

/* The summary section is now a top-level child of #profile;
   restore the spacing that previously came from supplier-card grid gap. */
#profile > .supplier-section--summary {
  margin-bottom: 20px;
}

/* Shared alternatives header — title and toggle sit together on the left,
   inline. Reuses the existing .section-hero look (green tinted bar). */
.alt-shared-hero {
  align-items: center;
  gap: 14px;
}

/* Score/Price sort toggle inside the shared header. Pill-style segmented
   control with a translucent white pad; text matches the green hero
   color so the toggle blends with the title visually. */
.alt-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.alt-sort-btn {
  padding: 4px 12px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 90, 40, 0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alt-sort-btn--active {
  background: #ffffff;
  color: #1a5a28;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.alt-sort-btn:hover:not(.alt-sort-btn--active) { color: #1a5a28; }

/* Collapsible Reported Controversies / Reported Certifications sections.
   Matches the Sources accordion pattern at supplier.css:2447. The title
   stays visible (chevron rotates to indicate state); everything else
   in the section is hidden when the section has the `collapsed` class. */
.ctx-section--controversies.collapsed > :not(.ctx-section-title),
.ctx-section--positives.collapsed > :not(.ctx-section-title) {
  display: none;
}
.ctx-section--controversies.collapsed .collapse-chevron,
.ctx-section--positives.collapsed .collapse-chevron {
  transform: rotate(-90deg);
}

/* Tabbed summary card: Reported Controversies / Certifications / Sources
   collapsed into a single card with a one-row tab strip and the active
   section's body rendered below (built by wireControversyPositiveCollapsibles). */
.summary-tabs {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.summary-tab-bar {
  display: flex;
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
}
.summary-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #6b7280;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.summary-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* Persistent pastel tint per tab so they read as distinct, scannable chips
   rather than a flat gray bar. Hover/active deepen the same hue. Palette
   mirrors the --ctx-* tokens used across the AI surfaces. */
.summary-tab--mauve { background: #f5eded; color: #5c3f3f; }
.summary-tab--mauve + .summary-tab { border-left: 1px solid #e5d5d5; }
.summary-tab--mauve:hover { background: #efe0e0; }
.summary-tab--mauve.active { background: #f5eded; border-bottom-color: #8a6e6e; }

.summary-tab--sage { background: #eef4f0; color: #2c5240; }
.summary-tab--sage + .summary-tab { border-left: 1px solid #d4e0d6; }
.summary-tab--sage:hover { background: #e3eee8; }
.summary-tab--sage.active { background: #eef4f0; border-bottom-color: #5b8a72; }

.summary-tab--slate { background: #eef2f5; color: #3d4b56; }
.summary-tab--slate + .summary-tab { border-left: 1px solid #d0dae0; }
.summary-tab--slate:hover { background: #e2e9ee; }
.summary-tab--slate.active { background: #eef2f5; border-bottom-color: #5a7a8a; }

.summary-tab--sky { background: #eef2fb; color: #354a72; }
.summary-tab--sky + .summary-tab { border-left: 1px solid #d6def0; }
.summary-tab--sky:hover { background: #e3ebf8; }
.summary-tab--sky.active { background: #eef2fb; border-bottom-color: #5a72a8; }

.summary-tab--amber { background: #fbf3e6; color: #7a5a1e; }
.summary-tab--amber + .summary-tab { border-left: 1px solid #efe0c4; }
.summary-tab--amber:hover { background: #f6ebd6; }
.summary-tab--amber.active { background: #fbf3e6; border-bottom-color: #b08a3e; }

.summary-tab--summary { background: #eef0f2; color: #4a5560; }
.summary-tab--summary:hover { background: #e6e9ec; }
.summary-tab--summary.active { background: #eef0f2; border-bottom-color: #6b7683; }
/* The Summary pill is a mobile-only affordance — on desktop the summary shows by
   default, so the pill is hidden there and revealed in the phone breakpoint. */
.summary-tab--summary-pill { display: none; }

.summary-tab.active {
  font-weight: 800;
}
/* "Click to expand" affordance — only visible while the card is collapsed
   (no tab chosen yet). Hidden as soon as a panel becomes active. */
.summary-tabs-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.2px;
  color: #9ca3af;
}
.summary-tabs-hint svg { flex-shrink: 0; opacity: 0.8; }
.summary-tabs:not(:has(.summary-tab-panel--active)) .summary-tabs-hint {
  display: flex;
}
.summary-tab-panels {
  padding: 16px 18px;
}
/* No tab chosen yet → no body, no leftover padding gap. */
.summary-tab-panels:not(:has(.summary-tab-panel--active)) {
  padding: 0;
}
/* Sections inside the tab card drop their standalone card chrome — the
   wrapper is the card now — and only the active one shows. */
.summary-tab-panels > .ctx-section {
  display: none;
  border: none;
  border-left: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.summary-tab-panels > .ctx-section.summary-tab-panel--active {
  display: block;
}
/* Sources list carries its own inset padding for the standalone accordion;
   flush it inside the panel since the panel already pads. */
.summary-tab-panels .ctx-section--sources .ctx-list--sources,
.summary-tab-panels .ctx-section--sources .sources-disclaimer,
.summary-tab-panels .ctx-section--sources .sources-loading-text {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 640px) {
  /* Phone: reclaim vertical space in the header — drop the "SUPPLIER" label, the
     "vs. sector average" delta, and the "N% data coverage" line, and let the
     LEIF VERIFIED badge (moved next to the score pill by placeVerifiedBadge())
     stand in for them. Also drop the per-pillar tier words (GOOD/AVERAGE) — the
     numbers speak for themselves. */
  /* Breathing room when scrollSwitcherIntoView() scrolls the card to the top. */
  .supplier-card-header { scroll-margin-top: 12px; }
  .header-type-label { display: none; }
  #headerDataCoverage { display: none; }
  /* Drop the "·" that would dangle after the last visible meta item now that
     data coverage is hidden (empty meta items carry inline display:none). */
  .header-meta-row .header-meta-item:not([style*="display: none"]):not(:has(~ .header-meta-item:not(#headerDataCoverage):not([style*="display: none"])))::after { content: none; }
  .header-sector-delta { display: none; }
  .header-verified-badge--inline { margin-left: 0; }
  .pillar-wheel-tier { display: none; }

  /* Phone: the card is full-width and stacked. Lay the section buttons out as a
     compact horizontal row of pills that wraps to a second line as needed
     (instead of a full-height vertical stack), tighten the switcher margins,
     and inset the panel content. */
  .summary-switcher { margin: 12px 16px 6px; }
  .summary-switcher-panels.summary-tab-panels { padding: 10px 16px 12px; }
  /* Drop the bordered container — just the pills sitting in the section. */
  .summary-tabs {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  .summary-tab-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    background: transparent;
    border-bottom: none;
  }
  .summary-tab {
    flex: 1 1 auto;
    justify-content: center;
    gap: 5px;
    padding: 8px 11px;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    white-space: nowrap;
  }
  .summary-tab svg { width: 13px; height: 13px; }
  /* Dividers were for the desktop horizontal bar — none between wrapped pills. */
  .summary-tab + .summary-tab { border-left: none; }
  /* Active pill: fill it with its hue, deepen the border, and add a soft lift so
     the selected section is unmistakable at a glance. */
  .summary-tab.active { font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
  .summary-tab--mauve.active { background: #f0dede; border-color: #8a6e6e; color: #4a2f2f; }
  .summary-tab--sage.active  { background: #dcebe2; border-color: #5b8a72; color: #1f4a34; }
  .summary-tab--slate.active { background: #dfe7ec; border-color: #5a7a8a; color: #2d3b46; }
  .summary-tab--sky.active   { background: #dee7f6; border-color: #5a72a8; color: #28395f; }
  .summary-tab--amber.active { background: #f5e6c9; border-color: #b08a3e; color: #6a4a12; }
  .summary-tab--summary.active { background: #e2e6ea; border-color: #6b7683; color: #3a4550; }
  /* Reveal the Summary pill on phones (first in the row). */
  .summary-tab--summary-pill { display: flex; }
  /* No auto-shown summary on mobile: collapse the narrative / AI interpretation
     bands AND the pillar outlook by default, revealing them only while the
     Summary pill is active (so "Summary" = the full overview). */
  .supplier-card-header .header-band--narrative,
  .supplier-card-header .header-band--interpretation,
  .supplier-card-header .scorebody-col--right { display: none; }
  .supplier-card-header.switcher-summary-open .header-band--narrative,
  .supplier-card-header.switcher-summary-open .header-band--interpretation,
  .supplier-card-header.switcher-summary-open .scorebody-col--right { display: block; }
}

/* ── In-card summary switcher ───────────────────────────────────────────
   The four brand-detail sections render as a button row in the supplier
   card header; selecting one swaps the card's summary text (narrative
   bullets / AI interpretation) for that section's panel, with a Back
   control. Reuses the .summary-tab* chrome above; only the deltas here. */
.summary-switcher {
  /* Full-width band below the score split; horizontal margin matches the 24px
     band padding so the boxed button bar lines up with the card content. */
  margin: 16px 24px 6px;
}
/* The panel host lives in the scorecard main column (where the summary text
   sits), not in the bar band. Match the bullets' horizontal inset so an open
   section reads as an in-place replacement; stays fully collapsed until open. */
.summary-switcher-panels.summary-tab-panels { padding: 0 24px 14px; }
.summary-tab-panels.summary-switcher-panels:not(:has(.summary-tab-panel--active)) { padding: 0; }
/* With a section open, hide the pillar outlook so the panel gets the full card
   width; the split then has a single column. Restored on Back to summary. */
.supplier-card-header.section-open .scorebody-col--right { display: none; }
.supplier-card-header.section-open .header-scorecard-split { align-items: flex-start; }
/* Tighten the space between the identity/title block and the opened panel. */
.supplier-card-header.section-open .header-scorecard-main > .header-band--identity { padding-bottom: 4px; }
/* Stated attributes is a .supplier-section (not a .ctx-section) — give it the
   same in-panel reset so it sheds its standalone card chrome inside the host. */
.summary-switcher-panels > .supplier-section--checks {
  display: none;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.summary-switcher-panels > .supplier-section--checks.summary-tab-panel--active {
  display: block;
}
/* Back-to-summary control — a small, subtle link tucked to the top-right of the
   panel so it stays out of the way (the button bar + clicking the active button
   also return to the summary). Hidden until a panel is open. */
.summary-switcher-back {
  /* Right-aligned on its own line via auto left margin. NOT float:right — a
     floated button makes any BFC-establishing sibling (the sources section has
     overflow:hidden; its list too) shrink to avoid the float, which on a narrow
     phone collapsed the source cards to ~half width with a dead right gutter. */
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 0 0 4px auto;
  padding: 3px 9px;
  background: none;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.summary-switcher-back:hover { color: #b91c1c; background: #fef2f2; }
.summary-switcher-back svg { width: 13px; height: 13px; flex-shrink: 0; }
.summary-switcher-back[hidden] { display: none; }
/* Slightly smaller, tighter panel text than the old standalone section. */
.summary-switcher-panels .ctx-section-caveat { font-size: 11.5px; }
.summary-switcher-panels .ctx-list li { font-size: 12px; line-height: 1.45; }
.summary-switcher-panels .ctx-list li strong { font-size: 12.5px; }
.summary-switcher-panels .ctx-list--controversies li,
.summary-switcher-panels .ctx-list--positives li { padding: 11px 13px; }
.summary-switcher-panels .checks-subtitle { font-size: 11.5px; margin-bottom: 12px; }
/* Attributes panel: smaller pills, tighter groups, and flatten the "Show N not
   met" box into a plain link so the panel reads clean (no boxed outline). */
.summary-switcher-panels .attr-pill { padding: 5px 11px; font-size: 11.5px; border-width: 1px; }
.summary-switcher-panels .attr-pill--yes::before,
.summary-switcher-panels .attr-pill--no::before { font-size: 11px; margin-right: 4px; }
.summary-switcher-panels .attr-pill-wrap { gap: 7px; }
.summary-switcher-panels .attr-group { margin-bottom: 8px; }
.summary-switcher-panels .attr-group-label { font-size: 11px; margin: 8px 0 5px; }
.summary-switcher-panels .checks-toggle {
  width: fit-content;
  padding: 6px 2px;
  margin-top: 8px;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 12px;
}
.summary-switcher-panels .checks-toggle:hover { background: none; border: none; color: #333; }
/* Forward-Looking Commitments panel: it's the panel's only content now (its own
   tab), so drop the old "folded under the cert list" top hairline; amber-tint
   the dated-target cards to match the tab and trim text to the panel scale. */
.summary-switcher-panels .ctx-forward-block { margin-top: 0; padding-top: 0; border-top: none; }
.summary-switcher-panels .ctx-forward-label { font-size: 11.5px; margin-bottom: 10px; }
.summary-switcher-panels .signal-card {
  border: 1px solid #efe0c4;
  border-left: 3px solid #c9972f;
  background: #fdf7ec;
  padding: 11px 13px;
}
.summary-switcher-panels .signal-card-target { color: #916312; }
.summary-switcher-panels .signal-card-commitment { font-size: 12.5px; }
.summary-switcher-panels .signal-card-progress { font-size: 11.5px; color: #7a5f2e; }
.summary-switcher-panels .signal-card-source { font-size: 11px; }
/* When a panel is open the switcher REPLACES the summary text in place — hide
   the narrative bullets / AI interpretation bands, keep identity + pillars. */
.supplier-card-header.section-open .header-band--narrative,
.supplier-card-header.section-open #score-context,
.supplier-card-header.section-open .header-band--interpretation {
  display: none !important;
}

/* When .supplier-card holds only --peers + --checks, override the grid
   template to avoid empty named areas referencing removed children. */
.card.supplier-card.supplier-card--reduced {
  grid-template-areas:
    "peers"
    "checks";
}
@media (min-width: 900px) {
  .card.supplier-card.supplier-card--reduced {
    grid-template-areas: "peers checks";
  }
}

/* Narrative paragraph (#supplierSummary) relocated to top of breakdown.
   Re-applies the typographic styling that previously came from the
   .supplier-section--summary scoped rule. */
.supplier-section--peers > #supplierSummary {
  margin: 0 0 16px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  letter-spacing: 0;
}

/* Mobile: top row stacks (product card on top, scorecard below) */
@media (max-width: 640px) {
  .product-replacements-row { flex-direction: column; }
  #supplierScorecardCol { width: 100%; }
}

/* =========================================================
   Context Mode — category / jurisdiction / benchmark context
   (shown for context-only suppliers in place of per-pillar
   "Limited public information…" sections)
   ========================================================= */

/* "Context mode" pill — top-right of the supplier card label row.
   Replaces the old left score-area "Context Only" circle badge. */
.card.supplier-card--context-only .header-score-area { display: none; }

/* Pastel context-mode palette — mirrors homepage "Good stuff, sorted" chips
   (muted, desaturated, earthy). Use sparingly for accents; bodies stay neutral.
   Shared across context-mode AND verified-page AI sections (score context +
   forward-looking signals) so the whole AI surface area reads as one family. */
.ctx-section--ai,
.supplier-section--score-context,
.supplier-section--forward-signals {
  --ctx-slate:       #5a7a8a;
  --ctx-slate-deep:  #3d4b56;
  --ctx-slate-bg:    #eef2f5;
  --ctx-slate-bd:    #d0dae0;
  --ctx-sage:        #5b8a72;
  --ctx-sage-deep:   #2c5240;
  --ctx-sage-bg:     #eef4f0;
  --ctx-sage-bd:     #d4e0d6;
  --ctx-mauve:       #8a6e6e;
  --ctx-mauve-deep:  #5c3f3f;
  --ctx-mauve-bg:    #f5eded;
  --ctx-mauve-bd:    #e5d5d5;
  --ctx-tan:         #8a7a5b;
  --ctx-tan-deep:    #5a4d34;
  --ctx-tan-bg:      #f5f0e8;
  --ctx-tan-bd:      #e2d8c5;
}

.context-mode-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #3d4b56;
  background: #eef2f5;
  border: 1px solid #d0dae0;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.context-mode-pill svg { flex-shrink: 0; color: #5a7a8a; }

/* "Methodology" pill — clickable button top-right of the card label row that
   opens the methodology popup. Same pastel chrome as the old context-mode pill,
   plus button affordances (pointer + hover). */
.methodology-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #3d4b56;
  background: #eef2f5;
  border: 1px solid #d0dae0;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.methodology-pill svg { flex-shrink: 0; color: #5a7a8a; }
.methodology-pill:hover { background: #e2e9ee; border-color: #b7c6cf; color: #2b3742; }
.methodology-pill:focus-visible { outline: 2px solid #5a7a8a; outline-offset: 2px; }

/* Methodology popup — fixed-position overlay appended to <body>. */
.methodology-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(17, 24, 33, 0.55);
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.methodology-modal-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.methodology-modal {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  margin: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  padding: 26px 26px 24px;
}
.methodology-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.methodology-modal-close:hover { background: #f1f3f5; color: #4b5560; }
.methodology-modal-title {
  margin: 0 30px 4px 0;
  font-size: 19px;
  font-weight: 800;
  color: #1f2937;
}
.methodology-modal-sub {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}
.methodology-modal-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.methodology-modal-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}
.methodology-modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b8a72;
}
.methodology-modal-list li strong { color: #1f2937; }
.methodology-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #2c5240;
  text-decoration: none;
}
.methodology-modal-link:hover { text-decoration: underline; }
.methodology-modal-link svg { flex-shrink: 0; }

/* Full-width "context mode" explainer banner */
.ctx-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef2f5;
  border: 1px solid #d0dae0;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #3d4b56;
}
.ctx-banner svg { flex-shrink: 0; color: #5a7a8a; margin-top: 1px; }
.ctx-banner strong { font-weight: 700; color: #2c3a44; }

/* AI section header: title left, provenance pill right */
.ctx-section--ai .ctx-ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.ctx-section--ai .ctx-ai-title { margin: 0; color: #111; }
.ctx-section--ai .ctx-ai-title svg { flex-shrink: 0; vertical-align: -3px; margin-right: 8px; }
.ctx-section--category .ctx-ai-title svg { color: var(--ctx-sage); }
.ctx-section--reg .ctx-ai-title svg { color: var(--ctx-tan); }
.ctx-section--bench .ctx-ai-title svg { color: var(--ctx-slate); }
.ctx-section--ai .ctx-ai-icon { color: #9ca3af; flex-shrink: 0; }

.ai-prov-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3d4b56;
  background: #eef2f5;
  border: 1px solid #d0dae0;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Per-section provenance tints — pulls from the palette declared above */
.ctx-section--category .ai-prov-pill {
  color: var(--ctx-sage-deep);
  background: var(--ctx-sage-bg);
  border-color: var(--ctx-sage-bd);
}
.ctx-section--reg .ai-prov-pill {
  color: var(--ctx-tan-deep);
  background: var(--ctx-tan-bg);
  border-color: var(--ctx-tan-bd);
}
.ctx-section--bench .ai-prov-pill {
  color: var(--ctx-slate-deep);
  background: var(--ctx-slate-bg);
  border-color: var(--ctx-slate-bd);
}
.ai-prov-pill svg { flex-shrink: 0; }
.ai-prov-pill--inline {
  margin: 0 6px 0 0;
  vertical-align: middle;
}

.ctx-ai-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7280;
  margin: 4px 0 14px;
}

/* Industry & category context — two sub-cards tinted with the pastel palette.
   The first card (scrutiny areas) uses dusty mauve to signal caution-adjacent;
   the second (category upside) uses sage to signal positive-adjacent. */
.ctx-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ctx-subcard {
  background: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 14px 16px;
}
.ctx-section--category .ctx-subcard:nth-child(1) {
  background: var(--ctx-mauve-bg);
  border-color: var(--ctx-mauve-bd);
}
.ctx-section--category .ctx-subcard:nth-child(1) .ctx-subcard-title { color: var(--ctx-mauve-deep); }
.ctx-section--category .ctx-subcard:nth-child(1) .ctx-bullets li::before { background: var(--ctx-mauve); }
.ctx-section--category .ctx-subcard:nth-child(2) {
  background: var(--ctx-sage-bg);
  border-color: var(--ctx-sage-bd);
}
.ctx-section--category .ctx-subcard:nth-child(2) .ctx-subcard-title { color: var(--ctx-sage-deep); }
.ctx-section--category .ctx-subcard:nth-child(2) .ctx-bullets li::before { background: var(--ctx-sage); }
.ctx-subcard-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #374151;
  margin: 0 0 8px;
}
.ctx-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ctx-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #3f3f3f;
}
.ctx-bullets li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9ca3af;
}

/* Regulatory environment — 2x2 grid; each card cycles through the pastel
   palette via a thin tinted top accent and a matching icon color. The card
   body stays a soft tinted background so the section reads as a set. */
.ctx-reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ctx-reg-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  border-left-width: 3px;
}
.ctx-section--reg .ctx-reg-card:nth-child(4n+1) {
  background: var(--ctx-tan-bg);
  border-color: var(--ctx-tan-bd);
  border-left-color: var(--ctx-tan);
}
.ctx-section--reg .ctx-reg-card:nth-child(4n+1) .ctx-reg-name svg { color: var(--ctx-tan); }
.ctx-section--reg .ctx-reg-card:nth-child(4n+2) {
  background: var(--ctx-mauve-bg);
  border-color: var(--ctx-mauve-bd);
  border-left-color: var(--ctx-mauve);
}
.ctx-section--reg .ctx-reg-card:nth-child(4n+2) .ctx-reg-name svg { color: var(--ctx-mauve); }
.ctx-section--reg .ctx-reg-card:nth-child(4n+3) {
  background: var(--ctx-sage-bg);
  border-color: var(--ctx-sage-bd);
  border-left-color: var(--ctx-sage);
}
.ctx-section--reg .ctx-reg-card:nth-child(4n+3) .ctx-reg-name svg { color: var(--ctx-sage); }
.ctx-section--reg .ctx-reg-card:nth-child(4n) {
  background: var(--ctx-slate-bg);
  border-color: var(--ctx-slate-bd);
  border-left-color: var(--ctx-slate);
}
.ctx-section--reg .ctx-reg-card:nth-child(4n) .ctx-reg-name svg { color: var(--ctx-slate); }
.ctx-reg-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #2c3a44;
  margin: 0 0 6px;
}
.ctx-reg-name svg { flex-shrink: 0; }
.ctx-reg-icon { color: #5a7a8a; flex-shrink: 0; }
.ctx-reg-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

/* Transparency benchmarks — green flags vs red flags */
.ctx-flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.ctx-flags-col { display: flex; flex-direction: column; gap: 8px; }
.ctx-flags-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.ctx-flags-label svg { flex-shrink: 0; }
.ctx-flags-label--green { color: var(--ctx-sage-deep); }
.ctx-flags-label--green svg { color: var(--ctx-sage); }
.ctx-flags-label--red { color: var(--ctx-mauve-deep); }
.ctx-flags-label--red svg { color: var(--ctx-mauve); }
.ctx-flag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctx-flag {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 9px 13px;
  border-radius: 10px;
}
.ctx-flag--green {
  background: var(--ctx-sage-bg);
  color: var(--ctx-sage-deep);
  border: 1px solid var(--ctx-sage-bd);
}
.ctx-flag--red {
  background: var(--ctx-mauve-bg);
  color: var(--ctx-mauve-deep);
  border: 1px solid var(--ctx-mauve-bd);
}
.ctx-flag--empty {
  background: #f9fafb;
  color: #9ca3af;
  border: 1px dashed #e5e7eb;
  font-style: italic;
}

/* Footer disclaimer */
.ctx-footer-disclaimer {
  font-size: 11.5px;
  line-height: 1.5;
  color: #9ca3af;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef0f2;
}
.ctx-footer-disclaimer strong { color: #6b7280; font-weight: 600; }
.ctx-footer-disclaimer a { color: inherit; text-decoration: underline; }
.ctx-footer-disclaimer .ai-prov-pill--inline {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

/* Loading / empty states for the async-fetched context block */
.ctx-ai-host { display: contents; }
.ctx-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 20px;
  font-size: 13px;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
/* boat loader (utils/page-loader.js mounts it); was a spinning ring */
.ctx-ai-spinner {
  display: block;
  flex: none;
  width: 30px;
  aspect-ratio: 597 / 421;
  --leif-loader-bg: #fff;   /* .ctx-ai-loading is a white card */
}
@keyframes ctxspin { to { transform: rotate(360deg); } }

/* Per-section skeletons shown while the profile streams in. Each carries its own
   real title, so the user can see WHAT is still coming instead of one opaque
   spinner — and each is swapped out the moment its section lands. */
.ctx-section--streaming .ctx-ai-loading {
  padding: 16px 18px;
  justify-content: flex-start;
}
.ctx-section--streaming .ctx-section-title {
  opacity: 0.65;
}

/* "We looked and found nothing" — an explicit answer. A missing section is
   indistinguishable from a still-loading or broken one, which is exactly how a
   clean brand (no controversies, no certs) used to read. */
.ctx-section-empty {
  margin: 0;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  background: #fafbfc;
  border: 1px dashed #e0e4e8;
  border-radius: 14px;
}

.ctx-ai-empty {
  font-size: 12.5px;
  color: #9ca3af;
  font-style: italic;
  margin: 0;
  padding: 18px 20px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
}

/* Stack the two-column grids on narrow viewports */
@media (max-width: 640px) {
  .ctx-subgrid,
  .ctx-reg-grid,
  .ctx-flags { grid-template-columns: 1fr; }
  .ctx-section--ai .ctx-ai-head { flex-wrap: wrap; }
  .ai-prov-pill { margin-left: 0; }
}

/* =========================================================
   Consolidated pillar wheels + AI context sections (2026-05-19)
   - Pillar wheels live in the supplier card (replace the 4-tile
     metrics band + the standalone "Detailed score breakdown").
   - "What this score means in context" / "Forward-looking
     signals" reuse the canonical .ai-prov-pill provenance chip.
   ========================================================= */

/* --- Pillar wheels band (inside the supplier card header) ---
   Two-column grid: wheels on the left, stats (controversies + commitments)
   stacked on the right. Hint + breakdown panel span both columns. */
.header-band--pillars {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: 12px;
  align-items: center;
}
.pillar-wheels-row {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.pillar-wheel {
  flex: 1 1 0;
  min-width: 150px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pillar-wheel:hover {
  border-color: #1a7a1a;
  background: #f7fbf7;
  box-shadow: 0 2px 8px rgba(26, 122, 26, 0.08);
}
.pillar-wheel:active { transform: translateY(1px); }
.pillar-wheel:focus-visible { outline: 2px solid #1a7a1a; outline-offset: 2px; }
.pillar-wheel.is-active {
  border-color: #1a7a1a;
  background: #f3faf3;
  box-shadow: 0 1px 4px rgba(26, 122, 26, 0.12);
}
.pillar-wheel-holder { margin-bottom: 6px; }
.pillar-wheel-name {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  text-align: center;
  line-height: 1.25;
  margin-top: 4px;
}
.pillar-wheel-tier {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

/* Explicit "View breakdown ▼" CTA pill on every wheel — the chevron flips
   when the wheel is the active (expanded) one. */
.pillar-wheel-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a7a1a;
  background: #ecfdf3;
  border: 1px solid #c8e6c9;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pillar-wheel-cta-chev { transition: transform 0.2s ease; flex-shrink: 0; }
.pillar-wheel:hover .pillar-wheel-cta,
.pillar-wheel.is-active .pillar-wheel-cta {
  background: #1a7a1a;
  color: #ffffff;
  border-color: #1a7a1a;
}
.pillar-wheel.is-active .pillar-wheel-cta-chev { transform: rotate(180deg); }

.pillar-wheels-hint {
  grid-column: 1 / -1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  text-align: center;
  margin: 0;
}
.pillar-wheels-hint-icon {
  color: #9ca3af;
  animation: pillarHintBounce 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pillarHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
.pillar-wheels-hint[hidden] { display: none; }


/* Inline subscore breakdown — separated by a thin top border, spans full
   width of the band so it sits below both the wheels and the stats column. */
.pillar-breakdown {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.pillar-breakdown[hidden] { display: none; }
.pillar-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pillar-breakdown-title { font-size: 15px; font-weight: 800; color: #111; }
.pillar-breakdown-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pillar-breakdown-close:hover { background: #f3f4f6; color: #374151; }
/* "Back to summary" button shown when a pillar's breakdown takes over the
   interpretation band. Same pill chrome as the close button, with a leading
   arrow; sits on the left so the pillar title reads to its right. */
.pillar-breakdown-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pillar-breakdown-back:hover { background: #eef2f7; color: #111827; border-color: #d1d5db; }
.pillar-breakdown-back svg { flex-shrink: 0; }
.pillar-breakdown-list { display: flex; flex-direction: column; }
.pillar-sub-empty { font-size: 13px; color: #9ca3af; font-style: italic; margin: 0; }

/* --- New AI sections (top-level children of #profile) --- */
.supplier-section--score-context,
.supplier-section--forward-signals {
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
}
#profile > .supplier-section--score-context,
#profile > .supplier-section--forward-signals { margin-bottom: 20px; }

.ai-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ai-section-icon { color: #6b7280; flex-shrink: 0; }
.supplier-section--score-context .ai-section-icon { color: var(--ctx-tan); }
.supplier-section--forward-signals .ai-section-icon { color: var(--ctx-sage); }
.ai-section-subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7280;
  margin: 4px 0 14px;
}
.ai-interpretation-body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
/* Bulleted verified-score interpretation — one point per line, matches the
   scannable context-mode bullet style. */
.ai-interpretation-body .interp-bullets {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.ai-interpretation-body .interp-bullets li {
  margin: 0 0 6px;
  padding-left: 2px;
}
.ai-interpretation-body .interp-bullets li:last-child {
  margin-bottom: 0;
}
/* Per-section provenance pill tints — same pattern as context-mode sections */
.supplier-section--score-context .ai-prov-pill {
  color: var(--ctx-tan-deep);
  background: var(--ctx-tan-bg);
  border-color: var(--ctx-tan-bd);
}
.supplier-section--forward-signals .ai-prov-pill {
  color: var(--ctx-sage-deep);
  background: var(--ctx-sage-bg);
  border-color: var(--ctx-sage-bd);
}

/* In-card interpretation band — the "What this score means in context" text
   moved INSIDE the supplier card so it's visible without scrolling. It carries
   .supplier-section--score-context for the title tint + provenance pill, but as
   a header band it must shed the standalone-card chrome those rules add. */
.header-band--interpretation.supplier-section--score-context {
  background: transparent;
  /* Keep only the top border as the divider under the identity row. */
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 24px 22px;
}
.header-band--interpretation .ai-interpretation-body {
  /* Tighten line-height slightly vs the old full-width section so a long
     paragraph stays compact inside the card. */
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── Split scorecard header: LEFT column = identity stacked above the
   summary/interpretation text; RIGHT rail = pillar boxes running from the top
   of the card down. Shared by verified + context-only. ── */
.header-scorecard-split {
  display: flex;
  align-items: stretch;
}
.header-scorecard-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.header-scorecard-main > .header-band--identity {
  border-radius: 18px 0 0 0;
  /* Score circle is hidden and the tier area moved into the title row, leaving
     only the info column — collapse the old 3-col grid so there's no phantom
     left gap where the circle used to sit. */
  grid-template-columns: 1fr;
  gap: 0;
}
/* Score/tier pill now sits inline to the right of the supplier name (matching
   the context-only "LIKELY · …" treatment), so the big left score circle is
   hidden and the title + pill share one flex row. */
.header-score-area { display: none; }
.header-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.header-title-row .supplier-title { margin: 0; }
.header-tier-area--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
/* Verified score pill — dark pill + tier-colored dot ("● 58 · GOOD"), matching
   the context-only "LIKELY · …" pill and the product-card score pill. */
.header-tier-pill--score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: auto;
  background: #1f2937;
  color: #fff;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.header-tier-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

/* Right rail — top-aligned, divided from the main column. */
.scorebody-col--right {
  flex: 0 0 226px;
  width: 226px;
  align-self: stretch;
  display: block;
  border-top: none;
  border-left: 1px solid #e5e7eb;
  padding: 16px 16px 16px 18px;
}

/* Pillar wheels (verified): vertical stack in the right rail, boxes grow to
   fill the rail's full height (so they don't sit pushed up when the summary
   text on the left is tall — matches the context-only estimated tiles). */
.scorebody-col--right.header-band--pillars {
  display: flex;
  flex-direction: column;
}
.scorebody-col--right .pillar-wheels-row {
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  justify-content: stretch;
}
.scorebody-col--right .pillar-wheel {
  flex: 1 1 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  /* Floor must fit the 64px ring + name + tier + CTA (~150px). At 120px the box
     shrank below its content on breakdown-expand and the ring poked past the
     rounded border; overflow:hidden is belt-and-suspenders. */
  min-height: 150px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 12px 11px;
  text-align: center;
}
/* Name + tier pinned at the top of the box. */
.pillar-wheel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scorebody-col--right .pillar-wheel-holder { margin: 0; flex-shrink: 0; }
.scorebody-col--right .pillar-wheel-name { margin-top: 0; font-size: 13px; text-align: center; line-height: 1.2; }
.scorebody-col--right .pillar-wheel-tier { margin-top: 1px; text-align: center; }
/* "View breakdown" as muted subtext (not a green pill) — same feel as the
   "Click a section to expand" hint; turns green on hover/active for affordance. */
.scorebody-col--right .pillar-wheel-cta {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  gap: 4px;
}
.scorebody-col--right .pillar-wheel:hover .pillar-wheel-cta,
.scorebody-col--right .pillar-wheel.is-active .pillar-wheel-cta {
  background: transparent;
  color: #1a7a1a;
  border-color: transparent;
}
/* The "Tap any pillar…" hint is redundant with the per-box CTA in this layout. */
.scorebody-col--right .pillar-wheels-hint { display: none; }
/* Inline fallback panel isn't used here (breakdown renders into the left band). */
.scorebody-col--right .pillar-breakdown { display: none; }

/* Estimated pillar tiles (context-only): single-column stack in the right rail. */
.scorebody-col--right.header-band--likely-pillars { padding: 16px 16px 16px 18px; }
.scorebody-col--right .likely-pillars-head { margin-bottom: 10px; }
.scorebody-col--right .likely-pillars-grid { grid-template-columns: 1fr; gap: 8px; }

@media (max-width: 720px) {
  .header-scorecard-split { flex-direction: column; }
  .scorebody-col--right {
    flex-basis: auto;
    width: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
  .scorebody-col--right .pillar-wheels-row { flex-direction: row; flex-wrap: wrap; }
  .scorebody-col--right .pillar-wheel { width: auto; flex: 1 1 140px; }
  .scorebody-col--right .likely-pillars-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pull the pillar score boxes ABOVE the long interpretation paragraph once
     the card stacks. Flatten the main column (display:contents) so identity,
     the blurb, and the pillar rail all become flex items of the split, then
     order them: identity → pillars → paragraph. */
  .header-scorecard-main { display: contents; }
  .scorebody-col--right { order: 1; }
  .scorebody-col--left,
  .header-band--interpretation,
  .header-band--narrative { order: 2; }

  /* When a summary section (Sources/Certifications/…) is open, the split is a
     single stacked column here. The desktop rule aligns the split's items to
     flex-start, but on the cross-axis of a column flex that shrinks every panel
     to its content width — leaving the source cards squeezed into the left half
     with a dead right gutter. Stretch them back to the full card width. */
  .supplier-card-header.section-open .header-scorecard-split { align-items: stretch; }
}

/* Forward-looking signals — 2x2 grid of bordered cards with a sage left
   accent. Commitments are aspirational/positive so the section reads in
   the same tonal family as the sage "Category upside" / "Green flags" elsewhere. */
.forward-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.signal-card {
  border: 1px solid var(--ctx-sage-bd);
  border-left: 3px solid var(--ctx-sage);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--ctx-sage-bg);
}
.signal-card-target {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctx-sage-deep);
}
.signal-card-commitment {
  font-size: 14px;
  font-weight: 700;
  color: #2c3a44;
  line-height: 1.35;
  margin-top: 6px;
}
.signal-card-progress {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ctx-sage-deep);
  margin-top: 8px;
}
.signal-card-source {
  font-size: 11.5px;
  color: #8a9099;
  font-style: italic;
  margin-top: 8px;
}

/* Forward-looking commitments folded into the "Reported Certifications &
   Commitments" tab — a labeled sub-block under the cert list, separated by a
   hairline so the dated targets read as their own group. */
.ctx-forward-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ctx-sage-bd);
}
.ctx-forward-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ctx-sage-deep);
  margin-bottom: 10px;
}
.ctx-forward-sublabel {
  font-weight: 500;
  color: #8a9099;
  font-style: italic;
}

/* Footer disclaimer — standalone block, muted */
.ai-footer-disclaimer {
  font-size: 11.5px;
  line-height: 1.55;
  color: #9ca3af;
  margin: 4px 0 24px;
  padding-top: 14px;
  border-top: 1px solid #eef0f2;
}

/* Loading skeletons for the async AI sections */
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.ai-skeleton-line {
  display: block;
  height: 13px;
  border-radius: 6px;
  background: #eceef1;
  margin-bottom: 9px;
  animation: aiPulse 1.3s ease-in-out infinite;
}
.ai-skeleton-line--short { width: 55%; }
.ai-skeleton-card {
  min-height: 104px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f7f8fa;
  animation: aiPulse 1.3s ease-in-out infinite;
}

/* Reduced supplier card now holds only Stated attributes — full width */
.card.supplier-card.supplier-card--reduced {
  grid-template-columns: 1fr;
  grid-template-areas: "checks";
}
@media (min-width: 900px) {
  .card.supplier-card.supplier-card--reduced {
    grid-template-columns: 1fr;
    grid-template-areas: "checks";
  }
}

@media (max-width: 640px) {
  .header-band--pillars {
    padding: 16px;
    grid-template-columns: 1fr;
  }
  .forward-signals-grid { grid-template-columns: 1fr; }

  /* Force all 3 pillars into a single row — no wrap, equal columns.
     Flex-wrap on the desktop layout collapses to 2+1 on narrow popups;
     a 3-column grid keeps them aligned regardless of viewport width. */
  .pillar-wheels-row {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .pillar-wheel {
    min-width: 0;
    max-width: none;
    padding: 10px 4px 8px;
    border-radius: 12px;
  }
  .pillar-wheel-holder { margin-bottom: 4px; }
  .pillar-wheel-holder svg {
    width: 48px !important;
    height: 48px !important;
  }
  .pillar-wheel-name {
    font-size: 11px;
    line-height: 1.15;
    margin-top: 2px;
  }
  .pillar-wheel-tier {
    font-size: 9px;
    letter-spacing: 0.3px;
    margin-top: 3px;
  }
  /* Compact CTA: chevron only, no label — saves a full text line per card */
  .pillar-wheel-cta {
    margin-top: 6px;
    padding: 2px 6px;
    font-size: 9px;
  }
  .pillar-wheel-cta-text { display: none; }
    justify-content: space-around;
  .pillar-wheels-hint { grid-row: 3; }
  .pillar-breakdown { grid-row: 4; }
}

/* ─────────────────────────────────────────────────────────
   Phone: split scorecard header (verified + context-only)
   layoutScoreBody() restructures the header into a left text
   column + a right pillar rail (.header-scorecard-split). The
   tablet rules (≤720px) stack the rail but leave the pillar
   boxes on `flex: 1 1 140px`, which on a phone wraps them
   2-on-top + 1-below (each box min-height 120px) — the
   unbalanced look. These rules pin the rail to a clean,
   compact 3-up row (verified) / single column (estimated).
   Selectors are scoped under .scorebody-col--right so they
   beat the ≤720px flex rules on specificity + source order.
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .header-scorecard-split { flex-direction: column; }

  .scorebody-col--right {
    flex-basis: auto;
    width: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    padding: 16px;
  }

  /* Verified pillar wheels: 3 equal columns spanning the full card width.
     Must override the ≤720px flex rules (so target .scorebody-col--right, not
     the compound .header-band--pillars which isn't always on the rail) and the
     base .pillar-wheel min-width:150px/max-width:240px (which otherwise keeps
     the boxes content-sized and centered with empty gutters). */
  .scorebody-col--right .pillar-wheels-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
    gap: 10px;
  }
  .scorebody-col--right .pillar-wheel {
    flex: none;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0;
    justify-self: stretch;
    padding: 12px 6px 10px;
    gap: 6px;
  }
  .scorebody-col--right .pillar-wheel-holder svg {
    width: 46px !important;
    height: 46px !important;
  }
  .scorebody-col--right .pillar-wheel-name { font-size: 11px; line-height: 1.15; }
  .scorebody-col--right .pillar-wheel-tier { font-size: 9px; }
  .scorebody-col--right .pillar-wheel-cta  { font-size: 10.5px; }

  /* On mobile the interpretation band is collapsed, so expand() renders the
     pillar breakdown into this inline panel that lives in the rail alongside the
     wheels. Undo the desktop rule (.scorebody-col--right .pillar-breakdown →
     display:none) so an expanded breakdown shows under the tapped tile. */
  .scorebody-col--right .pillar-breakdown:not([hidden]) { display: block; }

  /* Context-only estimated tiles: 3 boxes side-by-side, mirroring the verified
     pillar wheels (just no expand). */
  .scorebody-col--right .likely-pillars-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .scorebody-col--right .likely-pillar-tile {
    align-items: center;
    text-align: center;
    padding: 12px 6px 10px;
    gap: 6px;
  }
  .scorebody-col--right .likely-pillar-label { font-size: 10px; line-height: 1.15; }
  .scorebody-col--right .likely-pillar-pill { font-size: 10px; padding: 3px 8px; }
  .scorebody-col--right .likely-pillar-caption { font-size: 9px; }
}

/* ── Phone: pin the section-switcher buttons ABOVE the open panel ───────────
   The switcher bar (.summary-switcher) is a direct child of the card header,
   while the panel host (.summary-switcher-panels) lives inside the scorecard
   main column — so on the stacked phone layout an open section renders above
   the buttons, pushing them to the bottom. Flatten the header into a single
   flex column (the main column is already display:contents at ≤720px; flatten
   the split too) and order the promoted children so the buttons sit directly
   under the identity block, with the open panel right below them.

   This block is intentionally last in the file: the ≤720px rules above also set
   `order` on these same elements, and equal-specificity later rules win — so
   these must come after to take effect at phone widths. */
@media (max-width: 640px) {
  .supplier-card-header { display: flex; flex-direction: column; }
  .supplier-card-header > .header-scorecard-split { display: contents; }

  /* identity keeps the default order:0 → stays on top */
  .summary-switcher       { order: 2; }   /* buttons, pinned below the title */
  .summary-switcher-panels { order: 3; }   /* the open section content */
  .scorebody-col--right   { order: 4; }   /* pillar outlook (shown w/ Summary) */
  .scorebody-col--left,
  .header-band--interpretation,
  .header-band--narrative { order: 5; }
}

/* ==========================================================================
   LEIF VERIFIED — HIDDEN SITE-WIDE (2026-08-12)

   The badge meant three different things depending on where it rendered: the
   supplier header gated on csv_verified, the replacement cards on
   !isContextOnly, and featured-brands on a third rule again. It therefore
   vouched for brands nobody had researched — a parent's spreadsheet row was
   enough to earn it — while a genuinely web-grounded brand could miss it.

   Hidden everywhere until the definition is settled, rather than shipping a
   re-gate that hasn't been verified. The gating logic in supplier.js is left
   intact and untouched; this only stops the result being painted.

   TO RESTORE: delete this block (and its twins in styles/product-card.css and
   featured-brands/featured-brands.css). Nothing else needs changing.
   ========================================================================== */
.header-verified-badge,
.suggested-verified-badge { display: none !important; }

/* Researched variant of the pillar-outlook badge. The base badge reads as a
 * caution (estimate); this one states the opposite, so it takes the same green
 * the sourced tier pill uses rather than inheriting the amber. */
.likely-pillars-badge--sourced {
  background: #e8f5e9;
  color: #1b5e20;
  border-color: #a5d6a7;
}

/* ── Certs found by our review and linked, but not registry-confirmed ──────
 * Deliberately the SAME card shape as .ctx-cert--verified (chip + bold name +
 * one-line fact + source link) so the two groups read as one system, with a
 * different colour carrying the only difference that matters: green = confirmed
 * against a certifier registry, amber = we read it on the brand's own sources
 * and linked it. Rendering these as a bare <ul> beside the verified cards (the
 * first attempt) read as a broken section rather than a weaker claim. */
.verified-certs-label--sourced {
  color: #8a5a00;
}
.ctx-list--sourced li.ctx-cert--sourced {
  border-left: 3px solid #c98a00;
}
/* Amber sibling of the green "✓ Verified" chip — same footprint. */
.ctx-tag--sourced {
  background: #fff8e1;
  color: #8a5a00;
  border: 1px solid #ffe0a3;
}

/* =========================================================
   Product card + replacements restructure     [REVERTIBLE BLOCK]
   ---------------------------------------------------------
   Layout and behaviour only — colours, fonts and borders are inherited.
   Delete this block and revert supplier.js to undo.
   ========================================================= */

/* --- Title: two lines, then ellipsis --- */
.product-card .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Values chips: six, then "+N more" --- */
.product-tag-flow .product-tag--overflow { display: none; }
.product-tag-flow--expanded .product-tag--overflow { display: inline-flex; }
.product-tag-more {
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.25);
  color: #4b5563;
}
.product-tag-more:hover { background: rgba(0,0,0,0.04); }

/* --- Price row, directly above the buy button ---
   The price is the last thing read before the decision, so it sits with the
   button rather than beside the stars, and it is the largest type on the card
   after the title. */
.product-buy-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0 18px;
}
.product-price--buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
}
.product-price--buy .product-price-amount {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.product-price--buy .price-timestamp {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
}
.product-retailer {
  display: flex;
  align-items: center;
  padding-bottom: 3px;
  font-size: 12px;
  color: #6b7280;
}
.product-cta-actions { margin-top: 10px; }

/* --- Sticky product card (class applied by applyProductCardSticky) --- */
.product-card-col--sticky {
  position: sticky;
  top: 16px;
  align-self: flex-start;
}

/* --- Replacements: full page width, below both columns --- */
.replacements-section {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--leif-border, #e5e7eb);
}
.replacements-section #suggestedReplacementsMount { margin: 0; }
/* Heading left, caption right, on one line. */
.replacements-section .section-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
}
.suggested-hero-caption {
  margin-left: auto;
  font-size: 12.5px;
  color: #6b7280;
  text-align: right;
}
/* Five across, stepping down with the viewport. */
.replacements-section .suggested-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.replacements-section .suggested-list .suggested-item {
  flex: none;
  min-width: 0;
  max-width: none;
  width: auto;
}
/* Fourth slot (price) pinned to the card's bottom so rows align. */
.replacements-section .suggested-content { display: flex; flex-direction: column; height: 100%; }
.replacements-section .suggested-footer { margin-top: auto; }
.suggested-values-row--empty { min-height: 20px; }

@media (max-width: 1200px) {
  .replacements-section .suggested-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .replacements-section .suggested-placeholder:nth-child(n+4) { display: none; }
}
@media (max-width: 860px) {
  .replacements-section .suggested-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replacements-section .suggested-placeholder:nth-child(n+3) { display: none; }
  .product-buy-block { padding: 0 14px; }
}
@media (max-width: 560px) {
  .replacements-section .suggested-list { grid-template-columns: 1fr; }
  .replacements-section .suggested-placeholder { display: none; }
  .suggested-hero-caption { display: none; }
}
/* =========== end revertible block =========== */

/* The retired "In Practice" section — see reorderSupplierLayout step 3. Hidden,
   not removed: render paths still write into #controversies and the summary
   switcher re-homes its lists into the tab panels. */
.supplier-section--retired { display: none !important; }
.ctx-footer-disclaimer--relocated {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border: none;
}

/* =========================================================
   BRAND PAGE — the brand's whole catalogue
   Only rendered on /brand/<slug>/ (see renderBrandCatalogue in
   supplier.js). The column ladder matches the category page's
   .products-grid; that rule lives in category.css, which brand
   pages don't load, so it is restated here rather than shared.
   ========================================================= */
.brand-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.brand-product-grid > .product-card { min-width: 0; }

@media (max-width: 900px) {
  .brand-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  .brand-product-grid { gap: 8px; }
}

@media (max-width: 500px) {
  .brand-product-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* supplier.css restyles .product-card for the page's HERO product — bigger
   radius, a padded grey image well, and a fluid max-height image. Those rules
   predate this page: the supplier page only ever had one card, so nothing
   scoped them. A grid of them ends up ragged, and at phone width the image
   balloons past the card. Put the catalogue cards back on the canonical
   product-card.css look, the one every browse surface shows. */
.brand-product-grid > .product-card {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  margin-bottom: 0;
  padding: 0;
}

.brand-product-grid > .product-card .product-image-wrap {
  background: none;
  padding: 0;
  display: block;
}

.brand-product-grid > .product-card .product-image {
  width: 100%;
  height: 180px;
  max-height: none;
  padding: 12px;
  border-radius: 10px 10px 0 0;
}

/* At phone width supplier.css folds .product-card into a compact two-column
   hero (140px image | info). That is right for the one card at the top of a
   product page and wrong for a grid of them, where it clips the title and
   footer out of the card. Keep catalogue cards stacked, and keep the tier
   pill — it is hidden on the hero only because the scorecard repeats it
   directly below, which is not true here. */
@media (max-width: 640px) {
  .brand-product-grid > .product-card {
    display: flex;
    flex-direction: column;
  }
  .brand-product-grid > .product-card .product-image-wrap {
    padding: 0;
    min-height: 0;
  }
  .brand-product-grid > .product-card .product-image-wrap .product-score-pill {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------------------
 * "Our Story" tab — a partner's own story (renderBrandStory in supplier.js),
 * shown as a panel in the Summary / Certifications / Attributes switcher.
 * Quote treatment (left rule) so the brand's voice reads as theirs, not ours.
 * Also used by /shop-local/portland/brand/ (brand-page.js).
 * ------------------------------------------------------------------------ */
.brand-story-body {
  max-width: 72ch;
  margin-top: 4px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--ed-tile-ink, #173a5e);
}
.brand-story-body p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--leif-text-primary, #26241F);
}
.brand-story-body p:last-child { margin-bottom: 0; }
.brand-story-foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--leif-text-secondary, #6b7280);
}
@media (max-width: 640px) {
  .brand-story-body { padding-left: 14px; }
  .brand-story-body p { font-size: 15.5px; }
}

/* "Analyzing this product…" status: boat loader (mounted by utils/page-loader.js)
   centered above the rotating status text that supplier.js fades between phrases. */
.skel-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 72px 16px 88px;
  text-align: center;
}
.skel-status__loader { width: 132px; aspect-ratio: 597 / 421; }
.skel-status__text { font-size: 15px; color: var(--leif-text-secondary, #5f5a52); transition: opacity .3s ease; }
.skel-status__reload { margin-top: 4px; }