/* Catalog (shop archive) - dealer.international
   Depends on: components.css
   Loads conditionally on archive surfaces (shop, product taxonomies, product search).
   Source of truth: CATALOG-SYSTEM.md */

/* =========================================================================
   Storefront resets - align archive container to project tokens
   ========================================================================= */

.dealer-catalog-archive .site-content > .col-full,
.woocommerce-shop .site-content > .col-full,
.tax-product_cat .site-content > .col-full,
.tax-product_brand .site-content > .col-full,
.search-results .site-content > .col-full {
    max-width: var(--container-max);
    padding-inline: var(--padding-mobile);
    margin: 0 auto;
}

/* Storefront sets `overflow-x: hidden` on body and .site, which (per CSS spec)
   forces `overflow-y: auto` on the same element and turns it into a scroll
   container. That breaks `position: sticky` for descendants because they bind
   to the body's (non-scrolling) scroll context instead of the viewport.
   Replacing with `overflow-x: clip` keeps the same visual effect (cropping
   horizontal overflow) without creating a scroll container. */
body.dealer-catalog-archive,
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_brand,
body.search-results,
body.dealer-catalog-archive .site,
body.woocommerce-shop .site,
body.tax-product_cat .site,
body.tax-product_brand .site,
body.search-results .site {
    overflow-x: clip;
}

/* =========================================================================
   Local catalog tokens
   ========================================================================= */

.dealer-shop {
    --catalog-sidebar-width: 240px;
    --catalog-title-margin-bottom: 30px;
    /* Sticky offset compensates for the fixed header so the sidebar header
       doesn't slide under #masthead when the user scrolls. */
    --catalog-sticky-top: calc(var(--dealer-header-offset, 70px) + 24px);
    --catalog-layout-gap: 24px;

    width: 100%;
    margin: 0;
    padding-block: 30px 20px;
}

/* =========================================================================
   Title - centered above the sidebar+main layout
   ========================================================================= */

.dealer-shop__title,
.dealer-catalog-archive .dealer-shop__title,
.woocommerce-shop .dealer-shop__title,
.tax-product_cat .dealer-shop__title,
.tax-product_brand .dealer-shop__title,
.search-results .dealer-shop__title {
    margin: 0 0 var(--catalog-title-margin-bottom);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
    text-transform: none;
}

/* Breadcrumbs - centered above the catalog title (same look as the product
   page). `.dealer-shop` padding-top owns the gap above; 12px to the h1 below. */
.dealer-shop .dealer-breadcrumbs--catalog {
    margin: 0 0 12px;
}

.dealer-shop .dealer-breadcrumbs--catalog .dealer-breadcrumbs__inner {
    text-align: center;
}

/* =========================================================================
   Layout shell - single column on mobile/tablet, sidebar+main on desktop
   ========================================================================= */

.dealer-shop__layout {
    display: flex;
    flex-direction: column;
    gap: var(--catalog-layout-gap);
}

.dealer-shop__sidebar {
    /* On mobile/tablet the sidebar IS the drawer - pushed off-screen until
       the user opens it via the toolbar trigger. The desktop media query
       below restores it as a sticky inline column. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 0;
    background: var(--color-white);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.28s ease-out;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}

.dealer-shop[data-drawer-state="open"] .dealer-shop__sidebar {
    transform: translateX(0);
    pointer-events: auto;
}

.dealer-shop__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================================================================
   Filter sidebar - accordion stack of filter groups
   On mobile/tablet this same element is the drawer body.
   ========================================================================= */

.dealer-shop-filters {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: 100%;
}

.dealer-shop-filters__desktop-title {
    display: none;
}

.dealer-shop-filters__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 20px;
}

/* Desktop reset-all link - only visible when at least one filter is active.
   Hidden by default; .is-visible class is toggled by PHP on first render
   and by catalog.js as filters change. */
