/* assets/css/pages/shop-plp.css
   ---------------------------------------------------------------------------
   GT Motorcycles — Shop / Product-Listing Page (PLP)
   Left-sidebar filters + paginated grid. Replaces the horizontal carousel and
   top filter-shelf presentation on BOTH the bikes-in-stock archive and the
   parts/accessories listing.

   Depends on base.css tokens. Reuses the theme's existing filter INPUTS
   (#gtm-stock-filters / #gtm-parts-filters and their .gtm-range-input /
   .gtm-num-display / .gtm-stock-pill / .gtm-parts-pill children) — this file
   only re-lays them into a sidebar. The card look (.gtm-card-stock-v2 /
   .gtm-card-parts-v2) is owned by scroller.css / parts-shop.css / cards.css.
   --------------------------------------------------------------------------- */

/* ==========================================================================
   0 — LOCAL TOKENS (mirror of base.css, scoped fallbacks)
   ========================================================================== */
.gtm-plp {
    --plp-primary: var(--c-primary, #342E37);
    --plp-text: var(--c-text, #333333);
    --plp-border: var(--c-border, #DFDFDF);
    --plp-ink-2: #5c5c5c;
    --plp-ink-3: #767676;
    --plp-page: #E2E2E2;
    --plp-panel: #ffffff;

    /* Dynamic accent — inherits body.brand-* via --c-active-brand */
    --plp-accent: var(--c-active-brand, #342E37);

    --plp-radius-panel: 16px;
    --plp-radius-pill: 99px;
    --plp-shadow-1: 0 2px 6px rgba(0, 0, 0, .08);
    --plp-shadow-2: 0 4px 12px rgba(0, 0, 0, .12);
    --plp-shadow-3: 0 12px 24px rgba(0, 0, 0, .18);

    --plp-sidebar-w: 288px;
}

/* ==========================================================================
   1 — SHELL
   ========================================================================== */
.gtm-plp {
    background: var(--plp-page);
    padding: 32px 0 64px;
    color: var(--plp-text);
}
.gtm-plp__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Page header */
.gtm-plp__head {
    margin-bottom: 24px;
}
.gtm-plp__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--plp-primary);
    padding: 4px 12px;
    border-radius: var(--plp-radius-pill);
    margin-bottom: 12px;
}
.gtm-plp__title {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--plp-primary);
    letter-spacing: .005em;
}
.gtm-plp__sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--plp-ink-2);
    max-width: 70ch;
}

/* Two-column body */
.gtm-plp__body {
    display: grid;
    grid-template-columns: var(--plp-sidebar-w) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ==========================================================================
   2 — SIDEBAR
   ========================================================================== */
.gtm-plp__aside {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The <form> is the theme's real filter form (#gtm-stock-filters /
   #gtm-parts-filters). In the PLP it also carries .gtm-plp-filters so the
   sidebar chrome applies without touching the old .gtm-filter-shelf rules. */
.gtm-plp-filters {
    background: var(--plp-panel);
    border: 1px solid var(--plp-border);
    border-radius: var(--plp-radius-panel);
    overflow: hidden;
    /* Neutralise legacy .gtm-filter-shelf shelf styling when both classes exist */
    padding: 0;
    margin: 0;
}

.gtm-plp-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--plp-border);
}
.gtm-plp-filters__title {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--plp-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gtm-plp-filters__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--plp-radius-pill);
    background: var(--plp-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
.gtm-plp-filters__count[data-n="0"] {
    display: none;
}

/* Reset link — the theme's real #gtm-filter-reset / #gtm-parts-reset button
   lives here; restyle it as a compact underlined link inside the header. */
.gtm-plp-filters__head .gtm-reset-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--plp-ink-3);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    transition: color .15s;
}
.gtm-plp-filters__head .gtm-reset-btn:hover {
    color: var(--plp-accent);
}

