/* ============================================================
   Warm Sand — opt-2
   WARM & APPROACHABLE reskin (Airbnb / Stripe warmth).
   Soft cream/sand canvas, warm charcoal (not pure black) text,
   an earthy terracotta-clay primary, cozy spacing, ~12px soft radius,
   gentle warm-tinted shadows. Pure token override + component polish.
   Every selector prefixed with body.opt-2 so it composes with core.css.

   AA pass: text/surface 14.6 · on-primary/primary 5.2 · primary/surface 5.2 ·
   chip-hover (primary-strong/primary-soft) 5.8 · badges verified 6.3 / paid 5.0 /
   cloud 5.6 · text-soft & text-mute unchanged from the Warm Sand base.
   ============================================================ */

/* ---------- token override block (full colour set) ---------- */
body.opt-2 {
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* warm neutral canvas + cream surfaces */
  --bg: #f6f1ea;
  --surface: #fffdfa;
  --surface-2: #f3ece2;
  --text: #2b2723;
  --text-soft: #6a6157;
  /* darkened to clear AA (4.5:1) as real body text on --bg, --surface-2 and
     --surface — used by .group-head and the search placeholder */
  --text-mute: #726858;
  --border: #e8ded1;
  --border-strong: #d9cdbb;

  /* softer "greyed clay" primary — desaturated & a touch lighter, still AA on white (4.74:1) */
  --primary: #9C6650;
  --primary-strong: #7F4F3C;
  --primary-soft: #F4E9E2;
  --on-primary: #ffffff;

  /* ochre accent — DECORATIVE ONLY (dots / icons / swatches), never text */
  --accent: #b07a3e;
  --focus: #9C6650;

  /* seller-type colours — warm/cool split so the two are unmistakable and clear
     of the green/clay freshness pins: gold = supplier, blue = distributor.
     base = solid dot/corner fill; bg/ink = soft toggle-pressed + pill (ink AA on bg) */
  --role-supplier: #C98A16;    --role-supplier-bg: #F7E7C0;    --role-supplier-ink: #7E5406;
  --role-distributor: #2563EB; --role-distributor-bg: #DCE7FB; --role-distributor-ink: #1B4CA8;
  --role-fabricator: #8a5a74; --role-fabricator-bg: #efe1e9; --role-fabricator-ink: #6b4357;

  --ok: #1f7a48; --warn: #8f5e12; --danger: #c0453b; --danger-bg: #f6e0dd;

  /* soft modern corners */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* gentle warm-tinted shadows (brown, not blue-black) */
  --shadow-sm: 0 1px 2px rgba(74, 58, 42, .05), 0 1px 3px rgba(74, 58, 42, .06);
  --shadow-md: 0 6px 18px rgba(74, 58, 42, .10);
  --shadow-lg: 0 18px 44px rgba(74, 58, 42, .16);

  /* clay glow, tokenised (buttons + brand mark) */
  --primary-glow: rgba(156, 102, 80, .24);
  --primary-glow-strong: rgba(156, 102, 80, .30);

  /* cozy generous spacing */
  --header-h: 64px;
  --toolbar-h: 58px;
  --card-gap: 14px;
  --pad: 18px;

  /* freshness — muted to harmonise; foregrounds darkened to AA-normal
     (>=4.5:1) for their ~11px bold pill text on the tinted bg */
  --fresh-live: #1f7a48;   --fresh-live-bg: #e2f1e7;
  --fresh-today: #1f6e74;  --fresh-today-bg: #dff0f0;
  --fresh-recent: #345f8a; --fresh-recent-bg: #e2ebf3;
  --fresh-aging: #8f5e12;  --fresh-aging-bg: #f6ecd6;
  --fresh-unconf: #6a6157; --fresh-unconf-bg: #f0e9de;
}

