/* ═══════════════════════════════════════════════════════════════════════════
   productsearch.css — styles for the NEW filter page only.

   Every rule is scoped under .ps-page. The template this is derived from uses Change is only constantly planda so fair, fourspeed. Training me laws to start different mindset,
   generic class names (.btn, .chip, .tile, .empty, .badge) that collide with
   Bootstrap, which is loaded globally, so nothing here may be global. The
   template's :root variables live on .ps-page and its body rules became
   .ps-page rules for the same reason.

   The one intentional exception is body.ps-filter-lock, which has to sit on
   <body> to stop background scrolling behind the mobile sheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.ps-page {
    --ps-bg: #f7f7f6;
    --ps-white: #fff;
    --ps-text: #111;
    --ps-muted: #6b7280;
    --ps-soft: #f7f7f7;
    --ps-line: #e5e7eb;
    --ps-line2: #d7dce5;
    --ps-blue: #1976d2;
    --ps-blueSoft: #e8f2ff;
    --ps-green: #2c7a62;
    --ps-greenSoft: #e9f8f1;
    --ps-shadow: 0 14px 36px rgba(0, 0, 0, 0.055);
    color: var(--ps-text);
    font-size: 14px;
    line-height: 1.35;
}

.ps-page *,
.ps-page *::before,
.ps-page *::after {
    box-sizing: border-box;
}

.ps-page button,
.ps-page input,
.ps-page select {
    font: inherit;
}

.ps-page button {
    cursor: pointer;
}

/* for only in this theme  */
.vscomp-ele{
    max-width: none !important;
}

.vscomp-wrapper.keep-always-open.focused,.vscomp-wrapper.keep-always-open:focus,.vscomp-wrapper.keep-always-open:hover {
    box-shadow: none;
}
.vscomp-wrapper.keep-always-open .vscomp-dropbox{
    border: none;
}


/* for only in this theme  */


/* ══ Page shell ══ */
.ps-page .results-layout {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 34px;
    padding: 24px 28px 60px;
    max-width: 1740px;
    margin: 0 auto;
    align-items: start;
}

.ps-page .results-col {
    min-width: 0;
}

/* ══ Sidebar ══ */
.ps-page .filter-sidebar {
    background: var(--ps-soft);
    border: 1px solid #e8e8e8;
    border-radius: 22px;
    padding: 24px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.ps-page .ps-filter-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    /* Extend the scroll box out through the sidebar's own right padding so the
       browser paints the scrollbar flush against the sidebar's true right edge
       instead of 24px inboard of it. padding-right restores the same visual
       inset for the inner filter content, so nothing else shifts. */
    margin-right: -24px;
    padding-right: 24px;
}

.ps-page .ps-filter-scroll::-webkit-scrollbar {
    width: 6px;
}

.ps-page .ps-filter-scroll::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 6px;
}

.ps-page .filter-block {
    margin-bottom: 26px;
}

.ps-page .filter-block:last-child {
    margin-bottom: 6px;
}

.ps-page .filter-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    padding: 0 0 12px;
    font-size: 15px;
    font-weight: 750;
    color: var(--ps-text);
    text-align: left;
}

.ps-page .filter-title .fb-caret {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    position: relative;
    opacity: 0.55;
}

.ps-page .filter-title .fb-caret::before,
.ps-page .filter-title .fb-caret::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.ps-page .filter-title .fb-caret::before {
    left: 2px;
    right: 2px;
    top: 8px;
    height: 2px;
}

.ps-page .filter-title .fb-caret::after {
    top: 2px;
    bottom: 2px;
    left: 8px;
    width: 2px;
    opacity: 0;
}

.ps-page .filter-title.collapsed .fb-caret::after {
    opacity: 1;
}

.ps-page .filter-option {
    margin-bottom: 18px;
}

.ps-page .filter-option:last-child {
    margin-bottom: 0;
}

.ps-page .filter-subtitle {
    font-size: 13px;
    font-weight: 650;
    color: #3d434c;
    margin-bottom: 9px;
}

.ps-page .filter-hint {
    font-size: 12px;
    color: #6e6e6e;
    margin: -4px 0 12px;
}

/* ══ Icon grid (IconWithText) ══ */
.ps-page .icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ps-page .icon-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.ps-page .icon-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

.ps-page .icon-card-wrap {
    display: block;
    min-width: 0;
}



.filter-block-body > .filter-option:first-child .icon-card img{
    width: 54px;
}


/* .btn is on the element because Productlist.filter.js:176 does an UNGUARDED
   closest('.btn') from #img-<ID>. These rules out-specify Bootstrap's .btn. */