/* Active-filter chips */
.gtm-plp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--plp-border);
    background: #faf9fa;
}
.gtm-plp-chips:empty {
    display: none;
}
.gtm-plp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: var(--plp-radius-pill);
    background: #fff;
    border: 1px solid var(--plp-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--plp-primary);
    line-height: 1;
    box-shadow: var(--plp-shadow-1);
}
.gtm-plp-chip button {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: #eceaed;
    color: #5a545d;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    line-height: 1;
    font-size: 12px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.gtm-plp-chip button:hover {
    background: var(--plp-accent);
    color: #fff;
}

/* Filter group / accordion */
.gtm-fgroup {
    border-bottom: 1px solid var(--plp-border);
}
.gtm-fgroup:last-child {
    border-bottom: 0;
}

/* The theme's .gtm-filter-label sits inside groups; keep it but drop its own
   bottom margin where the group controls spacing. */
.gtm-fgroup .gtm-filter-label {
    margin-bottom: 0;
}

/* Static (always-open) group */
.gtm-fgroup--static {
    padding: 20px;
}
.gtm-fgroup--static > .gtm-filter-label {
    margin-bottom: 12px;
}

/* Collapsible group: a <button> toggle + body */
.gtm-fgroup__toggle {
    width: 100%;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px;
    text-align: left;
    color: var(--plp-primary);
    font-family: inherit;
}
.gtm-fgroup__toggle:hover {
    background: #faf9fa;
}
.gtm-fgroup__toggle .gtm-filter-label {
    pointer-events: none;
}
.gtm-fgroup__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gtm-fgroup__hint {
    font-size: 12px;
    font-weight: 700;
    color: var(--plp-ink-3);
    font-variant-numeric: tabular-nums;
}
.gtm-fgroup__chev {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--plp-ink-3);
    transition: transform .2s ease;
}
.gtm-fgroup__toggle[aria-expanded="true"] .gtm-fgroup__chev {
    transform: rotate(180deg);
}
.gtm-fgroup__body {
    padding: 0 20px 20px;
}
.gtm-fgroup__toggle[aria-expanded="false"] + .gtm-fgroup__body {
    display: none;
}

/* Condition = 2-up segmented toggle. The theme markup already wraps the two
   condition pills in .gtm-cond-group; make it a 2-col grid in the sidebar. */
.gtm-fgroup .gtm-cond-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Pills grid (Make / Type / Transmission / Category / Brand). The theme uses
   several grid classes; normalise them to a wrapping flex row in the narrow
   sidebar so pills sit naturally. */
.gtm-plp-filters .gtm-brand-grid,
.gtm-plp-filters .gtm-type-grid,
.gtm-plp-filters .gtm-trans-grid,
.gtm-plp-filters .gtm-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-template-columns: none;
}

/* Pill accent: recolour checked pills with the live brand accent (theme
   default was hard #342E37). Works for both bike + parts pills. */
.gtm-plp-filters .gtm-stock-pill input:checked + span,
.gtm-plp-filters .gtm-parts-pill input:checked + span {
    background: var(--plp-accent);
    border-color: var(--plp-accent);
    color: #fff;
}
.gtm-plp-filters .gtm-stock-pill span,
.gtm-plp-filters .gtm-parts-pill span {
    width: auto;
}
.gtm-plp-filters .gtm-cond-group .gtm-stock-pill span {
    width: 100%;
}
.gtm-plp-filters .gtm-stock-pill input:focus-visible + span,
.gtm-plp-filters .gtm-parts-pill input:focus-visible + span {
    outline: 3px solid var(--plp-accent);
    outline-offset: 2px;
}

/* Range slider accent — override the theme's fixed --gtm-filter-active so the
   progress bar + thumbs pick up the live brand accent inside the PLP. */
.gtm-plp-filters {
    --gtm-filter-active: var(--plp-accent);
}
.gtm-plp-filters .gtm-range-wrapper {
    margin-bottom: 0;
    padding-top: 20px;
}
.gtm-plp-filters .gtm-range-group {
    gap: 0;
}
/* Value labels: tabular + muted, matching the mockup read-out row */
.gtm-plp-filters .gtm-range-labels {
    margin-top: 12px;
}
.gtm-plp-filters .gtm-num-display {
    font-variant-numeric: tabular-nums;
    color: var(--plp-primary);
    font-size: 13px;
}

/* Hide the theme's old bottom action bar inside the sidebar — the PLP moves
   the count into the results bar and Reset into the header. The reset button
   itself is relocated into the header by the template; whatever legacy wrapper
   remains is hidden. */
