/* ==========================================================================
   listing-legacy.css — the ORIGINAL public/listing.html stylesheet, verbatim,
   minus its :root/body.light token blocks (tokens.css aliases supply every
   var() it uses). Same pattern as legacy.css for index.html — see README.
   ========================================================================== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* :root tokens removed — supplied by /preview/css/tokens.css alias layer */

    html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
    body { background: var(--black); color: var(--white); font-family: var(--font-body); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0; opacity: 0.4;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2rem; height: 60px;
      background: rgba(10,10,10,0.9); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .logo span { color: #FF0000; }
    .logo-img { height: 36px; width: auto; display: block; }
    .logo-img--dark  { display: block; }
    .logo-img--light { display: none; }
    body.light .logo-img--dark  { display: none; }
    body.light .logo-img--light { display: block; }
    body.light .logo { color: #111111; }
    .nav-links { display: flex; gap: 2rem; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); }
    .nav-links a { color: var(--grey); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
    .nav-links a:hover { color: var(--white); }
    .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
    .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 1px; transition: all 0.25s; }
    .theme-toggle { background: none; border: 1px solid var(--border); color: var(--grey-light); height: 32px; padding: 0 0.7rem; border-radius: 16px; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; justify-content: center; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; line-height: 1; white-space: nowrap; }
    .theme-toggle:hover { border-color: var(--red); color: var(--red); }
    .ebay-motors-text { color: #cccccc; }

    /* ── PAGE LAYOUT ── */
    .listing-page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 2rem 5rem;
      position: relative;
      z-index: 1;
    }

    /* ── TWO-COLUMN LAYOUT ── */
    .listing-layout {
      display: grid;
      grid-template-columns: 2fr minmax(280px, 1fr);
      gap: 2.5rem;
      align-items: start;
    }
    .listing-layout > * { min-width: 0; }

    /* All main-column items sit in column 1 */
    .listing-gallery,
    .listing-hero,
    .spec-section,
    .seller-section,
    .similar-section { grid-column: 1; }

    /* Sidebar occupies column 2, sticky */
    .listing-sidebar {
      grid-column: 2;
      grid-row: 1 / span 20;
      position: sticky;
      top: 80px;
      min-width: 280px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 1rem;
    }

    .sidebar-cta {
      display: flex; align-items: center; justify-content: center;
      width: 100%; padding: 1rem; border-radius: 4px;
      background: var(--red); color: var(--white);
      font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 3px;
      text-decoration: none; transition: background 0.2s, transform 0.15s;
      text-align: center; gap: 0.5rem;
    }
    .sidebar-cta:hover { background: var(--red-dark); transform: translateY(-1px); }

    .sidebar-meta {
      display: flex; flex-direction: column; gap: 0.4rem;
      padding: 0.75rem 1rem;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
    }
    .sidebar-meta .listing-location,
    .sidebar-meta .listing-date { display: block; }
    .sidebar-meta .source-badge { align-self: flex-start; margin-top: 0.25rem; }

    /* ── LOADING / ERROR ── */
    .loading-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 60vh; gap: 1.5rem;
    }
    .loading-spinner {
      width: 40px; height: 40px;
      border: 2px solid var(--border); border-top-color: var(--red);
      border-radius: 50%; animation: spin 0.8s linear infinite;
    }
    .loading-text { font-family: var(--font-mono); font-size: 0.8rem; color: var(--grey); letter-spacing: 0.1em; }
    .error-state { text-align: center; padding: 6rem 2rem; }
    .error-title { font-family: var(--font-display); font-size: 2.5rem; color: var(--grey); letter-spacing: 3px; margin-bottom: 0.75rem; }
    .error-sub { color: var(--grey); font-size: 0.9rem; margin-bottom: 2rem; }
    .error-btn { background: var(--red); color: var(--white); border: none; padding: 0.75rem 2rem; border-radius: 4px; font-family: var(--font-display); font-size: 1rem; letter-spacing: 2px; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-block; }
    .error-btn:hover { background: var(--red-dark); }

    /* ── BACK ROW ── */
    .back-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem;
    }
    .back-link {
      background: none; border: none; color: var(--grey);
      font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer; transition: color 0.2s;
      text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .back-link:hover { color: var(--white); }
    .back-btn {
      background: none; border: 1px solid var(--border); color: var(--grey);
      padding: 0.5rem 1rem; border-radius: 3px;
      font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer; transition: all 0.2s;
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .back-btn:hover { border-color: var(--white); color: var(--white); }

    /* ── SOURCE BADGES ── */
    .source-badge {
      font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
      padding: 0.28rem 0.7rem; border-radius: 3px; letter-spacing: 0.03em;
      background: rgba(8,8,12,0.9);
    }
    .source-badge.autotrader  { background: #0a1628; border: 1px solid #1e3a5f; }
    .source-badge.facebook    { border: 1px solid rgba(24,119,242,0.5); }
    .source-badge.ebay        { border: 1px solid rgba(134,184,23,0.5); }
    .source-badge.gumtree     { border: 1px solid rgba(34,197,94,0.5); }
    .source-badge.pistonheads { border: 1px solid rgba(249,115,22,0.5); }
    .source-badge.cargurus    { border: 1px solid rgba(13,148,136,0.5); }
    .source-badge.motors      { border: 1px solid rgba(34,197,94,0.5); }

    /* ── SOURCE OVERLAY BADGE (similar listings cards) ── */
    .card-source-overlay {
      position: absolute; top: 8px; left: 8px;
      padding: 3px 9px; border-radius: 20px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
      color: white; background: rgba(8,8,12,0.88);
      backdrop-filter: blur(6px); z-index: 2; pointer-events: none;
    }
    .card-source-overlay.autotrader  { background: #0a1628; border: 1px solid #1e3a5f; }
    .card-source-overlay.facebook    { border: 1px solid rgba(24,119,242,0.55); }
    .card-source-overlay.ebay        { border: 1px solid rgba(134,184,23,0.5); }
    .card-source-overlay.gumtree     { border: 1px solid rgba(34,197,94,0.5); }
    .card-source-overlay.pistonheads { border: 1px solid rgba(249,115,22,0.5); }
    .card-source-overlay.cargurus    { border: 1px solid rgba(13,148,136,0.5); }
    .card-source-overlay.motors      { border: 1px solid rgba(34,197,94,0.5); }


    /* ── HERO ── */
    .listing-hero {
      margin-bottom: 1.5rem;
      padding-bottom: 0;
      border-bottom: none;
    }
    .listing-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.5rem);
      letter-spacing: 2px;
      line-height: 1.05;
      color: var(--white);
      margin-bottom: 0.75rem;
      max-width: 800px;
    }
    .listing-meta-row {
      display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }
    .listing-location { font-family: var(--font-mono); font-size: 0.82rem; color: var(--grey); }
    .listing-loc-link { color: #e63946; text-decoration: underline; text-underline-offset: 2px; }
    .listing-loc-link:hover { color: #ff5562; }
    .listing-date     { font-family: var(--font-mono); font-size: 0.72rem; color: var(--grey); }

    .listing-price {
      font-family: var(--font-display);
      font-size: clamp(3rem, 8vw, 5.5rem);
      letter-spacing: 2px;
      color: var(--white);
      line-height: 1;
      margin-bottom: 1.75rem;
    }

    .listing-damage-banner {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(217,119,6,0.12);
      border: 2px solid #d97706;
      color: #d97706;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 0.4rem 0.9rem;
      border-radius: 6px;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    body.light .listing-damage-banner { background: rgba(180,83,9,0.1); border-color: #b45309; color: #b45309; }

    .listing-inactive-banner {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      background: rgba(156,163,175,0.1);
      border: 1.5px solid var(--border);
      color: var(--text-muted);
      font-size: 0.78rem;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      margin-bottom: 0.75rem;
      line-height: 1.4;
    }

    .deal-score-block {
      margin-bottom: 1.75rem;
      padding: 1.25rem 1.5rem;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      width: 100%;
      box-sizing: border-box;
    }
    .deal-score-block.great { background: transparent; border: 2px solid #16a34a; }
    .deal-score-block.good  { background: transparent; border: 2px solid #22c55e; }
    .deal-score-block.fair  { background: transparent; border: 2px solid #374151; }
    .deal-score-block.high  { background: transparent; border: 2px solid #d97706; }
    .deal-score-block.over  { background: transparent; border: 2px solid #dc2626; }
    .deal-score-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.25rem; }
    .deal-score-main { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
    .deal-score-block.great .deal-score-main { color: #16a34a; }
    .deal-score-block.good  .deal-score-main { color: #22c55e; }
    .deal-score-block.fair  .deal-score-main { color: #6b7280;  }
    .deal-score-block.high  .deal-score-main { color: #d97706; }
    .deal-score-block.over  .deal-score-main { color: #dc2626; }
    .deal-score-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.1rem; }
    .deal-score-block.great .deal-score-label { color: #16a34a; }
    .deal-score-block.good  .deal-score-label { color: #22c55e; }
    .deal-score-block.fair  .deal-score-label { color: #6b7280;  }
    .deal-score-block.high  .deal-score-label { color: #d97706; }
    .deal-score-block.over  .deal-score-label { color: #dc2626; }
    .deal-score-avg { font-size: 0.82rem; color: #94a3b8; margin-top: 0.15rem; }
    .ds-conf { font-weight: 600; }
    .ds-conf-high   { color: #16a34a; }
    .ds-conf-medium { color: #d97706; }
    .ds-conf-low    { color: #6b7280; }

    /* ── FLIP ANALYSIS ── */
    .flip-analysis {
      background: rgba(22,163,74,0.05);
      border: 1px solid rgba(22,163,74,0.25);
      border-radius: 4px;
      padding: 1rem 1.25rem;
    }
    .flip-analysis-title {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #16a34a;
      margin-bottom: 0.65rem;
    }
    .flip-analysis-margin {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      color: #16a34a;
      letter-spacing: 2px;
      margin-bottom: 0.5rem;
    }
    .flip-analysis-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.83rem;
      color: var(--grey-light);
      padding: 0.28rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .flip-analysis-row:last-of-type { border-bottom: none; }
    .flip-analysis-row .fa-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); }
    .history-nudge {
      margin-top: 1rem;
      padding: 1rem 1.25rem;
      border-radius: 8px;
      border: 1px solid rgba(224,26,26,0.3);
      background: rgba(224,26,26,0.05);
    }
    .history-nudge-text {
      font-size: 0.88rem;
      color: var(--text);
      margin-bottom: 0.6rem;
      line-height: 1.5;
    }
    .history-nudge-cta {
      font-size: 0.8rem;
      font-weight: 600;
      color: #e01a1a;
      text-decoration: none;
      letter-spacing: 0.02em;
    }
    .history-nudge-cta:hover { text-decoration: underline; }
    .pro-intent-nudge {
      margin-top: 1rem;
      padding: 1rem 1.25rem;
      border-radius: 8px;
      border: 1px solid rgba(224,26,26,0.3);
      background: rgba(224,26,26,0.05);
    }
    .pro-intent-nudge-text { font-size: 0.88rem; color: var(--text); margin-bottom: 0.6rem; line-height: 1.5; }
    .pro-intent-nudge-btns { display: flex; align-items: center; gap: 1rem; }
    .pro-intent-nudge-cta { font-size: 0.8rem; font-weight: 600; color: #e01a1a; background: none; border: none; padding: 0; cursor: pointer; letter-spacing: 0.02em; }
    .pro-intent-nudge-cta:hover { text-decoration: underline; }
    .pro-intent-nudge-dismiss { font-size: 0.78rem; color: var(--grey); background: none; border: none; padding: 0; cursor: pointer; }
    .pro-intent-nudge-dismiss:hover { color: var(--text); }
    .delivery-distance-prompt {
      margin-top: 0.75rem;
      padding: 1rem 1.25rem;
      border-radius: 8px;
      border: 1px solid rgba(13,148,136,0.3);
      background: rgba(13,148,136,0.05);
    }
    .delivery-distance-prompt-text { font-size: 0.88rem; color: var(--text); margin-bottom: 0.6rem; line-height: 1.5; }
    .delivery-distance-prompt-btns { display: flex; align-items: center; gap: 1rem; }
    .delivery-distance-prompt-cta { font-size: 0.8rem; font-weight: 600; color: #0d9488; text-decoration: none; letter-spacing: 0.02em; }
    .delivery-distance-prompt-cta:hover { text-decoration: underline; }
    .delivery-distance-prompt-dismiss { font-size: 0.78rem; color: var(--grey); background: none; border: none; padding: 0; cursor: pointer; }
    .delivery-distance-prompt-dismiss:hover { color: var(--text); }
    .flip-analysis-disclaimer {
      font-size: 0.7rem;
      color: var(--grey);
      margin-top: 0.6rem;
      font-style: italic;
      line-height: 1.45;
    }
    .flip-toggle-btn {
      background: none; border: none;
      color: var(--grey); font-family: var(--font-mono);
      font-size: 0.62rem; cursor: pointer;
      text-transform: uppercase; letter-spacing: 0.08em;
      margin-top: 0.5rem; padding: 0;
      text-decoration: underline; display: block;
    }
    .flip-toggle-btn:hover { color: var(--white); }

    /* ── PRICE HISTORY ── */
    .price-history-section {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1rem 1.25rem;
      margin-top: 1rem;
    }
    .price-history-title {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      color: var(--grey);
      margin-bottom: 0.75rem;
    }
    .price-history-row {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 0.9rem;
    }
    .price-history-row:last-child { border-bottom: none; }
    .ph-price {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 1rem;
      min-width: 5rem;
    }
    .ph-change { flex: 1; font-size: 0.85rem; }
    .ph-change.drop  { color: #22c55e; }
    .ph-change.rise  { color: #ef4444; }
    .ph-change.first { color: var(--grey); }
    .ph-date { font-size: 0.78rem; color: var(--grey); white-space: nowrap; }

    .cta-btn {
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: var(--red); color: var(--white);
      padding: 1rem 2.5rem; border-radius: 4px;
      font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 3px;
      text-decoration: none; transition: background 0.2s, transform 0.15s;
    }
    .cta-btn:hover { background: var(--red-dark); transform: translateY(-1px); }

    /* ── SECTION HEADERS ── */
    .section-header {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1.5rem; padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border);
    }
    .section-title {
      font-family: var(--font-display); font-size: 1.5rem;
      letter-spacing: 3px; color: var(--white);
    }
    .section-count {
      font-family: var(--font-mono); font-size: 0.7rem; color: var(--grey);
    }

    /* ── SPEC GRID ── */
    .spec-section { margin-bottom: 2rem; }
    .spec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }
    .spec-item {
      background: var(--surface2);
      border-radius: 4px;
      padding: 0.75rem 1rem;
      border: none;
    }
    .spec-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
    .spec-value { font-size: 0.9rem; font-weight: 600; color: var(--white); }
    .spec-value.highlight { color: var(--red); }
    .spec-value.blue { color: #8ab4ff; }
    .feature-mark {
      background: rgba(255,0,0,0.28);
      color: var(--red);
      border-radius: 2px;
      padding: 0 3px;
      font-weight: 700;
    }

    /* ── SELLER SECTION ── */
    .seller-section { margin-bottom: 3rem; }

    .highlight-chips {
      display: flex; flex-wrap: wrap; gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .highlight-chip {
      font-family: var(--font-mono); font-size: 0.7rem;
      padding: 0.3rem 0.75rem; border-radius: 2px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--grey-light); letter-spacing: 0.04em;
    }
    .highlight-chip.green  { background: rgba(0,200,100,0.1); border-color: rgba(0,200,100,0.4); color: #00c864; }
    .highlight-chip.red    { background: var(--red-glow); border-color: rgba(255,0,0,0.4); color: var(--red); }
    .highlight-chip.yellow { background: rgba(255,200,0,0.08); border-color: rgba(255,200,0,0.3); color: #ffc800; }
    .highlight-chip.blue   { background: rgba(80,130,255,0.1); border-color: rgba(80,130,255,0.3); color: #8ab4ff; }

    .subsection {
      margin-bottom: 1.75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
    }
    .subsection-header {
      font-family: var(--font-mono); font-size: 0.65rem; color: var(--grey);
      text-transform: uppercase; letter-spacing: 0.1em;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .subsection-body { padding: 1rem; }

    .mod-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .mod-chip {
      font-family: var(--font-mono); font-size: 0.68rem;
      padding: 0.3rem 0.6rem; border-radius: 2px;
      background: rgba(255,0,0,0.08); border: 1px solid rgba(255,0,0,0.25); color: var(--red);
    }
    .mod-category { margin-bottom: 1rem; }
    .mod-cat-label {
      font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--grey); margin-bottom: 0.4rem;
    }

    .work-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
    .work-list li {
      font-size: 0.875rem; color: var(--grey-light);
      padding: 0.35rem 0;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; gap: 0.5rem;
    }
    .work-list li:last-child { border-bottom: none; }
    .work-list li::before { content: '✓'; color: #00c864; font-size: 0.75rem; flex-shrink: 0; margin-top: 0.1rem; }

    #descWrap { font-size: 0.9rem; color: var(--grey-light); line-height: 1.8; white-space: pre-wrap; }
    #expandBtn {
      display: inline-block; margin-top: 0.75rem;
      background: none; border: 1px solid var(--border);
      color: var(--grey); font-family: var(--font-mono); font-size: 0.7rem;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.35rem 0.75rem; border-radius: 2px; cursor: pointer;
      transition: all 0.2s;
    }
    #expandBtn:hover { border-color: var(--red); color: var(--red); }

    /* ── GALLERY ── */
    .listing-gallery { margin-bottom: 1.5rem; }
    .gallery-main {
      position: relative; width: 100%; height: 450px;
      background: #0d0d0d; border: 1px solid var(--border);
      border-radius: 4px; overflow: hidden; cursor: zoom-in;
    }
    .gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .gallery-expand-hint {
      position: absolute; top: 0.75rem; left: 0.75rem;
      background: rgba(10,10,10,0.7); border: 1px solid var(--border);
      color: var(--grey-light); font-size: 0.75rem;
      padding: 0.25rem 0.5rem; border-radius: 2px; pointer-events: none;
    }
    .gallery-placeholder {
      width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #131313 0%, #1a1a1a 100%);
      gap: 0.75rem;
    }
    .gallery-placeholder::before {
      content: '';
      display: block;
      width: 90px; height: 56px;
      background: var(--grey);
      opacity: 0.12;
      clip-path: polygon(8% 60%, 20% 25%, 35% 25%, 45% 10%, 65% 10%, 75% 25%, 92% 25%, 92% 70%, 82% 70%, 78% 85%, 22% 85%, 18% 70%);
    }
    .gallery-placeholder::after {
      content: 'No images available';
      font-size: 0.75rem;
      font-family: var(--font-mono, monospace);
      color: var(--grey);
      opacity: 0.5;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .gallery-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(10,10,10,0.7); border: 1px solid var(--border);
      color: var(--white); font-size: 1.2rem; width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 3px; cursor: pointer; transition: background 0.2s;
      z-index: 2; user-select: none;
    }
    .gallery-arrow:hover { background: rgba(255,0,0,0.8); border-color: var(--red); }
    .gallery-arrow.prev { left: 0.75rem; }
    .gallery-arrow.next { right: 0.75rem; }

    .gallery-thumbs {
      display: flex; gap: 0.5rem; margin-top: 0.5rem; overflow-x: auto;
      padding-bottom: 0.25rem;
    }
    .gallery-thumbs::-webkit-scrollbar { height: 4px; }
    .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .gallery-thumb {
      flex-shrink: 0; width: 80px; height: 56px;
      background: #0d0d0d;
      border: 2px solid var(--border); border-radius: 3px;
      overflow: hidden; cursor: pointer; transition: border-color 0.2s;
    }
    .gallery-thumb.active { border-color: var(--red); }
    .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

    /* ── FULLSCREEN OVERLAY ── */
    #fsOverlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.95); cursor: zoom-out;
      align-items: center; justify-content: center;
    }
    #fsOverlay.open { display: flex; }
    #fsOverlay img { max-width: 95vw; max-height: 92vh; object-fit: contain; pointer-events: none; }
    #fsClose {
      position: fixed; top: 1rem; right: 1rem;
      background: rgba(10,10,10,0.8); border: 1px solid var(--border);
      color: var(--white); font-size: 1.4rem; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 3px; cursor: pointer; z-index: 10000;
    }
    #fsClose:hover { background: var(--red); border-color: var(--red); }
    #fsPrev, #fsNext {
      position: fixed; top: 50%; transform: translateY(-50%);
      background: rgba(10,10,10,0.7); border: 1px solid var(--border);
      color: var(--white); font-size: 1.4rem; width: 50px; height: 50px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 3px; cursor: pointer; z-index: 10000;
    }
    #fsPrev { left: 1rem; } #fsNext { right: 1rem; }
    #fsPrev:hover, #fsNext:hover { background: rgba(255,0,0,0.8); border-color: var(--red); }

    /* ── FACEBOOK ALL PHOTOS ── */
    .fb-photos-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      margin-top: 0.75rem;
      background: rgba(24,119,242,0.12); border: 1px solid rgba(24,119,242,0.4);
      color: #5b9cf6; padding: 0.6rem 1.4rem; border-radius: 3px;
      font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
      text-decoration: none; transition: background 0.2s, border-color 0.2s;
    }
    .fb-photos-btn:hover { background: rgba(24,119,242,0.25); border-color: rgba(24,119,242,0.7); color: #85b8ff; }

    /* ── SIMILAR LISTINGS ── */
    .similar-section { margin-bottom: 3rem; }
    .listings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    /* ── CARD (reused from index.html) ── */
    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 4px; overflow: hidden;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      cursor: pointer; animation: fadeUp 0.4s ease forwards; opacity: 0;
      position: relative;
    }
    .card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 8px 32px rgba(255,0,0,0.1); }
    .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: 1; }
    .card:hover::before { transform: scaleX(1); }
    .card-source {
      position: absolute; top: 0.75rem; right: 0.75rem;
      background: rgba(10,10,10,0.8); border: 1px solid var(--border);
      padding: 0.2rem 0.5rem; border-radius: 2px;
      font-family: var(--font-mono); font-size: 0.65rem; color: var(--grey); text-transform: uppercase;
    }
    .card-source.autotrader { color: #e01a1a; border-color: #1e3a5f; }
    .card-source.facebook   { color: #5b9cf6; border-color: rgba(24,119,242,0.3); }
    .card-source.ebay       { color: #4d9fff; border-color: rgba(0,100,210,0.3); }
    .card-source.gumtree    { color: #22c55e; border-color: rgba(34,197,94,0.3); }
    .card-source.pistonheads { color: #f97316; border-color: rgba(249,115,22,0.3); }
    .source-badge.cargurus  { background: rgba(13,148,136,0.15); border: 1px solid rgba(13,148,136,0.5); color: #0d9488; }
    .card-source.cargurus   { color: #0d9488; border-color: rgba(13,148,136,0.3); }
    .card-img { width: 100%; height: 160px; background: var(--surface2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
    .card-img-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg,#131313 0%,#1a1a1a 100%); }
    .card-body { padding: 1rem; }
    .card-title { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 0.35rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-location { font-size: 0.72rem; color: var(--grey); margin-bottom: 0.75rem; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--white); letter-spacing: 1px; margin-bottom: 0.6rem; }
    .card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .tag { font-family: var(--font-mono); font-size: 0.62rem; padding: 0.22rem 0.45rem; border-radius: 2px; background: var(--surface2); border: 1px solid var(--border); color: var(--grey-light); text-transform: uppercase; letter-spacing: 0.04em; }
    .tag.red { background: var(--red-glow); border-color: rgba(255,0,0,0.3); color: var(--red); }

    /* ── FOOTER ── */
    footer { border-top: 1px solid var(--border); padding: 2rem; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--grey); letter-spacing: 0.05em; }
    footer span { color: var(--red); }
    .footer-links { margin-top: 0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.75rem; }
    .footer-links a { color: var(--grey); text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: var(--white); }
    .footer-links span { color: var(--border); }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes affCardIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes barReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes featureFadeIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes btnPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } 50% { box-shadow: 0 8px 24px rgba(0,0,0,0.45); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    .aff-card { animation: affCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .aff-card:nth-child(1) { animation-delay: 0s; }
    .aff-card:nth-child(2) { animation-delay: 0.15s; }
    .aff-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
    .aff-accent-bar { transform-origin: left; animation: barReveal 0.5s ease both; }
    .aff-card:nth-child(1) .aff-accent-bar { animation-delay: 0.15s; }
    .aff-card:nth-child(2) .aff-accent-bar { animation-delay: 0.3s; }
    .aff-card:nth-child(1) .aff-feature:nth-child(1) { animation-delay: 0.25s; }
    .aff-card:nth-child(1) .aff-feature:nth-child(2) { animation-delay: 0.35s; }
    .aff-card:nth-child(1) .aff-feature:nth-child(3) { animation-delay: 0.45s; }
    .aff-card:nth-child(1) .aff-feature:nth-child(4) { animation-delay: 0.55s; }
    .aff-card:nth-child(2) .aff-feature:nth-child(1) { animation-delay: 0.4s; }
    .aff-card:nth-child(2) .aff-feature:nth-child(2) { animation-delay: 0.5s; }
    .aff-card:nth-child(2) .aff-feature:nth-child(3) { animation-delay: 0.6s; }

    .card:nth-child(1) { animation-delay: 0.05s; }
    .card:nth-child(2) { animation-delay: 0.1s; }
    .card:nth-child(3) { animation-delay: 0.15s; }
    .card:nth-child(4) { animation-delay: 0.2s; }
    .card:nth-child(5) { animation-delay: 0.25s; }
    .card:nth-child(6) { animation-delay: 0.3s; }

    /* ── KEY STATS ROW (pill chips) ── */
    .key-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .key-stat {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0.35rem 0.85rem;
      flex: none;
      max-width: none;
      min-width: auto;
    }
    .key-stat-value {
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--white);
      line-height: 1;
      letter-spacing: 0;
    }
    .key-stat-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--grey);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 0;
    }

    /* ── SHOW MORE FEATURES BUTTON ── */
    .feat-hidden { display: none !important; }
    .show-more-btn {
      background: none; border: 1px solid var(--border); color: var(--grey);
      font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
      text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 2px;
      cursor: pointer; transition: all 0.2s; margin-top: 0.25rem;
    }
    .show-more-btn:hover { border-color: var(--red); color: var(--red); }

    /* ── AUTH MODAL ── */
    .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:500; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
    .modal-overlay.open { display:flex; }
    .modal { background:var(--surface,#111); border:1px solid var(--border,#2a2a2a); border-radius:8px; padding:2rem; position:relative; width:90%; max-width:430px; max-height:90vh; overflow-y:auto; }
    .modal-close { position:absolute; top:0.75rem; right:0.75rem; background:none; border:none; color:var(--grey,#888); font-size:1.2rem; cursor:pointer; line-height:1; padding:0.25rem 0.5rem; border-radius:3px; }
    .modal-close:hover { color:white; background:rgba(255,255,255,0.08); }
    .auth-brand { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; letter-spacing:3px; text-align:center; margin-bottom:1.25rem; }
    .auth-brand span { color:#FF0000; }
    .auth-tabs { display:flex; border-bottom:1px solid #2a2a2a; margin-bottom:1.5rem; }
    .auth-tab { flex:1; background:none; border:none; border-bottom:2px solid transparent; padding:0.6rem; color:#666; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:500; cursor:pointer; transition:all 0.2s; margin-bottom:-1px; }
    .auth-tab.active { color:white; border-bottom-color:#FF0000; }
    .auth-field { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
    .auth-field label { font-size:0.8rem; color:#aaa; font-weight:500; display:flex; justify-content:space-between; align-items:center; }
    .auth-field input { background:#1a1a1a; border:1px solid #2a2a2a; color:white; padding:0.7rem 0.9rem; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:0.95rem; transition:border-color 0.2s; }
    .auth-field input:focus { outline:none; border-color:#FF0000; }
    .auth-field input::placeholder { color:rgba(255,255,255,0.2); }
    .auth-submit { width:100%; background:#FF0000; border:none; color:white; padding:0.9rem; border-radius:4px; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:2px; cursor:pointer; transition:background 0.2s; margin-top:0.5rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
    .auth-submit:hover:not(:disabled) { background:#b01020; }
    .auth-submit:disabled { opacity:0.55; cursor:not-allowed; }
    .auth-spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; display:inline-block; animation:authSpin 0.7s linear infinite; }
    @keyframes authSpin { to { transform:rotate(360deg); } }
    .auth-error { font-size:0.82rem; color:#ff6b6b; margin-bottom:0.75rem; display:none; }
    .auth-error.visible { display:block; }
    .auth-success { font-size:0.88rem; color:#4caf50; background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.3); padding:0.75rem; border-radius:4px; margin-bottom:0.75rem; }
    .auth-switch { text-align:center; font-size:0.82rem; color:#666; margin-top:1rem; }
    .auth-switch a { color:#FF0000; text-decoration:none; }
    .auth-terms { font-size:0.75rem; color:#555; text-align:center; margin-top:0.75rem; line-height:1.5; }
    .auth-terms a { color:#888; }
    .auth-forgot { font-size:0.75rem; color:#888; text-decoration:none; }
    .auth-hint { font-size:0.72rem; color:#555; font-weight:400; }

    /* ── AFFILIATE CARDS ── */
    .aff-card { background: #0e0e0e; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .aff-accent-bar { height: 3px; width: 100%; display: block; }
    .aff-card-body { padding: 1.25rem 1.5rem; }
    .aff-label { font-family: var(--font-mono); font-size: 0.6rem; color: #555; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; }
    .aff-logo { height: 32px; width: auto; display: block; object-fit: contain; }
    .aff-logo-light { display: none; }
    .aff-cv-logo-wrap { display: inline-flex; align-items: center; margin-bottom: 0.85rem; }
    .aff-cv-wordmark { font-weight: 900; font-size: 1.2rem; letter-spacing: 0.02em; margin-bottom: 0.85rem; }
    .aff-wordmark { display: flex; align-items: baseline; margin-bottom: 0.65rem; }
    .aff-icon-wrap { margin-bottom: 0.65rem; }
    .aff-logo-chip { display: inline-block; background: #ffffff; padding: 0.4rem 0.65rem; border-radius: 6px; margin-bottom: 0.65rem; line-height: 0; }
    .aff-badge { display: inline-block; background: rgba(224,26,26,0.12); border: 1px solid rgba(224,26,26,0.3); color: #e01a1a; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; padding: 0.22rem 0.65rem; border-radius: 3px; margin-bottom: 0.85rem; letter-spacing: 0.04em; }
    .aff-features { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
    .aff-feature { display: flex; align-items: center; gap: 0.65rem; font-size: 0.88rem; color: var(--grey-light); animation: featureFadeIn 0.3s ease both; }
    .aff-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,200,100,0.15); border: 1px solid rgba(0,200,100,0.4); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.6rem; color: #00c864; line-height: 1; }
    .aff-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
    .aff-pill { font-family: var(--font-mono); font-size: 0.65rem; padding: 0.22rem 0.65rem; border-radius: 20px; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3); color: #f97316; }
    .aff-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.85rem 1.5rem; border-radius: 4px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 2px; color: #ffffff; text-decoration: none; transition: opacity 0.2s, transform 0.15s; animation: btnPulse 2.8s ease-in-out 1.5s infinite; }
    .aff-btn:hover { opacity: 0.88; transform: translateY(-1px); animation-play-state: paused; }

    /* ── STICKY MOBILE CTA ── */
    .sticky-cta { display: none; }

    /* ── LIGHT MODE ── */
    /* body.light tokens removed — supplied by /preview/css/tokens.css alias layer */
    body.light::before { opacity: 0.12; }
    body.light nav { background: rgba(255,255,255,0.95); }
    body.light .source-badge,
    body.light .source-badge * {
      background: #e8e8e8 !important; color: #222222 !important; border-color: #cccccc !important;
    }
    body.light .theme-toggle { border-color: #ccc; color: #555; }
    body.light .theme-toggle:hover { border-color: var(--red); color: var(--red); }
    body.light .card-source-overlay {
      background: #1a1a1a !important; color: #ffffff !important; border-color: #333333 !important;
    }
    body.light .card-source {
      background: #1a1a1a !important; color: #ffffff !important; border-color: #333333 !important;
    }
    body.light .gallery-main,
    body.light .gallery-thumb { background: #f0f0f0; }
    body.light .tag {
      background: #e8e8e8; border-color: #bbbbbb; color: #333333;
    }
    body.light .tag.red {
      background: #fff0f0; border-color: rgba(204,0,0,0.25); color: #CC0000;
    }
    body.light .price-history-row { border-bottom-color: rgba(0,0,0,0.07); }
    body.light .aff-card { background: #f5f5f5; }
    body.light .aff-label { color: #777777; }
    body.light .aff-feature { color: #333333; }
    body.light .aff-logo-dark { display: none; }
    body.light .aff-logo-light { display: block; }
    body.light .sticky-cta { background: rgba(255,255,255,0.97); border-top-color: #dddddd; }
    body.light .sidebar-meta { background: #f5f5f5; border-color: #dddddd; }
    body.light .sidebar-cta { background: var(--red); color: #ffffff; }
    /* auth modal */
    body.light .modal { background: #ffffff; }
    body.light .auth-tabs { border-bottom-color: #dddddd; }
    body.light .auth-tab { color: #888888; }
    body.light .auth-tab.active { color: #0a0a0a; }
    body.light .auth-field label { color: #444444; }
    body.light .auth-field input {
      background: #f5f5f5; border-color: #cccccc; color: #0a0a0a;
    }
    body.light .auth-field input::placeholder { color: rgba(0,0,0,0.3); }
    body.light .auth-switch { color: #555555; }
    body.light .auth-hint { color: #666666; }
    body.light .auth-terms { color: #666666; }
    body.light .auth-terms a { color: #444444; }
    body.light .auth-forgot { color: #555555; }

    /* ── MOBILE (collapse two-column to single) ── */
    @media (max-width: 899px) {
      .listing-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* Dissolve sidebar into the flex flow so children get individual ordering */
      .listing-sidebar { display: contents; }

      /* Explicit order for every direct flex child */
      .listing-gallery    { order: 1;  margin-bottom: 1.25rem; }
      .listing-hero       { order: 2;  margin-bottom: 1.25rem; }
      #flipAnalysisSection{ order: 3;  margin-bottom: 1rem; }
      #ctaBtn             { order: 4;  margin-bottom: 1rem; }
      /* Tied with #cvCard on purpose — equal `order` falls back to source
         order, and deliveryPromptSection already precedes cvCard in the
         DOM, so it renders first (only) when unhidden by showDeliveryPrompt. */
      #deliveryPromptSection { order: 5; margin-bottom: 0.75rem; }
      #cvCard             { order: 5;  margin-bottom: 0.75rem; }
      .sidebar-meta       { order: 6;  margin-bottom: 1.5rem; }
      #vehicleSection     { order: 7;  }
      #performanceSection { order: 8;  }
      #featuresSection    { order: 9;  }
      #modsSection        { order: 10; }
      #sellerSection      { order: 11; }
      #aaCard             { order: 12; margin-top: 1.5rem; margin-bottom: 0.75rem; }
      #dmmCard             { order: 12; margin-bottom: 0.75rem; }
      #historySection     { order: 13; }
      #alsoOnSection      { order: 14; }
      #similarSection     { order: 15; }
    }

    @media (max-width: 600px) {
      nav { padding: 0 1rem; }
      .nav-hamburger { display: flex; }
      .nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; transform: none; background: rgba(10,10,10,0.97); border-bottom: 1px solid var(--border); flex-direction: column; padding: 0.5rem 0; z-index: 99; list-style: none; }
      .nav-links.open { display: flex; }
      body.light .nav-links { background: rgba(255,255,255,0.98); border-bottom-color: #dddddd; }
      .nav-links li { border-bottom: 1px solid var(--border); }
      .nav-links li:last-child { border-bottom: none; }
      .nav-links a { display: block; padding: 0.9rem 1.5rem; font-size: 0.9rem; }

      .listing-page { padding: 72px 1rem 4rem; }
      .listing-title { font-size: clamp(1.6rem, 7vw, 2.5rem); word-break: break-word; }
      .listing-price { font-size: clamp(2.2rem, 9vw, 4rem); }
      .cta-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 0.85rem 1.5rem; }

      .listings-grid { grid-template-columns: 1fr; }

      /* Gallery — shorter on mobile */
      .gallery-main { height: 240px; }
      .gallery-thumb { width: 64px; height: 44px; }

      /* Deal score */
      .deal-score-block { padding: 1rem; }
      .deal-score-main { font-size: 1.25rem; }

      /* Price history */
      .ph-price { min-width: 4rem; }

      /* Key stats pills */
      .key-stats-row { gap: 0.4rem; }
      .key-stat { padding: 0.28rem 0.7rem; }
      .key-stat-value { font-size: 0.8rem; }

      /* Section title */
      .section-title { font-size: 1.2rem; letter-spacing: 2px; }

      /* Back row */
      .back-row { gap: 0.5rem; }
      .back-link { font-size: 0.68rem; }

      /* highlight chips */
      .highlight-chip { font-size: 0.65rem; padding: 0.25rem 0.6rem; }

      /* description */
      #descWrap { font-size: 0.85rem; }

      /* sticky CTA suppressed on mobile — inline CTA (#ctaBtn) is used instead */
      .sticky-cta { display: none !important; }
    }
    .upgrade-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center; }
    .upgrade-modal-overlay.open { display: flex; }
    .upgrade-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; max-width: 380px; width: 90%; }
    .upgrade-modal h3 { margin: 0 0 0.6rem 0; font-size: 1.05rem; color: var(--text); }
    .upgrade-modal p { margin: 0 0 1.5rem 0; font-size: 0.86rem; color: #aaa; line-height: 1.55; }
    .upgrade-modal-btns { display: flex; flex-direction: column; gap: 0.65rem; }
    .upgrade-modal-btns .um-btn-primary { padding: 0.75rem; background: var(--red); color: #fff; border: none; border-radius: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 1.5px; cursor: pointer; }
    .upgrade-modal-btns .um-btn-dismiss { padding: 0.7rem; background: transparent; color: #888; border: 1px solid #333; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
    .upgrade-modal-btns .um-btn-dismiss:hover { border-color: #555; color: #bbb; }
    .deal-score-locked { padding: 1.2rem; text-align: center; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; color: #999; font-size: 0.9rem; }
    .deal-score-locked:hover { border-color: var(--red); color: #ccc; }

    /* ─── Sunday-batch additions (preview/sunday-batch branch) ─── */

    /* Price-history Pro teaser (PRICE_HISTORY_PRO_ONLY) */
    .price-history-section.ph-locked { border-style: dashed; }
    .ph-pro-tag {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      letter-spacing: 0.12em;
      color: #fff;
      background: var(--red, #e01a1a);
      padding: 0.1rem 0.4rem;
      border-radius: 2px;
      vertical-align: middle;
      margin-left: 0.4rem;
    }
    .ph-locked-text {
      font-size: 0.9rem;
      color: var(--grey);
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }
    .ph-locked-cta {
      font-family: var(--font-display, 'Bebas Neue', sans-serif);
      font-size: 1rem;
      letter-spacing: 0.06em;
      color: #fff;
      background: var(--red, #e01a1a);
      border: none;
      border-radius: 3px;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    .ph-locked-cta:hover { filter: brightness(1.1); }

    /* Price-history one-line story summary */
    .ph-summary {
      font-size: 0.92rem;
      color: var(--text);
      margin-bottom: 0.75rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border);
    }

    /* CarVertical nudge dismiss ✕ */
    .history-nudge { position: relative; }
    .history-nudge-dismiss {
      position: absolute;
      top: 0.4rem;
      right: 0.55rem;
      background: none;
      border: none;
      color: var(--grey);
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0.2rem;
      line-height: 1;
    }
    .history-nudge-dismiss:hover { color: var(--text); }

    /* TOS acceptance checkbox in the signup modal (fixes prod bug: redesigned
       listing page shipped without it, so signup from the account wall 400s) */
    .auth-tos { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.78rem; color: var(--grey); margin: 0.15rem 0 1rem; line-height: 1.55; cursor: pointer; }
    .auth-tos input[type=checkbox] { margin-top: 0.15rem; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--red, #e01a1a); cursor: pointer; }
    .auth-tos a { color: var(--red, #e01a1a); text-decoration: underline; }
    .auth-tos a:hover { opacity: 0.8; }