.ps-page .icon-card-wrap .icon-card.btn {
    width: 100%;
    height: 100%;
    background: var(--ps-white);
    border: 1px solid var(--ps-line);
    border-radius: 16px;
    padding: 12px 6px;
    text-align: center;
    transition: 0.15s;
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
    margin-top: 0px !important;
}

.ps-page .icon-card-wrap .icon-card.btn:hover {
    background: #f1f1f1;
    border-color: #d9dde3;
}

/* Hovering a SELECTED card must not fall back to the light hover background
   above - .icon-card.btn:hover (0,5,0) otherwise out-specifies
   .icon-card.btn.border-design (0,4,0) and wins, leaving the white
   label/icon from the selected-state rules stranded on a light background
   (near-invisible). Keep the card dark on hover when it's selected. */
.ps-page .icon-card-wrap .icon-card.btn.border-design:hover {
    background: #111;
    border-color: #111;
}

.ps-page .icon-card .i {
    display: block;
    line-height: 0;
}

.ps-page .icon-card .i img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.ps-page .icon-card .l {
    display: block;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    word-break: break-word;
    color: var(--ps-text);
}

/* Selected state - card fills black, icon and label flip to white. Driven by
   the existing .border-design class changeColor() already applies to the
   closest .btn (Productlist.filter.js:170-178); nothing new is introduced. */
.ps-page .icon-card.btn.border-design {
    border-color: #111;
    border-width: 2px;
    background: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.07);
    /* margin-top: 0px !important; */
}

.ps-page .icon-card.border-design .l {
    color: #fff;
}

.ps-page .icon-card .i img.filtered {
    filter: saturate(1.15);
}

/* The ERP icons are dark SVGs on a transparent background, so on the black
   selected card they'd be invisible - brightness(0) invert(1) is the standard
   way to force a single-color raster/SVG <img> to render white. This replaces
   (not stacks with) the .filtered saturate() above, which has no visible
   effect once the icon is already forced to solid white. */
.ps-page .icon-card.border-design .i img {
    filter: brightness(0) invert(1);
}

/* ══ Chips (SeparateBox / RoundBox) ══ */
.ps-page .chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-page .chip {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: var(--ps-white);
    color: #2b3038;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: 0.14s;
    /* The 999px border-radius makes a proper pill shape only for single-line
       content - a longer label (e.g. "Slipper Clutch") wrapping to 2 lines grows
       the box taller, and that same huge radius then curves into a capsule that
       clips/overlaps the second line and the content below it. .chip-row already
       wraps onto multiple rows via flex-wrap, so a wide single-line chip just
       takes its own space there instead of wrapping internally. */
    white-space: nowrap;
}

.ps-page .chip:hover {
    background: #f3f3f3;
    color: #2b3038;
}

.ps-page .chip.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.ps-page .chip.chip-round {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    justify-content: center;
    border-radius: 50%;
}

/* ChipBox reuses the .chip-row / .chip / .chip.active rules above verbatim - its
   outer .ChipBox wrapper is a marker class only (multiSelectKeys' .closest() lookup
   in changeFilter()), not a styling hook, so no dedicated CSS is needed for it. */

/* ══ Toggle pills (SelectionField* / ChangeField*) ══ */
.ps-page .toggle-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ChangeFieldChipBox only (e.g. Axle's Configuration/Count toggle) - a light
   bottom border under the toggle pills, separating them from the chip options
   rendered below. Scoped to .toggle-row--chipbox so no other ChangeField or
   SelectionField toggle row (Year, Power, Weight, Price, ...) is affected. */
.ps-page .toggle-row--chipbox {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ps-line2);
}

.ps-page .toggle-pill,
.ps-page .ps-checkpill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.ps-page .toggle-pill input,
.ps-page .ps-checkpill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ps-page .toggle-pill span,
.ps-page .ps-checkpill span {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #ccc;
    background: var(--ps-white);
    font-size: 13px;
    line-height: 1.2;
    transition: 0.14s;
}

.ps-page .toggle-pill:hover span,
.ps-page .ps-checkpill:hover span {
    background: #f3f3f3;
}

.ps-page .toggle-pill input:checked + span,
.ps-page .ps-checkpill input:checked + span {
    background: #111;
    color: #fff;
    border-color: #111;
}

.ps-page .toggle-pill input:focus-visible + span,
.ps-page .ps-checkpill input:focus-visible + span {
    outline: 2px solid var(--ps-blue);
    outline-offset: 2px;
}

.ps-page .ps-checkpill {
    margin-bottom: 10px;
}

