/* ============================================================
   Tavoron – Tabbed Search Results Page
   ============================================================ */

/* ── Search box ─────────────────────────────────────────────── */
#tvr-search-box .ais-SearchBox-form {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    max-width: 600px;
    margin-bottom: 32px;
    transition: border-color 0.15s;
}

#tvr-search-box .ais-SearchBox-form:focus-within {
    border-color: #183a4b;
    box-shadow: 0 0 0 3px rgba(24,58,75,0.1);
}

#tvr-search-box .ais-SearchBox-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 12px 16px;
    font-size: 16px;
    color: #111827;
    background: transparent;
    min-width: 0;
}

#tvr-search-box .ais-SearchBox-input::placeholder { color: #9ca3af; }

#tvr-search-box .ais-SearchBox-reset,
#tvr-search-box .ais-SearchBox-submit {
    background: none;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#tvr-search-box .ais-SearchBox-reset:hover,
#tvr-search-box .ais-SearchBox-submit:hover { color: #183a4b; }

#tvr-search-box .ais-SearchBox-reset[hidden] { display: none !important; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tavoron-search-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 28px;
}

.tavoron-stab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tavoron-stab.is-active {
    color: #183a4b;
    border-bottom-color: #f6be00;
}

.tavoron-stab:hover:not(.is-active) {
    color: #183a4b;
    border-bottom-color: #d1d5db;
}

.tavoron-stab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.tavoron-stab.is-active .tavoron-stab__count {
    background: #e0e8ec;
    color: #183a4b;
}

/* ── Panels ─────────────────────────────────────────────────── */
.tavoron-search-panel { display: none; }
.tavoron-search-panel.is-active { display: block; }

/* ── Products grid — uses tavoron-hits__grid from algolia-shop.css ── */
/* Container only; grid layout + card styles come from algolia-shop.css */

/* ── Pages grid ─────────────────────────────────────────────── */
.tvr-pages-grid .ais-Hits-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tvr-pages-grid .ais-Hits-item {
    margin: 0;
    padding: 0;
}

.tvr-pgcard {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
    transition: box-shadow 0.18s, transform 0.18s;
}

.tvr-pgcard:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    transform: translateY(-2px);
    text-decoration: none !important;
}

.tvr-pgcard__img {
    height: 180px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}

.tvr-pgcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tvr-pgcard__no-img {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tvr-pgcard__body {
    padding: 14px 16px;
    flex: 1;
}

.tvr-pgcard__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    border: none !important;
    transition: color 0.15s;
}

.tvr-pgcard:hover .tvr-pgcard__title { color: #183a4b !important; }

.tvr-pgcard__title mark {
    background: #fef9c3;
    color: inherit;
    padding: 0;
    border-radius: 2px;
}

.tvr-pgcard__excerpt {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Empty state ─────────────────────────────────────────────── */
.tvr-empty {
    padding: 48px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 15px;
}

/* ── Pagination ─────────────────────────────────────────────── */
#tvr-pagination-products,
#tvr-pagination-pages {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tvr-pages-grid .ais-Hits-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tvr-pages-grid .ais-Hits-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .tavoron-stab { padding: 10px 16px; font-size: 14px; }
}


/* ── Hide old search box placeholder ───────────────────────────── */
.tavoron-search-header { display: none !important; }

/* ── Search page header ────────────────────────────────────── */
/* Top row — dark navy only when NOT sticky; let Astra's sticky CSS turn it white on scroll */
.search #ast-desktop-header .main-header-bar:not(.ast-sticky-active),
.search #ast-desktop-header .ast-primary-header-bar:not(.ast-sticky-active),
.search #ast-desktop-header .main-header-bar-wrap:not(.ast-sticky-active),
.search #ast-mobile-header .main-header-bar,
.search #ast-mobile-header .ast-primary-header-bar,
.search #ast-mobile-header .main-header-bar-wrap {
    background-color: #183a4b !important;
}
/* Mobile header search/menu-toggle icons — white on the dark top row */
.search #ast-mobile-header .ast-mobile-header-content .astra-search-icon,
.search #ast-mobile-header .ast-mobile-header-content .ast-icon,
.search #ast-mobile-header .menu-toggle-close,
.search #ast-mobile-header .menu-toggle-open {
    color: #fff !important;
    fill: #fff !important;
}
/* Keep our custom outline search icon as stroke-only (no fill) */
.search #ast-mobile-header #tvr-mob-search-btn svg {
    color: #fff !important;
    fill: none !important;
}
/* Nav row (menu) — white background, matching shop page */
.search #ast-desktop-header .ast-below-header-bar,
.search #ast-fixed-header .ast-below-header-bar {
    background-color: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    /* Astra's default below-header-bar has a 2px accent-color border-bottom,
     * normally suppressed by Astra itself only when the page also carries
     * the ast-theme-transparent-header body class (home/shop pages). This
     * page does not carry that class, so without this override the
     * default border shows as a stray line under the whole nav row. */
    border-bottom: none !important;
}
/* Logo — white logo on dark header; sticky logo when header turns white on scroll */
body.search:not(.ast-primary-sticky-header-active) .site-header .site-logo-img .transparent-custom-logo { display: inline-flex !important; }
body.search:not(.ast-primary-sticky-header-active) .site-header .site-logo-img .sticky-custom-logo     { display: none !important; }
/* Shop no longer has its own navy pill background (removed - it now reads
 * as a plain nav item like Products/Services), so it no longer needs a
 * white-text override here either - the generic "Nav links" rule below
 * already covers it (Shop's <ul> carries .main-header-menu same as the
 * other menus), giving navy text + yellow hover matching its siblings.
 * A leftover white-forcing override here previously left "Shop" invisible
 * (white-on-white) on this page. */
