/* Product grid layout — the card visual styling lives in the consolidated
   block at the bottom of this file. */
.product-grid     { width: 100%; }
.product-grid__item { display: flex; }
.filter-content ul.filter-list {
    list-style: none;
    padding: 0;
    margin:0;
}
.filter-content ul.filter-sublist {
    list-style: none;
    padding-left: 10px;
}
/* Pills, dismiss-pill, active-filters container, reset-filters link — all
   styled in the consolidated filter-toolbar block at the bottom of this file. */
.search-pill span.search-term,
.filter-pill span.filter-term {
    line-height: 1;
}
.search-pill .uk-icon>svg {
    max-height: 15px;
    max-width: 15px;
}
#autocomplete-results {
    position: absolute;
    background-color: #06013d;
    border: 1px solid rgb(0 0 0 / 25%);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    z-index: 1000;
	width: 100%;
    left:0;
    right:0;
	max-height: 320px;
	overflow-y: auto;
	display: none;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 0;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #1A1A1A;
    transition: background-color 0.2s ease;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: #1F5D9F;
    outline: none;
}
.autocomplete-item:focus {
    box-shadow: inset 0 0 0 2px rgba(6, 1, 61, 0.25);
}
.autocomplete-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.autocomplete-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.autocomplete-item-thumb-placeholder {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.autocomplete-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.autocomplete-item-title {
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.autocomplete-item-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* .filter-group / .filter-label / .filter-content styling lives in the
   FILTER DRAWER block at the bottom of this file. Only the structural
   `display: none` toggle stays here so collapse works regardless of theme. */
.hide-filter .filter-content {
    display: none;
}
/* All images need to be square PNGs with transparent backgrounds */


@media screen and (min-width:960px) {
    /* button#filter-products {
        display:none;
    } */
    .uk-search-default {
        width:100%!important;
    }
}
@media screen and (max-width:959px) {
   #filters .uk-search-default {
       width:auto;
   }
   /* Mobile filter-group separator styling lives in the FILTER DRAWER block. */
}

/* Woocommerce-ordering / result-count margins handled in the filter-toolbar
   block at the bottom of this file. */

/* #product-filters drawer styling lives in the FILTER DRAWER block at the
   bottom of this file. */
/* body.woocommerce-shop .tm-header {
    z-index: 98;
}
body.woocommerce-shop .tm-page {
    z-index: 99;
} */
body.uk-offcanvas-container .tm-page {
    z-index: 999;
}
#product-search > .uk-container {
    max-width: 400px;
    background: #06013D;
    padding: 2rem;
    position: relative;
}
#product-search .uk-search input {
    background: rgb(0 0 0 / 25%);
    border-color: rgb(0 0 0 / 50%);
    padding-top: 1.5rem;
    padding-bottom:1.5rem;
}
#product-search .uk-search-input::placeholder,
#product-search .uk-search-input {
    color:#fff!important;
}
#product-search .uk-search .uk-search-icon {
    color:#fff!important;
}
#product-search .query-controls {
    margin-bottom: 0!important;
}
#product-search .query-controls form {
    width: 100%;
}
#product-search .uk-modal-close-inside {
    top:5px;
    right:5px;
    color: rgba(255,255,255,0.25)
}
/* products-control-panel + panel-controls + panel-sort + query-controls
   layout is owned by the filter-toolbar block at the bottom of this file.
   #product-filters drawer bg + advanced-filters-toggle styling live in the
   FILTER DRAWER block at the bottom. Functional visibility-toggle rules
   for the .is-advanced-filter feature stay here since they're structural. */
.has-advanced-filters .filter-group.is-advanced-filter.is-revealed {
    display: block;
}
.has-advanced-filters:not(.show-advanced-filters) .filter-group.is-advanced-filter:not(.is-revealed) {
    display: none;
}
/* active-filter-group, .product-sort, sort-direction-toggle, woocommerce-ordering,
   select.orderby — all in the filter-toolbar block at the bottom of this file. */

/* Card grayscale/saturate hover filters + uk-progress dark theme overrides
   — all replaced in the consolidated product-card block at the bottom. */

.product-card--callout {
    background: rgba(255,255,255,0.1);
    transition: filter 0.5s ease;
}

