/* v2.0.10 isolation: every visual rule is scoped to .cpf-nags-app so this plugin cannot restyle Sky Elite VIP tabs, ETA tracking, WPForms, or other site components. */
/* Vehicle selector — keep the working selector compact and neutral. */
.cpf-nags-app .cpf-filter-wrap{margin:18px auto 24px;max-width:1180px}.cpf-nags-app .cpf-filter-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.cpf-nags-app .cpf-filter-title{font-weight:600;margin-right:4px}.cpf-nags-app .cpf-filter-row select, .cpf-nags-app .cpf-filter-row button{height:40px;min-width:155px;border:1px solid #d8dde5;border-radius:6px;background:#fff;padding:0 16px;text-align:center;box-shadow:none}.cpf-nags-app .cpf-filter-row select:focus, .cpf-nags-app .cpf-filter-row button:focus{outline:0;border-color:#0b74c9;box-shadow:0 0 0 3px rgba(11,116,201,.09)}.cpf-nags-app .cpf-filter-row button{cursor:pointer;min-width:110px;background:#0b74c9;color:#fff;border-color:#0b74c9;font-weight:600}.cpf-nags-app .cpf-variant-select{min-width:260px!important}

/* Loading / messages */
.cpf-nags-app .cpf-loading-state{min-height:220px;display:flex;align-items:center;justify-content:center;gap:11px;color:#667085}.cpf-nags-app .cpf-loading-spinner{width:22px;height:22px;border:2px solid #d9e2ec;border-top-color:#0b74c9;border-radius:50%;animation:cpfspin .72s linear infinite}@keyframes cpfspin{to{transform:rotate(360deg)}}.cpf-nags-app .cpf-msg{text-align:center;padding:32px 18px;color:#475467}.cpf-nags-app .cpf-error{color:#b42318}.cpf-nags-app .cpf-empty-state{margin:22px 0;padding:34px 26px;border:1px solid #e4e7ec;border-radius:12px;background:#fff;text-align:center}.cpf-nags-app .cpf-empty-state strong, .cpf-nags-app .cpf-empty-state span{display:block}.cpf-nags-app .cpf-empty-state strong{font-size:17px;color:#101828;margin-bottom:6px}.cpf-nags-app .cpf-empty-state span{font-size:14px;color:#667085}

/* Results shell */
.cpf-nags-app .cpf-results-shell{max-width:1180px;margin:0 auto 48px}.cpf-nags-app .cpf-result-head{padding:4px 2px 18px;text-align:left}.cpf-nags-app .cpf-result-eyebrow{font-size:12px;line-height:1.2;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0b74c9;margin-bottom:7px}.cpf-nags-app .cpf-result-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cpf-nags-app .cpf-result-head h1{margin:0!important;color:#101828;font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:700;letter-spacing:-.02em}.cpf-nags-app .cpf-fitment-count{display:inline-flex;align-items:center;height:27px;padding:0 10px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:12px;font-weight:600}.cpf-nags-app .cpf-fitment-summary{margin-top:7px;color:#667085;font-size:14px;line-height:1.45}

.cpf-nags-app .cpf-results-card{background:#fff;border:1px solid #e4e7ec;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.03)}.cpf-nags-app .cpf-results-toolbar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid #eaecf0;background:#fbfcfd}.cpf-nags-app .cpf-toolbar-label{flex:0 0 auto;color:#667085;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* Glass type tabs */
.cpf-nags-app .tabs-links{display:flex;align-items:center;gap:3px;flex-wrap:wrap;list-style:none;margin:0;padding:3px;background:#f2f4f7;border:1px solid #eaecf0;border-radius:9px}.cpf-nags-app .tabs-links li{display:flex;align-items:center;margin:0!important;padding:0!important;min-height:38px}.cpf-nags-app .tab-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px;height:38px;min-height:38px;padding:0 12px!important;border:0!important;border-radius:7px;background:transparent;color:#475467!important;text-decoration:none!important;font-size:13px;font-weight:600;line-height:1!important;box-shadow:none!important;vertical-align:middle}.cpf-nags-app .tab-btn span{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:100%;margin:0!important;padding:0!important;line-height:1!important;vertical-align:middle}.cpf-nags-app .tab-btn em{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin:0;padding:0 6px;border-radius:999px;background:#fff;color:#667085;font-style:normal;font-size:11px;line-height:20px;box-shadow:inset 0 0 0 1px #e4e7ec}.cpf-nags-app .tab-btn:hover{background:#e9edf2;color:#344054!important}.cpf-nags-app .tab-btn.active{background:#fff;color:#0b74c9!important;box-shadow:0 1px 2px rgba(16,24,40,.08)!important}.cpf-nags-app .tab-btn.active em{background:#eef6fc;color:#0b74c9;box-shadow:none}.cpf-nags-app .tab-content{display:none}.cpf-nags-app .tab-content.active{display:block}

/* Product table */
.cpf-nags-app .cpf-table-wrap{width:100%;overflow-x:auto}.cpf-nags-app .product-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;margin:0!important;background:#fff}.cpf-nags-app .product-table thead th{padding:11px 16px;border:0;border-bottom:1px solid #eaecf0;background:#fff;color:#667085;font-size:11px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;text-align:left;white-space:nowrap}.cpf-nags-app .product-table tbody td{padding:15px 16px;border:0;border-bottom:1px solid #f0f1f3;vertical-align:middle;color:#344054;font-size:14px;line-height:1.45}.cpf-nags-app .product-table tbody tr:last-child td{border-bottom:0}.cpf-nags-app .cpf-product-row{transition:background-color .16s ease}.cpf-nags-app .cpf-product-row:hover td{background:#fafbfc}.cpf-nags-app .cpf-available-highlight td{background:#fff}.cpf-nags-app .cpf-part-cell{min-width:132px}.cpf-nags-app .cpf-part-cell strong{display:block;color:#101828;font-size:15px;font-weight:700;letter-spacing:.01em}.cpf-nags-app .cpf-part-link{display:block;text-decoration:none}.cpf-nags-app .cpf-part-link:hover strong{color:#0b74c9;text-decoration:underline}.cpf-nags-app .cpf-product-desc{max-width:470px;color:#475467;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cpf-nags-app .cpf-price{font-weight:700;color:#101828;white-space:nowrap}.cpf-nags-app .cpf-price .woocommerce-Price-amount{font-weight:700}

/* Status */
.cpf-nags-app .stock-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:700}.cpf-nags-app .stock-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#98a2b3}.cpf-nags-app .stock-status.instock{color:#067647}.cpf-nags-app .stock-status.instock:before{background:#12b76a}.cpf-nags-app .stock-status.outofstock{color:#667085}.cpf-nags-app .stock-status.outofstock:before{background:#98a2b3}

/* Detail trigger / expandable fitment */
.cpf-nags-app .cpf-info-toggle{display:inline-flex;align-items:center;margin-top:5px;border:0;background:transparent;color:#0b74c9;padding:0;cursor:pointer;font-size:12px;font-weight:600}.cpf-nags-app .cpf-info-toggle:hover{text-decoration:underline}.cpf-nags-app .cpf-detail-row>td{padding:0!important;background:#f8fafc!important}.cpf-nags-app .cpf-nags-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:9px;padding:18px 22px;color:#475467;font-size:13px;line-height:1.5;border-bottom:1px solid #eaecf0}.cpf-nags-app .cpf-nags-detail strong{color:#344054;font-weight:650}.cpf-nags-app .cpf-nags-detail a{color:#0b74c9;text-decoration:none}.cpf-nags-app .cpf-nags-detail a:hover{text-decoration:underline}

/* Quantity / action */
.cpf-nags-app .quantity{display:inline-grid;grid-template-columns:30px 42px 30px;align-items:center;height:34px;border:1px solid #d0d5dd;border-radius:7px;overflow:hidden;background:#fff}.cpf-nags-app .quantity input[type=button]{width:30px;height:32px;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#f9fafb!important;color:#344054!important;font-size:16px!important;line-height:32px!important;cursor:pointer}.cpf-nags-app .quantity input[type=button]:hover{background:#f2f4f7!important}.cpf-nags-app .quantity input[type=number]{width:42px;height:32px;margin:0!important;padding:0!important;border:0!important;border-left:1px solid #eaecf0!important;border-right:1px solid #eaecf0!important;border-radius:0!important;background:#fff!important;color:#101828!important;text-align:center!important;box-shadow:none!important;-moz-appearance:textfield}.cpf-nags-app .quantity input[type=number]::-webkit-inner-spin-button, .cpf-nags-app .quantity input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cpf-nags-app .cpf-action-cell{text-align:right!important}.cpf-nags-app .cpf-cart-btn{min-width:108px;height:36px;padding:0 15px!important;border:1px solid #0b74c9!important;border-radius:7px!important;background:#0b74c9!important;color:#fff!important;font-size:13px!important;font-weight:700!important;line-height:34px!important;white-space:nowrap;cursor:pointer;box-shadow:none!important}.cpf-nags-app .cpf-cart-btn:hover{background:#0968b5!important;border-color:#0968b5!important}.cpf-nags-app .cpf-cart-btn:disabled{background:#f2f4f7!important;border-color:#e4e7ec!important;color:#98a2b3!important;cursor:not-allowed}

/* Existing selector/theme compatibility */
.cpf-nags-app .filter-wrap .container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.cpf-nags-app .filter-wrap .filter-row{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.cpf-nags-app .filter-wrap .filter-box{display:flex;align-items:center;justify-content:center;text-align:center}.cpf-nags-app .filter-wrap .filter-box label{margin:0;text-align:center}.cpf-nags-app .filter-wrap .filter-box select, .cpf-nags-app .filter-wrap .cpf-vehicle-submit{width:100%;text-align:center;text-align-last:center}.cpf-nags-app .filter-wrap .selectric-wrapper{min-width:155px}.cpf-nags-app .filter-wrap .cpf-variant-box .selectric-wrapper{min-width:260px}

/* Responsive result cards */
@media(max-width:900px){.cpf-nags-app .cpf-results-toolbar{align-items:flex-start;flex-direction:column;gap:9px}.cpf-nags-app .cpf-nags-detail{grid-template-columns:1fr}.cpf-nags-app .product-table thead{display:none}.cpf-nags-app .cpf-table-wrap{overflow:visible}.cpf-nags-app .product-table, .cpf-nags-app .product-table tbody{display:block;width:100%}.cpf-nags-app .product-table tbody{padding:10px}.cpf-nags-app .product-table .cpf-product-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:0 0 10px;border:1px solid #e4e7ec;border-radius:10px;overflow:hidden;background:#fff}.cpf-nags-app .product-table .cpf-product-row td{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;min-height:48px;padding:10px 14px;border-bottom:1px solid #f2f4f7!important;background:#fff!important}.cpf-nags-app .product-table .cpf-product-row td:before{content:attr(data-label);padding-right:10px;color:#98a2b3;font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase}.cpf-nags-app .product-table .cpf-product-row td:nth-child(1), .cpf-nags-app .product-table .cpf-product-row td:nth-child(2){grid-column:1/-1}.cpf-nags-app .product-table .cpf-product-row td:nth-last-child(-n/**/+2){border-bottom:0!important}.cpf-nags-app .cpf-part-cell, .cpf-nags-app .cpf-product-desc{max-width:none}.cpf-nags-app .cpf-action-cell{text-align:left!important}.cpf-nags-app .cpf-detail-row{display:table-row}.cpf-nags-app .cpf-detail-row td{display:block!important;width:auto!important;margin:-10px 10px 12px;border:1px solid #e4e7ec!important;border-top:0!important;border-radius:0 0 10px 10px}.cpf-nags-app .cpf-nags-detail{padding:16px}.cpf-nags-app .cpf-cart-btn{width:100%;max-width:180px}}

@media(max-width:767px){.cpf-nags-app .cpf-filter-row{flex-direction:column}.cpf-nags-app .cpf-filter-row>*{width:100%!important;max-width:360px}.cpf-nags-app .filter-wrap .filter-row{width:100%;max-width:380px;margin:0 auto;flex-direction:column;align-items:center}.cpf-nags-app .filter-wrap .filter-box{width:100%;max-width:360px}.cpf-nags-app .filter-wrap .selectric-wrapper{width:100%;min-width:0}.cpf-nags-app .cpf-results-shell{margin:0 -2px 32px}.cpf-nags-app .cpf-result-head{padding:4px 2px 14px}.cpf-nags-app .cpf-result-head h1{font-size:25px}.cpf-nags-app .cpf-results-card{border-radius:10px}.cpf-nags-app .cpf-results-toolbar{padding:12px}.cpf-nags-app .tabs-links{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}.cpf-nags-app .tab-btn{white-space:nowrap}.cpf-nags-app .product-table tbody{padding:8px}.cpf-nags-app .product-table .cpf-product-row{display:block}.cpf-nags-app .product-table .cpf-product-row td{display:grid;grid-template-columns:104px minmax(0,1fr)}.cpf-nags-app .product-table .cpf-product-row td:nth-last-child(-n/**/+2){border-bottom:1px solid #f2f4f7!important}.cpf-nags-app .product-table .cpf-product-row td:last-child{border-bottom:0!important}.cpf-nags-app .cpf-detail-row td{margin:-8px 8px 10px}.cpf-nags-app .cpf-cart-btn{max-width:none}.cpf-nags-app .cpf-nags-detail{white-space:normal;min-width:0}}


/* NAGS-only results: show official fitment even when no WooCommerce product exists. */
.cpf-nags-app .cpf-nags-only-block{margin-top:22px}.cpf-nags-app .cpf-nags-only-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 2px 10px}.cpf-nags-app .cpf-nags-only-head h2{margin:0!important;color:#101828;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em}.cpf-nags-app .cpf-db-count{flex:0 0 auto;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:#eef6fc;color:#0b74c9;font-size:12px;font-weight:700}.cpf-nags-app .cpf-nags-only-note{margin:0 2px 12px;color:#667085;font-size:13px;line-height:1.5}.cpf-nags-app .cpf-nags-only-card{border-color:#d9e7f2}.cpf-nags-app .cpf-source-badge{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;background:#eef6fc;color:#0b74c9;font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase}.cpf-nags-app .cpf-catalog-status{display:inline-flex;align-items:center;gap:6px;color:#667085;font-size:12px;font-weight:650;white-space:nowrap}.cpf-nags-app .cpf-catalog-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#98a2b3}.cpf-nags-app .cpf-db-detail-btn{margin-top:0}.cpf-nags-app .cpf-db-only-row td{background:#fff}.cpf-nags-app .cpf-db-only-row:hover td{background:#fafcff}
@media(max-width:900px){.cpf-nags-app .cpf-nags-only-head{align-items:flex-start;flex-direction:column;gap:8px}.cpf-nags-app .cpf-nags-only-table .cpf-product-row td:nth-child(1), .cpf-nags-app .cpf-nags-only-table .cpf-product-row td:nth-child(2){grid-column:1/-1}.cpf-nags-app .cpf-nags-only-table .cpf-product-row td{grid-template-columns:112px minmax(0,1fr)}}
@media(max-width:767px){.cpf-nags-app .cpf-nags-only-head h2{font-size:18px}.cpf-nags-app .cpf-nags-only-note{font-size:12px}.cpf-nags-app .cpf-nags-only-table .cpf-product-row td{grid-template-columns:104px minmax(0,1fr)}}

/* v2.0.6: keep glass-type labels optically centered even when theme link styles override line-height. */
.cpf-nags-app .cpf-results-toolbar .tabs-links, .cpf-nags-app .cpf-results-toolbar .tabs-links li, .cpf-nags-app .cpf-results-toolbar .tab-btn, .cpf-nags-app .cpf-results-toolbar .tab-btn span{box-sizing:border-box}.cpf-nags-app .cpf-results-toolbar .tab-btn{top:auto!important;transform:none!important}.cpf-nags-app .cpf-results-toolbar .tab-btn span{position:static!important}

/* v2.0.9 — slightly stronger full-row blue highlight for products available now.
   Desktop, tablet and mobile use the same Sky Titan blue visual language. */
.cpf-nags-app .cpf-product-row.cpf-available-highlight{
    position:relative;
    box-shadow:inset 3px 0 0 #0b74c9;
}
.cpf-nags-app .cpf-product-row.cpf-available-highlight td{
    background:#e6f2fb;
}
.cpf-nags-app .cpf-product-row.cpf-available-highlight:hover td{
    background:#dcecf8;
}
/* v2.0.18 — the part number stays near-black on in-stock rows too.
   It used to turn blue (#075fa8) on every highlighted row, which on a phone
   meant a big bold blue heading sitting on an already-blue card. The row is
   called out well enough by its blue tint and left bar; the part number is
   plain dark text now and reads much cleaner. The "Fitment details" button
   below it keeps its blue, because that one is actually clickable. */
.cpf-nags-app .cpf-product-row.cpf-available-highlight .cpf-part-cell strong{
    color:#101828;
}
.cpf-nags-app .cpf-product-row.cpf-available-highlight .stock-status.instock{
    padding:5px 10px;
    border:1px solid #bfdcf1;
    border-radius:999px;
    background:#e7f2fb;
    color:#075fa8;
}
.cpf-nags-app .cpf-product-row.cpf-available-highlight .stock-status.instock:before{
    background:#0b74c9;
    box-shadow:0 0 0 3px rgba(11,116,201,.10);
}

@media(max-width:900px){
    .cpf-nags-app .product-table .cpf-product-row.cpf-available-highlight{
        border-color:#bfdcf1;
        box-shadow:inset 3px 0 0 #0b74c9,0 1px 2px rgba(16,24,40,.03);
    }
    .cpf-nags-app .product-table .cpf-product-row.cpf-available-highlight td{
        background:#e6f2fb!important;
    }
    .cpf-nags-app .product-table .cpf-product-row.cpf-available-highlight:hover td{
        background:#dcecf8!important;
    }
}

@media(max-width:767px){
    .cpf-nags-app .product-table .cpf-product-row.cpf-available-highlight{
        border-color:#bfdcf1;
        box-shadow:inset 3px 0 0 #0b74c9,0 1px 2px rgba(16,24,40,.03);
    }
    .cpf-nags-app .product-table .cpf-product-row.cpf-available-highlight td{
        background:#e6f2fb!important;
    }
}

/* v2.0.17 — account for the site's sticky/fixed header so the top of this
   results page (and the fitment filter box above it) is never left hidden
   underneath it: on mobile the header re-appears while scrolling up and
   previously had nothing below it to clear, which is why the "Vehicle
   Fitment" title and the first product rows looked like they jumped/were
   covered. scroll-margin-top reserves that space for any jump/anchor
   scroll, and the small top padding keeps the same space even when the
   page loads without a jump at all. Adjust the 130px value if the theme's
   sticky header height ever changes. */
.cpf-nags-app .cpf-filter-wrap,
.cpf-nags-app .cpf-results-shell{
    scroll-margin-top:130px;
}
.cpf-nags-app .cpf-results-shell{
    padding-top:8px;
}
@media(max-width:767px){
    .cpf-nags-app .cpf-filter-wrap,
    .cpf-nags-app .cpf-results-shell{
        scroll-margin-top:150px;
    }
}

/* v2.0.18 — mobile card cells were being resized by the THEME, not by us.
 *
 * style.css styles the product-listing table globally:
 *     .plp-wrapper table tr td              { min-width: 100px }
 *     .plp-wrapper table tr td:first-child  { width: 40px }
 *     @media (max-width:767px) {
 *       .plp-wrapper table tr td:first-child { width: 20px }
 *     }
 *
 * On desktop those are harmless: the cells are still real table cells, where
 * "width" is only a hint that automatic table layout is free to overrule. But
 * this stylesheet turns every row into a card below 900px — the row becomes a
 * block/grid and each cell becomes its own grid — and from that moment "width"
 * is a hard CSS width. So the Part Number cell was being pinned to 20-40px:
 * its blue card background shrank to a small block at the left edge while the
 * part number and "Fitment details" spilled out of the cell and rendered on
 * the row's white background. That is exactly the misaligned blue block on
 * mobile.
 *
 * The plugin had never declared a width for these cells, so the theme's value
 * won by default. It declares one now, with !important, because the theme's
 * rule has to be beaten at every width where the card layout is in use.
 */
@media(max-width:900px){
    .cpf-nags-app .product-table .cpf-product-row td,
    .cpf-nags-app .product-table .cpf-product-row td:first-child,
    .cpf-nags-app .product-table .cpf-product-row td:nth-child(2),
    .cpf-nags-app .product-table .cpf-product-row td.cpf-action-cell{
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        box-sizing:border-box!important;
    }
    /* Same reasoning one level down: this 132px floor is a desktop-table
       measurement and would push the cell's contents outside the card on a
       narrow phone. */
    .cpf-nags-app .cpf-part-cell{min-width:0!important}
}

/* v2.0.20 — the vehicle-selector Submit button.
 *
 * History, so this doesn't get "fixed" back to something that was already
 * tried: it started as a solid #0b74c9 slab on the theme's solid #1d6abf
 * panel (.filter-wrap). Two blues that close together read as one flat sheet
 * of colour — no edge, no separation, no sense that it was the action. A
 * dark navy fill solved the contrast but just traded one heavy slab for
 * another, and a full-width white fill made it look like a fourth dropdown.
 *
 * What works is white fill + blue label + a narrower, centred pill. The
 * width is what does the real work: it is the only control in the block that
 * is NOT full-bleed, so it can't be mistaken for another field, and the soft
 * shadow lifts it off the panel instead of adding another colour. Light,
 * quiet, and still the highest-contrast thing on a saturated blue panel.
 */
.cpf-nags-app .cpf-filter-row select,
.cpf-nags-app .filter-wrap .filter-box select{
    /* Pill, to match the dropdowns the theme already renders as pills, so the
       group looks consistent whichever of the two is drawing the control. */
    border-radius:999px;
}
/* Centre the button in its cell — this is what lets it be narrower than the
   fields above it once the row stacks. */
.cpf-nags-app .cpf-filter-row .cpf-submit-box,
.cpf-nags-app .filter-wrap .cpf-submit-box{
    display:flex;
    justify-content:center;
}
.cpf-nags-app .cpf-filter-row button,
.cpf-nags-app .cpf-filter-row .cpf-vehicle-submit,
.cpf-nags-app .filter-wrap .cpf-vehicle-submit{
    width:auto!important;
    min-width:190px;
    padding:0 34px!important;
    border:0!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#1259a8!important;
    font-size:15px;
    font-weight:700;
    letter-spacing:.01em;
    text-align:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(8,20,61,.20)!important;
    transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease;
}
/* A little air above it once the row stacks, so the action reads as separate
   from the fields rather than as the next one in the list. Only below 992px,
   because above that the row is a single centred flex line and a top margin
   would push the button out of alignment with the dropdowns. */
@media(max-width:991px){
    .cpf-nags-app .cpf-filter-row .cpf-submit-box{margin-top:6px}
}
.cpf-nags-app .cpf-filter-row button:hover,
.cpf-nags-app .cpf-filter-row .cpf-vehicle-submit:hover{
    background:#f4f8fd!important;
    box-shadow:0 5px 14px rgba(8,20,61,.26)!important;
}
.cpf-nags-app .cpf-filter-row button:active,
.cpf-nags-app .cpf-filter-row .cpf-vehicle-submit:active{
    background:#e9f1fa!important;
    box-shadow:0 1px 3px rgba(8,20,61,.26)!important;
    transform:translateY(1px);
}
/* A white ring — the usual dark focus ring would disappear into the panel. */
.cpf-nags-app .cpf-filter-row button:focus-visible,
.cpf-nags-app .cpf-filter-row .cpf-vehicle-submit:focus-visible{
    outline:2px solid #fff!important;
    outline-offset:3px;
}
/* The script disables this and swaps the label to "Searching..." while the
   results load — it should read as busy, not as broken. */
.cpf-nags-app .cpf-filter-row button[disabled],
.cpf-nags-app .cpf-filter-row .cpf-vehicle-submit[disabled]{
    background:rgba(255,255,255,.66)!important;
    color:#3f7bb8!important;
    box-shadow:none!important;
    transform:none;
    cursor:not-allowed;
}

/* On a wide screen the block is one horizontal line, and a button that is as
   wide as the three dropdowns beside it just reads as a fourth field again.
   Making it the most compact control in the row is what separates it there —
   the fields are things you open, the button is a single small target you
   press. (Below 992px the row stacks and the opposite applies: there the
   button is narrower than the full-bleed fields, which is handled above.) */
@media(min-width:992px){
    .cpf-nags-app .cpf-filter-row button,
    .cpf-nags-app .cpf-filter-row .cpf-vehicle-submit,
    .cpf-nags-app .filter-wrap .cpf-vehicle-submit{
        min-width:126px!important;
        padding:0 26px!important;
    }
}

/* v2.0.21 — centre the Year / Make / Model values in their dropdowns.
 *
 * The block already centres its title, its pills and its button, but the
 * selected value inside each dropdown sat hard against the left edge, which
 * made the whole group look misaligned.
 *
 * The reason the plugin's existing "text-align:center" never showed: on the
 * live site the theme's Selectric script replaces each <select> with its own
 * markup (.selectric-wrapper > .selectric > span.label) and hides the real
 * select. So the element actually painting the text is that .label — and the
 * theme styles it explicitly left-aligned, with lopsided margins to boot:
 *
 *     .selectric .label            { text-align:left; margin:0 40px 0 20px }
 *     .filter-row .selectric .label{ margin:0 30px 0 15px }
 *
 * Centring alone wouldn't have been enough either: with 30px reserved on the
 * right for the chevron and only 15px on the left, "centred" text would still
 * sit visibly left of the pill's true centre. So the margins are evened up at
 * 30px a side — the text lands on the real centre line, and the right-hand
 * gutter still clears the absolutely-positioned chevron.
 *
 * Both renderings are covered: the Selectric label, and the plain <select>
 * for any page where Selectric isn't running (a native select needs
 * text-align-last, since text-align alone doesn't move the value shown in the
 * closed control). Applies at every width — no breakpoints here on purpose.
 */
.cpf-nags-app .cpf-filter-row select,
.cpf-nags-app .filter-wrap .filter-box select,
.cpf-nags-app .cpf-variant-select{
    text-align:center!important;
    text-align-last:center!important;
}
.cpf-nags-app .cpf-filter-row .selectric .label,
.cpf-nags-app .filter-wrap .selectric .label,
.cpf-nags-app .cpf-variant-box .selectric .label{
    text-align:center!important;
    margin-left:30px!important;
    margin-right:30px!important;
}

/* Evening up those margins costs 15px of visible text, which on a wide screen
   was enough to start clipping longer makes ("Alfa Rome…"). The dropdowns get
   that width back and a little more, so centring doesn't come at the cost of
   readability — 176px leaves more room for the value than the old 155px did
   with its lopsided gutters. Desktop only; below 992px the row stacks and the
   pills are already full width. */
@media(min-width:992px){
    .cpf-nags-app .cpf-filter-row .selectric-wrapper,
    .cpf-nags-app .filter-wrap .selectric-wrapper{
        width:176px!important;
        min-width:176px!important;
    }
    .cpf-nags-app .cpf-filter-row select,
    .cpf-nags-app .filter-wrap .filter-box select{
        min-width:176px;
    }
}

/* =====================================================================
   Stock-by-location hover panel (2.0.27)
   Hover — or focus, or tap on touch — the "In Stock" badge to see which
   branches actually hold the part. Positioned with position:fixed by JS so
   the table's horizontal scroll container can never clip it.
   ================================================================== */
.cpf-nags-app .cpf-stock-wrap{position:relative;display:inline-block}
.cpf-nags-app .cpf-stock-trigger{cursor:help;border-bottom:1px dashed rgba(6,118,71,.4)}
.cpf-nags-app .cpf-stock-trigger:focus-visible{outline:2px solid #0b74c9;outline-offset:2px;border-radius:3px}

.cpf-nags-app .cpf-stock-pop{
    position:fixed;
    z-index:9999;
    display:none;
    min-width:186px;
    max-width:400px;
    padding:11px 13px 9px;
    border:1px solid #e4e7ec;
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.06);
    text-align:left;
    white-space:normal;
}
.cpf-nags-app .cpf-stock-pop.is-open{display:block}

.cpf-nags-app .cpf-stock-pop-title{
    display:block;
    margin-bottom:8px;
    padding-bottom:7px;
    border-bottom:1px solid #f0f1f3;
    color:#98a2b3;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.cpf-nags-app .cpf-stock-pop-list{display:block}
/* Column-wise flow, so the list reads top-to-bottom down the first column
   and then continues in the second — not left-right in pairs. */
.cpf-nags-app .cpf-stock-pop.is-two-col .cpf-stock-pop-list{columns:2;column-gap:26px}

.cpf-nags-app .cpf-stock-loc{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:3px 0;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    font-size:12.5px;
    line-height:1.35;
    font-weight:500;
}
.cpf-nags-app .cpf-stock-loc-name{color:#475467;white-space:nowrap}
.cpf-nags-app .cpf-stock-loc.in .cpf-stock-loc-name{color:#101828;font-weight:600}
.cpf-nags-app .cpf-stock-loc-mark{flex:0 0 auto;font-size:12px;line-height:1;font-weight:700}
.cpf-nags-app .cpf-stock-loc.in .cpf-stock-loc-mark{color:#12b76a}
.cpf-nags-app .cpf-stock-loc.out .cpf-stock-loc-mark{color:#d0d5dd}

/* Screen-reader-only text, in case the theme doesn't define it. */
.cpf-nags-app .screen-reader-text{
    position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(1px,1px,1px,1px);white-space:nowrap
}

@media(max-width:767px){
    .cpf-nags-app .cpf-stock-pop{
        min-width:0;
        max-width:min(86vw,320px);
        padding:10px 12px 8px;
    }
    .cpf-nags-app .cpf-stock-pop.is-two-col .cpf-stock-pop-list{column-gap:18px}
    .cpf-nags-app .cpf-stock-loc{font-size:12px}
}


/* =====================================================================
   Vehicle-selector dropdown height (2.0.33)
   The real height is set inline, with priority, by sizeDropdown() in
   car-part-filter.js — it measures one row and sizes the list to show
   exactly 17. This is only the fallback for when that measurement can't
   run (no rows yet, Selectric not loaded). Inline !important beats any
   stylesheet, so these values never fight the JS.
   ================================================================== */
.cpf-tall-dropdown .selectric-items,
.cpf-tall-dropdown .selectric-items .selectric-scroll,
.cpf-nags-app .selectric-items,
.cpf-nags-app .selectric-items .selectric-scroll{
    max-height:560px;
}

/* v2.0.34 — Mouldings & hardware */
.cpf-nags-app .cpf-acc-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:0;border:0;background:transparent;color:#0b74c9;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;text-align:left;max-width:100%}
.cpf-nags-app .cpf-acc-toggle:hover .cpf-acc-label{text-decoration:underline}
/* v2.0.42 — square badge instead of a circle. It was a circle with a fixed
   width, but as a flex item in a narrow mobile cell it was allowed to shrink,
   so the circle squashed into an ellipse. flex:0 0 18px stops the shrink, and
   a rounded square doesn't distort even if something else squeezes the row. */
.cpf-nags-app .cpf-acc-icon{flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:5px;background:#0b74c9;color:#fff;font-size:14px;font-weight:700;line-height:1}
/* The label is a short fixed phrase — keeping it on one line reads as one
   control. Wrapped over two lines it looked like two separate links. */
.cpf-nags-app .cpf-acc-label{white-space:nowrap}
@media(max-width:480px){.cpf-nags-app .cpf-acc-toggle{font-size:11.5px}}
.cpf-nags-app .cpf-acc-toggle.is-open .cpf-acc-icon{background:#667085}
.cpf-nags-app .product-table tr.cpf-acc-row>td{background:#f8fafc!important;font-size:13px}
.cpf-nags-app .product-table tr.cpf-acc-row>td:first-child{border-left:3px solid #b9d7f0}
.cpf-nags-app .cpf-acc-tag{display:inline-block;margin:0 0 3px;padding:1px 7px;border-radius:999px;background:#eaf2fc;color:#1d5fbf;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.cpf-nags-app .cpf-acc-row .cpf-part-cell{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:900px){.cpf-nags-app .product-table tr.cpf-acc-row{margin-left:14px!important;border-left:3px solid #b9d7f0!important}.cpf-nags-app .product-table tr.cpf-acc-row>td:first-child{border-left:0}}

/* ============================================================
   v2.0.43 — ONE VEHICLE BAR, SHARED WITH THE PRODUCT PAGE
   ============================================================
   The product page and this results page were drawing the same
   Year / Make / Model control two different ways: this one took its blue
   from the theme (a square, full-width band) while the product page painted
   its own rounded panel. Both are pinned to the same values here so the
   customer sees one control, not two.

   The Submit button is hidden rather than deleted: results now load the
   moment a complete vehicle is chosen (see the #model-select handler in
   car-part-filter.js), so the button has nothing left to do — but the
   markup, its id and the script's "Searching..." handling are all left in
   place so nothing that references it breaks.
   ============================================================ */

.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}
}

/* v2.0.53 — "Also required (sold separately)" line in fitment details.
   Amber rather than red: it is information the customer needs before
   ordering, not an error. */
.cpf-nags-detail .cpf-nags-sold-separately{
    margin-top:4px;
    padding:6px 10px;
    border-left:3px solid #d97706;
    background:#fffbeb;
    color:#78350f;
    border-radius:4px;
}
.cpf-nags-detail .cpf-nags-sold-separately em{
    font-style:normal;
    font-weight:600;
}