/* ══ Visual grouping wrapper for every ChangeFieldRangeDropdown filter (Year,
   Power, Weight, Price, and any future one added via DB config) — wraps the
   existing toggle row + range-select controls so they read as one grouped
   control. Applied via ViewType in the Razor loop, not per filter name, so it
   applies automatically to any filter configured with that ViewType. Mirrors
   this page's existing .value-field-card tokens. Distinct from .ChipBox,
   which is an unrelated existing feature. ══ */
.ps-page .ChangeFieldRangeGroup {
    /* background: var(--ps-white); */
    /* border: 1px solid #ececec; */
    /* border-radius: 14px;
    padding: 10px; */
}

/* ══ Dropdown / range cards (VirtualSelect hosts) ══ */
.ps-page .value-field-card {
    /* background: var(--ps-white); */
    /* border: 1px solid #ececec; */
    /* border-radius: 14px;
    padding: 10px; */
}

.ps-page .range-row {
    display: flex;
    gap: 10px;
}

.ps-page .range-col {
    flex: 1 1 0;
    min-width: 0;
}

/* VirtualSelect is kept as the dropdown implementation - only restyled. */
.ps-page .vscomp-wrapper {
    width: 100% !important;
    max-width: 100%;
    font-size: 13px;
}

.ps-page .custom-toggle-button {
    display: none !important;
}

.ps-page .vscomp-toggle-button {
    border: 1px solid #ddd;
    border-radius: 10px;
    background: var(--ps-white);
    min-height: 40px;
    padding: 0 10px;
}

.ps-page .vscomp-dropbox-container {
    /* position: static !important; */
    box-shadow: none;
    width: 100% !important;
}

.ps-page .vscomp-dropbox {
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.ps-page .vscomp-search-container {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 8px;
    min-height: 38px;
}

.ps-page .vscomp-search-input {
    background: transparent;
    font-size: 13px;
}

.ps-page .vscomp-options-container {
    scrollbar-width: thin;
}

.ps-page .vscomp-option {
    border-radius: 8px;
    font-size: 13px;
    padding-left: 8px;
}

.ps-page .vscomp-option:hover {
    background: #f2f2f2;
}

.ps-page .vscomp-option.selected {
    background: var(--ps-blueSoft);
}

.ps-page .vscomp-option.focused {
    background: #eef2f7;
}

/* ══ ListFieldWithoutCheckBox: hand-rolled searchable chip list, a presentation
   variant of ListField that does NOT use VirtualSelect at all (unlike the earlier
   version of this rule, which only reskinned VirtualSelect's checkbox dropdown -
   replaced because that still rendered/behaved like a dropdown, not real chips).
   The chip appearance itself (.chip/.chip-row/.chip.active) is fully inherited,
   unmodified, from the existing .ps-page-scoped rules above (shared with
   ChipBox/SeparateBox/RoundBox) - only the search input and the scroll container,
   which no other viewType uses, need new rules here. Scoped to this class only;
   plain .ListField filters (e.g. axlesfeatures) are completely untouched. ══ */
.ps-page .ListFieldWithoutCheckBox .filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #ececec;
    border-radius: 8px;
    font-size: 13px;
    background: var(--ps-white);
}

.ps-page .ListFieldWithoutCheckBox .scroll-box {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ps-page .ListFieldWithoutCheckBox .chip-search-hidden {
    display: none;
}

/* ══ Sidebar actions ══ */
.ps-page .filter-actions {
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid #e6e6e6;
    display: grid;
    gap: 8px;
    flex: 0 0 auto;
}

.ps-page .save-search-btn,
.ps-page .cant-find-btn {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 650;
}

.ps-page .save-search-btn:hover {
    background: #000;
}

.ps-page .cant-find-btn {
    background: var(--ps-white);
    color: #111;
    border: 1px solid #ddd;
}

.ps-page .cant-find-btn:hover {
    background: #f2f2f2;
}

.ps-page .save-search-btn.inline {
    width: auto;
    padding: 0 20px;
    height: 40px;
}

/* ══ Save Search SweetAlert2 popups ══ */
/* SweetAlert2 mounts its popup to <body>, not inside .ps-page, so the --ps-* custom
   properties above (scoped to .ps-page and its descendants) aren't inherited here - the
   literal values are repeated instead of var()'d, matching --ps-text/--ps-muted/--ps-white/
   --ps-line2/--ps-shadow above and the .save-search-btn/.cant-find-btn pill styling, so
   these popups read as the same component family as the rest of this page. */
.ps-swal-popup {
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.055);
    font-family: inherit;
}

.ps-swal-title {
    color: #111;
    font-weight: 700;
}

.ps-swal-text {
    color: #6b7280;
}

.ps-swal-btn {
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    margin: 0 6px;
}

.ps-swal-btn-primary {
    background: #111;
    color: #fff;
}