.product-card--callout article {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.catalogue-callout-card__link--media-first .product-card__body {
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.catalogue-callout-card__link--media-first .product-card__media {
    margin-bottom: 0;
    width: 100%;
}

.catalogue-callout-card__link--media-first .product-card__image {
    max-width: none;
    width: 100%;
    height: auto;
}

a.catalogue-callout-card__link--media-first article.uk-card-small {
    padding: 0;
}
a.catalogue-callout-card__link--media-first article .product-card__content {
    padding: 0 1rem;
}

.catalogue-callout-card__badge.uk-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-card--callout:hover {
    background-color: rgba(255,255,255,0.15);
}

/* .product-card:hover and .load-more-button:hover dark-theme rules removed —
   replaced in the consolidated product-card block at the bottom. */


/* ============================================================================
   FILTER TOOLBAR — consolidated styles for the product archive control row
   ----------------------------------------------------------------------------
   Figma reference: node 869:9465 ("03 — Filter Toolbar" in the wireframe).
   Markup emitted by the typectv2 template's `#products-control-panel` section:

       #products-control-panel
         > .uk-container
           #panel-controls          (Search + Filters btns + active pills + reset)
             .product-search-button > a.el-content.uk-button
             .product-filter-button > a.el-content.uk-button
             #active-filter-group
               #active-filters
                 .filter-pill[.locked]
                   .filter-term
                   .lock-icon | .remove-icon (close ×)
               #reset-filters
           #panel-sort              (result count + sort dropdown)
             #query-controls
               .result-count
               .product-sort
                 .sort-direction-toggle
                 .woocommerce-ordering > select.orderby
   ============================================================================ */

#products-control-panel {
    padding: 1rem 0;
}

#products-control-panel > .uk-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* Collapse the YT grid wrappers so children participate in the parent flex. */
#panel-controls,
#panel-sort,
#panel-controls > .uk-width-1-1,
#panel-sort   > .uk-width-1-1 {
    margin: 0 !important;
    display: contents !important;
}

.product-search-button,
.product-filter-button {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

#active-filter-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0;
}

#active-filters {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-left: 1px solid #CCCCD9;
    border-right: 1px solid #CCCCD9;
    border-bottom: 1px solid #CCCCD9;
}

#query-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Reset WC default margins on the ordering form + result count so the
   toolbar lays out tight inside the flex row. */
.woocommerce-ordering,
.woocommerce-result-count {
    margin: 0 !important;
}


/* ------------------------------ Search / Filters buttons (outlined, navy) */
.product-search-button > a,
.product-filter-button > a,
.product-search-button > .el-content,
.product-filter-button > .el-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    height: 44px !important;
    padding: 0 20px !important;
    background: #fff !important;
    color: #06013D !important;
    border: 1px solid #06013D !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.product-search-button > a:hover,
.product-filter-button > a:hover {
    background: #06013D !important;
    color: #fff !important;
}
.product-search-button > a .uk-icon svg,
.product-filter-button > a .uk-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* Filter count badge is mobile-only — hidden by default everywhere; the
   @media (max-width: 767px) block at the bottom of this file shows it when
   the .is-visible class is applied by product-filters.js. */
.product-filter-button .filter-count-badge {
    display: none !important;
}


/* ------------------------------ Active filter pills (solid navy) */
.filter-pill,
span.filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: #06013D !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
}
.filter-pill .filter-term { color: inherit; line-height: 1; }

/* Close × on dismissable pills */
.filter-pill .dismiss-pill,
.filter-pill .remove-icon,
.filter-pill .close-icon,
.filter-pill [uk-icon="close"],
.filter-pill [uk-icon="icon: close"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease;
}
.filter-pill .dismiss-pill:hover,
.filter-pill .remove-icon:hover,
.filter-pill .close-icon:hover { opacity: 0.7 !important; }
.filter-pill svg {
    stroke: #fff !important;
    fill: none !important;
}

/* Locked pill (taxonomy-driven, non-removable) */
.filter-pill.locked .lock-icon svg {
    width: 14px !important;
    height: 14px !important;
}


/* ------------------------------ Reset Filters (text link) */
#reset-filters,
button#reset-filters,
.uk-button#reset-filters,
.uk-button-link#reset-filters {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    color: #1F5D9F !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
#reset-filters:hover {
    color: #06013D !important;
    text-decoration: underline !important;
}


/* ------------------------------ Result count meta */
#query-controls .result-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #737380 !important;
    line-height: 1 !important;
    margin: 0 !important;
}
/* #query-controls .result-count .current-products,
#query-controls .result-count .total-products {
    color: #06013D;
    font-weight: 600;
} */


/* ------------------------------ Sort controls (asc/desc toggle + dropdown) */
#query-controls .product-sort {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* Asc/desc toggle — outlined square button */
#query-controls .sort-direction-toggle,
#query-controls button.sort-direction-toggle,
#query-controls .sort-direction-toggle.uk-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: #fff !important;
    color: #06013D !important;
    border: 1px solid #06013D !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease;
}
#query-controls .sort-direction-toggle:hover {
    background: #06013D !important;
    color: #fff !important;
}
#query-controls .sort-direction-toggle svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    transition: transform 0.2s ease;
}
#query-controls .sort-direction-toggle.is-asc svg {
    transform: rotate(180deg);
}

