/*
 * AJAX Search System — Styles
 * hello-theme-child / assets/css/ajax-search.css
 *
 * Accessibility notes
 * ───────────────────
 *  :focus-visible
 *    Used throughout instead of :focus so keyboard users get a clear ring
 *    while mouse users are not distracted by it.
 *
 *  Colour contrast
 *    Default palette targets WCAG AA (4.5:1 for text, 3:1 for UI components).
 *    The accent blue #0073aa on white ≈ 4.6:1. Verify after brand override.
 *
 *  prefers-reduced-motion
 *    All animations (hover lifts, spinner, transitions) are conditional on
 *    prefers-reduced-motion: no-preference — users who prefer less motion
 *    get a fully static experience with no content loss.
 *
 *  prefers-color-scheme / forced-colors
 *    A forced-colors block ensures Windows High Contrast Mode renders
 *    active states without relying on colour alone.
 *
 *  .hsearch-sr-only
 *    Standard clip-based visually-hidden technique. Keeps content in the
 *    accessibility tree without showing it on screen. Applied to the
 *    aria-live announcer and "Read more: [title]" link spans.
 *
 *  Loading state
 *    Only .hsearch-main (results column) gets opacity reduction.
 *    The filter sidebar stays fully opaque so AT users can change
 *    filters while the previous request is still resolving.
 *
 * @package HelloElementorChild
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — override in :root or Elementor global CSS
═══════════════════════════════════════════════════════════════════════════ */