.ps-swal-btn-primary:hover {
    background: #000;
}

.ps-swal-btn-secondary {
    background: #fff;
    color: #111;
    border: 1px solid #d7dce5;
}

.ps-swal-btn-secondary:hover {
    border-color: #111;
    color: #111;
}

.ps-swal-close:hover {
    color: #111;
}

/* ══ Toolbar: selected filters + layout switcher + sort ══ */
.ps-page .listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.ps-page .active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 320px;
    min-width: 0;
}

.ps-page .filter-chip {
    padding: 6px 12px;
    background: #eee;
    border-radius: 999px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.ps-page .filter-chip:hover {
    background: #ddd;
}

.ps-page .filter-chip-remove {
    display: inline-flex;
    font-weight: 800;
    opacity: 0.7;
}

.ps-page .filter-chip-remove:hover {
    opacity: 1;
}

/* Pale fill + no border made this read as a passive filter tag (like the
   removable "1 ×" chips next to it) instead of an actionable button - add a
   border, bolder weight and a hover state so it reads as a button, matching
   the affordance the black .chip-clear "Clear all" chip already has. */
.ps-page .filter-chip.chip-save {
    background: var(--ps-greenSoft);
    color: #21634f;
    border: 1px solid #a9dcc4;
    font-weight: 650;
}

.ps-page .filter-chip.chip-save:hover {
    background: #d9f2e6;
    border-color: var(--ps-green);
}

.ps-page .filter-chip.chip-clear {
    background: #111;
    color: #fff;
}

.ps-page .layout-switcher-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.ps-page .layout-switcher {
    display: flex;
    gap: 4px;
    background: var(--ps-white);
    border: 1px solid var(--ps-line2);
    border-radius: 999px;
    padding: 3px;
}

.ps-page .layout-btn {
    width: 32px;
    height: 30px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ps-page .layout-btn.active {
    background: #111;
    color: #fff;
}

.ps-page .sort-dropdown {
    position: relative;
}

.ps-page .sort-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ps-line2);
    background: var(--ps-white);
    font-size: 13px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ps-page .sort-btn:hover {
    background: #f2f2f2;
}

.ps-page .sort-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 220px;
    background: var(--ps-white);
    border: 1px solid var(--ps-line);
    border-radius: 14px;
    box-shadow: var(--ps-shadow);
    padding: 6px;
}

.ps-page .sort-menu.open {
    display: block;
}

.ps-page .sort-menu-item {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.ps-page .sort-menu-item:hover {
    background: #f3f3f3;
}

.ps-page .sort-menu-item.active {
    background: #111;
    color: #fff;
}

/* ══ Results head ══ */
.ps-page .results-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.ps-page .results-head h2 {
    font-size: 25px;
    margin: 0;
}

.ps-page .results-head p {
    font-size: 13px;
    color: #666;
    margin: 5px 0 0;
}

/* ══ Product grid ══
   #ProductList keeps Bootstrap's row/col structure because
   Productlist.filter.js:1064 (applyGridToProducts) swaps col-* classes on its
   direct children to drive the 1/2/3/4 column switcher. It starts hidden and is
   revealed by filter.js:359 / :1170 once a filter is active. */
.ps-page #ProductList {
    display: none;
}

.ps-page #ProductList > div {
    box-sizing: border-box;
}

.ps-page .product-card {
    display: block;
    height: 100%;
    border: 1px solid #eee;
    background: var(--ps-white);
    border-radius: 20px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: 0.16s;
}

.ps-page .product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ps-shadow);
    border-color: #ddd;
    color: inherit;
}

.ps-page .product-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #e4e6ea, #f9f9f9);
    margin-bottom: 12px;
}

.ps-page .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-page .product-title {
    font-size: 15px;
    font-weight: 750;
    margin-bottom: 6px;
}

/* Ref. number - moved off the image overlay into the text section, directly under
   the title (identifiers grouped with identifying text, not with the specs line
   below). Styled as a small muted line, matching .product-meta's weight. */
.ps-page .product-ref {
    font-size: 12px;
    color: var(--ps-muted);
    margin: 0 0 6px;
}

.ps-page .product-meta {
    font-size: 13px;
    color: #666;
    min-height: 37px;
}

.ps-page .product-price {
    font-size: 17px;
    font-weight: 750;
    margin: 12px 0 2px;
}

.ps-page .empty {
    border: 1px dashed #d0d0d0;
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    color: #666;
    background: #fafafa;
}

.ps-page .empty h5 {
    color: var(--ps-text);
    margin-bottom: 8px;
}

/* ══ Curated landing (shown until a filter is applied) ══ */
.ps-page .curated-state {
    padding: 4px 0 8px;
}