/* Megamenu panel items — match shop page: no gray bg on hover, transparent like functions.php */
.search #ast-desktop-header .ast-builder-menu-2 .sub-menu .menu-link:hover,
.search #ast-desktop-header .ast-builder-menu-2 .sub-menu .menu-link:hover .menu-text {
    background-color: transparent !important;
}
/* Search icon: unlike the logo/nav links above, this does NOT sit directly
 * on the navy top row — it sits inside the white .search-field box itself
 * (Astra's always-visible .ast-inline-search), which never changes color
 * regardless of sticky state. The previous version of this rule forced it
 * white to match the navy bar (same treatment as the logo/nav links just
 * above), which made it invisible against its own white background — same
 * bug already fixed for the PDP header, see product-single.css. Stays
 * dark unconditionally, in both sticky and non-sticky states. */
body.search #ast-desktop-header .ast-search-menu-icon a,
body.search #ast-desktop-header .ast-search-menu-icon svg,
body.search #ast-fixed-header .ast-search-menu-icon a,
body.search #ast-fixed-header .ast-search-menu-icon svg {
    color: #111827 !important;
    fill: #111827 !important;
}
/* Header search input — white box when expanded */
.search #ast-desktop-header .ast-search-menu-icon .search-field,
.search #ast-desktop-header .ast-search-menu-icon input[type="search"],
.search #ast-fixed-header .ast-search-menu-icon .search-field,
.search #ast-fixed-header .ast-search-menu-icon input[type="search"] {
    background: #fff !important;
    color: #111827 !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.search #ast-desktop-header .ast-search-menu-icon .search-field::placeholder,
.search #ast-desktop-header .ast-search-menu-icon input[type="search"]::placeholder,
.search #ast-fixed-header .ast-search-menu-icon .search-field::placeholder,
.search #ast-fixed-header .ast-search-menu-icon input[type="search"]::placeholder {
    color: #9ca3af !important;
}
/* Nav links — dark navy, yellow on hover (same as shop page) */
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item > .menu-link,
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item > .menu-link .menu-text {
    color: #183a4b !important;
}
/* Astra core's own dynamic CSS independently colors current-menu-item/
 * current-menu-ancestor using its own "active menu color" setting (currently
 * yellow) - re-asserting navy here neutralizes that so the trigger reads the
 * same normal navy as any other state on this results page; yellow stays a
 * transient hover-only cue below, not an "active/selected" indicator. */
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link,
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link .menu-text,
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item.current-menu-ancestor > .menu-link .menu-text {
    color: #183a4b !important;
    background: transparent !important;
}
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.search #ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover .menu-text {
    color: #f6be00 !important;
}

.search .main-navigation .menu-item > a,
.search #ast-fixed-header .ast-below-header-bar .menu-item > a {
    color: #183a4b !important;
}