/* WC ordering wrapper + select — outlined dropdown with custom caret */
#query-controls .woocommerce-ordering {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
}
#query-controls .woocommerce-ordering select.orderby,
#query-controls select.orderby {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 44px !important;
    min-width: 180px !important;
    padding: 0 40px 0 16px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><polyline fill='none' stroke='%2306013D' stroke-width='1.5' points='5 7 10 13 15 7'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    border: 1px solid #06013D !important;
    border-radius: 6px !important;
    color: #06013D !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease;
}
#query-controls .woocommerce-ordering select.orderby:hover,
#query-controls select.orderby:hover {
    background-color: #f7f7f8 !important;
}
#query-controls .woocommerce-ordering select.orderby:focus {
    outline: 2px solid #1F5D9F !important;
    outline-offset: 2px !important;
}


/* ------------------------------ Alt B Segmented Toolbar (all viewports)
   Figma reference: node 970:15658 ("03 — Filter Toolbar" mobile / Alt B).
   Row 1: 3 equal segments [Search | Filters (count) | Sort] inside a 52px
          white bar w/ 1px #CCCCD9 outer border + same-color vertical dividers.
   Row 2: full-width #F2F2F2 chip strip — outlined navy pills, swipe-scroll.
   Used at every viewport — the original desktop layout was dropped because
   it broke (3+ rows / overflow) for any width below ~1700px once 3+ filters
   were active, and the segmented UI scaled cleanly upward. These rules are
   un-gated; later cascade order overrides any earlier desktop declarations
   that still live in the FILTER TOOLBAR block above. */
    /* Whole panel sticks to the top of the viewport on scroll. Native CSS
       `position: sticky` is used instead of UIkit's JS sticky — the JS
       sticky was inserting/removing a placeholder div on each engagement
       toggle, causing scroll lockup on slow downscroll across the
       boundary. CSS sticky is a browser-native state machine with no DOM
       mutations and no scroll handlers.
       `.scroll-up` (set by product-filters.js when scrolling UP while stuck)
       slides the toolbar offscreen so the site's `show-on-up` header has
       the top edge to itself during scroll-up. Transition uses transform
       only (composited, not layout-affecting), so it can't lock up scroll. */
    #products-control-panel {
        padding: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100;
        background: #fff;
        transition: transform 0.2s ease-in-out;
    }
    #products-control-panel.scroll-up {
        transform: translateY(-100%);
    }
    /* When the user scrolls into `#about-category` (the brand/marketing
       section below the product grid), stop the sticky behaviour. Toolbar
       is only relevant while browsing the catalogue. Class is toggled by
       the IntersectionObserver in product-filters.js. */
    #products-control-panel.sticky-disabled {
        position: relative !important;
        transform: none !important;
    }
    #products-control-panel > .uk-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
    }
    /* Chip strip stays visible across all scroll states. Hiding it on sticky
       (whether at engagement boundary or after a hysteresis) was the source
       of a slow-scroll lockup: each display: none toggle reflowed the page
       by ~48px, and on slow mousewheel scrolling near the engagement point
       these reflows ran on every scroll tick and starved the scroll thread.
       Trade-off: the sticky toolbar is ~102px tall (segmented + chip strip)
       instead of just 54px. Acceptable for a smooth scroll experience. */
    /* No-products / loading-products live inside the sticky panel via DOM
       (display:contents lifts them up), but they're empty-state UI for the
       natural-flow position only — they shouldn't pin to the top alongside
       the segmented bar. Hide them as soon as is-stuck engages (no hysteresis
       needed because their natural-flow position is below the segmented bar,
       not the chip strip, so the layout shift is identical either way). */
    #products-control-panel.is-stuck #query-controls .no-products,
    #products-control-panel.is-stuck #query-controls .loading-products {
        display: none !important;
    }

    /* Lift #query-controls children up so .product-sort is a flex child of .uk-container. */
    #query-controls {
        display: contents !important;
    }
    #query-controls .result-count {
        display: none !important;
    }
    /* .no-products + .loading-products are also lifted up via `display: contents`
       and default to order:0, which would push them in front of our segments.
       Give them an explicit late order + full-width so they only appear in the
       empty-state row below the segmented bar. Centered, padded, typographic
       so the message reads as an intentional empty state instead of stray
       browser text flush to the left edge. */
    #query-controls .no-products,
    #query-controls .loading-products {
        order: 5 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 40px 20px !important;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #424242;
        background: #F7F7F8;
    }
    /* Spinner inline with loading text. Visibility is toggled by inline
       `style="display:none"` (server-side initial state) and jQuery's
       `.show()`/`.hide()` which writes `display: block` when shown. To keep
       both the hide path AND the flex layout working, use `:not([style*="none"])`
       — this matches the element only when its inline style does NOT carry
       a "none" display, so the flex layout applies only in the shown state. */
    #query-controls .loading-products:not([style*="none"]) {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    #query-controls .loading-products [uk-spinner] {
        margin: 0 !important;
        color: #06013D;
    }
    /* Same `:not([style*="none"])` trick for .no-products so the centered
       padded layout only renders when visible, leaving the inline `display:
       none` to keep hiding it when products are present. */
    #query-controls .no-products:not([style*="none"]) {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    #query-controls .no-products .no-products__msg {
        color: #424242;
    }
    #query-controls .no-products .no-products__reset {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #1F5D9F;
        text-decoration: none;
        line-height: 1.4;
    }
    #query-controls .no-products .no-products__reset:hover,
    #query-controls .no-products .no-products__reset:focus {
        text-decoration: underline;
    }
    #query-controls .no-products .no-products__reset::after {
        content: ' \2192';
        margin-left: 0.25rem;
    }

    /* The three segments. Each fills 1/3 of the row, 52px tall, navy text on white. */
    .product-search-button,
    .product-filter-button,
    #query-controls .product-sort {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 52px !important;
        margin: 0 !important;
        background: #fff !important;
        border-top: 1px solid #CCCCD9 !important;
        border-bottom: 1px solid #CCCCD9 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        gap: 0 !important;
    }
    .product-search-button { order: 1 !important; border-left: 1px solid #CCCCD9 !important; }
    .product-filter-button { order: 2 !important; }
    #query-controls .product-sort {
        order: 3 !important;
        border-right: 1px solid #CCCCD9 !important;
    }

    /* Vertical dividers between segments (sit on the inside-left edge of segs 2 + 3). */
    .product-filter-button::before,
    #query-controls .product-sort::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background: #CCCCD9;
        pointer-events: none;
    }

    /* Buttons themselves fill the segment — strip their desktop border + bg. */
    .product-search-button > a,
    .product-filter-button > a,
    .product-search-button > .el-content,
    .product-filter-button > .el-content {
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        color: #06013D !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        gap: 8px !important;
    }
    .product-search-button > a:hover,
    .product-filter-button > a:hover {
        background: #f7f7f8 !important;
        color: #06013D !important;
    }
    .product-search-button > a .uk-icon svg,
    .product-filter-button > a .uk-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Filter count badge — appended by product-filters.js when filters > 0.
       (Hidden globally below the @media block; .is-visible toggles it on here.) */
    .product-filter-button .filter-count-badge.is-visible {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-left: 4px;
        background: #EBEDF7;
        color: #1F5D9F;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    /* Sort segment — repurpose .product-sort as a tappable area that opens
       the native WC "Sort by" picker (<select.orderby>). The reverse-sort
       direction toggle is hidden on mobile (asc/desc is implied by the chosen
       sort option). Visible "↕ Sort" label rendered via ::after; the native
       select is absolutely positioned, invisible, and z-indexed above the
       label so taps anywhere in the segment open the iOS/Android picker.
       NOTE: selectors mirror the desktop list verbatim to win the specificity
       battle (same selector spec, later cascade position wins). */
    #query-controls .product-sort {
        gap: 0 !important;
    }
    #query-controls .sort-direction-toggle,
    #query-controls button.sort-direction-toggle,
    #query-controls .sort-direction-toggle.uk-button {
        display: none !important;
    }
    #query-controls .woocommerce-ordering {
        position: absolute !important;
        inset: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        display: block !important;
        z-index: 2 !important;
    }
    #query-controls .woocommerce-ordering select.orderby,
    #query-controls select.orderby {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        opacity: 0 !important;
    }
    #query-controls .product-sort::after {
        content: '↕\00a0\00a0Sort';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #06013D;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        pointer-events: none;
        z-index: 1;
    }

    /* ---- Row 2: the active-filter chip strip ----
       Single row that swipe-scrolls horizontally when pills overflow.
       The chip strip itself has NO horizontal padding so the scrollbar
       spans full strip width and sits flush to the chip-strip bottom.
       Pill indentation (so the first pill doesn't touch the left edge)
       lives on the inner #active-filters via padding-left, and a trailing
       `::after` spacer gives the right-edge padding when scrolled fully. */
    #active-filter-group {
        order: 4 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #F2F2F2 !important;
        padding: 0 !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: stretch !important;
        min-height: 48px;
        position: relative;
    }
    /* Hide the strip entirely when no pills are present. */
    body:not(.has-active-filters) #active-filter-group {
        display: none !important;
    }
    /* Pills row scrolls horizontally; remove wrap so they stay on one line.
       Inner padding-left = first-pill indent; ::after spacer = trailing
       padding when scrolled all the way to the end. */
    #active-filters {
        flex: 1 1 0 !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* `touch-action: pan-x` is critical — without it, this container's
           `overflow: auto` + `overflow-y: hidden` made vertical touch swipes
           that started over a pill get captured here, effectively locking up
           page scroll. Limiting touch gestures to pan-x lets vertical swipes
           bubble up to the page where they belong. */
        touch-action: pan-x;
        padding: 10px !important;
        align-items: center;
        display: flex !important;
        /* Scrollbar fully hidden — same UX as the Popular Filters row above.
           Touch users swipe to scroll; the cut-off pill at the right edge
           is the visual hint that more filters are off-screen. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #active-filters::-webkit-scrollbar { display: none; }
    /* Trailing flex spacer = right-edge padding when scrolled fully right. */
    #active-filters::after {
        content: '';
        flex: 0 0 20px;
    }

    /* Pills must keep their natural width when scrolling. */
    #active-filters .filter-pill {
        flex: 0 0 auto !important;
    }

    /* Outlined pills on mobile (vs solid navy on desktop). */
    .filter-pill,
    span.filter-pill {
        height: 32px !important;
        padding: 0 14px !important;
        background: #fff !important;
        color: #06013D !important;
        border: 1px solid #06013D !important;
        border-radius: 16px !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        gap: 8px !important;
    }
    .filter-pill .dismiss-pill,
    .filter-pill .remove-icon,
    .filter-pill .close-icon,
    .filter-pill [uk-icon="close"] {
        color: #06013D !important;
        width: 14px !important;
        height: 14px !important;
    }
    .filter-pill svg {
        stroke: #06013D !important;
    }

    /* Reset Filters is dropped from the mobile chip strip — same action is
       one tap away inside the filter drawer (.filter-drawer-actions row).
       Removing it lets the pills consume the full strip width and looks
       cleaner when filters are active. Selector list mirrors the desktop
       rule (~line 412) to win the specificity tie. */
    #reset-filters,
    button#reset-filters,
    .uk-button#reset-filters,
    .uk-button-link#reset-filters {
        display: none !important;
    }