.ps-page .curated-section {
    margin-bottom: 28px;
}

.ps-page .section-heading {
    font-size: 18px;
    margin: 0 0 14px;
}

.ps-page .tile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.ps-page .tile {
    border: 1px solid #ededed;
    background: var(--ps-white);
    border-radius: 20px;
    padding: 18px 12px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: 0.16s;
    min-height: 128px;
}

.ps-page .tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ps-shadow);
    border-color: #ddd;
    color: inherit;
}

.ps-page .tile .icon {
    margin-bottom: 10px;
    line-height: 0;
}

.ps-page .tile .icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.ps-page .tile h4 {
    font-size: 14px;
    margin: 0;
}

.ps-page .tile p {
    font-size: 11px;
    color: #777;
    margin: 7px 0 0;
}

.ps-page .brand-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

/* ══ Pagination ══ */
.ps-page .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ps-page .page-item .page-link {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ps-line2);
    border-radius: 999px;
    background: var(--ps-white);
    color: #2b3038;
    font-size: 13px;
    cursor: pointer;
}

.ps-page .page-item .page-link:hover {
    background: #f2f2f2;
}

.ps-page .page-item.active .page-link {
    background: #111;
    border-color: #111;
    color: #fff;
}

.ps-page .page-item.disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
}

/* ══ Mobile sheet ══
   Open/close is driven by the existing Productlist.filter.js:70-122 handler,
   which toggles .active / .closing on #responsiveFilter. Only the styling
   differs here - there is no second open/close implementation. */
.ps-page .filter-open-btn,
.ps-page .filter-scrim,
.ps-page .filter-sheet-head {
    display: none;
}

@media (max-width: 1420px) {
    .ps-page .results-layout {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 991px) {
    .ps-page .results-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px;
    }

    .ps-page .filter-open-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 18px;
        margin-bottom: 16px;
        border: 1px solid var(--ps-line2);
        border-radius: 12px;
        background: var(--ps-white);
        font-size: 14px;
        font-weight: 750;
        color: #2b3038;
    }

    .ps-page .filter-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(17, 17, 17, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .ps-page .filter-scrim.open {
        opacity: 1;
        pointer-events: auto;
    }

    .ps-page .filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: 0 0 auto;
        margin: -24px -24px 16px;
        padding: 16px 18px;
        background: var(--ps-soft);
        border-bottom: 1px solid #e8e8e8;
        border-radius: 22px 22px 0 0;
    }

    .ps-page .filter-sheet-head strong {
        font-size: 16px;
    }

    .ps-page .filter-sheet-close {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background: var(--ps-white);
        font-size: 20px;
        line-height: 1;
        display: grid;
        place-items: center;
        color: #444;
    }

    .ps-page .filter-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 75;
        width: auto;
        margin: 0;
        max-height: 86vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        transition: transform 0.26s ease;
        will-change: transform;
        pointer-events: none;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
    }

    .ps-page .filter-sidebar.active {
        transform: none;
        pointer-events: auto;
    }

    .ps-page .filter-sidebar.closing {
        transform: translateY(100%);
        pointer-events: none;
    }

    .ps-page .tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .ps-page .results-layout {
        padding: 14px;
    }

    .ps-page .tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ps-page .listing-toolbar {
        gap: 10px;
    }

    /* When .active-filters wraps, .layout-switcher-wrapper drops to its own
       flex line; justify-content:space-between has nothing left to push
       against there, so it collapses to the left. Pin it back to the right. */
    .ps-page .layout-switcher-wrapper {
        margin-left: auto;
    }

    /* Guard against the sort menu being wider than the viewport - anchoring
       from a left-collapsed button would otherwise push it past the left
       edge (clipping option text) and over the product grid below it. */
    .ps-page .sort-menu {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 28px);
    }

    .ps-page .results-head h2 {
        font-size: 21px;
    }
}

/* ══ Funnel stages ══
   Stage 1 = Industry landing, Stage 2 = Product Group landing, Stage 3 = results.

   !important is required, not stylistic: Productlist.filter.js:1165-1172 runs on
   DOMContentLoaded and, whenever the query string is non-empty (i.e. Stage 2), sets
   INLINE display values on #ProductList and #sortingFilter. Only !important beats an
   inline style. The nodes stay in the DOM at every stage - several are read unguarded
   by the shared script. */