/* ---------- header: airy, warm, subtle depth ---------- */
body.opt-2 .app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(74, 58, 42, .02);
  gap: 18px;
}
body.opt-2 .brand__mark {
  border-radius: 10px;
  background: linear-gradient(150deg, #c07a4b, #a15a37 55%, #7a4022);
  box-shadow: 0 2px 6px var(--primary-glow);
  font-weight: 800;
}
body.opt-2 .brand__name span { color: #a15a37; }

/* ---------- search field: soft pill, calm focus glow ---------- */
body.opt-2 .search {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 42px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
body.opt-2 .search:focus-within {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
body.opt-2 .search input::placeholder { color: var(--text-mute); }

/* ---------- buttons: tactile, warm primary ---------- */
body.opt-2 .btn {
  border-radius: 10px;
  border-color: var(--border-strong);
  transition: background .14s, border-color .14s, box-shadow .14s, transform .1s;
}
body.opt-2 .btn:hover { background: var(--surface-2); }
body.opt-2 .btn:active { transform: translateY(1px); }
body.opt-2 .btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 6px var(--primary-glow);
}
body.opt-2 .btn--primary:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  box-shadow: 0 4px 12px var(--primary-glow-strong);
}
body.opt-2 .btn--ghost { color: var(--text-soft); }
body.opt-2 .btn--ghost:hover { background: var(--surface-2); color: var(--text); }
body.opt-2 .select-inline { border-radius: 10px; }

/* ---------- toolbar / filters ---------- */
body.opt-2 .toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body.opt-2 .toolbar__count { font-weight: 800; letter-spacing: -.2px; }

/* segmented role toggle — soft inset track */
body.opt-2 .role-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}
body.opt-2 .role-toggle button {
  border-radius: 999px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .14s, background .14s, box-shadow .14s;
}
body.opt-2 .role-toggle button[data-role="supplier"][aria-pressed="true"] {
  background: var(--role-supplier-bg);
  color: var(--role-supplier-ink);
  box-shadow: var(--shadow-sm);
}
body.opt-2 .role-toggle button[data-role="distributor"][aria-pressed="true"] {
  background: var(--role-distributor-bg);
  color: var(--role-distributor-ink);
  box-shadow: var(--shadow-sm);
}
/* always-on seller-type colour swatch — keeps the colour↔role mapping clear
   even when a box is deselected (matches the map popup dot legend) */
body.opt-2 .role-toggle button[data-role]::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 999px; margin-right: 7px; vertical-align: -1px;
}
body.opt-2 .role-toggle button[data-role="supplier"]::before { background: var(--role-supplier); }
body.opt-2 .role-toggle button[data-role="distributor"]::before { background: var(--role-distributor); }

/* ---------- chips: soft rounded pills ---------- */
body.opt-2 .chip {
  height: 36px;
  border-radius: 999px;
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  transition: border-color .14s, color .14s, background .14s, box-shadow .14s;
}
body.opt-2 .chip:hover {
  border-color: var(--primary);
  /* --primary-strong (5.72 on --primary-soft) so hover label clears AA-normal */
  color: var(--primary-strong);
  background: var(--primary-soft);
}
body.opt-2 .chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-strong);
  box-shadow: inset 0 0 0 1px var(--primary);
}
/* decorative dot only — accent is non-text */
body.opt-2 .chip__dot { background: var(--accent); }

/* sort select rounded to match */
body.opt-2 .sort select {
  border-radius: 10px;
  border-color: var(--border-strong);
  background: var(--surface);
}

/* ---------- list pane: warm canvas ---------- */
body.opt-2 .list-pane { background: var(--bg); }
body.opt-2 .map-pane { border-left: 1px solid var(--border); }

body.opt-2 .group-head {
  color: var(--text-mute);
  letter-spacing: .6px;
}

/* ---------- result cards: elevated, calm, tactile ---------- */
body.opt-2 .result-card {
  border-radius: 12px;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
body.opt-2 .result-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
body.opt-2 .result-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md);
}
body.opt-2 .result-card__media { border: 1px solid var(--border); }
body.opt-2 .result-card__body { padding: 9px 14px; gap: 6px; }
body.opt-2 .rc-material { letter-spacing: -.3px; }
body.opt-2 .rc-company b { color: var(--text); }
/* role corner flag — triangle colour = seller type */
body.opt-2 .rc-flag--supplier { border-top-color: var(--role-supplier); }
body.opt-2 .rc-flag--distributor { border-top-color: var(--role-distributor); }
body.opt-2 .rc-flag--fabricator { border-top-color: var(--role-fabricator); }
/* decorative location icon only — accent is non-text */
body.opt-2 .rc-loc svg { color: var(--accent); }
body.opt-2 .rc-price__main { letter-spacing: -.3px; color: var(--text); }