/* ============================================================================
   PRODUCT CARDS — grid item visual styling
   ----------------------------------------------------------------------------
   Figma reference: node 869:9479 ("04 — Product Grid" in the wireframe).
   Each card is white with a subtle gray border + 8px radius, image area on
   top (4:3), title in Bitter, description in Inter muted, optional "NEW"
   badge in the image area top-left.

   Markup (emitted by the product card template):

       a.product-card.uk-link-toggle
         article.product-card__body.uk-card[.uk-card-secondary|.uk-card-default]
           .product-card__media         (optional)
             img.product-card__image
             .product-meta              (optional badges)
               .product-card__badge
           h3.product-card__title
           .product-card__description   (optional)
   ============================================================================ */

a.product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Reset UIkit's dark-card overrides — typectv2's product loop emits
   `uk-card-secondary` which paints the card navy. We want a white card. */
a.product-card .uk-card,
a.product-card .uk-card.uk-card-secondary,
a.product-card .uk-card.uk-card-default {
    background: #fff !important;
    color: #06013D !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.product-card:hover .uk-card,
a.product-card:hover .uk-card.uk-card-secondary,
a.product-card:hover .uk-card.uk-card-default {
    border-color: #06013D !important;
    box-shadow: 0 6px 16px rgba(6, 1, 61, 0.06) !important;
}

.product-card__body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Image area on top — 4:3 ratio, light gray placeholder if no image. */
.product-card__media {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    background: #F2F2F2 !important;
    overflow: hidden;
}
.product-card__image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    padding: 24px !important;
}

