/* NAAGS Product Table 2.0 — additions on top of the shared .cpf-nags-app
   results-card styles. Everything else is inherited so the shop / search
   tables look identical to the Year/Make/Model results. */

.cpf-nags-app.naags-product-table{margin:0 0 8px}

/* The NAGS-built description is the point of the column, so let it breathe:
   three lines instead of two, and never truncated mid-bracket on mobile. */
.cpf-nags-app .naags-nags-desc{
    -webkit-line-clamp:3;
    max-width:520px;
    color:#475467;
}
@media(max-width:900px){
    .cpf-nags-app .naags-nags-desc{
        display:block;
        -webkit-line-clamp:none;
        overflow:visible;
        max-width:none;
    }
}

/* "View product" reuses the cart button shape but reads as a link. */
.cpf-nags-app a.naags-view-btn{
    display:inline-block;
    text-align:center;
    text-decoration:none!important;
    background:#fff!important;
    color:#0b74c9!important;
    border:1px solid #d0d5dd!important;
}
.cpf-nags-app a.naags-view-btn:hover{
    background:#f9fafb!important;
    border-color:#0b74c9!important;
}

/* Empty state */
.cpf-nags-app .naags-empty{
    padding:38px 18px;
    text-align:center;
    color:#667085;
    font-size:14px;
}

/* Pagination, matched to the card */
.naags-pagination{
    display:flex;
    justify-content:center;
    margin-top:18px;
}
.naags-pagination .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 11px;
    margin:0 4px;
    border:1px solid #e4e7ec;
    border-radius:8px;
    background:#fff;
    color:#475467;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.naags-pagination .page-numbers:hover{border-color:#0b74c9;color:#0b74c9}
.naags-pagination .page-numbers.current{
    background:#0b74c9;
    border-color:#0b74c9;
    color:#fff;
}
.naags-pagination .page-numbers.dots{border-color:transparent}
@media(max-width:767px){
    .naags-pagination{flex-wrap:wrap;gap:6px 0}
    .naags-pagination .page-numbers{min-width:32px;height:32px;margin:0 2px}
}

/* ============================================================
   v3.0 — VEHICLE BAR, MIRRORED FROM THE FITMENT PLUGIN
   ============================================================
   These rules already exist in the fitment plugin's stylesheet. They are
   repeated here because that file is enqueued under the shared "cpf-nags"
   handle, and whichever plugin registers it first wins — so a page can end
   up serving a cached or older copy of it and the bar silently keeps its old
   look. This stylesheet always loads and always carries this plugin's own
   version, so the bar is correct either way.

   Keep this block in sync with the matching one in
   car-part-fitment-filter-nags-full/assets/css/car-part-filter.css.
   ============================================================ */
.cpf-nags-app .cpf-filter-wrap,
.cpf-nags-app .filter-wrap{
    max-width:1180px!important;
    /* Clear of the sticky site header — the bar must never tuck under it. */
    margin:16px auto 22px!important;
    padding:16px 20px!important;
    background:#1d6abf!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
}
.cpf-nags-app .cpf-filter-wrap>.container,
.cpf-nags-app .filter-wrap>.container{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    /* The theme makes this a COLUMN flex container with align-items:center,
       which centres its child horizontally. That is invisible while the row
       itself is the child (it is full width), but the search page wraps the
       row in a <form> — and a form shrinks to its contents, so the whole bar
       drifted to the middle. Stretch puts it back against the left edge. */
    align-items:stretch!important;
}
/* A form wrapper (the search page's bar submits to /product-listing/) must
   not become the narrow element the row sits inside. */
