/* ==========================================================================
   Imports Browse — vp-imp- namespace
   Uses only shared theme tokens from :root in app.css.
   ========================================================================== */

.vp-imp-browse { padding-top: 24px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.vp-imp-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--vp-text-faint); margin-bottom: 28px;
}
.vp-imp-crumbs a {
    color: var(--vp-text-dim); text-decoration: none;
    transition: color 0.2s var(--vp-ease);
}
.vp-imp-crumbs a:hover { color: var(--vp-white); }

/* ── Page header ────────────────────────────────────────────────────── */
.vp-imp-head { margin-bottom: 32px; }
.vp-imp-head h1 {
    font-family: var(--vp-font-display); font-weight: 600; color: var(--vp-white);
    font-size: clamp(28px, 4vw, 42px); margin: 0 0 8px; line-height: 1.2;
}
.vp-imp-head p { color: var(--vp-text-dim); font-size: 15px; margin: 0; }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.vp-imp-toolbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 20px; border-bottom: 1px solid var(--vp-line);
}
.vp-imp-search {
    flex: 1; min-width: 220px;
    display: flex; align-items: center; gap: 10px;
    background: var(--vp-surface); border: 1px solid var(--vp-line-strong);
    border-radius: 2px; padding: 12px 14px; color: var(--vp-text-faint);
}
.vp-imp-search input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--vp-text); font-family: var(--vp-font-body); font-size: 14px;
}
.vp-imp-search input::placeholder { color: var(--vp-text-faint); }
.vp-imp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-imp-tab {
    background: none; border: 1px solid var(--vp-line); color: var(--vp-text-dim);
    font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 10px 16px; border-radius: 2px; cursor: pointer;
    transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease),
                background 0.2s var(--vp-ease);
}
.vp-imp-tab:hover { color: var(--vp-white); border-color: var(--vp-line-strong); }
.vp-imp-tab.is-active {
    color: var(--vp-bg); background: var(--vp-white); border-color: var(--vp-white);
}
.vp-imp-filter-toggle {
    display: none; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--vp-line-strong); color: var(--vp-text);
    font-family: var(--vp-font-mono); font-size: 11px; text-transform: uppercase;
    padding: 10px 16px; border-radius: 2px; cursor: pointer;
    transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease);
}
.vp-imp-filter-toggle:hover { color: var(--vp-white); border-color: var(--vp-white); }

/* ── Stat cards ─────────────────────────────────────────────────────── */
.vp-imp-stats { display: flex; gap: 12px; margin: 20px 0 32px; }
.vp-imp-stat {
    flex: 1; background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 16px 20px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color 0.2s var(--vp-ease), background 0.2s var(--vp-ease);
}
.vp-imp-stat:hover { border-color: var(--vp-line-strong); }
.vp-imp-stat.is-active {
    background: var(--vp-surface-raised); border-color: var(--vp-white);
}
.vp-imp-stat-num {
    font-family: var(--vp-font-display); font-size: 28px;
    color: var(--vp-white); font-weight: 600; line-height: 1;
}
.vp-imp-stat-label {
    font-family: var(--vp-font-mono); font-size: 10px;
    letter-spacing: 0.6px; text-transform: uppercase; color: var(--vp-text-faint);
}