/* Placeholder when a product has no featured image — matches the Figma
   wireframe's "PRODUCT IMAGE" caption on a light-gray block. */
.product-card__media-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #ABABAB !important;
    line-height: 1 !important;
    user-select: none;
}

/* Badge cluster — sits on top-left of the image area (e.g. "NEW") */
.product-card__media .product-meta {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    z-index: 2 !important;
}
.product-card__badge,
.product-card__media .uk-label,
.product-card__media .product-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    background: #06013D !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Title — Bitter, navy, prominent */
.product-card__title,
h3.product-card__title.uk-card-title {
    margin: 0 !important;
    padding: 20px 24px 0 24px !important;
    font-family: 'Bitter', Georgia, serif !important;
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: #06013D !important;
    text-align: left !important;
    text-transform: none !important;
}

/* Description — Inter muted */
.product-card__description {
    margin: 0 !important;
    padding: 8px 24px 20px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #737380 !important;
    text-align: left !important;
}
.product-card__description p { margin: 0 !important; }

/* If a card has no description, pad the title block to keep card heights even */
.product-card__body:not(:has(.product-card__description)) .product-card__title {
    padding-bottom: 20px !important;
}


/* ============================================================================
   LOAD MORE BUTTON + PROGRESS BAR + "Showing X of Y" caption
   ----------------------------------------------------------------------------
   Markup:

       .load-more-container.uk-align-center.uk-width-large
         button#load-more.load-more-button.uk-button.uk-button-primary
         .load-progress
           progress#load-progress.uk-progress
           .uk-text-meta#load-status-text  → "Showing X of Y products"
   ============================================================================ */