.ps-page #curatedState,
.ps-page.ps-stage-1 #ProductList,
.ps-page.ps-stage-2 #ProductList,
.ps-page.ps-stage-1 #sortingFilter,
.ps-page.ps-stage-2 #sortingFilter,
.ps-page.ps-stage-1 #pagination-tag,
.ps-page.ps-stage-2 #pagination-tag,
.ps-page.ps-stage-1 .results-head,
.ps-page.ps-stage-2 .results-head,
.ps-page.ps-stage-1 #responsiveFilter,
.ps-page.ps-stage-2 #responsiveFilter,
.ps-page.ps-stage-1 .filter-scrim,
.ps-page.ps-stage-2 .filter-scrim,
.ps-page.ps-stage-1 .filter-open-btn,
.ps-page.ps-stage-2 .filter-open-btn {
    display: none !important;
}

/* Landings are full width - no sidebar column at Stage 1/2. */
.ps-page.ps-stage-1 .results-layout,
.ps-page.ps-stage-2 .results-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* ── Landing layout (template `.landing`) ── */
.ps-page .landing {
    padding: 4px 0 28px;
}

.ps-page .landing-hero {
    margin-bottom: 28px;
}

.ps-page .hero-copy {
    border: 1px solid #ededed;
    border-radius: 22px;
    background: var(--ps-white);
    padding: 34px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ps-page .kicker {
    display: inline-flex;
    background: var(--ps-soft);
    border: 1px solid #eee;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    color: #666;
    width: max-content;
    margin-bottom: 12px;
}

.ps-page .hero-copy h2 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0;
}

.ps-page .hero-copy p {
    font-size: 14px;
    color: #666;
    max-width: 820px;
    line-height: 1.55;
    margin: 14px 0 0;
}

.ps-page .section-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    margin: 28px 0 16px;
}

.ps-page .section-row h3 {
    font-size: 22px;
    margin: 0;
}

.ps-page .section-row p {
    font-size: 13px;
    color: #666;
    margin: 5px 0 0;
}

/* ── Promo grid (static presentation) ── */
.ps-page .promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ps-page .promo {
    border: 1px solid #ededed;
    border-radius: 20px;
    background: var(--ps-white);
    padding: 18px;
    min-height: 128px;
}

.ps-page .promo h4 {
    font-size: 16px;
    margin: 0 0 8px;
}

.ps-page .promo p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.ps-page .promo .mini {
    margin-top: 14px;
}

/* .badge collides with Bootstrap - scoped and specific enough to win. */
.ps-page .promo .badge,
.ps-page .mini .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e1e5ea;
    background: var(--ps-white);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 750;
    color: #4b5563;
}

.ps-page .promo .badge.blue,
.ps-page .mini .badge.blue {
    background: var(--ps-blueSoft);
    border-color: #cfe4ff;
    color: #1458a0;
}

.ps-page .promo .badge.green,
.ps-page .mini .badge.green {
    background: var(--ps-greenSoft);
    border-color: #cdebd9;
    color: #21634f;
}

.ps-page .ps-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    margin-bottom: 18px;
    border: 1px solid var(--ps-line2);
    border-radius: 999px;
    background: var(--ps-white);
    font-size: 13px;
    color: #2b3038;
    text-decoration: none;
}

.ps-page .ps-back:hover {
    background: #f2f2f2;
    color: #2b3038;
}

/* Breadcrumb (Stage 3) */
.ps-page .ps-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}

.ps-page .ps-breadcrumb a {
    color: #5f6672;
    text-decoration: none;
}

.ps-page .ps-breadcrumb a:hover {
    color: var(--ps-text);
    text-decoration: underline;
}

.ps-page .ps-breadcrumb .sep {
    color: #b6bcc6;
}

.ps-page .ps-breadcrumb .current {
    color: var(--ps-text);
    font-weight: 750;
}

@media (max-width: 1100px) {
    .ps-page .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .ps-page .hero-copy {
        padding: 22px;
        min-height: 0;
    }

    .ps-page .hero-copy h2 {
        font-size: 24px;
    }

    .ps-page .promo-grid {
        grid-template-columns: 1fr;
    }

    .ps-page .section-row {
        margin: 22px 0 14px;
    }

    .ps-page .section-row h3 {
        font-size: 18px;
    }
}

/* Must be global: stops the page behind the mobile sheet from scrolling. */
body.ps-filter-lock {
    overflow: hidden;
}

/* ══ ChipBoxWithIcon: a DEDICATED chip + leading-icon presentation type, not a variant of
   ListField and not a restyle of ChipBox. It deliberately does NOT reuse the shared
   .ps-page .chip / .chip-row rules above (used by ChipBox / SeparateBox / RoundBox /
   ListFieldWithoutCheckBox) - it has its own .cbwi-* namespace so the two can never
   affect one another. Every selector below is scoped to .ps-page .ChipBoxWithIcon; no
   existing rule in this file is modified. The icon is optional: options whose DB Icon
   column is empty render as a text-only chip with no reserved gap. ══ */