/* ── Layout: sidebar + results ─────────────────────────────────────── */
.vp-imp-layout {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px; align-items: start; padding-bottom: 100px;
}
.vp-imp-results {
    min-width: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.vp-imp-sidebar {
    background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 4px; padding: 22px;
    position: sticky; top: 90px; /* clears the sticky header */
}
.vp-imp-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.vp-imp-sidebar-head h2 {
    font-family: var(--vp-font-display); font-size: 18px;
    color: var(--vp-white); margin: 0; font-weight: 600;
}
.vp-imp-reset {
    background: none; border: none; color: var(--vp-text-faint);
    font-family: var(--vp-font-mono); font-size: 10px; text-transform: uppercase;
    cursor: pointer; transition: color 0.2s var(--vp-ease);
}
.vp-imp-reset:hover { color: var(--vp-white); }
.vp-imp-field { margin-bottom: 18px; }
.vp-imp-field label {
    display: block; font-family: var(--vp-font-mono); font-size: 10px;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--vp-text-dim);
    margin-bottom: 8px;
}
.vp-imp-field input {
    width: 100%; padding: 10px 12px;
    background: var(--vp-bg); border: 1px solid var(--vp-line-strong);
    border-radius: 2px; color: var(--vp-text); font-family: var(--vp-font-body);
    font-size: 13px; transition: border-color 0.2s var(--vp-ease);
}
.vp-imp-field input:focus { outline: none; border-color: var(--vp-white); }
.vp-imp-field input::placeholder { color: var(--vp-text-faint); }
.vp-imp-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vp-imp-sort-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-imp-chip {
    background: none; border: 1px solid var(--vp-line); color: var(--vp-text-dim);
    font-family: var(--vp-font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.3px; padding: 8px 12px; border-radius: 2px; cursor: pointer;
    transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease),
                background 0.2s var(--vp-ease);
}
.vp-imp-chip:hover { color: var(--vp-white); border-color: var(--vp-line-strong); }
.vp-imp-chip.is-active {
    background: var(--vp-white); color: var(--vp-bg); border-color: var(--vp-white);
}
.vp-imp-sidebar-actions { display: flex; gap: 10px; margin-top: 6px; }
.vp-imp-btn-ghost,
.vp-imp-btn-solid {
    flex: 1; padding: 11px; border-radius: 2px;
    font-family: var(--vp-font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; text-align: center;
    transition: all 0.2s var(--vp-ease);
}
.vp-imp-btn-ghost {
    background: none; border: 1px solid var(--vp-line-strong); color: var(--vp-text-dim);
}
.vp-imp-btn-ghost:hover { color: var(--vp-white); border-color: var(--vp-white); }
.vp-imp-btn-solid {
    background: var(--vp-white); border: none; color: var(--vp-bg); font-weight: 700;
}
.vp-imp-btn-solid:hover { opacity: 0.85; }

/* ── Results ────────────────────────────────────────────────────────── */
.vp-imp-results-head {
    margin-bottom: 16px;
    font-family: var(--vp-font-mono); font-size: 12px; color: var(--vp-text-dim);
}
.vp-imp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

/* ── Listing card ───────────────────────────────────────────────────── */
.vp-imp-card {
    background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 4px; overflow: hidden; text-decoration: none;
    display: block; color: var(--vp-text);
    transition: border-color 0.2s var(--vp-ease), transform 0.2s var(--vp-ease);
}
.vp-imp-card:hover {
    border-color: var(--vp-line-strong); transform: translateY(-2px);
}
.vp-imp-card-media {
    position: relative; aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--vp-surface-raised), var(--vp-bg-alt));
    overflow: hidden;
}
.vp-imp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-imp-card-overlay-top {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.vp-imp-chip-tiny {
    background: rgba(8,8,10,0.72); backdrop-filter: blur(4px);
    color: var(--vp-text); font-family: var(--vp-font-mono); font-size: 10px;
    padding: 5px 9px; border-radius: 20px; display: flex; align-items: center; gap: 4px;
}
.vp-imp-status-pill {
    position: absolute; bottom: 10px; left: 10px;
    font-family: var(--vp-font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.4px; padding: 5px 10px; border-radius: 20px; color: var(--vp-white);
    background: var(--vp-imp-status-color, var(--vp-text-faint));
}
/* Status colours — subtle tints only, no loud solid fills */
.vp-imp-status-pill[data-status="abroad"]     { --vp-imp-status-color: rgba(107,107,114,0.85); }
.vp-imp-status-pill[data-status="in_transit"] { --vp-imp-status-color: rgba(184,134,59,0.85);  }
.vp-imp-status-pill[data-status="landed"]     { --vp-imp-status-color: rgba(63,138,92,0.85);   }
.vp-imp-status-pill[data-status="purchased"]  { --vp-imp-status-color: rgba(59,111,184,0.85);  }
.vp-imp-status-pill[data-status="sold"]       { --vp-imp-status-color: rgba(184,59,59,0.85);   }
.vp-imp-card-body { padding: 16px; }
.vp-imp-card-eyebrow {
    font-family: var(--vp-font-mono); font-size: 11px;
    letter-spacing: 0.5px; color: var(--vp-text-faint); margin-bottom: 4px;
}
.vp-imp-card-title {
    font-family: var(--vp-font-display); font-size: 19px; font-weight: 600;
    color: var(--vp-white); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
    line-height: 1.2;
}
.vp-imp-verified {
    font-family: var(--vp-font-mono); font-size: 9px; text-transform: uppercase;
    color: var(--vp-bg); background: var(--vp-white);
    padding: 3px 7px; border-radius: 20px; flex-shrink: 0;
}
.vp-imp-card-specs {
    font-size: 12.5px; color: var(--vp-text-dim); margin: 0 0 14px; line-height: 1.5;
}
.vp-imp-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--vp-line); padding-top: 12px;
}
.vp-imp-card-price {
    font-family: var(--vp-font-display); font-size: 18px;
    font-weight: 600; color: var(--vp-white);
}
.vp-imp-card-views {
    font-family: var(--vp-font-mono); font-size: 10px; color: var(--vp-text-faint);
}

/* ── Shimmer loading state ─────────────────────────────────────────── */
.vp-imp-shimmer {
    background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 4px; overflow: hidden;
}
.vp-imp-shimmer-media {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg,
        var(--vp-surface) 25%, var(--vp-surface-raised) 37%, var(--vp-surface) 63%);
    background-size: 400% 100%;
    animation: vp-imp-shimmer 1.4s ease infinite;
}
.vp-imp-shimmer-line {
    height: 12px; margin: 14px 16px; border-radius: 2px;
    background: linear-gradient(90deg,
        var(--vp-surface) 25%, var(--vp-surface-raised) 37%, var(--vp-surface) 63%);
    background-size: 400% 100%;
    animation: vp-imp-shimmer 1.4s ease infinite;
}
.vp-imp-shimmer-line.short { width: 40%; }
@keyframes vp-imp-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ── Empty state ───────────────────────────────────────────────────── */
.vp-imp-empty {
    grid-column: 1 / -1; text-align: center; padding: 80px 20px;
    color: var(--vp-text-dim);
}
.vp-imp-empty h4 {
    font-family: var(--vp-font-display); color: var(--vp-white);
    font-size: 22px; margin: 0 0 8px; font-weight: 600;
}
.vp-imp-empty p {
    font-size: 13px; color: var(--vp-text-faint); margin: 0 0 20px;
}

/* Load more */
.vp-imp-load-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.vp-imp-load-more-wrap .vp-imp-btn-ghost { flex: none; padding: 12px 32px; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .vp-imp-layout { grid-template-columns: 1fr; }
    .vp-imp-sidebar {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
        z-index: 160; border-radius: 0; overflow-y: auto;
        transform: translateX(100%); transition: transform 0.25s var(--vp-ease);
    }
    .vp-imp-sidebar.is-open { transform: translateX(0); }
    .vp-imp-filter-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
    .vp-imp-stats { flex-direction: column; }
    .vp-imp-grid  { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vp-imp-shimmer-media,
    .vp-imp-shimmer-line { animation: none; }
    .vp-imp-sidebar      { transition: none; }
    .vp-imp-card         { transition: none; }
}