.load-more-container {
    margin-top: 32px !important;
}

/* NOTE: `display` is NOT `!important` here — the JS toggles inline
   `style="display:none"` to hide the button when all products are loaded,
   and we want that to win. */
#load-more,
button#load-more,
.load-more-button,
.load-more-button.uk-button,
.load-more-button.uk-button-primary {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 24px !important;
    background: #06013D !important;
    color: #fff !important;
    border: 1px solid #06013D !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.load-more-button::after {
    content: ' \2192';     /* right arrow */
    display: inline-block;
}
.load-more-button:hover,
button#load-more:hover {
    background: transparent !important;
    color: #06013D !important;
}

/* Progress bar — light gray track + blue fill (Figma: link blue) */
#load-progress,
progress.uk-progress {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background-color: #E5E7EB !important;
    border: none !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    color: #1F5D9F;       /* Firefox fill */
}
progress.uk-progress::-webkit-progress-bar {
    background-color: #E5E7EB !important;
    border-radius: 3px !important;
}
progress.uk-progress::-webkit-progress-value {
    background-color: #1F5D9F !important;
    border-radius: 3px !important;
    transition: width 0.3s ease;
}
progress.uk-progress::-moz-progress-bar {
    background-color: #1F5D9F !important;
    border-radius: 3px !important;
}

/* "Showing X of Y products" caption under the progress bar */
.load-progress {
    margin-top: 16px !important;
    text-align: center !important;
}
#load-status-text,
.load-progress #load-status-text {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #06013D !important;
    line-height: 1 !important;
}
#load-status-text .current-products,
#load-status-text .total-products {
    color: #06013D;
    font-weight: 700;
}


/* ============================================================================
   POPULAR / RECOMMENDED FILTERS — outlined pills on dark hero/section bg
   ----------------------------------------------------------------------------
   Figma reference: node 869:9453 ("02 — Popular Filters" in the wireframe).
   Builder element: `recommended_filters` containing `recommended_filter_item`
   children. The wrapper template emits:

       .recommended-filters
         .recommended-filters-subheading  (the eyebrow)
         .recommended-filters-list        (flex container)
           .recommended-filters-item
             button.recommended-filter[.uk-button.uk-button-primary]

   JS handler (js/product-filters.js #1977, news/blog mirrors) reads
   data-taxonomy + data-terms on click and applies the filter via AJAX.
   ============================================================================ */

.recommended-filters {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Eyebrow above the pill row */
.recommended-filters-subheading {
    margin: 0 !important;
}
.recommended-filters-subheading h3,
.recommended-filters-subheading h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #7BB7FF !important;
    line-height: 1 !important;
}

/* Pill row */
.recommended-filters-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}
.recommended-filters-item {
    display: inline-flex !important;
    margin: 0 !important;
}

/* The pill itself — outlined, transparent bg, white text (sits on the dark
   navy hero/section). Hover inverts to filled white with navy text. */
.recommended-filter,
button.recommended-filter,
.recommended-filter.uk-button,
.recommended-filter.uk-button-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 24px !important;
    margin: 0 !important;          /* override uk-margin-small-right/bottom on the template */
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.recommended-filter:hover,
.recommended-filter:focus {
    background: #fff !important;
    color: #06013D !important;
    border-color: #fff !important;
    outline: none !important;
}

/* Recommended filter pills are STATELESS — no visual active class is applied
   after a click. The persistent filter state lives in the chip strip, where
   users can dismiss it explicitly. The pill should only have hover/focus
   styling; `aria-pressed` stays in the DOM (set by JS to sync with the
   underlying checkbox) for screen-reader semantics, but it does NOT drive
   any visual change. */

