/**
 * AriaMarz — Search pages: align the fixed filter bar with the new header.
 *
 * Loaded on every page but only affects search views (every selector is scoped
 * under `.search_page` / `body.secondry_header`, which exist only on search
 * pages). The `.search_page` ancestor also raises specificity so these rules
 * beat the `!important` inline styles inside the ~18 search view files — fixing
 * them all from one place.
 *
 * Why this is needed: the theme positions the filter bar as
 *     .secondary-header { position: fixed; top: 80px; z-index: 9999 }
 * calibrated for the OLD 80px-tall header. The new header is 72px (desktop) /
 * 64px (mobile) and uses z-index 10000, so we only need to:
 *   1) re-anchor the fixed filter bar's `top` to the new header height, and
 *   2) re-size the body's top padding to the new header height.
 * We deliberately do NOT change the filter's position/display — only `top`
 * and the body padding — to avoid disturbing the original layout/design.
 */

/* ── Body offset = new header height + fixed filter-bar height.
   Old value was 126px (80px old header + ~46px filter bar). New header is
   72px, so 72 + 46 = 118px keeps content clear of the fixed filter bar.
   Scoped to .search_page so only search content gets this offset. ── */
html body.secondry_header .search_page {
    padding-top: calc(var(--header-height-desktop, 72px) + 46px) !important;
}

/* ── Fixed filter bar: sit right under the new header (was top:80px) ── */
body.secondry_header .search_page .secondary-header,
body .search_page .secondary-header.search_section {
    top: var(--header-height-desktop, 72px) !important;
}

/* ═══════════════════════════════ MOBILE ═══════════════════════════════ */
@media (max-width: 991px) {

    /* Mobile filter wrapper carried a 210px top padding to clear the old
       two-row header. Shrink it to clear just the new 64px header. */
    body .search_page .mobile-filter-wrapper,
    body.secondry_header .mobile-filter-wrapper {
        padding-top: var(--header-height-mobile, 64px) !important;
    }

    /* On mobile the filter bar is fixed at top:0 and used an 80px internal
       top padding to clear the old header. Shrink that padding to the new
       64px header height (was: `padding: 80px 15px 5px 13px`). */
    body .search_page .secondary-header,
    body.secondry_header .search_page .secondary-header {
        top: 0 !important;
        /* header height + a small gap so the filter bar doesn't stick to the
           header on mobile. */
        padding-top: calc(var(--header-height-mobile, 64px) + 12px) !important;
        transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* When the header hides on scroll, drop the padding so the filter sits
       flush at the very top. */
    body.header-hidden .search_page .secondary-header {
        padding-top: 8px !important;
    }

    /* Sticky result list + map column carried `padding-top: 75px` to clear the
       old header. They sit BELOW the filter bar (which already accounts for the
       header), so they only need a breathing gap, not the full header height.
       The selectors are extra-specific (body + .search_page) to beat the
       per-view `div.main_body #product-card-section { padding-top: 0 }`
       overrides inside the search.php <style> blocks. */
    html body .search_page #product-card-section,
    html body .search_page #map-container,
    html body div.main_body.search_page #product-card-section,
    html body div.main_body.search_page #map-container {
        padding-top: 16px !important;
    }
}

/* ═══════════════════════════════ DESKTOP ══════════════════════════════ */
@media (min-width: 992px) {

    /* Keep the main header always visible on search pages — never let the
       scroll-hide effect tuck it away here (header.js also enforces this).
       Everything else keeps its original behaviour. */
    body.secondry_header #mainHeader.hidden {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* (The one-line search-box + filter-buttons layout is handled by the
       restored legacy styles in legacy-content.css:
         .search_section form { display:flex }  and  .btn_container { ... }
       so no flex override is needed here anymore.) */
}