/* ── Search topbar — query input at top of results ─────────────── */
.tavoron-search-topbar {
    margin-bottom: 20px;
}
/* Submenu dropdown — white background, dark text, yellow hover */
.search #ast-desktop-header .ast-below-header-bar .sub-menu {
    background-color: #fff !important;
    /* No shadow, matching home/shop pages - the Shop mega menu (which also
     * carries class .sub-menu at every level) already handles its own
     * shadow-free look in mega-menu.css; this generic rule was overriding
     * it back on with a higher-specificity #ast-desktop-header selector. */
    box-shadow: none !important;
}
.search #ast-desktop-header .ast-below-header-bar .sub-menu .menu-link,
.search #ast-desktop-header .ast-below-header-bar .sub-menu .menu-link .menu-text {
    color: #183a4b !important;
}
.search #ast-desktop-header .ast-below-header-bar .sub-menu .menu-link:hover,
.search #ast-desktop-header .ast-below-header-bar .sub-menu .menu-link:hover .menu-text {
    color: #f6be00 !important;
    background-color: #f8f9fa !important;
}

/* ── Search results heading ─────────────────────────────────────── */
.tavoron-search-heading {
    margin-bottom: 20px;
}

.tavoron-search-heading__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    border: none !important;
}

.tavoron-search-heading__kw {
    color: #183a4b;
}

/* ── Hide Astra's "Search Results for:" page title banner ───────── */
.search .ast-archive-entry-banner { display: none !important; }

/* ── Full-width content area ─────────────────────────────────── */
.search #primary.tavoron-search-primary {
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
    padding-top: 130px !important;
}

.tavoron-search-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    box-sizing: border-box;
}

/* ── Products panel: sidebar + grid ─────────────────────────── */
.tvr-search-body {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

/* No max-height/overflow here on purpose — the filter list expands to its full
   height and the page scrolls with it, matching the shop grid's
   .tavoron-shop-sidebar. Capping it to the viewport gave this sidebar its own
   inner scrollbar, which the shop page never had. */
.tvr-search-sidebar {
    flex: 0 0 240px;
    min-width: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.tvr-search-main {
    flex: 1;
    min-width: 0;
}

/* Clear-all button */
.tvr-search-sidebar .tvr-clear-btn {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #183a4b;
    cursor: pointer;
}

.tvr-search-sidebar .tvr-clear-btn.ais-ClearRefinements-button--disabled {
    display: none !important;
}

/* Active filter pill */
.tavoron-active-filters { padding: 8px 16px 0; }
.tavoron-active-filters.ais-CurrentRefinements--noRefinement { display: none; }

/* ── Mobile Filters toggle bar (search page) ─────────────────── */
.tvr-search-mobile-bar {
    display: none;
    margin-bottom: 12px;
}
.tvr-search-mobile-bar .tavoron-filter-toggle .tvr-filter-chevron { transition: transform 0.2s ease; }
.tvr-search-mobile-bar .tavoron-filter-toggle[aria-expanded="true"] .tvr-filter-chevron { transform: rotate(180deg); }

/* ── Responsive — collapse sidebar below 900px ───────────────── */
@media (max-width: 900px) {
    .tvr-search-body { flex-direction: column; }
    .tvr-search-mobile-bar { display: flex; }

    .tvr-search-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        max-height: 100vh;
        background: #fff;
        z-index: 9999;
        box-shadow: 4px 0 20px rgba(0,0,0,0.18);
        transition: left 0.28s ease;
        overflow-y: auto;
        border-radius: 0;
        flex: none;
    }

    .tvr-search-sidebar.is-open { left: 0; }

    .tvr-search-sidebar .tavoron-sidebar-inner {
        border: none;
        border-radius: 0;
        min-height: 100%;
    }
}


/* ── Responsive overrides for search page ───────────────────────── */
@media (max-width: 900px) {
    /* Filters: collapse to compact panel on mobile */
    .tvr-search-sidebar {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 0;
    }
}

@media (max-width: 768px) {
    /* Layout: reduce padding */
    .tavoron-search-layout {
        padding: 0 12px 40px;
    }

    /* Heading: scale down on mobile */
    .tavoron-search-heading__title {
        font-size: 18px !important;
    }

    /* Tabs: smaller */
    .tavoron-stab {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Products grid: 2 columns on search page mobile */
    .search .tavoron-hits__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Pages grid: 2 columns */
    .tvr-pages-grid .ais-Hits-list {
        grid-template-columns: repeat(2, 1fr);
    }
}