.cpf-nags-app .cpf-filter-wrap form,
.cpf-nags-app .filter-wrap form{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

/* Left-aligned, like the product page's bar. */
.cpf-nags-app .cpf-filter-row,
.cpf-nags-app .filter-wrap .filter-row{
    justify-content:flex-start!important;
    gap:10px!important;
}

/* The ".filter-wrap .filter-box" width rule below also matches this cell (the
   title IS a .filter-box) and is the more specific of the two — which is what
   squeezed the title into a 160px field slot and let the first dropdown ride
   up over the end of it. Matching that specificity here settles it. */
.cpf-nags-app .filter-wrap .filter-box.cpf-filter-title,
.cpf-nags-app .cpf-filter-row .filter-box.cpf-filter-title,
.cpf-nags-app .cpf-filter-title{
    flex:0 0 auto!important;
    width:auto!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:700!important;
    white-space:nowrap;
    margin-right:8px!important;
}
/* The theme centres every ".filter-wrap .filter-box label"; this is a title,
   not a field caption, so it reads from the left like the product page's. */
.cpf-nags-app .cpf-filter-title label{color:#fff!important;margin:0!important;text-align:left!important;width:auto!important}

/* Same compact field widths as the product page: Year narrowest, Model
   widest, so the row keeps its proportions as Make and Model appear. */
.cpf-nags-app .filter-wrap .filter-box{flex:0 1 auto!important;width:160px!important;min-width:0!important}
.cpf-nags-app .filter-wrap .filter-box:has(#year-select){width:140px!important}
.cpf-nags-app .filter-wrap .filter-box:has(#make-select){width:168px!important}
.cpf-nags-app .filter-wrap .filter-box:has(#model-select){width:212px!important}
.cpf-nags-app .filter-wrap .cpf-variant-box{width:260px!important}
/* The theme pins ".filter-wrap .selectric-wrapper{min-width:155px}" and
   centres each cell, so the control sat at its own minimum width instead of
   filling the cell — which is what cut "4-Series Gran Coupe" short. */
.cpf-nags-app .filter-wrap .filter-box>*{width:100%!important}
.cpf-nags-app .filter-wrap .selectric-wrapper,
.cpf-nags-app .filter-wrap .cpf-variant-box .selectric-wrapper,
.cpf-nags-app .filter-wrap .selectric{min-width:0!important;width:100%!important}

/* The white pill fields, described twice: once for the native <select> and
   once for the replacement the theme's Selectric script draws in its place
   (it hides the real element, so styling only the <select> shows nothing). */
.cpf-nags-app .cpf-filter-row select,
.cpf-nags-app .filter-wrap .filter-box select{
    height:42px!important;
    border:1px solid #fff!important;
    /* Near-square, not a pill — same 8px as the product page's bar. */
    border-radius:8px!important;
    background:#fff!important;
    color:#101828!important;
    font-size:14px!important;
}
.cpf-nags-app .filter-wrap .selectric{
    height:42px!important;
    border:1px solid #fff!important;
    border-radius:8px!important;
    background:#fff!important;
    box-sizing:border-box!important;
}
.cpf-nags-app .filter-wrap .selectric .label{
    height:40px!important;
    line-height:40px!important;
    margin:0 34px 0 18px!important;
    font-size:14px!important;
    color:#101828!important;
}
.cpf-nags-app .filter-wrap .selectric .button{width:34px!important;height:40px!important;background:transparent!important}
.cpf-nags-app .filter-wrap .selectric .button:after{line-height:40px!important}
/* Square where the list meets the field, rounded at the far end, so the two
   read as one control. */
.cpf-nags-app .filter-wrap .selectric-items{border-radius:0 0 8px 8px!important;text-align:left!important}
.cpf-nags-app .filter-wrap .selectric-wrapper.selectric-above .selectric-items{border-radius:8px 8px 0 0!important}

/* Results load on their own now — see the file header above. */
.cpf-nags-app .cpf-filter-row .cpf-submit-box,
.cpf-nags-app .filter-wrap .cpf-submit-box{display:none!important}

/* Tablet: the fields share the remaining width rather than one of them
   wrapping to a second line — matching the product page's bar. */
@media(max-width:900px) and (min-width:768px){
    /* Shrink-only: "flex:1 1 …" would let a lone Select Year (before Make and
       Model appear) stretch across the whole bar. */
    .cpf-nags-app .filter-wrap .filter-box,
    .cpf-nags-app .filter-wrap .filter-box:has(#year-select),
    .cpf-nags-app .filter-wrap .filter-box:has(#make-select),
    .cpf-nags-app .filter-wrap .filter-box:has(#model-select){flex:0 1 auto!important;min-width:110px!important}
}

@media(max-width:767px){
    /* v2.0.47 — the bar must be EXACTLY as wide as the Glass Type card
       underneath it. It used to keep a 14px side margin of its own while the
       results card below sat flush in the page container, so the blue band
       read as narrower than the white card. Both are pinned to the same
       edges here. */
    .cpf-nags-app .cpf-filter-wrap,
    .cpf-nags-app .filter-wrap,
    .cpf-nags-app .cpf-results-shell{
        margin-left:0!important;
        margin-right:0!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }
    .cpf-nags-app .cpf-filter-wrap,
    .cpf-nags-app .filter-wrap{
        margin-top:12px!important;
        margin-bottom:16px!important;
        padding:14px!important;
    }
    .cpf-nags-app .cpf-filter-row,
    .cpf-nags-app .filter-wrap .filter-row{
        flex-direction:column!important;
        align-items:stretch!important;
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        gap:10px!important;
    }
    .cpf-nags-app .filter-wrap .filter-box.cpf-filter-title,
    .cpf-nags-app .cpf-filter-title{margin:0 0 2px!important;font-size:16px!important;justify-content:flex-start!important}
    /* Full width on a phone, including the per-field widths set above. */
    .cpf-nags-app .filter-wrap .filter-box,
    .cpf-nags-app .filter-wrap .filter-box:has(#year-select),
    .cpf-nags-app .filter-wrap .filter-box:has(#make-select),
    .cpf-nags-app .filter-wrap .filter-box:has(#model-select),
    .cpf-nags-app .filter-wrap .cpf-variant-box{width:100%!important;max-width:none!important}
}