.ps-page .ChipBoxWithIcon .cbwi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-page .ChipBoxWithIcon .cbwi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: var(--ps-white);
    color: #2b3038;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: 0.14s;
}

.ps-page .ChipBoxWithIcon .cbwi-chip:hover {
    background: #f3f3f3;
    color: #2b3038;
}

.ps-page .ChipBoxWithIcon .cbwi-chip.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Fixed box keeps chip heights and label baselines aligned across a row that mixes
   options with and without icons. Deliberately no brightness/invert filter on .active
   (unlike .icon-card.border-design .i img above) - that trick suits monochrome
   pictograms but would destroy a multi-colour swatch such as a white or blue colour chip. */
.ps-page .ChipBoxWithIcon .cbwi-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    display: block;
}

.ps-page .ChipBoxWithIcon .cbwi-label {
    white-space: nowrap;
}

/* ══ "Brand & model" grouped component (ViewGroup=="brandModel") ══
   Chips inside reuse .chip/.chip-row/.chip.active verbatim (same as ChipBox above) -
   only the wrapper/layout pieces specific to this component are styled here. */
.ps-page .filter-viewgroup {
    margin-bottom: 18px;
}

.ps-page .filter-viewgroup-title {
    font-size: 15px;
    font-weight: 700;
}

.ps-page .bm-search-row {
    margin-bottom: 12px;
}

.ps-page .bm-search {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--ps-line2);
    border-radius: 10px;
    font-size: 13px;
    background: var(--ps-white);
}

.ps-page .bm-toplabel {
    font-size: 11px;
    font-weight: 650;
    color: var(--ps-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

/* Inside a .bm-field the label-to-chips gap already comes from .bm-field's own
   flex gap (see below), so the label's own bottom margin would double it up. */
.ps-page .bm-field .bm-toplabel {
    margin-bottom: 0;
}

.ps-page .bm-top-brands {
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ps-line);
}

/* "Hide all brands" - small bordered pill button, matching the reference design
   (was previously a plain text link). */
.ps-page .bm-toggle-all {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px 0 14px;
    border: 1px solid var(--ps-line2);
    border-radius: 999px;
    background: var(--ps-white);
    color: var(--ps-text);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.ps-page .bm-toggle-all:hover {
    background: #f3f3f3;
}

/* Collapsed = only the first brand card stays visible; the rest fold away.
   data-bm-force-open (set while a search has a match, see ProductSearch.page.js
   block 8) removes the visual collapse regardless of this class so matches are
   never hidden behind the toggle. */
.ps-page .bm-brand-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Cap at 7 collapsed-card rows; 8th+ brand scrolls within this box instead of growing the
       sidebar. 46px = one collapsed .bm-brand-block (12px+12px .bm-brand-head padding + ~20px
       text line-height [15px font-size x 1.35 line-height, both from .ps-page] + 1px+1px
       .bm-brand-block border); 8px = .bm-brand-list's own gap. Recompute 370 if any of those
       five values change. */
    max-height: 370px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
}

.ps-page .bm-brand-list::-webkit-scrollbar {
    width: 6px;
}

.ps-page .bm-brand-list::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 6px;
}

.ps-page .bm-brand-list.bm-collapsed .bm-brand-block:not(:first-child) {
    display: none;
}

.ps-page .bm-brand-list.bm-collapsed[data-bm-force-open="1"] .bm-brand-block {
    display: block;
}

/* Each brand is a bordered, rounded card - overflow:hidden so the header's
   black background (see .bm-expanded below) respects the card's rounded
   corners instead of squaring them off.

   flex-shrink:0 is required, not cosmetic: .bm-brand-block is a flex item of
   .bm-brand-list (a flex column capped at max-height:375px, see above). Per
   the flexbox spec, a flex item whose own overflow isn't "visible" gets an
   automatic minimum size of 0 instead of being protected by its content size -
   so without this, once total card content exceeds 375px the browser doesn't
   scroll, it proportionally SHRINKS every card (measured: 45px cards
   collapsing to ~16px, with overflow:hidden clipping the header/name text
   down to an invisible sliver) until everything fits with no overflow at all,
   which is also why no scrollbar appeared. flex-shrink:0 keeps every card at
   its natural content height, so content past 375px genuinely overflows and
   overflow-y:auto scrolls it instead of crushing it. */
.ps-page .bm-brand-block {
    border: 1px solid var(--ps-line2);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ps-white);
    flex-shrink: 0;
}

/* Search with no match anywhere in this block (see ProductSearch.page.js block 8). */
.ps-page .bm-brand-block.bm-brand-hidden {
    display: none;
}

