/* ================================================================
   Westcan Vehicle Fit Filter  v2.0
   Palette: #B11F28 red · #fff white · #111 black
   ================================================================ */
:root {
    --red:      #B11F28;
    --red-dk:   #8A161D;
    --red-lt:   #FFF0F1;
    --red-mid:  rgba(177,31,40,.12);
    --black:    #111111;
    --sub:      #555555;
    --border:   #E0E0E0;
    --bg:       #F7F7F7;
    --white:    #FFFFFF;
    --radius:   8px;
    --shadow:   0 2px 12px rgba(0,0,0,.08);
    --shadow-h: 0 6px 24px rgba(177,31,40,.18);
}

#wvf-app {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--black);
}

/* ── Progress stepper ───────────────────────────────────────── */
.wvf-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding: 0 4px;
}

.wvf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wvf-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: #aaa;
    transition: background .25s, border-color .25s, color .25s;
}
.wvf-step.active   .wvf-dot { background: var(--red); border-color: var(--red); color: #fff; }
.wvf-step.done     .wvf-dot { background: var(--red-mid); border-color: var(--red); color: var(--red); }

.wvf-step-lbl {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: #aaa;
    transition: color .25s;
}
.wvf-step.active .wvf-step-lbl { color: var(--red); }
.wvf-step.done   .wvf-step-lbl { color: var(--sub); }

.wvf-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 6px;
    margin-bottom: 20px; /* align with dot centre */
    transition: background .25s;
}
.wvf-connector.done { background: var(--red); }

/* ── Selection summary pill ─────────────────────────────────── */
.wvf-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--red-lt);
    border: 1px solid rgba(177,31,40,.2);
    border-radius: var(--radius);
    font-size: 13px;
}

/* Base pill — works for both <span> (current step) and <button> (link) */
#wvf-app .wvf-sel-tag,
#wvf-app button.wvf-sel-tag,
#wvf-app span.wvf-sel-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    background: var(--white) !important;
    border: 1px solid rgba(177,31,40,.3) !important;
    border-radius: 20px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--red) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    vertical-align: middle;
}
#wvf-app .wvf-sel-tag .wvf-sel-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--red) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Clickable breadcrumb pill — same look but clearly interactive on hover */
#wvf-app button.wvf-sel-tag--link {
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s,
                transform .12s, box-shadow .15s !important;
}
#wvf-app button.wvf-sel-tag--link:hover,
#wvf-app button.wvf-sel-tag--link:focus-visible,
#wvf-app button.wvf-sel-tag--link:active {
    background: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
    box-shadow: 0 2px 8px rgba(177,31,40,.25) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
    outline: none !important;
}
#wvf-app button.wvf-sel-tag--link:hover .wvf-sel-dot,
#wvf-app button.wvf-sel-tag--link:focus-visible .wvf-sel-dot {
    background: var(--white) !important;
}

/* Current step's pill — bolder, not interactive */
#wvf-app .wvf-sel-tag--current,
#wvf-app span.wvf-sel-tag--current {
    background: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
    cursor: default !important;
}
#wvf-app .wvf-sel-tag--current .wvf-sel-dot {
    background: var(--white) !important;
}

.wvf-sel-sep {
    color: #aaa;
    font-size: 14px;
    user-select: none;
}

/* ── Header row ─────────────────────────────────────────────── */
.wvf-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* ── Back button ────────────────────────────────────────────── */
#wvf-app .wvf-back,
#wvf-app button.wvf-back {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sub) !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
}
#wvf-app .wvf-back svg { width: 16px; height: 16px; stroke: currentColor; }
#wvf-app .wvf-back:hover,
#wvf-app button.wvf-back:hover {
    border-color: var(--black) !important;
    color: var(--black) !important;
    background: var(--bg) !important;
}

/* ── Step prompt ────────────────────────────────────────────── */
#wvf-prompt {
    display: flex; flex-direction: column; gap: 2px;
}
.wvf-prompt-step {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--red);
}
.wvf-prompt-text {
    font-size: 18px; font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

/* ── Sort ───────────────────────────────────────────────────── */
.wvf-sort-lbl { font-size: 12px; color: var(--sub); margin-right: 6px; }
.wvf-sort-sel {
    font-family: inherit; font-size: 13px;
    border: 1.5px solid var(--border); border-radius: 6px;
    padding: 7px 12px; background: var(--white); color: var(--black); cursor: pointer;
}
.wvf-sort-sel:focus { outline: none; border-color: var(--red); }

/* ── Spinner ────────────────────────────────────────────────── */
#wvf-spinner {
    display: flex; justify-content: center; padding: 48px 0;
}
.wvf-ring {
    width: 40px; height: 40px;
    border: 3px solid var(--border); border-top-color: var(--red);
    border-radius: 50%;
    animation: wvf-spin .7s linear infinite;
}
@keyframes wvf-spin { to { transform: rotate(360deg); } }