/* Hero/dark-section variant — text + border swap to navy when the element
   is placed in a light section. Activate by adding `lt-on-light` class on
   the wrapper `.recommended-filters` element in the YT Builder. */
.recommended-filters.lt-on-light .recommended-filters-subheading h3,
.recommended-filters.lt-on-light .recommended-filters-subheading h5 {
    color: #1F5D9F !important;
}
.recommended-filters.lt-on-light .recommended-filter {
    color: #06013D !important;
    border-color: #06013D !important;
}
.recommended-filters.lt-on-light .recommended-filter:hover,
.recommended-filters.lt-on-light .recommended-filter:focus {
    background: #06013D !important;
    color: #fff !important;
}

/* Mobile — swipe-scroll the pill row horizontally instead of wrapping
   pills vertically. Same UX pattern as the filter toolbar chip strip:
   single row, slim scrollbar indicator at the bottom of the list area. */
@media screen and (max-width: 767px) {
    .recommended-filters-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Restrict gestures to horizontal pan so vertical scrolls bubble up
           to the page — without this, vertical swipes that begin over a pill
           get captured here and page scroll locks up. */
        touch-action: pan-x;
        align-self: stretch;          /* fill the recommended-filters column */
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.15);
    }
    .recommended-filters-list::-webkit-scrollbar { height: 4px; }
    .recommended-filters-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); }
    .recommended-filters-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.6); }

    /* Pills must not shrink when overflowing the row. */
    .recommended-filters-item,
    .recommended-filter {
        flex: 0 0 auto !important;
    }

    /* Light-section variant — scrollbar swaps to navy thumb on light track. */
    .recommended-filters.lt-on-light .recommended-filters-list {
        scrollbar-color: #06013D #E2E2E5;
    }
    .recommended-filters.lt-on-light .recommended-filters-list::-webkit-scrollbar-track {
        background: #E2E2E5;
    }
    .recommended-filters.lt-on-light .recommended-filters-list::-webkit-scrollbar-thumb {
        background: #06013D;
    }
}


/* ============================================================================
   FILTER DRAWER — `#product-filters` offcanvas (the "Filter Products" panel)
   ----------------------------------------------------------------------------
   Figma reference: node 869:9947 ("Component — Filter Drawer").

   Markup (rendered into the `#product-filters` offcanvas via the typectv2
   template's section [5] — one `products_filter` element per filter group):

       #product-filters.uk-offcanvas
         .uk-offcanvas-bar
           .uk-offcanvas-close                  (× top-right)
           h2.uk-h3                             ("Filter Products" title)
           .filter-group[#filter_<tax>]         (one per taxonomy)
             .filter-label                      (header row, click to toggle)
               h5.filter-name                   (taxonomy label)
               .filter-toggle                   (+ / − text glyph)
             .filter-content                    (.hide-filter hides it)
               ul.filter-list
                 li.filter-item
                   input.filter-input[type=checkbox]
                   label.filter-item-label
                     .filter-item-name          (term name)
                   ul.filter-sublist            (hierarchical children)
   ============================================================================ */

/* Offcanvas wrapper — flex column so the bar can host a scrolling content
   area with a non-scrolling action bar pinned to the bottom. */
#product-filters {
    z-index: 1000 !important;
}
#product-filters .uk-offcanvas-bar {
    background: #06013D !important;
    color: #fff !important;
    width: 100% !important;
    max-width: 480px !important;
    border: none !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;       /* outer container — inner area scrolls */
}

/* Grid wrapper inside the bar becomes the scroll area, padded. */
#product-filters .uk-offcanvas-bar > .uk-grid-margin,
#product-filters .uk-offcanvas-bar > div:first-child {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 40px 32px 24px 32px !important;
    min-height: 0;                     /* flex children with overflow need this */
    display: flex;                     /* turn the column inside into a flex col */
    flex-direction: column;
}
#product-filters .uk-offcanvas-bar > .uk-grid-margin > .uk-width-1-1,
#product-filters .uk-offcanvas-bar > div:first-child > .uk-width-1-1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Close button (UIkit's uk-offcanvas-close) */
#product-filters .uk-offcanvas-close {
    top: 32px !important;
    right: 32px !important;
    color: #fff !important;
    padding: 4px !important;
}
#product-filters .uk-offcanvas-close svg line {
    stroke: #fff !important;
    stroke-width: 1.5 !important;
}