/* Clickable bar - both selects the brand (onclick="changeFilter('brand:{id}',
   event)" rendered on the element itself, see ProductSearchFilter.cshtml) and
   toggles .bm-expanded on its .bm-brand-block (see ProductSearch.page.js
   "Phase 2" click listener) - one click does both now that the old separate
   "all models" chip/link is gone. */
.ps-page .bm-brand-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 16px horizontal matches .bm-card-body's own 16px side padding below, so
       the brand name and the chip rows line up on the same left edge. */
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.14s, color 0.14s;
}

/* Not-yet-selected header only - gives the row a "you can click this" hover
   cue it never had before. Guarded off .active only (not .bm-expanded too) so
   it still applies while a brand is expanded-but-unselected (see the
   .bm-expanded/.active split below) - that state keeps the default white
   header, so it deserves the same hover feedback as a fully-collapsed one. */
.ps-page .bm-brand-head:not(.active):hover {
    background: #f7f7f7;
}

.ps-page .bm-brand-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ps-text);
}

/* Expand/collapse affordance - replaces the old redundant "all models" text
   (the header click already selects the brand; the label added bulk without
   adding information). Rotates to point up once the card is expanded. */
.ps-page .bm-brand-chevron {
    font-size: 12px;
    color: var(--ps-muted);
    transition: transform 0.16s ease, color 0.14s;
    flex: 0 0 auto;
}

/* Rotation is purely an open/closed indicator, so it stays tied to
   .bm-expanded alone - unlike the black "selected" look below, it must NOT
   also fire off .active, since a card can be expanded without being selected
   (see the color split just below for why). */
.ps-page .bm-brand-block.bm-expanded .bm-brand-chevron {
    transform: rotate(180deg);
}

/* Selected card - black header, white text. Deliberately keyed ONLY off
   .active (brandIsSelected), NOT .bm-expanded: a card also expands when a
   deep-linked model/modeltype/version value belongs to it, with the brand
   itself never selected (ProductSearchFilter.cshtml's
   modelExpandedBrandValues/modelTypeExpandedBrandValues/versionExpandedBrandValues -
   "deliberately independent of selectedBrandIds ... never whether a chip
   renders active/selected"). Painting that expanded-but-unselected header
   black made it indistinguishable from a real selection, so clicking it -
   expecting to deselect what looked already selected - instead ADDED that
   brand as a new filter with no warning. Only .active may still turn this
   black; .bm-expanded on its own now keeps the default white header. */
.ps-page .bm-brand-head.active {
    background: #111;
}

.ps-page .bm-brand-head.active .bm-brand-chevron {
    color: #fff;
}

.ps-page .bm-brand-head.active .bm-brand-name {
    color: #fff;
}

/* Card body (model / model-type / version fields) - only shown while the card
   is expanded. flex+gap replaces the old per-row margin-top/padding-top +
   dashed border-top rules: Model, Model Type and Version now read as one
   cohesive flowing group (spacing comes only from this gap) instead of three
   separate boxed-off segments, and the padding is trimmed so an expanded card
   isn't taller than its content needs. */
.ps-page .bm-card-body {
    display: none;
    flex-direction: column;
    gap: 13px;
    padding: 14px 16px 16px;
}

.ps-page .bm-brand-block.bm-expanded .bm-card-body {
    display: flex;
}

/* One label + its chip-row, as a single unit - the label sits tight against
   its own chips; the loose spacing that used to come from dashed separators
   now comes only from .bm-card-body's gap between .bm-field siblings. */
.ps-page .bm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Unify Model/Model Type/Version chips to one consistent size - previously
   Model Type/Version used the smaller .chip-sm padding/font-size, creating a
   two-tier hierarchy the visual reference doesn't have. Scoped to this card
   only (not the global .chip), so Top brands and every other ChipBox-family
   filter elsewhere on the page are unaffected. .chip.active already supplies
   the black selected state generically, so no chip-sm .active override is
   needed here any more - background is deliberately split into its own
   :not(.active) rule below rather than folded into this one, because
   ".bm-card-body .chip" and ".chip.active" (productsearch.css:340) tie on
   specificity (three classes each) and whichever is later in the file would
   otherwise win, silently breaking the black active-chip background here. */
.ps-page .bm-card-body .chip {
    padding: 6px 13px;
    font-weight: 500;
}

.ps-page .bm-card-body .chip:not(.active) {
    background: var(--ps-soft);
}

/* Model chip hidden by the search box (see ProductSearch.page.js block 8) -
   same convention as .ListFieldWithoutCheckBox .chip-search-hidden above. */
.ps-page .bm-model-chip.chip-search-hidden {
    display: none;
}