/* ── Panel ──────────────────────────────────────────────────── */
.wvf-panel { margin-bottom: 12px; }

/* ── TYPE CARDS (step 1) ────────────────────────────────────── */
.wvf-type-wrap {
    display: grid;
    /* 2 columns when there's enough room, collapses to 1 column on
       narrow screens for readability. */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 600px) {
    .wvf-type-wrap { grid-template-columns: 1fr; }
}

#wvf-app .wvf-type-card,
#wvf-app button.wvf-type-card {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 20px;
    padding: 24px 28px !important;
    background: var(--white) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    cursor: pointer;
    font-family: inherit !important;
    color: var(--black) !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .18s, box-shadow .18s, transform .15s, background .18s;
    position: relative;
    overflow: hidden;
}
#wvf-app .wvf-type-card::before,
#wvf-app button.wvf-type-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--red);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .2s;
}
#wvf-app .wvf-type-card:hover::before,
#wvf-app button.wvf-type-card:hover::before { transform: scaleY(1); }

#wvf-app .wvf-type-card:hover,
#wvf-app button.wvf-type-card:hover,
#wvf-app .wvf-type-card:focus,
#wvf-app button.wvf-type-card:focus {
    border-color: var(--red) !important;
    box-shadow: var(--shadow-h) !important;
    transform: translateY(-2px);
    background: var(--red-lt) !important;
}
.wvf-type-art {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVGs loaded via <img> — start mid-grey so they blend with the card's
   neutral state, then filter to solid red on hover. filter: brightness(0)
   normalises to pure black first so saturate/hue-rotate can re-tint to the
   exact brand red (#B11F28) reliably across browsers. */
.wvf-type-img {
    width: 84%;
    height: auto;
    opacity: .55;
    filter: brightness(0) saturate(0);  /* default: grey silhouette */
    transition: opacity .18s, filter .18s, transform .18s;
}
#wvf-app .wvf-type-card:hover .wvf-type-img,
#wvf-app button.wvf-type-card:hover .wvf-type-img {
    opacity: 1;
    /* Recipe to shift a black SVG to #B11F28:
       invert → sepia → saturate → hue-rotate → brightness. Dialed to match. */
    filter: brightness(0) saturate(100%)
            invert(15%) sepia(95%) saturate(5430%)
            hue-rotate(347deg) brightness(94%) contrast(101%);
    transform: scale(1.04);
}

.wvf-type-info {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
}
.wvf-type-info strong {
    font-size: 22px; font-weight: 800; color: var(--black);
    letter-spacing: -.02em;
}
.wvf-type-info span {
    font-size: 13px; color: var(--sub);
}
.wvf-type-arrow {
    font-size: 22px; color: var(--border);
    transition: color .18s, transform .18s;
}
.wvf-type-card:hover .wvf-type-arrow { color: var(--red); transform: translateX(4px); }

/* ── MAKE / MODEL cards (steps 2–3) ─────────────────────────── */
#wvf-app .wvf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

#wvf-app .wvf-sel-card,
#wvf-app button.wvf-sel-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px !important;
    background: var(--white) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--black) !important;
    cursor: pointer;
    text-align: center;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s, color .15s,
                box-shadow .15s, transform .12s;
    min-height: 80px;
    line-height: 1.3 !important;
    outline: none !important;
}
#wvf-app .wvf-sel-card:hover,
#wvf-app button.wvf-sel-card:hover,
#wvf-app .wvf-sel-card:focus,
#wvf-app button.wvf-sel-card:focus {
    border-color: var(--red) !important;
    background: var(--red) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-h) !important;
    transform: translateY(-2px);
}
#wvf-app .wvf-sel-card.active,
#wvf-app button.wvf-sel-card.active {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 16px rgba(177,31,40,.35) !important;
}

/* ── YEAR grid (step 4) ─────────────────────────────────────── */
#wvf-app .wvf-year-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#wvf-app .wvf-year-card,
#wvf-app button.wvf-year-card {
    width: 80px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--white) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--black) !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    transition: border-color .15s, background .15s, color .15s,
                box-shadow .15s, transform .12s;
}
#wvf-app .wvf-year-card:hover,
#wvf-app button.wvf-year-card:hover,
#wvf-app .wvf-year-card:focus,
#wvf-app button.wvf-year-card:focus {
    border-color: var(--red) !important;
    background: var(--red) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-h) !important;
    transform: translateY(-2px);
}
#wvf-app .wvf-year-card.active,
#wvf-app button.wvf-year-card.active {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 16px rgba(177,31,40,.35) !important;
}