/* icon buttons — soft, warm hover */
body.opt-2 .icon-btn {
  border-radius: 10px;
  border-color: var(--border-strong);
  transition: color .14s, border-color .14s, background .14s;
}
body.opt-2 .icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ---------- badges: warm-tinted, softened ---------- */
body.opt-2 .badge { border-radius: 999px; }
body.opt-2 .badge--verified { background: #efe6da; color: #6f4a2b; }
body.opt-2 .badge--paid { background: #f7ead3; color: #8a5a12; }
/* one cool note (cloud = digital) to stay distinct from the two warm badges */
body.opt-2 .badge--cloud { background: #e6ebf1; color: #3f5f7c; }

/* ---------- freshness pills ---------- */
body.opt-2 .fresh { border-radius: 999px; }

/* transport flags pick up the accent */
body.opt-2 .flag svg { color: var(--primary); }

/* gated contact — warm dashed inset */
body.opt-2 .gate {
  border-radius: 10px;
  background: var(--surface-2);
  border-color: var(--border-strong);
}
body.opt-2 .gate b { color: var(--text); }

/* ---------- map: harmonised pins, cluster, popup ---------- */
body.opt-2 .vava-pin__badge {
  border-radius: 10px 10px 10px 0;
  background: var(--primary);
  border: 2px solid #fffdfa;
}
/* diamond body = seller type (gold Supplier / blue Distributor) */
body.opt-2 .vava-pin--supplier .vava-pin__badge    { background: var(--role-supplier); }
body.opt-2 .vava-pin--distributor .vava-pin__badge { background: var(--role-distributor); }
/* live inventory keeps a green breathing ring (freshness), independent of the seller colour */
body.opt-2 .vava-pin.is-live .vava-pin__badge {
  box-shadow: 0 0 0 2.5px var(--fresh-live);
  animation: pin-live-pulse 2.2s ease-in-out infinite;
}
@keyframes pin-live-pulse {
  0%, 100% { box-shadow: 0 0 0 2.5px var(--fresh-live), 0 0 0 2.5px color-mix(in srgb, var(--fresh-live) 50%, transparent); }
  50%      { box-shadow: 0 0 0 2.5px var(--fresh-live), 0 0 0 7px  color-mix(in srgb, var(--fresh-live) 0%,  transparent); }
}
/* a cluster holding any live stock gets a little green breathing dot on its count */
body.opt-2 .cluster-ico.is-live::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; border-radius: 6px;
  background: var(--fresh-live); border: 2px solid #fffdfa;
  animation: cluster-live-dot 1.8s ease-in-out infinite;
}
@keyframes cluster-live-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fresh-live) 60%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fresh-live) 0%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
  body.opt-2 .vava-pin.is-live .vava-pin__badge,
  body.opt-2 .cluster-ico.is-live::after { animation: none; }
}
body.opt-2 .vava-pin.is-active .vava-pin__badge {
  box-shadow: 0 0 0 4px var(--primary-soft);
}
body.opt-2 .cluster-ico {
  background: var(--primary);
  border: 3px solid #fffdfa;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
body.opt-2 .cluster-ico--supplier    { background: var(--role-supplier); }
body.opt-2 .cluster-ico--distributor { background: var(--role-distributor); }
body.opt-2 .cluster-ico--mixed { background: linear-gradient(90deg, var(--role-supplier) 0 50%, var(--role-distributor) 50% 100%); }
/* image-forward hero popup: inventory-precise mono numerals on the price,
   and a pointer tip that matches the cream footer it extends from */
body.opt-2 .map-hero__price b,
body.opt-2 .map-hero__price s {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.02em;
}
body.opt-2 .leaflet-popup-tip { background: var(--surface) !important; }

/* ---------- search-this-area: warm floating pill ---------- */
body.opt-2 .search-area {
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary-soft);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
body.opt-2 .search-area:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* refined focus ring in the warm accent */
body.opt-2 :focus-visible { outline-color: var(--primary); }

/* map is the dominant column (~30% wider than the even split) on tablet/desktop */
@media (min-width: 761px) {
  body.opt-2 { --split-list: 1fr; --split-map: 1.5fr; }
}

/* result cards use a monospace face — precise, tabular inventory feel.
   weight 500 lifts the regular text off the thin 400 the client flagged. */
body.opt-2 .result-card {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: -0.02em;
}
body.opt-2 .rc-material { font-family: inherit; }         /* override the sans --font-head */
body.opt-2 .rc-meta { font-size: 11px; gap: 3px 10px; }   /* mono is wider — keep specs compact */