:root {
    --hs-sidebar-width:     280px;
    --hs-layout-gap:        2rem;
    --hs-card-gap:          1.5rem;
    --hs-radius:            0px;
    --hs-radius-btn:        0px;
    
    --hs-radius-card:       0px;
    --hs-padding-card:      0.8rem 0.4rem;

    /* Colours — verify contrast ratios after brand override */
    --hs-color-accent:      #2982CC;   /* 4.6:1 on white — WCAG AA */
    --hs-color-accent-dark: #002B61;
    --hs-color-active-bg:   #2982CC;
    --hs-color-active-text: #ffffff;
    --hs-color-normal-bg:   #E5E5E5;
    --hs-color-normal-text: #2E2E2E;   /* 10:1 on white */
    --hs-color-border:      #E5E5E5;
    --hs-color-muted:       #2E2E2E;   /* 7:1 on white */
    --hs-color-card-bg:     #ffffff;

    /* Focus ring — double ring (white gap + accent) visible on any bg */
    --hs-focus-ring:        0 0 0 3px #fff, 0 0 0 5px var(--hs-color-accent);

    --hs-transition:        0.2s ease;
    --hs-loading-opacity:   0.45;
    --hs-card-thumb-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUALLY HIDDEN — screen-reader only content
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0 !important;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WRAPPER
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-page {
    padding-top:    6rem;
    padding-bottom: 6rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-page__header {
    display:      flex;
    align-items:  baseline;
    flex-wrap:    wrap;
    gap:          0.5rem 1.5rem;
    margin-bottom: 2rem;
}

.hsearch-page__title {
    font-size:   1.75rem;
    font-weight: 700;
    margin:      0;
}

.hsearch-page__query {
    font-weight: 400;
    color:       var(--hs-color-muted) !important;
}

.hsearch-page__total {
    font-size:   0.875rem;
    color:       var(--hs-color-muted) !important;
    margin:      0;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO-COLUMN WRAPPER
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-wrapper {
    display:               grid;
    grid-template-columns: var(--hs-sidebar-width) 1fr;
    gap:                   var(--hs-layout-gap);
    align-items:           start;
    position:              relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATE
   Only the results column fades — filters remain fully interactive.
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-wrapper.hsearch-is-loading .hsearch-main {
    opacity:        var(--hs-loading-opacity);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-wrapper.hsearch-is-loading .hsearch-main {
        transition: opacity var(--hs-transition);
    }
}

.hsearch-wrapper.hsearch-is-loading::after {
    content:  '';
    position: absolute;
    inset:    0;
    z-index:  10;
    cursor:   wait;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-wrapper.hsearch-is-loading .hsearch-results::before {
        content:       '';
        display:       block;
        grid-column:   1 / -1;
        width:         2rem;
        height:        2rem;
        border:        3px solid var(--hs-color-border) !important;
        border-top-color: var(--hs-color-accent) !important;
        border-radius: 50%;
        animation:     hs-spin 0.7s linear infinite;
        margin:        2rem auto;
    }

    @keyframes hs-spin {
        to { transform: rotate(360deg); }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER SIDEBAR  (<form id="hsearch-form" aria-label="Search filters">)
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-filters {
    position:       sticky;
    top:            2rem;
    margin-top:     -6rem;
    padding-top: 6rem;
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    max-height:     calc(100vh - 4rem);
    padding-right:  0.25rem;
}

/* ── <fieldset> groups ────────────────────────────────────────────────── */

.hsearch-filters__group {
    border:         none;   /* reset UA fieldset style */
    margin:         0;
    padding:        0 0 1.25rem !important;
    border-bottom:  1px solid var(--hs-color-border) !important;
}

.hsearch-filters__group:last-of-type {
    border-bottom: none;
   /*  padding-bottom: 0; */
}

/* Taxonomy groups hidden by JS (post-type mismatch) */
.hsearch-filters__group[hidden] {
    display: none;
}

/* <legend> — float trick lets it respect padding inside fieldset */
.hsearch-filters__group-title {
    float:          left;
    width:          100%;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--hs-color-muted) !important;
    margin-bottom:  0.75rem;
    padding:        0 !important;
}

.hsearch-filters__group-title + * {
    clear: left;
}

/* ── Search input ─────────────────────────────────────────────────────── */

.hsearch-filters__label {
    display:        block;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--hs-color-muted) !important;
    margin-bottom:  0.5rem;
}

.hsearch-filters__input-wrap {
    display: flex;
}

.hsearch-filters__search-input {
    width:         100%;
    padding:       0.5rem 0.75rem !important;
    border:        1px solid var(--hs-color-border) !important;
    border-radius: var(--hs-radius);
    font-size:     0.9rem;
    background:    var(--hs-color-card-bg) !important;
    color:         var(--hs-color-normal-text) !important;
    -webkit-appearance: none;
    appearance:    none;
}

.hsearch-filters__search-input:focus-visible {
    outline:      none;
    border-color: var(--hs-color-accent) !important;
    box-shadow:   var(--hs-focus-ring) !important;
}

/* ── Filter list ──────────────────────────────────────────────────────── */

.hsearch-filters__list {
    list-style: none;
    padding:    0 !important;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0.3rem;
}

.hsearch-filters__item {
    display: flex;
}

/* ── Filter toggle button ─────────────────────────────────────────────── */

.hsearch-filter-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    width:           100%;
    padding:         var(--hs-padding-card) !important;
    border:          1px solid transparent;
    border-radius:   var(--hs-radius-btn);
    background:      var(--hs-color-normal-bg);
    color:           var(--hs-color-normal-text);
    font-size:       0.85rem;
    text-align:      left;
    cursor:          pointer;
    width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-filter-btn {
        transition:
            background   var(--hs-transition),
            color        var(--hs-transition),
            border-color var(--hs-transition);
    }
}

.hsearch-filter-btn:hover {
    background:   color-mix(in srgb, var(--hs-color-active-bg) 12%, white) !important;
    border-color: var(--hs-color-accent) !important;
    color:        var(--hs-color-accent) !important;
}

/* Keyboard-only focus ring */
.hsearch-filter-btn:focus-visible {
    outline:      none;
    border-color: var(--hs-color-accent) !important;
    box-shadow:   var(--hs-focus-ring) !important;
}

/* Active state — matches both class and ARIA attribute for robustness */
.hsearch-filter-btn.is-active,
.hsearch-filter-btn[aria-pressed="true"] {
    background:   var(--hs-color-active-bg) !important;
    border-color: var(--hs-color-active-bg) !important;
    color:        var(--hs-color-active-text) !important;
}

.hsearch-filter-btn__label {
    flex: 1;
}

/* ── Count badge ──────────────────────────────────────────────────────── */

.hsearch-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       1.4rem;
    height:          1.4rem;
    padding:         0 0.3rem !important;
    border-radius:   99px;
    background:      rgba(0 0 0 / 0.12);
    font-size:       0.68rem;
    font-weight:     700;
    line-height:     1;
    margin-left: 0.3rem;
}

.hsearch-filter-btn .hsearch-count:hover {
    background:   color-mix(var(--hs-color-active-bg), white) !important;
    border-color: var(--hs-color-accent) !important;
    color:        var(--hs-color-accent) !important;
}


.hsearch-filter-btn.is-active .hsearch-count,
.hsearch-filter-btn[aria-pressed="true"] .hsearch-count {
    background: rgba(255 255 255 / 0.25);
}

/* Empty badge invisible to eye AND to AT (display:none removes from tree) */
.hsearch-count:empty {
    display: none;
}

/* ── Date range ───────────────────────────────────────────────────────── */

.hsearch-filters__date-row {
    display:     grid;
    grid-template-columns: 2.75rem 1fr;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.5rem;
}

.hsearch-filters__date-row:last-child {
    margin-bottom: 0;
}

.hsearch-filters__date-label {
    font-size: 0.8rem;
    color:     var(--hs-color-muted) !important;
}

.hsearch-filters__date-input {
    width:         100%;
    padding:       0.4rem 0.6rem !important;
    border:        1px solid var(--hs-color-border) !important;
    border-radius: var(--hs-radius);
    font-size:     0.85rem;
    background:    var(--hs-color-card-bg) !important;
    color:         var(--hs-color-normal-text) !important;
    -webkit-appearance: none;
    appearance:    none;
}

.hsearch-filters__date-input:focus-visible {
    outline:      none;
    border-color: var(--hs-color-accent) !important;
    box-shadow:   var(--hs-focus-ring) !important;
}

/* ── Mobile collapse toggle ───────────────────────────────────────────── */

/* Hidden on desktop — shown only inside the 900px media query */

.hsearch-filters__toggle:hover{
    color: var(--hs-color-accent-dark) !important;
}
.hsearch-filters__toggle {
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        width:           100%;
        padding:         0.65rem 1rem !important;
        border:          1px solid var(--hs-color-border) !important;
        border-radius:   var(--hs-radius-btn) !important;
        background:      var(--hs-color-normal-bg) !important;
        color:           var(--hs-color-normal-text) !important;
        font-size:       0.9rem;
        font-weight:     600;
        cursor:          pointer;
    }

/* Filters body — always flex on desktop */
.hsearch-filters__body {
    max-height: 0vh;
    height: 100% !important;
    overflow-x:   hidden !important;
    overflow-y:   scroll !important;
    padding:    0 0.5rem  !important;
    transition: all var(--hs-transition);
    border: 0px solid var(--hs-color-border) !important;
}

.hsearch-filters__body.is-open {
    display:        flex !important;
    flex-direction: column;
    max-height: 60vh !important;
    padding:    0.75rem 0.5rem  !important;
    gap:            1.5rem;
    padding-top:    1rem  !important;
    border: 1px solid var(--hs-color-border) !important;
}

/* ── Apply button (mobile only) ───────────────────────────────────────── */

/* Hidden on desktop */

.hsearch-apply-btn:hover{
    background-color: var(--hs-color-accent-dark) !important;
    color: var(--hs-color-active-text) !important;
}

/* Apply button — shown inside mobile collapse, sticky at bottom */
.hsearch-apply-btn {
    display:       block !important;
    position:      sticky !important;
    bottom:        0;
    width:         100%;
    padding:       0.75rem 1rem !important;
    margin-top:    0.5rem;
    background:    var(--hs-color-active-bg) !important;
    color:         var(--hs-color-active-text) !important;
    border:        none;
    border-radius: var(--hs-radius-btn) !important;
    font-size:     0.9rem;
    font-weight:   600;
    text-align:    center;
    cursor:        pointer;
}

.hsearch-apply-btn:focus-visible {
    outline:    none;
    box-shadow: var(--hs-focus-ring) !important;
}

/* ── Clear button ─────────────────────────────────────────────────────── */

.hsearch-clear-btn {
    align-self:    flex-start;
    padding:       0.4rem 0.75rem !important;
    border:        1px solid var(--hs-color-border) !important;
    border-radius: var(--hs-radius-btn) !important;
    background:    transparent;
    color:         var(--hs-color-muted) !important;
    font-size:     0.8rem;
    cursor:        pointer;
    width: 100% !important;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-clear-btn {
        transition: color var(--hs-transition), border-color var(--hs-transition);
    }
}

.hsearch-clear-btn:hover {
    color:        var(--hs-color-accent) !important;
    border-color: var(--hs-color-accent) !important;
}

.hsearch-clear-btn:focus-visible {
    outline:    none;
    box-shadow: var(--hs-focus-ring) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS COLUMN
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-main {
    min-width: 0;
}

.hsearch-results {
    display:       flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POST-TYPE GROUPS
   Results are bucketed by post type; each group has a heading + card grid.
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-group {
    margin-bottom: 2.5rem;
}

.hsearch-group:last-child {
    margin-bottom: 0;
}

.hsearch-group__title {
    font-size:     1.1rem;
    font-weight:   700;
    margin:        0 0 1rem;
    padding-bottom: 0.4rem !important;
    border-bottom: 2px solid var(--hs-color-border) !important;
}

.hsearch-group__items {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--hs-card-gap) !important;
}
.hsearch-group__items.downloads{
    display:               flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT CARD
   Mirrors Elementor Loop Grid classes so Elementor card styles transfer.
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-card {
    display:        flex;
    flex-direction: column;
    background:     var(--hs-color-card-bg) !important;
    border:         1px solid var(--hs-color-border) !important;
    border-radius:  var(--hs-radius-card) !important;
    overflow:       hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-card {
        transition: box-shadow var(--hs-transition), transform var(--hs-transition);
    }

    .hsearch-card:hover {
        box-shadow: 0 4px 20px rgba(0 0 0 / 0.1);
        transform:  translateY(-2px);
    }
}

/* Thumbnail — aria-hidden + tabindex="-1" in HTML (decorative) */
.hsearch-card__thumb {
    display:     block;
    overflow:    hidden;
    flex-shrink: 0;
}

.hsearch-card__img {
    display:    block;
    width:      100%;
    height:     var(--hs-card-thumb-height);
    object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-card__img {
        transition: transform 0.4s ease;
    }
    .hsearch-card:hover .hsearch-card__img {
        transform: scale(1.04);
    }
}

/* Body */
.hsearch-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        1.25rem !important;
    gap:            0.6rem;
}

/* Post-type badge (aria-hidden in HTML) */
.hsearch-card__type {
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--hs-color-accent) !important;
}

/* Title — main interactive link; receives programmatic focus on pagination */
.hsearch-card__title {
    font-size: var(--e-global-typography-b440912-font-size);
    line-height: var(--e-global-typography-b440912-line-height);
    font-weight: 600;
    margin:      0;
}

.hsearch-card__title a {
    text-decoration: none;
    color:           inherit;
}

.hsearch-card__title a:hover {
    color: var(--hs-color-accent);
}

.hsearch-card__title a:focus-visible {
    outline:        2px solid var(--hs-color-accent) !important;
    outline-offset: 2px;
    border-radius:  2px;
}

/* Term chips (aria-hidden in HTML) */
.hsearch-card__terms {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.3rem;
}

.hsearch-card__term {
    display:       inline-block;
    padding:       0.15rem 0.5rem !important;
    border-radius: 99px;
    background:    var(--hs-color-normal-bg) !important;
    font-size:     0.7rem;
    color:         var(--hs-color-muted) !important;
}

/* Excerpt — 3-line clamp */
.hsearch-card__excerpt {
    font-size:          0.875rem;
    color:              var(--hs-color-muted) !important;
    line-height:        1.55;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Footer */
.hsearch-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    margin-top:      auto;
    padding-top:     0.75rem !important;
    border-top:      1px solid var(--hs-color-border);
}

.hsearch-card__date {
    font-size: 0.78rem;
    color:     var(--hs-color-muted) !important;
}

/* "Read more: [Post title]" — visible text aria-hidden, sr-only carries full label */
.hsearch-card__read-more {
    display:         flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items:     center;
    gap:             0.5rem;
    font-size:       0.78rem;
    font-weight:     600;
    color:           var(--hs-color-accent) !important;
    text-decoration: none;
    white-space:     nowrap;
}
.hsearch-card__read-more .elementor-icon-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.hsearch-card__read-more svg{
    fill: var(--hs-color-accent) !important;
    height: auto !important;
    width: auto !important;
}

.hsearch-card__read-more:hover {
    text-decoration: underline;
}

.hsearch-card__read-more:focus-visible {
    outline:        2px solid var(--hs-color-accent) !important;
    outline-offset: 2px;
    border-radius:  2px;
}

/* No results */
.hsearch-no-results {
    grid-column: 1 / -1;
    padding:     3rem 0 !important;
    text-align:  center;
    color:       var(--hs-color-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════════════ */

.hsearch-pagination {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.75rem;
    margin-top:     2rem;
}

.hsearch-pagination__list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.35rem;
    list-style: none;
    padding:    0 !important;
    margin:     0;
}

.hsearch-pagination__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.25rem;
    height:          2.25rem;
    padding:         0 0.5rem !important;
    border:          1px solid var(--hs-color-border) !important;
    border-radius:   var(--hs-radius-btn) !important;
    background:      var(--hs-color-normal-bg) !important;
    color:           var(--hs-color-normal-text) !important;
    font-size:       0.875rem;
    cursor:          pointer;
}

@media (prefers-reduced-motion: no-preference) {
    .hsearch-pagination__btn {
        transition:
            background   var(--hs-transition),
            border-color var(--hs-transition),
            color        var(--hs-transition);
    }
}

.hsearch-pagination__btn:hover {
    background:   color-mix(in srgb, var(--hs-color-active-bg) 12%, white) !important;
    border-color: var(--hs-color-accent) !important;
    color:        var(--hs-color-accent) !important;
}

.hsearch-pagination__btn:focus-visible {
    outline:    none;
    box-shadow: var(--hs-focus-ring) !important;
}

/* Current page — also aria-current="page" + aria-disabled="true" in HTML */
.hsearch-pagination__btn--current,
.hsearch-pagination__btn[aria-current="page"] {
    background:     var(--hs-color-active-bg) !important;
    border-color:   var(--hs-color-active-bg) !important;
    color:          var(--hs-color-active-text) !important;
    font-weight:    700;
    cursor:         default;
    pointer-events: none;
}

.hsearch-pagination__ellipsis {
    display:     inline-flex;
    align-items: center;
    padding:     0 0.25rem !important;
    font-size:   0.875rem;
    color:       var(--hs-color-muted);
}

.hsearch-pagination__info {
    font-size: 0.8rem;
    color:     var(--hs-color-muted);
    margin:    0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORCED COLOURS — Windows High Contrast Mode
   Ensures active states are visible without relying on colour alone.
═══════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
    .hsearch-filter-btn.is-active,
    .hsearch-filter-btn[aria-pressed="true"] {
        forced-color-adjust: none;
        background:          Highlight;
        color:               HighlightText;
        border-color:        Highlight;
    }

    .hsearch-count {
        forced-color-adjust: none;
        background:          ButtonFace;
        color:               ButtonText;
        border:              1px solid ButtonText;
    }

    .hsearch-pagination__btn--current,
    .hsearch-pagination__btn[aria-current="page"] {
        forced-color-adjust: none;
        background:          Highlight;
        color:               HighlightText;
        border-color:        Highlight;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .hsearch-wrapper {
        grid-template-columns: 1fr;
    }

    .hsearch-filters {
        position:   static;
        margin-top: 0;
        padding: 0;
        max-height: none;
        overflow-y: visible;
        gap:        0;
    }

    /* Show toggle button on mobile */
    .hsearch-filters__toggle {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        width:           100%;
        padding:         0.65rem 1rem !important;
        border:          1px solid var(--hs-color-border) !important;
        border-radius:   var(--hs-radius-btn) !important;
        background:      var(--hs-color-normal-bg) !important;
        color:           var(--hs-color-normal-text) !important;
        font-size:       0.9rem;
        font-weight:     600;
        cursor:          pointer;
    }

    .hsearch-filters__toggle:focus-visible {
        outline:    none;
        box-shadow: var(--hs-focus-ring);
    }

    .hsearch-filters__toggle[aria-expanded="true"] .hsearch-filters__toggle-icon {
        transform: rotate(180deg);
    }

    /* Filters body: collapsed by default on mobile, no border/max-height */
    .hsearch-filters__body {
        max-height: 0vh;
        height: 100% !important;
        overflow-x:   hidden !important;
        overflow-y:   scroll !important;
        padding:    0.75rem 0 0  !important;
        transition: var(--hs-transition);
    }

    .hsearch-filters__body.is-open {
        display:        flex !important;
        flex-direction: column;
        max-height: 60vh !important;
        gap:            1.5rem;
        padding-top:    1rem  !important;
    }

}

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .hsearch-filters__toggle-icon {
        transition: transform var(--hs-transition);
    }
}

@media (max-width: 600px) {
    .hsearch-group__items {
        grid-template-columns: 1fr;
    }
    .hsearch-group__items.downloads{
    display:               flex;
    flex-direction: column;
}

    .hsearch-card__img {
        height: 180px;
    }

    .hsearch-page__total {
        margin-left: 0;
    }
}