.dealer-shop-filters__reset-all {
    display: none;
    margin: 15px 0 5px;
    padding: 10px 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dealer-shop-filters__reset-all.is-visible {
    display: inline-block;
}

.dealer-shop-filters__reset-all:hover {
    color: var(--color-primary);
}

.dealer-shop-filters__reset-all:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================================
   Drawer chrome - visible only on mobile/tablet (<1024px)
   Header (title + reset + close) sticks to the top of the sliding panel.
   Footer (Apply CTA) sticks to the bottom.
   ========================================================================= */

.dealer-shop-filters__drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.dealer-shop-filters__drawer-title {
    margin: 0;
    flex: 0 0 auto;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.dealer-shop-filters__drawer-reset {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    line-height: 1;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dealer-shop-filters__drawer-reset:hover {
    color: var(--color-black);
    background: transparent;
}

.dealer-shop-filters__drawer-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
}

.dealer-shop-filters__drawer-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.dealer-shop-filters__drawer-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-shop-filters__drawer-footer {
    padding: 16px 20px 20px;
    background: var(--color-white);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

/* Drawer apply CTA uses the shared .btn-primary .btn-full variant -
   the dealer-shop-filters__drawer-apply class is kept only as a JS hook
   for the live-count CTA text update. */

/* =========================================================================
   Filter group - one accordion (toggle + collapsible panel)
   ========================================================================= */

.dealer-filter-group {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dealer-filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.dealer-filter-group__toggle:hover {
    background: transparent;
    color: var(--color-primary);

}

.dealer-filter-group__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-filter-group__label {
    flex: 1 1 auto;
}

.dealer-filter-group__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    transition: transform 0.2s ease;
}

.dealer-filter-group[data-state="open"] .dealer-filter-group__arrow {
    transform: rotate(180deg);
}

.dealer-filter-group__panel {
    display: none;
    padding: 4px 0 12px;
}

.dealer-filter-group[data-state="open"] .dealer-filter-group__panel {
    display: block;
}

.dealer-filter-group__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dealer-filter-group__item {
    margin: 0;
    padding: 0;
}

.dealer-filter-group__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1;
}

.dealer-filter-group__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid rgba(213, 215, 218, 1);
    border-radius: 4px;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dealer-filter-group__checkbox:hover {
    border-color: var(--color-black);
}

.dealer-filter-group__checkbox:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-filter-group__checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 6.5L5 9l4.5-5" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px;
}

.dealer-filter-group__option-label {
    flex: 1 1 auto;
}

.dealer-filter-group__more {
    display: none;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dealer-filter-group__more:hover {
    color: var(--color-primary);
    background: transparent;
}

.dealer-filter-group__more:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Screen-reader-only utility (for h2 inside the filter sidebar) */
.dealer-shop-filters__heading.screen-reader-text {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* =========================================================================
   Load more button - outline pill below the grid
   Hidden by the PHP template on the last page.
   ========================================================================= */

.dealer-shop-loadmore {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* Load-more uses the shared .btn-outline-light variant. Local override:
   minimum width - the variant is inline-flex by default and would shrink
   to content length otherwise. */
.dealer-shop-loadmore__btn {
    min-width: 240px;
}

/* =========================================================================
   Back to top - small text + up arrow, smooth scroll on click
   ========================================================================= */

.dealer-shop-back-to-top {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .dealer-shop-back-to-top {
        margin-top: 32px;
    }
}

.dealer-shop-back-to-top__btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    cursor: pointer;
}

.dealer-shop-back-to-top__btn:hover {
    color: var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}

.dealer-shop-back-to-top__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.dealer-shop-back-to-top__arrow {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.dealer-shop-back-to-top__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================================
   Numeric pagination - generated by paginate_links()
   `paginate_links()` outputs <a class="page-numbers"> for links and
   <span class="page-numbers current"> for the active page. We style both.
   ========================================================================= */

.dealer-shop-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.dealer-shop-pagination__list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dealer-shop-pagination__item {
    margin: 0;
    padding: 0;
}

.dealer-shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dealer-shop-pagination a.page-numbers:hover {
    border-color: var(--color-black);
}

.dealer-shop-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    cursor: default;
}

.dealer-shop-pagination .page-numbers.dots {
    border: 0;
    background: transparent;
    cursor: default;
    padding: 0 4px;
    color: rgba(0, 0, 0, 0.55);
}

.dealer-shop-pagination .page-numbers.prev,
.dealer-shop-pagination .page-numbers.next {
    font-size: 18px;
    line-height: 1;
}

.dealer-shop-pagination a.page-numbers:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================================================
   Empty state - when the archive query returns zero products
   ========================================================================= */

.dealer-shop__empty-archive {
    display: flex;
    justify-content: center;
    min-height: 420px;
}

.dealer-shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 50px 20px;
    text-align: center;
}

.dealer-shop-empty__title {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.dealer-shop-empty__text {
    margin: 0;
    max-width: 480px;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.dealer-shop-empty__reset {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dealer-shop-empty__reset:hover {
    text-decoration: none;
}

.dealer-shop-empty__reset--button {
    justify-content: center;
    min-width: 190px;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid var(--color-primary);
    border-radius: var(--btn-radius-pill);
    color: var(--color-primary);
    text-decoration: none;
}

.dealer-shop-empty__reset--button:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* =========================================================================
   Toolbar - mobile/tablet triggers + desktop inline sort
   On mobile/tablet: two trigger buttons stretch the full width.
   On desktop: triggers are hidden, inline sort dropdown sits on the right.
   ========================================================================= */

.dealer-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    min-height: 44px;
}

.dealer-shop-toolbar__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dealer-shop-toolbar__trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dealer-shop-toolbar__trigger:hover {
    border-color: var(--color-black);
}

.dealer-shop-toolbar__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-shop-toolbar__trigger-icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-black);
}

/* =========================================================================
   Sort dropdown - native <select> with neutral, project-token styling
   ========================================================================= */

.dealer-shop-sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.dealer-shop-sort__label {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.dealer-shop-sort__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 35px 0 15px;
    border: 1px solid rgba(213, 215, 218, 1);
    border-radius: 5px;
    background-color: var(--color-white);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dealer-shop-sort__select:hover {
    border-color: var(--color-black);
}

.dealer-shop-sort__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-shop-sort__submit {
    margin-left: 8px;
    padding: 0 14px;
    height: 40px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

/* =========================================================================
   Product grid compatibility - shared product-list owns columns and gaps.
   ========================================================================= */

/* Storefront adds clearfix pseudo-elements to `ul.products`. In CSS Grid
   those pseudo-elements become real grid items and create an empty first
   product cell. The shared product-list owns catalog layout, so the clearfix
   is disabled locally. */
.dealer-shop__main ul.products::before,
.dealer-shop__main ul.products::after,
.dealer-shop__main .products::before,
.dealer-shop__main .products::after {
    content: none;
    display: none;
}

/* Cancel Storefront's column-N width override on the loop items */
.dealer-shop__main ul.products li.product,
.woocommerce-shop .dealer-shop__main ul.products li.product,
.tax-product_cat .dealer-shop__main ul.products li.product,
.tax-product_brand .dealer-shop__main ul.products li.product,
.search-results .dealer-shop__main ul.products li.product {
    width: 100%;
    margin: 0;
    float: none;
    clear: none;
}

/* Storefront's desktop column selectors are very specific
   (`.storefront-full-width-content .site-main ul.products.columns-5 li.product`)
   and otherwise shrink each grid item back to ~16.9% of its own track. Match
   the page context so catalog cards always fill the CSS Grid column. */
.storefront-full-width-content .site-main .dealer-shop__main ul.products.columns-5 li.product.dealer-product-card,
.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card,
.dealer-catalog-archive.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card,
.woocommerce-shop.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card,
.tax-product_cat.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card,
.tax-product_brand.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card,
.search-results.storefront-full-width-content .site-main .dealer-shop__main ul.products li.product.dealer-product-card {
    width: 100%;
    margin: 0;
    float: none;
}

.dealer-shop__main .dealer-product-card {
    min-width: 0;
}

.dealer-shop__main .dealer-product-card__media,
.dealer-shop__main .dealer-product-card__media-link {
    width: 100%;
}

.dealer-shop__main .dealer-product-card .dealer-product-card__wishlist {
    background: transparent;
    box-shadow: none;
}

@media (min-width: 1024px) {
    .dealer-shop__main .dealer-product-card .dealer-product-card__wishlist:hover {
        background: rgba(255, 255, 255, 0.72);
        border-radius: 50%;
    }
}

/* =========================================================================
   AJAX loading state - dims the grid during a fetch
   ========================================================================= */

.dealer-shop__main--loading .dealer-shop__results {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* =========================================================================
   AJAX error notice - inline alert at the top of the main column
   ========================================================================= */

.dealer-shop__error {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: rgba(167, 2, 32, 0.06);
    color: var(--color-error);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

/* =========================================================================
   Drawer backdrop - covers the rest of the screen behind the filter drawer
   ========================================================================= */

.dealer-shop-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease-out;
}

.dealer-shop[data-drawer-state="open"] .dealer-shop-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.dealer-shop-drawer-backdrop[hidden] {
    display: none;
}

/* =========================================================================
   Sort bottom sheet - slide-from-bottom on mobile/tablet only
   Hidden entirely on desktop (where the inline sort dropdown is used).
   ========================================================================= */

.dealer-shop-sort-sheet {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dealer-shop-sort-sheet[hidden] {
    display: none;
}

.dealer-shop-sort-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.dealer-shop-sort-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 0 0 16px;
    background: var(--color-white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    animation: dealer-shop-sort-sheet-in 0.22s ease-out;
}

@keyframes dealer-shop-sort-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.dealer-shop-sort-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dealer-shop-sort-sheet__title {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.dealer-shop-sort-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
}

.dealer-shop-sort-sheet__close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.dealer-shop-sort-sheet__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dealer-shop-sort-sheet__list {
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.dealer-shop-sort-sheet__item {
    margin: 0;
    padding: 0;
}

.dealer-shop-sort-sheet__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight:500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.dealer-shop-sort-sheet__option:hover {
    background: rgba(0, 0, 0, 0.04);
}

.dealer-shop-sort-sheet__option.is-active {
    font-weight: var(--font-weight-medium);
    background: rgba(3, 76, 57, 0.06);
}

.dealer-shop-sort-sheet__option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* =========================================================================
   Tablet (>= 768px)
   ========================================================================= */

@media (min-width: 768px) {
    .dealer-catalog-archive .site-content > .col-full,
    .woocommerce-shop .site-content > .col-full,
    .tax-product_cat .site-content > .col-full,
    .tax-product_brand .site-content > .col-full,
    .search-results .site-content > .col-full {
        padding-inline: var(--padding-tablet);
    }

    .dealer-shop {
        padding-block: 50px 50px;
        --catalog-title-margin-bottom: 50px;
    }

    .dealer-shop__title,
    .dealer-catalog-archive .dealer-shop__title,
    .woocommerce-shop .dealer-shop__title,
    .tax-product_cat .dealer-shop__title,
    .tax-product_brand .dealer-shop__title,
    .search-results .dealer-shop__title {
        font-size: 28px;
    }

}

/* =========================================================================
   Desktop (>= 1024px) - sidebar + main, sticky sidebar
   Toolbar triggers and drawer chrome are hidden; the inline sort dropdown
   is the only sort surface.
   ========================================================================= */

@media (min-width: 1024px) {
    .dealer-catalog-archive .site-content > .col-full,
    .woocommerce-shop .site-content > .col-full,
    .tax-product_cat .site-content > .col-full,
    .tax-product_brand .site-content > .col-full,
    .search-results .site-content > .col-full {
        padding-inline: var(--padding-desktop);
    }

    .dealer-shop {
        padding-block: 50px 50px;
        --catalog-layout-gap: 50px;
    }

    .dealer-shop__title,
    .dealer-catalog-archive .dealer-shop__title,
    .woocommerce-shop .dealer-shop__title,
    .tax-product_cat .dealer-shop__title,
    .tax-product_brand .dealer-shop__title,
    .search-results .dealer-shop__title {
        font-size: 32px;
    }

    .dealer-shop__layout {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Restore sidebar as a sticky inline column - undo the drawer positioning. */
    .dealer-shop__sidebar {
        position: sticky;
        top: var(--catalog-sticky-top);
        right: auto;
        bottom: auto;
        z-index: auto;
        flex: 0 0 var(--catalog-sidebar-width);
        width: auto;
        max-width: none;
        background: transparent;
        transform: none;
        pointer-events: auto;
        transition: none;
        overflow-y: visible;
        box-shadow: none;
    }

    .dealer-shop[data-drawer-state="open"] .dealer-shop__sidebar {
        transform: none;
    }

    /* Hide mobile/tablet trigger buttons; show inline sort */
    .dealer-shop-toolbar {
        justify-content: flex-end;
    }

    .dealer-shop-toolbar__trigger {
        display: none;
    }

    .dealer-shop-toolbar .dealer-shop-sort {
        display: inline-flex;
    }

    /* Hide drawer chrome (desktop sidebar uses its own inline submit) */
    .dealer-shop-filters__drawer-header,
    .dealer-shop-filters__drawer-footer {
        display: none;
    }

    .dealer-shop-filters__body {
        padding: 0;
        overflow-y: visible;
    }

    .dealer-shop-filters__desktop-title {
        display: block;
        margin: 0 0 18px;
        color: var(--color-black);
        font-family: var(--font-family);
        font-size: 18px;
        font-weight: var(--font-weight-semibold);
        line-height: 1.2;
    }

    .dealer-filter-group[data-list-state="collapsed"] .dealer-filter-group__item--extra:not(.dealer-filter-group__item--active) {
        display: none;
    }

    .dealer-filter-group__more {
        display: inline-flex;
    }

    /* Drawer backdrop and sort bottom sheet are mobile/tablet only */
    .dealer-shop-drawer-backdrop,
    .dealer-shop-sort-sheet {
        display: none !important;
    }
}

/* =========================================================================
   Mobile/tablet only (<1024px) - hide the inline desktop sort and inline
   submit; the toolbar trigger + bottom sheet take over.
   ========================================================================= */

@media (max-width: 1023.98px) {
    .dealer-shop-toolbar .dealer-shop-sort {
        display: none;
    }

    /* Mobile/tablet uses the drawer-apply CTA; the inline desktop reset-all
       link lives below the filter list and is also hidden in the drawer
       (drawer header has its own reset-all button). */
    .dealer-shop-filters__reset-all {
        display: none !important;
    }

    /* Body scroll lock when drawer/sheet is open is set via JS on body
       (document.body.style.overflow = 'hidden'). */
}

/* =========================================================================
   Reduced motion - disable drawer/sheet/accordion transitions
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .dealer-shop__sidebar,
    .dealer-shop-drawer-backdrop,
    .dealer-shop-sort-sheet__panel,
    .dealer-filter-group__arrow {
        transition: none;
        animation: none;
    }
}