.gtm-plp-filters .gtm-filter-actions {
    display: none;
}

/* ==========================================================================
   3 — MAIN COLUMN: results bar → grid → pager
   ========================================================================== */
.gtm-plp__main {
    min-width: 0;
}

.gtm-plp-resultsbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--plp-panel);
    border: 1px solid var(--plp-border);
    border-radius: var(--plp-radius-panel);
    padding: 16px 20px;
    margin-bottom: 24px;
}
/* The theme's #gtm-result-count / #gtm-parts-count text node lives here. */
.gtm-plp-resultsbar .gtm-result-count {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--plp-ink-2);
}
.gtm-plp-resultsbar .gtm-result-count b {
    color: var(--plp-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gtm-plp-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gtm-plp-mobile-filter {
    display: none;
}

.gtm-plp-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gtm-plp-sort label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--plp-ink-3);
}
.gtm-plp-select {
    position: relative;
}
.gtm-plp-select svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--plp-ink-3);
    pointer-events: none;
}
.gtm-plp-select select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--plp-primary);
    background: #fff;
    border: 1px solid var(--plp-border);
    border-radius: 10px;
    padding: 9px 34px 9px 14px;
    cursor: pointer;
    transition: border-color .15s;
}
.gtm-plp-select select:hover {
    border-color: var(--plp-accent);
}

/* The grid sits inside a wrapper that ALSO carries the legacy
   .gtm-explore-grid-wrapper / .gtm-parts-grid-wrapper classes (kept so the JS
   scroll-reset lookup still resolves). explore-bikes.css styles that wrapper as
   a horizontally-scrolling carousel viewport (padding-left, overflow-x:auto,
   margin-bottom). Neutralise all of that inside the PLP so the grid aligns to
   the panel edge and never scrolls sideways. */
.gtm-plp .gtm-explore-grid-wrapper,
.gtm-plp .gtm-parts-grid-wrapper {
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* The grid. The AJAX target id (#gtmExploreTrack / #gtmPartsTrack) sits on
   this element so track.innerHTML = res.data.html still works. It also carries
   the legacy .gtm-explore-track class in the wild via id-selectors; the rules
   below win by specificity + source order (shop-plp.css loads last). */
.gtm-plp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    transition: opacity .15s ease;
}
/* Cards stretch to fill their grid cell. */
.gtm-plp-grid > .gtm-card-stock-v2,
.gtm-plp-grid > .gtm-card-parts-v2 {
    width: 100%;
    max-width: none;
    height: 100%;
}

/* No-results row spans the full grid. */
.gtm-plp-grid .gtm-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: var(--plp-ink-3);
}

/* Loading state. The bikes-in-stock page server-renders its grid, so this is
   only seen on surfaces that still fetch on load (archive-product.php). */
.gtm-plp-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: var(--plp-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Recoverable failure: a timed-out or errored fetch, with a way out. */
.gtm-plp-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 48px 16px;
    color: var(--plp-ink-3);
}
.gtm-plp-error p {
    margin: 0;
}

/* ==========================================================================
   4 — PAGINATION (numbered pager)
   ========================================================================== */
.gtm-plp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.gtm-plp-pager:empty {
    display: none;
}
/* The server renders the pager as <a href> links (crawlable, works without JS);
   after the first AJAX fetch the JS re-renders it as <button>. Both must look
   identical. */
.gtm-plp-pager button,
.gtm-plp-pager a,
.gtm-plp-pager span {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--plp-border);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--plp-primary);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.gtm-plp-pager button:hover,
.gtm-plp-pager a:hover {
    border-color: var(--plp-accent);
    color: var(--plp-accent);
    box-shadow: var(--plp-shadow-1);
}
.gtm-plp-pager .is-current {
    background: var(--plp-accent);
    border-color: var(--plp-accent);
    color: #fff;
    box-shadow: var(--plp-shadow-2);
    pointer-events: none;
    cursor: default;
}
.gtm-plp-pager .gtm-plp-pager__gap {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--plp-ink-3);
    min-width: 24px;
    cursor: default;
    pointer-events: none;
}
.gtm-plp-pager .gtm-plp-pager__nav svg {
    width: 16px;
    height: 16px;
}
/* [disabled] for the JS <button> pager; [aria-disabled] for the server <span>
   at the ends of the range, where a link would have nowhere to point. */