/* ── Results layout ─────────────────────────────────────────── */
.wvf-results-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    /* Cap the whole results area to the viewport so the sidebar can stay
       visible while the products column scrolls internally. The 80vh
       ceiling leaves room for surrounding page chrome. */
    max-height: 80vh;
}

/* ── Category sidebar ───────────────────────────────────────── */
.wvf-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: var(--radius);
    overflow: hidden;
    /* Sticky position is no longer needed — the layout itself is height-
       capped, so the sidebar simply takes up its share of that height
       and stays in view as the products column scrolls. */
    align-self: stretch;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.wvf-sb-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--sub);
    flex-shrink: 0;
}
.wvf-sb-head svg { width: 14px; height: 14px; stroke: var(--red); flex-shrink: 0; }

/* The category list itself can scroll inside the sidebar when there are
   too many categories to fit. */
#wvf-cats {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wvf-cat-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px;
    font-size: 13px; color: var(--black);
    cursor: pointer;
    transition: background .12s, color .12s;
    gap: 6px;
}
.wvf-cat-item:hover { background: var(--red-lt); color: var(--red); }
.wvf-cat-item.active {
    background: var(--red-lt); color: var(--red);
    font-weight: 700;
    border-right: 3px solid var(--red);
}
.wvf-cat-all { border-bottom: 1px solid var(--border); }
.wvf-cat-n {
    min-width: 24px; height: 18px; padding: 0 5px;
    background: var(--bg); color: #999;
    border-radius: 10px; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .12s, color .12s;
}
.wvf-cat-item:hover .wvf-cat-n,
.wvf-cat-item.active .wvf-cat-n {
    background: var(--red-mid); color: var(--red);
}

/* ── Products area ──────────────────────────────────────────── */
.wvf-main {
    flex: 1;
    min-width: 0;
    /* Match the layout height cap so the products column scrolls
       internally. overscroll-behavior: contain prevents scroll-chaining
       so reaching the bottom of the products doesn't start scrolling
       the page underneath. */
    align-self: stretch;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Internal padding so cards don't sit flush against the scrollbar */
    padding-right: 4px;
}

/* ── Brand-styled scrollbars ────────────────────────────────── */
/* Both the products column and sidebar's category list use the same
   thin red-on-light scrollbar to feel cohesive with the rest of the UI. */
.wvf-main::-webkit-scrollbar,
#wvf-cats::-webkit-scrollbar {
    width: 8px;
}
.wvf-main::-webkit-scrollbar-track,
#wvf-cats::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 4px;
}
.wvf-main::-webkit-scrollbar-thumb,
#wvf-cats::-webkit-scrollbar-thumb {
    background: rgba(177, 31, 40, .35);
    border-radius: 4px;
    transition: background .15s;
}
.wvf-main::-webkit-scrollbar-thumb:hover,
#wvf-cats::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}
/* Firefox */
.wvf-main,
#wvf-cats {
    scrollbar-width: thin;
    scrollbar-color: rgba(177, 31, 40, .35) var(--bg);
}

.wvf-count {
    font-size: 13px; color: var(--sub); margin-bottom: 16px;
}
.wvf-count strong { color: var(--black); }

.wvf-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}

/* ── Product card ───────────────────────────────────────────── */
.wvf-pcard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.wvf-pcard:hover {
    box-shadow: var(--shadow-h);
    transform: translateY(-2px);
    border-color: var(--red);
}
.wvf-plink { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.wvf-pimg {
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 14px; min-height: 150px;
}
.wvf-img { width: 100%; max-height: 130px; object-fit: contain; }
.wvf-pbody { padding: 10px 12px; flex: 1; }
.wvf-pname { font-size: 13px; font-weight: 600; color: var(--black); margin: 0 0 4px; line-height: 1.35; }
.wvf-psku  { font-size: 11px; color: #aaa; margin: 0; }
.wvf-pcta  {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; background: var(--red); color: #fff;
    font-size: 12px; font-weight: 700;
    opacity: 0; transform: translateY(4px);
    transition: opacity .18s, transform .18s;
}
.wvf-pcard:hover .wvf-pcta { opacity: 1; transform: translateY(0); }

.wvf-empty {
    text-align: center; color: var(--sub); padding: 48px 0; font-size: 15px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
    .wvf-type-card { min-width: 100%; }
    .wvf-results-layout {
        flex-direction: column;
        /* Drop the height cap on mobile — single-column stack should use
           normal page scrolling, not nested scroll containers. */
        max-height: none;
    }
    .wvf-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }
    #wvf-cats { overflow-y: visible; }
    .wvf-main {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    .wvf-pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .wvf-year-card { width: 68px; height: 46px; font-size: 14px; }
    .wvf-stepper { gap: 0; }
    .wvf-step-lbl { display: none; }
}