Upload 4 files

app.py

@@ -0,0 +1,649 @@
+# app.py
+import pandas as pd
+import gradio as gr
+from html import escape as esc
+import re, json
+
+# ---------- Load & normalize ----------
+DF = pd.read_csv("offers_with_prices.csv")
+DF.columns = [c.strip().lower() for c in DF.columns]
+
+# Ensure required columns exist
+for col in [
+    "country","dealer","brand","model","trim_or_variant",
+    "starting_price","heading","offer_description",
+    "vehicle_offer_url","vehcileoffer_url","images"
+]:
+    if col not in DF.columns:
+        DF[col] = ""
+
+def _first_image(val) -> str:
+    if not val:
+        return from vehciles_offers_common import (
+    h,
+    css,
+    load_data,
+    _cmp_cell_html,
+    card_css_in_iframe,
+    price_number,
+    first_image,
+    BRAND_MODEL_TYPES
+)
+import math
+import streamlit as st
+import streamlit.components.v1 as components
+import pandas as pd  # only if needed
+
+
+def card_html(row: pd.Series) -> str:
+    img = first_image(row.get("images",""))
+    brand   = h(str(row.get("brand","")).strip())
+    dealer  = h(str(row.get("dealer","")).strip())
+    country = h(str(row.get("country","")).strip())
+    model   = h(str(row.get("model","")).strip())
+    trim    = h(str(row.get("trim_or_variant","")).strip())
+
+    price_raw  = str(row.get("starting_price","")).strip()
+    context_ok = bool(row.get("__price_context_ok", True))
+    price      = h(price_raw if context_ok else "")
+
+    heading = h(str(row.get("heading","")).strip() or f"{brand} {model}".strip())
+    offer_raw = str(row.get("offer_description","")).strip()
+    offer = h(offer_raw).replace("\n","<br>")
+
+    url_raw = row.get("vehicle_offer_url", "") or row.get("vehcileoffer_url", "")
+    url_str = (str(url_raw) if url_raw is not None else "").strip()
+    has_url = bool(url_str) and url_str.lower() != "nan"
+    url_js = url_str.replace("\\", "\\\\").replace("'", "\\'")
+
+    onclick_attr = f"onclick=\"window.open('{url_js}','_blank');event.stopPropagation();\"" if has_url else ""
+    aria_label   = f'aria-label="Open offer: {heading}"' if has_url else ""
+
+    tooltip_link = (f'<a class="tt-link" href="{h(url_str)}" target="_blank" rel="noopener"></a>' if has_url else "")
+    meta_chips = "".join(f"<span class='tt-chip'>{x}</span>" for x in [country, brand, dealer, model, trim] if x)
+
+    # NOTE: tooltip is stored as a hidden template; JS moves it into a global portal.
+    return f"""
+      <div class="card" {onclick_attr} {aria_label}>
+        <div class="thumb">
+          <img src="{img}" alt="{brand} {model}" onerror="this.style.opacity=0.15">
+        </div>
+        <div class="body">
+          <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
+          <div class="heading">{heading}</div>
+          <div class="offer">{offer}</div>
+        </div>
+        <div class="meta">
+          <div class="chip">{country}</div>
+          <div class="chip">{brand}</div>
+          <div class="chip">{dealer}</div>
+          {f"<div class='chip'>{model}</div>" if model else ""}
+          {f"<div class='chip'>{trim}</div>" if trim else ""}
+        </div>
+      </div>
+    """
+
+css()
+st.title("Offers Comparison V1")
+
+st.markdown("""
+<style>
+  .brand-row-title{
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin: 0.75rem 0 0.25rem 0;
+  }
+  /* keep model dropdown reasonable width instead of 1600px */
+  .brand-row-select .stSelectbox > div{
+      max-width: 420px !important;
+      width: 100% !important;
+  }
+  .brand-row-select{
+      max-width: 420px;
+  }
+</style>
+""", unsafe_allow_html=True)
+
+
+df = load_data()
+
+# ---- sidebar filters (now all multi-select) ----
+with st.sidebar:
+    st.header("Filters")
+
+    # we no longer use 'All' string; empty selection = All
+    # keep selections in session state so they persist
+    st.session_state.setdefault("c_cards_multi", [])
+    st.session_state.setdefault("d_cards_multi", [])
+    st.session_state.setdefault("b_cards_multi", [])
+
+    # helper: get sorted unique non-empty values
+    def _unique_vals(series: pd.Series):
+        return sorted(
+            {str(x).strip() for x in series.dropna().astype(str) if str(x).strip()}
+        )
+
+    # 1) COUNTRY (multi-select)
+    country_opts = _unique_vals(df["country"])
+    #default_countries = [ c for c in st.session_state.get("c_cards_multi", []) if c in country_opts]
+
+    c_sel = st.multiselect(
+        "Country",
+        country_opts,
+        key="c_cards_multi",
+    )
+
+    # base df filtered by country (if any selected)
+    df_c = df if not c_sel else df[df["country"].astype(str).isin(c_sel)]
+
+    # 2) DEALER (multi-select, depends on country)
+    dealer_opts = _unique_vals(df_c["dealer"])
+    default_dealers = [
+        d for d in st.session_state.get("d_cards_multi", []) if d in dealer_opts
+    ]
+
+    d_sel = st.multiselect(
+        "Dealer",
+        dealer_opts,
+        default=default_dealers,
+        key="d_cards_multi",
+    )
+
+    # df filtered by dealer (if any selected)
+    df_cd = df_c if not d_sel else df_c[df_c["dealer"].astype(str).isin(d_sel)]
+
+    # 3) BRAND (multi-select, depends on country + dealer)
+    brand_opts = _unique_vals(df_cd["brand"])
+    default_brands = [
+        b for b in st.session_state.get("b_cards_multi", []) if b in brand_opts
+    ]
+
+    b_sel = st.multiselect(
+        "Brand",
+        brand_opts,
+        default=default_brands,
+        key="b_cards_multi",
+    )
+
+    st.markdown("---")
+    sort_choice = st.selectbox(
+        "Sort by",
+        ["Default", "Price (Low → High)", "Price (High → Low)"],
+        index=0,
+        key="s_cards",
+    )
+    limit = st.slider("Max cards to show", 6, 200, 50, step=6, key="l_cards")
+
+# ---- main offers grid (unchanged logic, adapted to multi-select) ----
+df_f = df.copy()
+
+if c_sel:
+    df_f = df_f[df_f["country"].astype(str).isin(c_sel)]
+if b_sel:
+    df_f = df_f[df_f["brand"].astype(str).isin(b_sel)]
+if d_sel:
+    df_f = df_f[df_f["dealer"].astype(str).isin(d_sel)]
+
+if sort_choice != "Default":
+    tmp_price = df_f.apply(
+        lambda r: price_number(r["starting_price"]) if r.get("__price_context_ok", True) else None,
+        axis=1
+    )
+    df_f = df_f.assign(__p=tmp_price)
+    df_f = df_f.sort_values(
+        "__p",
+        ascending=(sort_choice == "Price (Low → High)"),
+        na_position="last"
+    ).drop(columns="__p", errors="ignore")
+
+df_show = df_f.head(limit)
+
+# ---- tooltip JS (copy from your original Offers file) ----
+js_portal = r"""
+(function(){
+  // Create or reuse the global portal
+  let portal = document.getElementById('tt-portal');
+  if(!portal){
+    portal = document.createElement('div');
+    portal.id = 'tt-portal';
+    document.body.appendChild(portal);
+  }
+
+  function clamp(n,min,max){ return Math.max(min, Math.min(max, n)); }
+
+  let activeCard = null;
+  let hideTimeout = null;
+  let overPortal = false;
+
+  function placePortal(anchor, side /*'right'|'left'*/){
+    const a = anchor.getBoundingClientRect();
+    const p = portal.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const gap = 14;
+    let left = a.right + gap;   // default right
+    portal.classList.remove('left','right');
+
+    if (side === 'left' || left + p.width > vw - 6){
+      // flip left
+      left = Math.max(6, a.left - gap - p.width);
+      portal.classList.add('left');
+    } else {
+      left = Math.min(left, vw - 6 - p.width);
+      portal.classList.add('right');
+    }
+
+    let topDesired = a.top + 10;
+    let top = clamp(topDesired, 6, vh - p.height - 6);
+
+    portal.style.left = left + 'px';
+    portal.style.top  = top  + 'px';
+  }
+
+  function showFor(card){
+    const tpl = card.querySelector('.card-tooltip-template');
+    if(!tpl) return;
+
+    activeCard = card;
+    clearTimeout(hideTimeout);
+
+    portal.innerHTML = tpl.innerHTML;
+    portal.classList.add('show');
+
+    requestAnimationFrame(()=>{
+      placePortal(card, 'right');
+      // if still overflowing, try left side
+      const pr = portal.getBoundingClientRect();
+      if (pr.right > window.innerWidth - 2){
+        placePortal(card, 'left');
+      }
+    });
+
+    card.classList.add('active');
+    card._ttActive = true;
+  }
+
+  function hide(){
+    portal.classList.remove('show');
+    if (activeCard){
+      activeCard.classList.remove('active');
+      activeCard._ttActive = false;
+      activeCard = null;
+    }
+  }
+
+  function scheduleHide(){
+    clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(()=>{
+      // keep open if mouse is over portal or back over the card
+      const stillOverCard = activeCard && activeCard.matches(':hover');
+      if (!overPortal && !stillOverCard){
+        hide();
+      }
+    }, 120); // small grace period prevents flicker at edges
+  }
+
+  const cards = document.querySelectorAll('.card');
+  cards.forEach(card=>{
+    card.addEventListener('mouseenter', ()=>showFor(card));
+    card.addEventListener('focusin',   ()=>showFor(card));
+    card.addEventListener('mouseleave', scheduleHide);
+    card.addEventListener('focusout',  scheduleHide);
+  });
+
+  // Keep positioned on scroll/resize
+  function maybeReposition(){
+    if(!portal.classList.contains('show') || !activeCard) return;
+    const side = portal.classList.contains('left') ? 'left' : 'right';
+    placePortal(activeCard, side);
+  }
+  window.addEventListener('resize', maybeReposition, {passive:true});
+  window.addEventListener('scroll', maybeReposition, {passive:true});
+
+  // Let the portal itself keep the tooltip open while hovered
+  portal.addEventListener('mouseenter', ()=>{ overPortal = true; clearTimeout(hideTimeout); });
+  portal.addEventListener('mouseleave', ()=>{ overPortal = false; scheduleHide(); });
+
+  // Prevent clicks inside the portal from bubbling to the card
+  portal.addEventListener('click', e=> e.stopPropagation());
+})();
+"""
+
+if df_show.empty:
+    st.info("No rows match your filters.")
+else:
+    # If NO brand filter → keep old single-grid behaviour
+    if not b_sel:
+        cards_html = "".join(card_html(r) for _, r in df_show.iterrows())
+        css_iframe = card_css_in_iframe()
+
+        
+
+        full_html = """
+        <html>
+        <head>
+            <meta charset="utf-8" />
+            <style>%s</style>
+        </head>
+        <body>
+            <div class="wrap">
+            <div class="cards">%s</div>
+            </div>
+            <script>%s</script>
+        </body>
+        </html>
+        """ % (css_iframe, cards_html,js_portal)
+
+        rows = max(1, math.ceil(len(df_show) / 4))
+        base_h = 780
+        per_row = 340
+        est_height = max(base_h, min(2200, base_h + per_row * (rows - 1)))
+        components.html(full_html, height=est_height, width=1600, scrolling=True)
+
+    else:
+    # =========== BRAND ROWS VIEW ===========
+    # One full-width row per selected brand
+      for brand in b_sel:
+          # -------- Brand title --------
+          st.markdown(f"<div class='brand-row-title'>{h(brand)}</div>", unsafe_allow_html=True)
+
+          # -------- Model dropdown for this brand --------
+          brand_key = brand.strip().upper()
+          brand_cfg = BRAND_MODEL_TYPES.get(brand_key, {})
+          model_options = ["All models"] + sorted(brand_cfg.keys())
+
+          model_key = f"model_filter_{brand_key}"
+          default_model = st.session_state.get(model_key, "All models")
+          if default_model not in model_options:
+              default_model = "All models"
+
+          st.markdown("<div class='brand-row-select'>", unsafe_allow_html=True)
+          model_sel = st.selectbox(
+              "Model",
+              model_options,
+              index=model_options.index(default_model),
+              key=model_key,
+          )
+          st.markdown("</div>", unsafe_allow_html=True)
+
+          # -------- Filter data for this brand + model --------
+          df_brand = df_f[df_f["brand"].astype(str) == brand]
+
+          if model_sel != "All models":
+              m = model_sel.strip().upper()
+              df_brand = df_brand[
+                  df_brand["model"].astype(str).str.upper().str.contains(m, na=False)
+                  | df_brand["heading"].astype(str).str.upper().str.contains(m, na=False)
+                  | df_brand["offer_description"].astype(str).str.upper().str.contains(m, na=False)
+              ]
+
+          df_brand_show = df_brand.head(limit)
+
+          if df_brand_show.empty:
+              st.write("No offers for this model.")
+              continue
+
+          # -------- Build iframe HTML (same grid look as original Offers page) --------
+          cards_html = "".join(card_html(r) for _, r in df_brand_show.iterrows())
+          css_iframe = card_css_in_iframe()  # keep original grid CSS
+
+          full_html = """
+          <html>
+            <head>
+              <meta charset="utf-8" />
+              <style>%s</style>
+            </head>
+            <body>
+              <div class="wrap">
+                <div class="cards">%s</div>
+              </div>
+              <script>%s</script>
+            </body>
+          </html>
+          """ % (css_iframe, cards_html, js_portal)
+
+          # estimate rows (4 cards per row like original)
+          rows = max(1, math.ceil(len(df_brand_show) / 4))
+          # approximate card height + some padding
+          card_height = 340   # tweak if you want
+          padding = 80        # top+bottom padding inside iframe
+          # dynamic height: 1 row ≈ 420, 2 rows ≈ 760, etc.
+          est_height = min(2200, rows * card_height + padding)
+
+          components.html(
+              full_html,
+              height=est_height,
+              width=1600,
+              scrolling=False,   # no inner scrollbar
+          )
+
+          # small spacer between brand rows
+          st.markdown("<hr style='border:none;height:1px;background:#e5e7eb;margin:1.5rem 0;'/>",
+                      unsafe_allow_html=True)
+
+
+
+    s = str(val).strip().replace("&amp;", "&")
+    try:
+        if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
+            j = json.loads(s)
+            if isinstance(j, list):
+                for item in j:
+                    m = re.search(r'https?://[^\s<>()\'"]+', str(item))
+                    if m: return m.group(0)
+            elif isinstance(j, dict):
+                for k in ("image","image_url","url","src"):
+                    if k in j:
+                        m = re.search(r'https?://[^\s<>()\'"]+', str(j[k]))
+                        if m: return m.group(0)
+    except Exception:
+        pass
+    m = re.search(r'https?://[^\s<>()\'"]+', s)
+    if m: return m.group(0)
+    for sep in ("|","\n"," "):
+        if sep in s:
+            for part in s.split(sep):
+                m = re.search(r'https?://[^\s<>()\'"]+', part)
+                if m: return m.group(0)
+    return ""
+
+def _card_html(row: pd.Series) -> str:
+    img = _first_image(row.get("images",""))
+    heading = esc(str(row.get("heading","")) or f"{row.get('brand','')} {row.get('model','')}")
+    offer = esc(str(row.get("offer_description","")))
+    price = esc(str(row.get("starting_price","")))
+    url = str(row.get("vehicle_offer_url","") or row.get("vehcileoffer_url","") or "#")
+
+    country = esc(str(row.get("country","")))
+    brand   = esc(str(row.get("brand","")))
+    dealer  = esc(str(row.get("dealer","")))
+    model   = esc(str(row.get("model","")))
+    trim    = esc(str(row.get("trim_or_variant","")))
+
+    chips = " ".join(
+        f"<span class='chip'>{v}</span>"
+        for v in [country, brand, dealer, model, trim] if v
+    )
+    return f"""
+    <div class="card" onclick="window.open('{url}','_blank')">
+      <div class="thumb"><img src="{img}" alt="{heading}" onerror="this.style.opacity=0.2"></div>
+      <div class="body">
+        <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
+        <div class="heading">{heading}</div>
+        <div class="offer">{offer}</div>
+      </div>
+      <div class="meta">{chips}</div>
+    </div>
+    """
+
+def _grid_html(df: pd.DataFrame) -> str:
+    cards = "\n".join(_card_html(r) for _, r in df.iterrows())
+    return f"""
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      <style>
+        :root{{ --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --chip:#eef2f7; }}
+        body{{background:var(--bg);margin:0;font-family:Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}}
+        .cards{{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:6px;}}
+        .card{{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
+               box-shadow:0 4px 12px rgba(0,0,0,.06);cursor:pointer;
+               transition:transform .08s ease,box-shadow .2s ease;}}
+        .card:hover{{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}}
+        .thumb{{height:160px;overflow:hidden;background:#000;}}
+        .thumb img{{width:100%;height:100%;object-fit:cover;}}
+        .body{{padding:12px;display:flex;flex-direction:column;gap:6px;}}
+        .sp{{font-size:13px;color:var(--muted);}}
+        .sp strong{{display:block;font-size:20px;color:var(--ink);margin-top:2px;}}
+        .heading{{font-weight:700;color:var(--ink);font-size:15px;line-height:1.25;}}
+        .offer{{color:var(--ink);font-size:13px;line-height:1.45;opacity:.9;
+                display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}}
+        .meta{{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px;}}
+        .chip{{font-size:11px;color:#374151;background:var(--chip);border-radius:999px;padding:4px 8px;}}
+      </style>
+    </head>
+    <body>
+      <div class="cards">{cards}</div>
+    </body>
+    </html>
+    """
+
+# ---------- Options helpers ----------
+def _opts_with_all(series: pd.Series):
+    vals = [x for x in series.dropna().astype(str).unique() if str(x).strip()]
+    return ["All"] + sorted(vals)
+
+def _brand_and_dealer_options_for_country(country: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    return _opts_with_all(df_c["brand"]), _opts_with_all(df_c["dealer"])
+
+def _dealer_options_for_country_brand(country: str, brand: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    df_cb = df_c if brand == "All" else df_c[df_c["brand"].astype(str) == str(brand)]
+    return _opts_with_all(df_cb["dealer"])
+
+def _brand_options_for_country_dealer(country: str, dealer: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    df_cd = df_c if dealer == "All" else df_c[df_c["dealer"].astype(str) == str(dealer)]
+    return _opts_with_all(df_cd["brand"])
+
+# ---------- Filtering ----------
+def filter_offers(country: str, brand: str, dealer: str, limit: int):
+    df_f = DF.copy()
+    if country and country != "All":
+        df_f = df_f[df_f["country"].astype(str) == str(country)]
+    if brand and brand != "All":
+        df_f = df_f[df_f["brand"].astype(str) == str(brand)]
+    if dealer and dealer != "All":
+        df_f = df_f[df_f["dealer"].astype(str) == str(dealer)]
+    df_show = df_f.head(int(limit))
+    return _grid_html(df_show)
+
+# ---------- Gradio event handlers ----------
+def init_on_load(country, brand, dealer, limit):
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_country_change(country, brand, dealer, limit):
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_brand_change(country, brand, dealer, limit):
+    # Country + Brand -> restrict Dealer
+    dealer_opts = _dealer_options_for_country_brand(country, brand)
+    dealer_val  = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand, dealer_val, limit)
+    return (
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_dealer_change(country, brand, dealer, limit):
+    # Country + Dealer -> restrict Brand  (fix for your Saudi/Altawkilat => only GMC)
+    brand_opts = _brand_options_for_country_dealer(country, dealer)
+    brand_val  = brand if brand in brand_opts else "All"
+    html = filter_offers(country, brand_val, dealer, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        html
+    )
+
+def on_limit_change(country, brand, dealer, limit):
+    return filter_offers(country, brand, dealer, limit)
+
+# ---------- Build Gradio UI ----------
+def app():
+    countries = _opts_with_all(DF["country"])
+    brands, dealers = _brand_and_dealer_options_for_country("All")
+
+    custom_css = """
+    body, .gradio-container, .gr-block, .gr-button, .gr-input, .gr-dropdown,
+    .gradio-container * { font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }
+    #cards-pane { height: 820px; overflow: auto; border-radius: 10px; }
+    """
+
+    with gr.Blocks(title="Vehicle Offers", css=custom_css) as demo:
+        gr.Markdown("## 🚗 Vehicle Offers")
+
+        with gr.Row():
+            dd_country = gr.Dropdown(choices=countries, label="Country", value="All")
+            dd_brand   = gr.Dropdown(choices=brands,    label="Brand",   value="All")
+            dd_dealer  = gr.Dropdown(choices=dealers,   label="Dealer",  value="All")
+            s_limit    = gr.Slider(6, 200, value=50, step=6, label="Max Offers")
+
+        out_html = gr.HTML(elem_id="cards-pane")
+
+        # Initialize on load
+        demo.load(
+            init_on_load,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
+
+        # Country -> update Brand + Dealer options + grid
+        dd_country.change(
+            on_country_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
+
+        # Brand -> update Dealer options + grid
+        dd_brand.change(
+            on_brand_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_dealer, out_html]
+        )
+
+        # Dealer -> update Brand options + grid  (new)
+        dd_dealer.change(
+            on_dealer_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, out_html]
+        )
+
+        # Limit -> update grid
+        s_limit.change(
+            on_limit_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            out_html
+        )
+
+    return demo
+
+if __name__ == "__main__":
+    app().launch()

requirements.txt

@@ -0,0 +1,2 @@
+gradio
+pandas

vehciles_offers_common.py

@@ -0,0 +1,780 @@
+from __future__ import annotations
+import re, json, math
+from pathlib import Path
+import pandas as pd
+import streamlit as st
+import streamlit.components.v1 as components
+from html import escape as _esc
+
+# ---- context-aware filtering helpers ----
+CTX_FIELDS_ORDER = [["country", "dealer", "brand", "currency"]]
+
+def h(x: str) -> str:
+    return _esc((x or ""))
+
+# ---------------- Page / constants ----------------
+st.set_page_config(page_title="Vehicle Offers", layout="wide")
+DATA_CANDIDATES = [Path("data/offers_with_prices.csv")]
+
+# --------------- Utilities ------------------------
+def find_csv() -> Path | None:
+    for p in DATA_CANDIDATES:
+        if p.exists():
+            return p
+    return None
+
+def filter_heading_rows(df: pd.DataFrame) -> pd.DataFrame:
+    """
+    Remove rows where:
+    1) heading contains certain keywords.
+    2) heading is ONLY a currency amount like 'AED 26,000' or 'AED 26,000*'.
+    """
+    if "heading" not in df.columns:
+        return df
+
+    col = "heading"
+    heading_series = df[col].astype(str)
+
+    with open("config/config_offers.json", "r", encoding="utf-8") as f:
+      config = json.load(f)
+
+    csv_filter_keywords = config["CSV_FILTER_KEYWORDS"]
+
+    with open("config/config_pricing_generic.json", "r", encoding="utf-8") as f:
+      config_pricing = json.load(f)
+
+    BRAND_MODEL_TYPES = config_pricing["BRAND_MODEL_TYPES"]
+    MONEY = config_pricing["MONEY"]
+
+    # Flatten list of all model names for heading matching
+    ALL_MODEL_NAMES = [
+        m.strip()
+        for models in BRAND_MODEL_TYPES.values()
+        for m in models.keys()
+        if m.strip()
+    ]
+
+    def heading_has_model(heading: str) -> bool:
+        """Return True if heading contains any known model name (case-insensitive)."""
+        if not isinstance(heading, str):
+            return False
+        text = heading.upper()
+        for model in ALL_MODEL_NAMES:
+            if model.upper() in text:
+                return True
+        return False
+
+    keyword_pattern = "|".join(re.escape(k) for k in csv_filter_keywords)
+    cond1 = heading_series.str.contains(keyword_pattern, case=False, na=False)
+
+    # ---- Condition 2: currency-only headings ----
+
+    currency_pattern = rf"^(?:{MONEY})\s*\d[\d,]*(?:\*)?$"
+    cond2 = heading_series.str.strip().str.match(currency_pattern, case=False)
+
+    # ---- Model-name exception: keep if heading has a known model ----
+    has_model = heading_series.apply(heading_has_model)
+
+    # We only drop rows that:
+    #  - match cond1 or cond2, AND
+    #  - do NOT contain a known model name.
+    drop_mask = (cond1 | cond2) & ~has_model
+
+    df_cleaned = df[~drop_mask].copy()
+    return df_cleaned
+
+def load_csv(path: str) -> pd.DataFrame:
+    df = pd.read_csv(path)
+    df.columns = [c.strip().lower() for c in df.columns]
+    df = normalize_columns(df)
+    df = filter_heading_rows(df)
+    ctx_cols = [c for c in df.columns if c.startswith("_debug_ctx_country_dealer_brand_currency")]
+    if not ctx_cols:
+        ctx_cols = [c for c in df.columns if c.startswith("_debug_ctx_")]
+    if ctx_cols:
+        df["__price_context_ok"] = df[ctx_cols].fillna(0).apply(
+            lambda r: any(pd.to_numeric(r, errors="coerce").fillna(0) > 0), axis=1
+        )
+    else:
+        df["__price_context_ok"] = True
+    return df
+
+def normalize_columns(df: pd.DataFrame) -> pd.DataFrame:
+    alias = {
+        "brand_name": "brand", "make": "brand",
+        "model_name": "model",
+        "img": "images", "image_url": "images", "image": "images", "imageurl": "images",
+        "desc": "offer_description", "offer_text": "offer_description",
+        "price": "starting_price",
+        "offer heading": "heading", "title": "heading",
+        "vehcileoffer_url": "vehicle_offer_url",
+    }
+    for a,b in alias.items():
+        if a in df.columns and b not in df.columns:
+            df[b] = df[a]
+    for col in ["country","dealer","brand","model","trim_or_variant","starting_price",
+                "heading","offer_description","images","currency"]:
+        if col not in df.columns:
+            df[col] = ""
+    return df
+
+# ---------- image URL helper ----------
+_IMG_URL_RE = re.compile(r'https?://[^\s<>()\'"]+')
+def first_image(url_field) -> str:
+    if not url_field:
+        return ""
+    s = str(url_field).strip().replace("&amp;", "&")
+    try:
+        if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
+            j = json.loads(s)
+            if isinstance(j, list):
+                for item in j:
+                    m = _IMG_URL_RE.search(str(item))
+                    if m: return m.group(0).rstrip('.,);]')
+            elif isinstance(j, dict):
+                for k in ("image","image_url","url","src"):
+                    if k in j:
+                        m = _IMG_URL_RE.search(str(j[k]))
+                        if m: return m.group(0).rstrip('.,);]')
+    except Exception:
+        pass
+    m = _IMG_URL_RE.search(s)
+    if m: return m.group(0).rstrip('.,);]')
+    for sep in ("|", "\n", " "):
+        if sep in s:
+            for part in s.split(sep):
+                m = _IMG_URL_RE.search(part)
+                if m: return m.group(0).rstrip('.,);]')
+    return ""
+
+# ---------- price helpers ----------
+def price_number(s: str) -> float | None:
+    if not isinstance(s, str):
+        return None
+    s = s.replace(",", "")
+    m = re.search(r"([\d]+(?:\.\d+)?)", s)
+    return float(m.group(1)) if m else None
+
+def fmt_price(n: float | None, currency: str = "") -> str:
+    if n is None: return "—"
+    try:
+        s = f"{int(round(n)):,}"
+    except Exception:
+        return "—"
+    return f"{currency} {s}".strip() if currency else s
+
+# ---------- minimal Streamlit page CSS ----------
+def css():
+    st.markdown("""
+    <style>
+      .stApp { padding-bottom: 0; }
+      section.main > div { padding-top: .25rem; padding-bottom: .25rem; }
+                   
+      {
+      overflow:hidden ;
+      }
+
+      /* --- comparison section card --- */
+      .cmp-section{
+        border: 1px solid #d1d5db;
+        border-radius: 10px;
+        padding: 14px 18px 16px;
+        margin: 10px 0 18px;
+        background: #ffffff;
+        box-shadow: 0 2px 4px rgba(15,23,42,.04);
+      }
+      .cmp-section-title{
+        font-weight: 700;
+        font-size: 15px;
+        margin-bottom: 8px;
+      }
+    </style>
+    """, unsafe_allow_html=True)
+
+
+# ---------- CSS injected into iframe ----------
+def card_css_in_iframe() -> str: 
+    return """
+      :root{
+        --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#f3eac0;
+        --line:#e5e7eb; --brand:#4f46e5; --chip:#1e2640; --accent:#2563eb;
+        --good:#16a34a;
+        --popover-bg: rgba(255,255,255,.92);
+        --popover-border1: rgba(99,102,241,.25);
+        --popover-border2: rgba(99,102,241,.05);
+        --shadow-strong: 0 18px 50px rgba(2,6,23,.18);
+      }
+
+      html, body { height:115vh; margin:0; overflow:auto; background:var(--bg); }
+      .wrap { width: 96vw; max-width: 1700px; margin: 0 auto; padding: 6px 8px 10px; }
+
+      .cards{
+        position: relative; z-index: 0;
+        display:grid;
+        grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
+        gap:18px;
+        padding:2px 8px 8px 2px;
+      }
+
+      .card{
+        background:var(--card);
+        border:1px solid var(--line);
+        border-radius:16px;
+        overflow:visible;
+        box-shadow:0 4px 18px rgba(0,0,0,.05);
+        display:flex; flex-direction:column;
+        position:relative; cursor:pointer;
+        transition: transform .08s ease, box-shadow .2s ease;
+        z-index: 1;
+        will-change: transform;
+      }
+      .card:hover{ box-shadow: 0 10px 28px rgba(2,6,23,.12); transform: translateY(-1px); }
+      .thumb{
+        background:#0b0b0b; height:180px; overflow:hidden;
+        border-top-left-radius:16px; border-top-right-radius:16px;
+      }
+      .thumb img{ width:100%; height:100%; object-fit:cover; }
+      .body{ padding:14px 14px 12px; display:flex; flex-direction:column; gap:6px; }
+      .sp{ font-size:15px; color:#070708; letter-spacing:.02em; }
+      .sp strong{ display:block; font-size:22px; color:#e5c100; line-height:1.05; margin-top:2px; }
+      .heading{ font-weight:700; color:var(--ink); margin:6px 0 2px; line-height:1.25; }
+      .offer{ color:var(--ink); font-size:15px; line-height:1.45; opacity:.88; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical; overflow:hidden; }
+      .meta{ display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 12px; }
+      .chip{ font-size:14px; color:var(--muted); background:var(--chip); border:1px solid var(--line); padding:4px 8px; border-radius:999px; }
+
+      /* --- Align .meta at the bottom across all cards (added) --- */
+      .card{ height:100%; }              /* make each card fill its grid cell vertically */
+      .body{ flex: 1 1 auto; }           /* let main content take the flexible middle space */
+      .meta{ margin-top: auto; }         /* push chips row to the bottom of the card */
+
+      /* Hidden template inside each card: cloned into portal */
+      .card-tooltip-template { display:none; }
+      .card-tooltip{ overflow-x: hidden;            /* remove horizontal scrollbar */ }
+      .card-tooltip,
+      .card-tooltip .tt-title,
+      .card-tooltip .tt-v,
+      .card-tooltip .tt-link{
+        white-space: normal;
+        overflow-wrap: anywhere;       /* wrap long URLs/strings */
+        word-break: break-word;        /* fallback */
+      }
+      /* ensure children don't overflow */
+      .card-tooltip, .card-tooltip *{
+        box-sizing: border-box;
+      }
+      .card-tooltip img,
+      .card-tooltip svg,
+      .card-tooltip video{
+        max-width: 100%;
+        height: auto;
+        display: block;
+      }
+
+      /* grid fix so value column can shrink (prevents horizontal overflow) */
+      .card-tooltip .tt-grid{
+        /* was: grid-template-columns: 120px 1fr; */
+        grid-template-columns: 120px minmax(0, 1fr);
+      }
+
+      /* ===== Global tooltip portal (fixed, above everything) ===== */
+      #tt-portal {
+        position: fixed;
+        top: 0; left: 0;
+        transform: translate3d(0,0,0);
+        z-index: 2147483647;
+        display: none;
+        width: min(520px, 86vw);
+        max-height: 72vh;
+
+        /* prevent horizontal scrollbar */
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        /* enforce wrapping of long content */
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+
+        background: var(--popover-bg);
+        -webkit-backdrop-filter: saturate(1.4) blur(8px);
+        backdrop-filter: saturate(1.4) blur(8px);
+
+        border: 1px solid transparent;
+        border-radius: 14px;
+        box-shadow: var(--shadow-strong);
+        padding: 14px 16px;
+        color: #0f172a;
+        font-size: 13px;
+        line-height: 1.5;
+
+        background-clip: padding-box, border-box;
+        background-image:
+          linear-gradient(var(--popover-bg), var(--popover-bg)),
+          linear-gradient(135deg, var(--popover-border1), var(--popover-border2));
+      }
+
+      #tt-portal.show { display: block; animation: tt-fade .16s ease-out; }
+      @keyframes tt-fade { from { opacity:0; transform: translateY(-2px); }
+                           to   { opacity:1; transform: translateY(0); } }
+      #tt-portal::after{
+        content:"";
+        position: absolute; top: 16px;
+        width: 12px; height: 12px; transform: rotate(45deg);
+        background: var(--popover-bg);
+        -webkit-backdrop-filter: saturate(1.4) blur(8px);
+        backdrop-filter: saturate(1.4) blur(8px);
+        border-left: 1px solid rgba(99,102,241,.18);
+        border-top: 1px solid rgba(99,102,241,.18);
+      }
+      #tt-portal.right::after{ left: -8px; }
+      #tt-portal.left::after {
+        right: -8px; left:auto;
+        border-left: none; border-top: none;
+        border-right: 1px solid rgba(99,102,241,.18);
+        border-bottom: 1px solid rgba(99,102,241,.18);
+      }
+
+      /* content inside tooltip */
+      .tt-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
+      .tt-dot{
+        width:10px; height:10px; border-radius:999px; margin-top:4px;
+        background: radial-gradient( circle at 30% 30%, #a78bfa, #6366f1 );
+        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
+        flex: 0 0 auto;
+      }
+      .tt-title{ font-weight:800; font-size:15px; color:#0b1220; line-height:1.25; }
+      .tt-meta{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
+      .tt-chip{ font-size:13px; color:#f3eac0; background:#1e2640; border:1px solid #e2e8f0; padding:4px 8px; border-radius:10px; }
+      .tt-grid{
+        display:grid;
+        grid-template-columns: 120px minmax(0, 1fr);
+        gap:8px 12px;
+        background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0) 45%);
+        border:1px dashed rgba(99,102,241,.15);
+        border-radius:10px;
+        padding:10px 12px;
+        margin:8px 0;
+      }
+      .tt-k{ color:#334155; font-weight:600; font-size:14px; }
+      .tt-v{ color:#0f172a; font-size:14px; }
+
+      .tt-link{
+        display:inline-flex; align-items:center; gap:6px;
+        margin-top:8px; color:var(--accent); text-decoration:none; font-weight:600;
+      }
+      .tt-link:hover{ text-decoration:underline; }
+
+      @media (prefers-reduced-motion: reduce){
+        .card{ transition:none !important; }
+      }
+    """
+
+def card_html(row: pd.Series) -> str:
+    img = first_image(row.get("images",""))
+    brand   = h(str(row.get("brand","")).strip())
+    dealer  = h(str(row.get("dealer","")).strip())
+    country = h(str(row.get("country","")).strip())
+    model   = h(str(row.get("model","")).strip())
+    trim    = h(str(row.get("trim_or_variant","")).strip())
+
+    price_raw  = str(row.get("starting_price","")).strip()
+    context_ok = bool(row.get("__price_context_ok", True))
+    price      = h(price_raw if context_ok else "")
+
+    heading = h(str(row.get("heading","")).strip() or f"{brand} {model}".strip())
+    offer_raw = str(row.get("offer_description","")).strip()
+    offer = h(offer_raw).replace("\n","<br>")
+
+    url_raw = row.get("vehicle_offer_url", "") or row.get("vehcileoffer_url", "")
+    url_str = (str(url_raw) if url_raw is not None else "").strip()
+    has_url = bool(url_str) and url_str.lower() != "nan"
+    url_js = url_str.replace("\\", "\\\\").replace("'", "\\'")
+
+    onclick_attr = f"onclick=\"window.open('{url_js}','_blank');event.stopPropagation();\"" if has_url else ""
+    aria_label   = f'aria-label="Open offer: {heading}"' if has_url else ""
+
+    tooltip_link = (f'<a class="tt-link" href="{h(url_str)}" target="_blank" rel="noopener"></a>' if has_url else "")
+    meta_chips = "".join(f"<span class='tt-chip'>{x}</span>" for x in [country, brand, dealer, model, trim] if x)
+
+    # NOTE: tooltip is stored as a hidden template; JS moves it into a global portal.
+    return f"""
+      <div class="card" {onclick_attr} {aria_label}>
+        <div class="thumb">
+          <img src="{img}" alt="{brand} {model}" onerror="this.style.opacity=0.15">
+        </div>
+        <div class="body">
+          <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
+          <div class="heading">{heading}</div>
+          <div class="offer">{offer}</div>
+        </div>
+        <div class="meta">
+          <div class="chip">{country}</div>
+          <div class="chip">{brand}</div>
+          <div class="chip">{dealer}</div>
+          {f"<div class='chip'>{model}</div>" if model else ""}
+          {f"<div class='chip'>{trim}</div>" if trim else ""}
+        </div>
+
+        <!-- Tooltip template (hidden; cloned into global portal) -->
+        <div class="card-tooltip-template" aria-hidden="true" style="display:none">
+          <div class="tt-head">
+            <span class="tt-dot"></span>
+            <div class="tt-title">{heading}</div>
+          </div>
+          <div class="tt-meta">{meta_chips}</div>
+          <div class="tt-grid">
+            <div class="tt-k">Starting Price</div>
+            <div class="tt-v">{price or "—"}</div>
+            <div class="tt-k">Details</div>
+            <div class="tt-v">{offer if offer else "—"}</div>
+          </div>
+          {tooltip_link}
+        </div>
+      </div>
+    """
+
+# ---------- minimal Streamlit page CSS ----------
+def css():
+    st.markdown("""
+    <style>
+      .stApp { padding-bottom: 0; }
+      section.main > div { padding-top: .25rem; padding-bottom: .25rem; }
+                   
+      {
+      overflow:hidden ;
+      }
+
+      /* --- comparison section card --- */
+      .cmp-section{
+        border: 1px solid #d1d5db;
+        border-radius: 10px;
+        padding: 14px 18px 16px;
+        margin: 10px 0 18px;
+        background: #ffffff;
+        box-shadow: 0 2px 4px rgba(15,23,42,.04);
+      }
+      .cmp-section-title{
+        font-weight: 700;
+        font-size: 15px;
+        margin-bottom: 8px;
+      }
+     /* --- FULL WIDTH PAGE LAYOUT (Stable Selectors) --- */
+
+      .stApp {
+          max-width: 100% !important;
+      }
+
+      .block-container {
+          max-width: 100% !important;
+          padding-left: 1rem !important;
+          padding-right: 1rem !important;
+      }
+
+      [data-testid="column"] > div {
+          width: 100% !important;
+      }
+
+      /* Remove Streamlit padding around content */
+      .css-18ni7ap, .css-1l269bu {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+      }         
+    </style>
+    """, unsafe_allow_html=True)
+
+# ---------- CSS injected into iframe ----------
+def card_css_in_iframe() -> str: 
+    return """
+      :root{
+        --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#f3eac0;
+        --line:#e5e7eb; --brand:#4f46e5; --chip:#1e2640; --accent:#2563eb;
+        --good:#16a34a;
+        --popover-bg: rgba(255,255,255,.92);
+        --popover-border1: rgba(99,102,241,.25);
+        --popover-border2: rgba(99,102,241,.05);
+        --shadow-strong: 0 18px 50px rgba(2,6,23,.18);
+      }
+
+      html, body { height:100vh; margin:0; overflow:auto; background:var(--bg); }
+      .wrap { width: 96vw; max-width: 1700px; margin: 0 auto; padding: 6px 8px 10px; }
+
+      .cards{
+        position: relative; z-index: 0;
+        display:grid;
+        grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
+        gap:18px;
+        padding:2px 8px 8px 2px;
+      }
+
+      .card{
+        background:var(--card);
+        border:1px solid var(--line);
+        border-radius:16px;
+        overflow:visible;
+        box-shadow:0 4px 18px rgba(0,0,0,.05);
+        display:flex; flex-direction:column;
+        position:relative; cursor:pointer;
+        transition: transform .08s ease, box-shadow .2s ease;
+        z-index: 1;
+        will-change: transform;
+      }
+      .card:hover{ box-shadow: 0 10px 28px rgba(2,6,23,.12); transform: translateY(-1px); }
+      .thumb{
+        background:#0b0b0b; height:180px; overflow:hidden;
+        border-top-left-radius:16px; border-top-right-radius:16px;
+      }
+      .thumb img{ width:100%; height:100%; object-fit:cover; }
+      .body{ padding:14px 14px 12px; display:flex; flex-direction:column; gap:6px; }
+      .sp{ font-size:15px; color:#070708; letter-spacing:.02em; }
+      .sp strong{ display:block; font-size:22px; color:#e5c100; line-height:1.05; margin-top:2px; }
+      .heading{ font-weight:700; color:var(--ink); margin:6px 0 2px; line-height:1.25; }
+      .offer{ color:var(--ink); font-size:15px; line-height:1.45; opacity:.88; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical; overflow:hidden; }
+      .meta{ display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 12px; }
+      .chip{ font-size:14px; color:var(--muted); background:var(--chip); border:1px solid var(--line); padding:4px 8px; border-radius:999px; }
+
+      /* --- Align .meta at the bottom across all cards (added) --- */
+      .card{ height:100%; }              /* make each card fill its grid cell vertically */
+      .body{ flex: 1 1 auto; }           /* let main content take the flexible middle space */
+      .meta{ margin-top: auto; }         /* push chips row to the bottom of the card */
+
+      /* Hidden template inside each card: cloned into portal */
+      .card-tooltip-template { display:none; }
+      .card-tooltip{ overflow-x: hidden;            /* remove horizontal scrollbar */ }
+      .card-tooltip,
+      .card-tooltip .tt-title,
+      .card-tooltip .tt-v,
+      .card-tooltip .tt-link{
+        white-space: normal;
+        overflow-wrap: anywhere;       /* wrap long URLs/strings */
+        word-break: break-word;        /* fallback */
+      }
+      /* ensure children don't overflow */
+      .card-tooltip, .card-tooltip *{
+        box-sizing: border-box;
+      }
+      .card-tooltip img,
+      .card-tooltip svg,
+      .card-tooltip video{
+        max-width: 100%;
+        height: auto;
+        display: block;
+      }
+
+      /* grid fix so value column can shrink (prevents horizontal overflow) */
+      .card-tooltip .tt-grid{
+        /* was: grid-template-columns: 120px 1fr; */
+        grid-template-columns: 120px minmax(0, 1fr);
+      }
+
+      /* ===== Global tooltip portal (fixed, above everything) ===== */
+      #tt-portal {
+        position: fixed;
+        top: 0; left: 0;
+        transform: translate3d(0,0,0);
+        z-index: 2147483647;
+        display: none;
+        width: min(520px, 86vw);
+        max-height: 72vh;
+
+        /* prevent horizontal scrollbar */
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        /* enforce wrapping of long content */
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+
+        background: var(--popover-bg);
+        -webkit-backdrop-filter: saturate(1.4) blur(8px);
+        backdrop-filter: saturate(1.4) blur(8px);
+
+        border: 1px solid transparent;
+        border-radius: 14px;
+        box-shadow: var(--shadow-strong);
+        padding: 14px 16px;
+        color: #0f172a;
+        font-size: 13px;
+        line-height: 1.5;
+
+        background-clip: padding-box, border-box;
+        background-image:
+          linear-gradient(var(--popover-bg), var(--popover-bg)),
+          linear-gradient(135deg, var(--popover-border1), var(--popover-border2));
+      }
+
+      #tt-portal.show { display: block; animation: tt-fade .16s ease-out; }
+      @keyframes tt-fade { from { opacity:0; transform: translateY(-2px); }
+                           to   { opacity:1; transform: translateY(0); } }
+      #tt-portal::after{
+        content:"";
+        position: absolute; top: 16px;
+        width: 12px; height: 12px; transform: rotate(45deg);
+        background: var(--popover-bg);
+        -webkit-backdrop-filter: saturate(1.4) blur(8px);
+        backdrop-filter: saturate(1.4) blur(8px);
+        border-left: 1px solid rgba(99,102,241,.18);
+        border-top: 1px solid rgba(99,102,241,.18);
+      }
+      #tt-portal.right::after{ left: -8px; }
+      #tt-portal.left::after {
+        right: -8px; left:auto;
+        border-left: none; border-top: none;
+        border-right: 1px solid rgba(99,102,241,.18);
+        border-bottom: 1px solid rgba(99,102,241,.18);
+      }
+
+      /* content inside tooltip */
+      .tt-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
+      .tt-dot{
+        width:10px; height:10px; border-radius:999px; margin-top:4px;
+        background: radial-gradient( circle at 30% 30%, #a78bfa, #6366f1 );
+        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
+        flex: 0 0 auto;
+      }
+      .tt-title{ font-weight:800; font-size:15px; color:#0b1220; line-height:1.25; }
+      .tt-meta{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
+      .tt-chip{ font-size:13px; color:#f3eac0; background:#1e2640; border:1px solid #e2e8f0; padding:4px 8px; border-radius:10px; }
+      .tt-grid{
+        display:grid;
+        grid-template-columns: 120px minmax(0, 1fr);
+        gap:8px 12px;
+        background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0) 45%);
+        border:1px dashed rgba(99,102,241,.15);
+        border-radius:10px;
+        padding:10px 12px;
+        margin:8px 0;
+      }
+      .tt-k{ color:#334155; font-weight:600; font-size:14px; }
+      .tt-v{ color:#0f172a; font-size:14px; }
+
+      .tt-link{
+        display:inline-flex; align-items:center; gap:6px;
+        margin-top:8px; color:var(--accent); text-decoration:none; font-weight:600;
+      }
+      .tt-link:hover{ text-decoration:underline; }
+
+      @media (prefers-reduced-motion: reduce){
+        .card{ transition:none !important; }
+      }
+    """
+
+def card_html(row: pd.Series) -> str:
+    img = first_image(row.get("images",""))
+    brand   = h(str(row.get("brand","")).strip())
+    dealer  = h(str(row.get("dealer","")).strip())
+    country = h(str(row.get("country","")).strip())
+    model   = h(str(row.get("model","")).strip())
+    trim    = h(str(row.get("trim_or_variant","")).strip())
+
+    price_raw  = str(row.get("starting_price","")).strip()
+    context_ok = bool(row.get("__price_context_ok", True))
+    price      = h(price_raw if context_ok else "")
+
+    heading = h(str(row.get("heading","")).strip() or f"{brand} {model}".strip())
+    offer_raw = str(row.get("offer_description","")).strip()
+    offer = h(offer_raw).replace("\n","<br>")
+
+    url_raw = row.get("vehicle_offer_url", "") or row.get("vehcileoffer_url", "")
+    url_str = (str(url_raw) if url_raw is not None else "").strip()
+    has_url = bool(url_str) and url_str.lower() != "nan"
+    url_js = url_str.replace("\\", "\\\\").replace("'", "\\'")
+
+    onclick_attr = f"onclick=\"window.open('{url_js}','_blank');event.stopPropagation();\"" if has_url else ""
+    aria_label   = f'aria-label="Open offer: {heading}"' if has_url else ""
+
+    tooltip_link = (f'<a class="tt-link" href="{h(url_str)}" target="_blank" rel="noopener"></a>' if has_url else "")
+    meta_chips = "".join(f"<span class='tt-chip'>{x}</span>" for x in [country, brand, dealer, model, trim] if x)
+
+    # NOTE: tooltip is stored as a hidden template; JS moves it into a global portal.
+    return f"""
+      <div class="card" {onclick_attr} {aria_label}>
+        <div class="thumb">
+          <img src="{img}" alt="{brand} {model}" onerror="this.style.opacity=0.15">
+        </div>
+        <div class="body">
+          <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
+          <div class="heading">{heading}</div>
+          <div class="offer">{offer}</div>
+        </div>
+        <div class="meta">
+          <div class="chip">{country}</div>
+          <div class="chip">{brand}</div>
+          <div class="chip">{dealer}</div>
+          {f"<div class='chip'>{model}</div>" if model else ""}
+          {f"<div class='chip'>{trim}</div>" if trim else ""}
+        </div>
+
+        <!-- Tooltip template (hidden; cloned into global portal) -->
+        <div class="card-tooltip-template" aria-hidden="true" style="display:none">
+          <div class="tt-head">
+            <span class="tt-dot"></span>
+            <div class="tt-title">{heading}</div>
+          </div>
+          <div class="tt-meta">{meta_chips}</div>
+          <div class="tt-grid">
+            <div class="tt-k">Starting Price</div>
+            <div class="tt-v">{price or "—"}</div>
+            <div class="tt-k">Details</div>
+            <div class="tt-v">{offer if offer else "—"}</div>
+          </div>
+          {tooltip_link}
+        </div>
+      </div>
+    """
+@st.cache_data
+def load_brand_model_types() -> dict:
+    """Read BRAND_MODEL_TYPES from config once and cache it (brand keys uppercased)."""
+    with open("config/config_pricing_generic.json", "r", encoding="utf-8") as f:
+        cfg = json.load(f)
+    raw = cfg.get("BRAND_MODEL_TYPES", {}) or {}
+    # normalize brand keys to UPPER for easier matching
+    norm = {str(brand).strip().upper(): models for brand, models in raw.items()}
+    return norm
+
+BRAND_MODEL_TYPES = load_brand_model_types()
+
+def _cmp_cell_html(row: pd.Series) -> str:
+    """Small card used inside comparison matrix."""
+    img = first_image(row.get("images", ""))
+    brand = h(str(row.get("brand", "") or "").strip())
+    model = h(str(row.get("model", "") or "").strip())
+    trim  = h(str(row.get("trim_or_variant", "") or "").strip())
+    heading = h(str(row.get("heading", "") or "").strip() or f"{brand} {model}".strip())
+    offer_raw = str(row.get("offer_description", "") or "").strip()
+    offer = h(offer_raw).replace("\n", "<br>")
+
+    price_raw = str(row.get("starting_price", "") or "").strip()
+    context_ok = bool(row.get("__price_context_ok", True))
+    price = h(price_raw if (price_raw and context_ok) else "")
+
+    pieces = []
+    if trim:
+        pieces.append(trim)
+    if offer:
+        pieces.append(offer)
+
+    return f"""
+    <div class="cmp-cell">
+      <div class="cmp-thumb">
+        {'<img src="' + img + '" onerror="this.style.opacity=0.15">' if img else ''}
+      </div>
+      <div class="cmp-title">{heading}</div>
+      <div class="cmp-price">{price}</div>
+      <div class="cmp-offer">{'<br>'.join(pieces)}</div>
+    </div>
+    """
+
+def load_data() -> pd.DataFrame:
+    """Find and load the offers CSV with the same checks you had before."""
+    data_file = find_csv()
+    if not data_file:
+        st.error("Couldn't find **offers_with_prices.csv**. Put it in the app folder or in `data/`.")
+        st.stop()
+
+    df = load_csv(str(data_file))
+    if df.empty:
+        st.warning("The CSV appears to be empty.")
+        st.stop()
+
+    return df