.gtm-plp-pager .gtm-plp-pager__nav[disabled],
.gtm-plp-pager .gtm-plp-pager__nav[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   5 — MOBILE DRAWER
   The drawer + overlay are printed OUTSIDE the .gtm-plp section (siblings of it
   in archive-product.php / archive-product-parts.php), so the --plp-* tokens
   declared on the .gtm-plp selector do NOT reach them — that left the panel and
   its moved-in form with unresolved var() backgrounds (i.e. transparent). Both
   elements therefore re-declare the handful of tokens they + the cloned filter
   form rely on, and carry literal background fallbacks. z-index sits above the
   sticky mast (5000) and the mobile-menu drawer/overlay (9500 / 9600) so the
   panel is never trapped behind the header.
   ========================================================================== */
.gtm-plp-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(20, 18, 22, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.gtm-plp-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.gtm-plp-drawer {
    /* Re-declare the tokens the panel + the cloned .gtm-plp-filters form use,
       so they resolve even though the drawer lives outside .gtm-plp. */
    --plp-primary: var(--c-primary, #342E37);
    --plp-text: var(--c-text, #333333);
    --plp-border: var(--c-border, #DFDFDF);
    --plp-ink-2: #5c5c5c;
    --plp-ink-3: #767676;
    --plp-page: #E2E2E2;
    --plp-panel: #ffffff;
    --plp-accent: var(--c-active-brand, #342E37);
    --plp-radius-panel: 16px;
    --plp-radius-pill: 99px;
    --plp-shadow-1: 0 2px 6px rgba(0, 0, 0, .08);
    --plp-shadow-2: 0 4px 12px rgba(0, 0, 0, .12);
    --plp-shadow-3: 0 12px 24px rgba(0, 0, 0, .18);
    --gtm-filter-active: var(--plp-accent);

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10001;
    width: min(88vw, 360px);
    background: #E2E2E2;
    background: var(--plp-page, #E2E2E2);
    color: var(--plp-text, #333);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .3);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
}
.gtm-plp-drawer.is-open {
    transform: translateX(0);
}
.gtm-plp-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #342E37;
    background: var(--plp-primary, #342E37);
    color: #fff;
    flex: 0 0 auto;
}
.gtm-plp-drawer__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gtm-plp-drawer__close {
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.gtm-plp-drawer__close:hover {
    background: rgba(255, 255, 255, .28);
}
.gtm-plp-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}
/* The real filter form is MOVED (not cloned) into the drawer body on mobile.
   Pin a solid panel background + border with literal fallbacks so it is never
   see-through, regardless of token resolution. */
.gtm-plp-drawer__body .gtm-plp-filters {
    background: #fff;
    background: var(--plp-panel, #fff);
    border: 1px solid #DFDFDF;
    border: 1px solid var(--plp-border, #DFDFDF);
    border-radius: 16px;
    border-radius: var(--plp-radius-panel, 16px);
    box-shadow: none;
}
.gtm-plp-drawer__foot {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #DFDFDF;
    border-top: 1px solid var(--plp-border, #DFDFDF);
    background: #fff;
    flex: 0 0 auto;
}
.gtm-plp-drawer__foot .gtm-plp-btn {
    flex: 1 1 0;
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--plp-radius-pill);
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .15s, box-shadow .15s, color .15s;
}
.gtm-plp-btn--ghost {
    background: #fff;
    color: #342E37;
    color: var(--plp-primary, #342E37);
    border: 1px solid #DFDFDF;
    border: 1px solid var(--plp-border, #DFDFDF);
}
.gtm-plp-btn--ghost:hover {
    border-color: var(--plp-accent, #342E37);
    color: var(--plp-accent, #342E37);
}
.gtm-plp-btn--solid {
    background: #342E37;
    background: var(--plp-accent, #342E37);
    color: #fff;
    box-shadow: var(--plp-shadow-2, 0 4px 12px rgba(0, 0, 0, .12));
}
.gtm-plp-btn--solid:hover {
    filter: brightness(1.06);
}

/* Prevent body scroll while the drawer is open */
body.gtm-plp-drawer-open {
    overflow: hidden;
}

/* ==========================================================================
   6 — RESPONSIVE
   4-up >=1200; 3-up 992-1199; 2-up 768-991 (drawer); 1-up <768
   ========================================================================== */
@media (max-width: 1199.98px) {
    .gtm-plp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .gtm-plp {
        --plp-sidebar-w: 264px;
    }
}

@media (max-width: 991.98px) {
    .gtm-plp__body {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Desktop rail hidden; its filters live in the drawer (cloned by JS). */
    .gtm-plp__aside {
        display: none;
    }
    .gtm-plp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .gtm-plp-mobile-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        appearance: none;
        cursor: pointer;
        background: var(--plp-primary);
        color: #fff;
        border: 0;
        padding: 10px 16px;
        border-radius: var(--plp-radius-pill);
        font-family: inherit;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .03em;
        text-transform: uppercase;
        box-shadow: var(--plp-shadow-2);
    }
    .gtm-plp-mobile-filter .gtm-plp-mobile-filter__n {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--plp-radius-pill);
        background: #FFC424;
        color: #111;
        font-size: 11px;
        font-weight: 800;
        line-height: 18px;
        text-align: center;
    }
    .gtm-plp-mobile-filter .gtm-plp-mobile-filter__n[data-n="0"] {
        display: none;
    }
    .gtm-plp-sort label {
        display: none;
    }
}

@media (max-width: 560px) {
    .gtm-plp-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .gtm-plp__title {
        font-size: 26px;
    }
    .gtm-plp-resultsbar {
        flex-wrap: wrap;
    }
    .gtm-plp__inner {
        padding: 0 16px;
    }
    .gtm-plp-pager button,
    .gtm-plp-pager a,
    .gtm-plp-pager span {
        min-width: 38px;
        height: 38px;
        padding: 0 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gtm-plp-drawer,
    .gtm-plp-drawer-overlay,
    .gtm-plp-grid,
    .gtm-fgroup__chev {
        transition: none;
    }
}

/* Force the PLP grid over the legacy .gtm-explore-track / .gtm-parts-track
   2-row horizontal-scroller grid that still shares this element id/classes.
   ID + ancestor specificity + !important guarantees the gap + columns win. */
.gtm-plp #gtmExploreTrack, .gtm-plp #gtmPartsTrack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  column-gap: 24px !important;
  row-gap: 28px !important;
}
@media (max-width: 1199.98px) { .gtm-plp #gtmExploreTrack, .gtm-plp #gtmPartsTrack { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 991.98px)  { .gtm-plp #gtmExploreTrack, .gtm-plp #gtmPartsTrack { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 575.98px)  { .gtm-plp #gtmExploreTrack, .gtm-plp #gtmPartsTrack { grid-template-columns: 1fr !important; } }

/* The legacy card (.gtm-card-parts-v2 / .gtm-card-stock-v2) carries a fixed
   width:260px + flex-basis:280px for the old carousel; in the PLP grid that
   overflows the column and overlaps neighbours. Force them to fill the cell. */
.gtm-plp #gtmExploreTrack > *, .gtm-plp #gtmPartsTrack > * {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
}

/* Bikes-in-stock cards carry a wider price pill + Enquire button; give them
   3-up on desktop so the content is not cramped. Parts stay 4-up. */
.gtm-plp #gtmExploreTrack { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 991.98px) { .gtm-plp #gtmExploreTrack { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 767.98px) { .gtm-plp #gtmExploreTrack { grid-template-columns: 1fr !important; } }


/* Mobile: keep the Filters button on-screen at all times (floating pill) so
   filters stay reachable while scrolling the grid. */
@media (max-width: 991.98px) {
    .gtm-plp-mobile-filter {
        position: fixed;
        right: 16px;
        bottom: 20px;
        z-index: 500;
        padding: 13px 22px;
        font-size: 14px;
        box-shadow: 0 10px 26px rgba(17,17,17,.3);
    }
}