/* Drawer title — "Filter Products" */
#product-filters .uk-offcanvas-bar h2,
#product-filters .uk-offcanvas-bar h2.uk-h3 {
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    font-family: 'Bitter', Georgia, serif !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Filter group rows — separator + collapsible header */
#product-filters .filter-group {
    margin: 0 !important;
    padding: 20px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#product-filters .filter-group:last-of-type {
    border-bottom: none !important;
}

#product-filters .filter-label {
    cursor: pointer;
    user-select: none;
}
#product-filters .filter-name,
#product-filters h5.filter-name {
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#product-filters .filter-toggle {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Filter list (when expanded) */
#product-filters .filter-content {
    margin-top: 16px !important;
}
#product-filters ul.filter-list,
#product-filters ul.filter-sublist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
#product-filters ul.filter-sublist {
    margin-top: 12px !important;
    padding-left: 32px !important;
}

#product-filters .filter-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap;
    line-height: 1;
}

/* Checkbox — outlined square, white border, transparent bg.
   Use appearance:none + custom check glyph so we can color it. */
#product-filters input.filter-input,
#product-filters input[type="checkbox"].filter-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#product-filters input.filter-input:hover {
    border-color: #fff !important;
}
#product-filters input.filter-input:checked {
    background: #1F5D9F !important;
    border-color: #1F5D9F !important;
}
#product-filters input.filter-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#product-filters input.filter-input:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

/* Checkbox label */
#product-filters label.filter-item-label {
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    flex: 1 1 auto;
}
#product-filters .filter-item-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
#product-filters .filter-item:hover .filter-item-name {
    color: #fff !important;
}

/* Advanced-filter toggle button — sits inside a filter-group rows section */
#product-filters .has-advanced-filters .advanced-filters-toggle-wrap {
    margin: 20px 0 0 0;
}
#product-filters .advanced-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#product-filters .advanced-filters-toggle:hover,
#product-filters .advanced-filters-toggle:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    outline: none;
}

/* Action bar — YT's `html` element wraps its content in an unstyled <div>,
   so the wrapper (NOT the inner `.filter-drawer-actions`) is the flex child
   of the offcanvas column. Apply `margin-top: auto` to the wrapper via
   `:has()` so it pushes to the bottom of the flex column, and `position:
   sticky; bottom: 0` so it stays visible when the user scrolls a long
   filter list. The inner element carries the visual styling. */
#product-filters .uk-width-1-1 > div:has(> .filter-drawer-actions) {
    margin-top: auto !important;       /* push to bottom of flex column */
    margin-bottom: -24px !important;   /* hug the offcanvas bottom edge */
    position: sticky !important;
    bottom: -24px !important;          /* hugs bottom edge through scroll area padding */
    z-index: 2 !important;
    flex-shrink: 0 !important;
}
#product-filters .filter-drawer-actions {
    margin: 0 -32px !important;        /* extend to drawer edges */
    padding: 20px 32px !important;
    background: #06013D !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    gap: 12px !important;
}
#product-filters .filter-drawer-actions .filter-reset,
#product-filters .filter-drawer-actions .js-reset-filters,
#product-filters .filter-drawer-actions [data-action="reset"] {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 16px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#product-filters .filter-drawer-actions .filter-reset:hover,
#product-filters .filter-drawer-actions .js-reset-filters:hover,
#product-filters .filter-drawer-actions [data-action="reset"]:hover {
    color: #fff !important;
    border-color: #fff !important;
}
#product-filters .filter-drawer-actions .filter-apply,
#product-filters .filter-drawer-actions .js-apply-filters,
#product-filters .filter-drawer-actions [data-action="apply"] {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 16px !important;
    background: #1F5D9F !important;
    color: #fff !important;
    border: 1px solid #1F5D9F !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#product-filters .filter-drawer-actions .filter-apply:hover,
#product-filters .filter-drawer-actions .js-apply-filters:hover,
#product-filters .filter-drawer-actions [data-action="apply"]:hover {
    background: transparent !important;
    border-color: #fff !important;
}

/* Scroll behaviour moved to the inner grid wrapper (above) so the action bar
   can sit OUTSIDE the scroll viewport and lock to the offcanvas bottom. */

@media screen and (max-width: 767px) {
    #product-filters .uk-offcanvas-bar {
        max-width: 100% !important;
    }
    #product-filters .uk-offcanvas-bar > .uk-grid-margin,
    #product-filters .uk-offcanvas-bar > div:first-child {
        padding: 24px 20px !important;
    }
    #product-filters .uk-offcanvas-bar h2,
    #product-filters .uk-offcanvas-bar h2.uk-h3 {
        font-size: 24px !important;
    }
    #product-filters .filter-drawer-actions {
        margin: auto -20px -24px -20px !important;
        padding: 16px 20px !important;
    }
}