body {
    font-family: Arial, sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
h1 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
}
.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.ais-SearchBox {
    max-width: 500px;
}
.ais-SearchBox-form {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}
.ais-SearchBox-input {
    padding: 10px;
}
.ais-SearchBox-submit {
    margin-right: 10px;
}
.search-container {
    display: flex;
    margin-top: 20px;
}
.left-panel {
    width: 280px;
    padding-right: 20px;
}
.right-panel {
    flex-grow: 1;
}
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
}
.view-options {
    display: flex;
    gap: 5px;
}
.view-option {
    border: 1px solid #ddd;
    padding: 5px 10px;
    background: white;
    cursor: pointer;
}
.view-option.active {
    background: #f0f0f0;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.ais-Pagination-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.ais-Pagination-item {
    margin: 0 5px;
}
.ais-Pagination-link {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    text-decoration: none;
}
.ais-Pagination-item--selected .ais-Pagination-link {
    background: #0066cc;
    color: white;
    border-color: #0066cc;
}

/* Filter Panel Styles - KEEPING THESE */
.filter-section {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background: white;
}
.filter-header {
    padding: 10px 15px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
}
.filter-content {
    padding: 10px 15px;
    font-size: 13px;
}
.ais-RefinementList-item {
    margin-bottom: 5px;
}
.ais-RefinementList-label {
    display: flex;
    align-items: center;
}
.ais-RefinementList-checkbox {
    margin-right: 8px;
}
.ais-RefinementList-count {
    margin-left: 5px;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    color: #666;
}
     /* Specification filters styling */
 .specs-filters {
     margin-top: 20px;
     border-top: 1px solid #eee;
     padding-top: 15px;
 }

.secondary-filters-notice {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.secondary-filters-notice i {
    margin-right: 5px;
}

/* Filter header styling */
.filter-header {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-content {
    margin-bottom: 15px;
}

/* Searchable refinement styling */
.search-box {
    margin-bottom: 10px;
}

.searchable-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Show more button */
.ais-RefinementList-showMore {
    background-color: transparent;
    border: none;
    color: #0366d6;
    padding: 0;
    margin-top: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

.ais-RefinementList-showMore:hover {
    text-decoration: underline;
}

/* Refinement list items */
.listing-filter-element {
    margin-bottom: 5px;
}
.listing-filter-element [type="checkbox"] {
    margin-bottom: 0;
}
.active-filters-container {
    background: #f8f9fa;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Current refinements styling */
.current-refinements-root {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.refinement-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.refinement-label {
    font-weight: 600;
    color: #666;
    font-size: 0.9em;
}

.refinement-pill {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.9em;
    border: 1px solid #ddd;
    color: #333;
    gap: 6px;
}

.refinement-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    font-size: 1.2em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.refinement-remove:hover {
    color: #666;
}

/* Clear all button styling */
.clear-all-button {
    background: #e9ecef;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.clear-all-button:hover {
    background: #dee2e6;
    color: #333;
}

.clear-all-button[disabled] {
    display: none;
}

/* Responsive adjustments */
@media screen and (max-width: 640px) {
    .active-filters-container {
        flex-direction: column;
        align-items: stretch;
    }

    .refinement-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-section{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.ais-SearchBox{
    max-width: 100% !important;
}

.ais-SearchBox-form{
    border: none !important;
}

/* Fix for duplicate search icons */
.ais-SearchBox-submit:not(:first-of-type) {
    display: none !important;
}

/* Ensure only one icon is visible within the first submit button */
.ais-SearchBox-form::before,
.ais-SearchBox-form::after {
    content: none !important;
    display: none !important;
}

/* Mobile Filter Panel */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.filter-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: white;
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding: 1rem;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

.filter-panel.open {
    right: 0;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.filter-panel-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Filter toggle button styles */
.filter-toggle-button {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

#mobile-filter-toggle {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#mobile-filter-toggle i {
    font-size: 1rem;
}

/* Responsive adjustments */
@media screen and (max-width: 640px) {
    /* Hide filters in main layout on mobile */

    /* Adjust grid for mobile */
    .main-container .cell.small-8 {
        width: 60%;
    }

    .main-container .cell.small-4 {
        width: 40%;
    }

    /* Make search input full width */
    #searchbox {
        width: 100%;
    }

    /* Adjust result area for full width */
    .grid-x .cell.small-12.medium-9.large-9 {
        width: 100%;
    }

    /* Adjust filter button position */
    .custom-search-container {
        display: flex;
        align-items: center;
    }
}

/* When filters panel is open on mobile */
body.filters-open {
    overflow: hidden;
}

/* Active filter count badge */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1779ba;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    margin-left: 5px;
}

/* Secondary filter notice in mobile panel */
.mobile-section-header {
    font-weight: bold;
    margin: 1rem 0 0.5rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.mobile-filter-section {
    margin-bottom: 1rem;
}

.mobile-filter-section .filter-content {
    padding-left: 0.5rem;
}

/* Make checkboxes easier to tap on mobile */
.mobile-filter-section .listing-filter-element label {
    padding: 8px 0;
    display: inline-block;
    width: 80%;
}

/* Filter styling */
.filter-section {
    margin-bottom: 15px;
    background: white;
}

.filter-header {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-content {
    margin-bottom: 15px;
}

/* Mobile filter panel */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.filter-panel {
    position: fixed;
    top: 0;
    right: -85%;
    width: 85%;
    height: 100%;
    background-color: white;
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding: 1rem;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

.filter-panel.open {
    right: 0;
}

/*
 * Filters are collapsed by default via .filter-bar-top .filter-content
 * { display: none } (desktop bar) — but JS moves these same .filter-section
 * elements into #mobile-filter-panel on mobile, well outside .filter-bar-top,
 * so that rule never reaches them there. Without this, every filter's
 * .filter-content (search box + full checkbox list) renders open and
 * stacked at once instead of collapsed-until-tapped, which is what actually
 * caused the mobile "overlap" — not a spacing value, but every filter's
 * content piled on top of the next with no accordion collapse at all.
 */
#mobile-filter-panel .filter-content {
    display: none;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.filter-panel-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Filter toggle button */
.filter-toggle-button {
    display: none;
}

@media (max-width: 640px) {
    .filter-toggle-button {
        display: flex;
        width: 100%;
        margin: 10px 0;
    }

    #mobile-filter-toggle {
        width: 100%;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f5f5f5;
        font-weight: 500;
    }

    /* Hide desktop filters container on mobile */
    .cell.small-12.medium-3.large-3.filter-container {
        display: none;
    }
    
    /* Style mobile brand info bottom */
    .mobile-brand-info-bottom {
        margin-top: 2rem;
        margin-bottom: 1rem;
        padding: 0 1rem;
    }
    
    .mobile-brand-info-bottom .brand-box {
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 1rem;
    }
    
    .mobile-brand-info-bottom .brand-box img {
        max-width: 100%;
        height: auto;
        max-height: 120px;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    
    .mobile-brand-info-bottom .brand-box p {
        font-size: 14px;
        line-height: 1.4;
        color: #4a5568;
        margin-bottom: 0;
    }

    /* Full width results on mobile */
    .cell.small-12.medium-9.large-9 {
        width: 100%;
    }
}

/* Filter badge for active filters count */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1779ba;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    margin-left: 5px;
}

/* Specification filters */
.specs-filters {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.secondary-filters-notice {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.secondary-filters-notice i {
    margin-right: 5px;
}

/* Refinement list items */
.listing-filter-element {
    margin-bottom: 5px;
}

.listing-filter-element [type="checkbox"] {
    margin-bottom: 0;
}

/* Active filters styling */
.active-filters-container {
    background: #f8f9fa;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.current-refinements-root {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.current-refinements-item {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.9em;
    border: 1px solid #ddd;
    color: #333;
    gap: 6px;
}

.current-refinements-delete {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    font-size: 1.2em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.current-refinements-delete:hover {
    color: #666;
}

/* Clear all button */
.clear-all-button {
    background: #e9ecef;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.clear-all-button:hover {
    background: #dee2e6;
    color: #333;
}

.clear-all-button[disabled] {
    display: none;
}

/* Animation for filters */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fix for search box */
.ais-SearchBox {
    max-width: 100% !important;
}

.ais-SearchBox-form {
    border: none !important;
}

/* Fix for duplicate search icons */
.ais-SearchBox-submit:not(:first-of-type) {
    display: none !important;
}

.ais-SearchBox-form::before,
.ais-SearchBox-form::after {
    content: none !important;
    display: none !important;
}


/* Pagination styling */
.pagination-container {
    margin-top: 20px;
}

/* Mobile pagination fixes */
@media screen and (max-width: 640px) {
    .pagination-container .pagination {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .pagination-container .pagination li {
        display: block !important;
        margin: 0 !important;
    }

    .pagination-container .pagination li a,
    .pagination-container .pagination li span {
        display: block !important;
        padding: 0.5rem 0.75rem !important;
        min-width: 44px !important;
        text-align: center !important;
        font-size: 14px !important;
    }


    /* Pagination info styling */
    .pagination-container .pagination li.pagination-info {
        width: 100% !important;
        order: 10 !important; /* Move to end */
        margin-top: 0.5rem !important;
    }

    .pagination-container .pagination li.pagination-info span {
        font-size: 12px !important;
        color: #666 !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem !important;
        min-width: auto !important;
    }

    /* Ensure pagination is visible */
    .pagination-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop pagination info */
.pagination-container .pagination li.pagination-info span {
    font-size: 0.9em;
    color: #666;
    background: transparent;
    border: none;
    padding: 0.5rem;
}

.filters-count {
    font-size: 0.9em;
    color: #666;
    margin-right: 10px;
}

/* Add these new styles for mobile responsiveness */
@media screen and (max-width: 640px) {
    .custom-search-container {
        margin-bottom: 1rem;
        width: 100%;
    }

    /* Force the search box to take full width */
    #searchbox,
    #searchbox .ais-SearchBox,
    #searchbox .ais-SearchBox-form {
        width: 100% !important;
    }

    #searchbox .ais-SearchBox-input {
        width: 100% !important;
        box-sizing: border-box;
        padding-right: 40px; /* Make room for the search button */
    }
}

/* Add these styles for all screen sizes */
.custom-search-container,
#searchbox,
#searchbox .ais-SearchBox,
#searchbox .ais-SearchBox-form {
    width: 100%;
}
/* Add these new styles for mobile responsiveness */
@media screen and (max-width: 640px) {
    .custom-search-container {
        margin-bottom: 1rem;
        width: 100%;
    }

    /* Force the search box to take full width */
    #searchbox,
    #searchbox .ais-SearchBox,
    #searchbox .ais-SearchBox-form {
        width: 100% !important;
    }

    #searchbox .ais-SearchBox-input {
        width: 100% !important;
        box-sizing: border-box;
        padding-right: 40px;
    }

    /* Make refinement bubbles wrap nicely on mobile */
    .current-refinements-root .current-refinements-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .current-refinements-item {
        margin-right: 0;
        margin-bottom: 0;
        flex-grow: 0;
        flex-shrink: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .current-refinements-category {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        padding: 4px 8px;
        display: flex;
        align-items: center;
    }

    .current-refinements-delete {
        margin-left: 4px;
    }
}

/* Add these styles for all screen sizes */
.custom-search-container,
#searchbox,
#searchbox .ais-SearchBox,
#searchbox .ais-SearchBox-form {
    width: 100%;
}

/* Make refinement bubbles display nicely on all screens */
.current-refinements-root .current-refinements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.current-refinements-item {
    margin: 0;
    background-color: #f5f5f5;
    border-radius: 16px;
    overflow: hidden;
}

.current-refinements-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.875rem;
}

.current-refinements-label {
    margin-right: 4px;
}

.current-refinements-delete {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    font-size: 1rem;
}

/* Adds animation to filter bubbles */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.ais-RefinementList-showMore {
    color: unset !important;
}

/* Make the filters sidebar full height with scrolling */
.cell.small-12.medium-3.large-3.filter-container {
    position: sticky;
    top: 20px; /* Add some space from the top */
    height: calc(100vh - 40px); /* Subtract a bit of space for margins */
    overflow-y: auto;
    padding-right: 10px; /* Add space for the scrollbar */
}

/* Ensure filter sections don't have their own scrollbars */
.filter-section {
    /* Remove the existing max-height to prevent double scrollbars */
    max-height: none;
    overflow-y: visible;
}

.equipment-header{
    margin-top: 10px;
    margin-bottom: 5px;
}

.equipment-header h1 {
    margin-bottom: 0;
}

.equipment-header .cell.shrink {
    padding-top: 10px;
}

/* For mobile view, disable sticky behavior */
@media screen and (max-width: 640px) {
    .cell.small-12.medium-3.large-3.filter-container {
        position: static;
        height: auto;
        overflow-y: visible;
    }
    .equipment-header{
        margin-top: 15px;
    }
    
    /* Reduce excessive whitespace on mobile */
    .main-container {
        padding-top: 0.5rem !important;
    }
    
    /* Reduce top margin on mobile container */
    .container-fluid.grid-container.fluid.m-sides {
        margin-top: 0.5rem;
    }
    
    /* Reduce equipment header margin on mobile */
    .equipment-header {
        margin-top: 0.5rem !important;
    }
    
    /* Hide active filters container on mobile */
    .active-filters-container {
        display: none !important;
    }
    
    /* Reduce bottom spacing on equipment header */
    .equipment-header {
        margin-bottom: 0.5rem !important;
    }
}
.ais-SearchBox-input{
    margin-bottom: 0 !important;
}

.ais-Hits-item{
    margin-bottom: 15px;
}

@media screen and (min-width: 641px) {
    /*
     * The sitewide #nav-pad spacer (frontend-app2.css) reserves 128px to clear
     * the fixed #main-navigation, but #main-navigation is taller than that for
     * logged-out users — it includes a conditional promo bar, measured at
     * ~139px total vs. nav-pad's fixed 128px, an ~11px shortfall. That's normally
     * not visible because whatever renders first below it has enough of its own
     * margin to absorb it, but breadcrumbs are only ~18px tall, so the shortfall
     * clips their top edge. This page's own top container adds a small buffer
     * on top of nav-pad's clearance to close that gap, since breadcrumbs are
     * this page's first element.
     *
     * (Note: {{ Blade }} does NOT get compiled in this file — it's served as a
     * static asset, not routed through Blade — so this must be a plain value,
     * not an auth-conditional expression like the old .main-container rule
     * this replaced had. That old rule silently never applied for that reason.)
     */
    .container-fluid.grid-container.fluid.m-sides {
        padding-top: 1rem;
    }
}

/* Equipment header styling */
.equipment-description {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.4;
}

.equipment-header-image {
    max-height: 150px;
    max-width: 200px;
    margin: 1rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Header stat tiles + Browse Inventory CTA */
.equipment-stats-row {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.stat-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 0.85rem 1rem;
    background: #f7f8fa;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
}

.stat-tile-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: #4578E5;
}

.stat-tile-body {
    min-width: 0;
}

.stat-tile-value {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #0a0a0a;
}

.stat-tile-label {
    font-size: 0.8rem;
    line-height: 1.3;
    color: #6b6b6b;
}

.stat-tile-link {
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-tile-link:hover,
.stat-tile-link:focus {
    border-color: #4578E5;
    box-shadow: 0 2px 8px rgba(69, 120, 229, 0.15);
}

.stat-tile-link:hover .stat-tile-value {
    color: #4578E5;
}

.stat-tile-value-links a {
    color: #0a0a0a;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.stat-tile-value-links a:hover,
.stat-tile-value-links a:focus {
    color: #4578E5;
    text-decoration-color: #4578E5;
}

@media screen and (max-width: 640px) {
    .equipment-stats-row .cell {
        margin-bottom: 0.5rem;
    }
}

/*
 * Horizontal filter bar (filters moved above the results grid). Sticky so the
 * filters + keyword search stay reachable while scrolling through a long
 * results list, instead of having to scroll back to the top of the page.
 * `top` clears the fixed #main-navigation - whose real height varies with auth
 * state (~101px logged-in, ~139px logged-out with the promo bar, see
 * header.blade.php) - via --sticky-filter-top, a CSS var set from the real
 * measured nav height by syncStickyFilterBarOffset() in marketplace-search.js.
 * The 140px fallback only matters before that JS runs (e.g. this rule applying
 * for an instant before DOMContentLoaded) or if it's disabled. z-index stays
 * under #main-navigation's 15 so the fixed nav still layers on top of it.
 * Hidden entirely on mobile (below), so no separate override needed there.
 */
.filter-container.filter-bar-top {
    position: sticky;
    top: var(--sticky-filter-top, 140px);
    z-index: 10;
    width: 100%;
    height: auto;
    overflow: visible;
    /* No padding-right override here (unlike the legacy sidebar .filter-container
       rule above, which zeroes it out to make room for its own scrollbar) - this
       horizontal bar doesn't scroll internally, so it should keep Foundation's
       normal 15px grid-padding-x gutter, same as the results cell below it. Zeroing
       it made the filter bar's content render 15px wider than the results grid. */
    margin-bottom: 1.25rem;
    background: #fff;
}

/*
 * Backdrop for the gap between the fixed nav and the sticky filter bar. In
 * practice --sticky-filter-top (see the rule above) closes that gap down to
 * ~0, but this still matters for the instant before syncStickyFilterBarOffset()
 * runs, and if JS is disabled - without it, results scrolling by underneath
 * would show through. Matches --sticky-filter-top's height exactly so it never
 * paints more blank space than the real nav actually needs. #main-navigation
 * (z-index 15) still layers on top of it within whatever its own real height is.
 */
.filter-container.filter-bar-top::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sticky-filter-top, 140px);
    background: #fff;
    z-index: 9;
    pointer-events: none;
}

/* Now the last thing in the filter bar (see the Blade template) rather than
   the first, so the keyword box doesn't compete with the filter pills for
   the reader's first glance - those are the more common way to narrow
   results, and a search box below them is less likely to be assumed empty. */
.filter-bar-top #searchbox {
    margin-top: 0.85rem;
}

#sticky-filter-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

#search-form {
    transition: flex-grow 200ms ease;
}

body.search-morph-active #search-form {
    flex: 1 1 auto;
    margin-left: 0.75rem;
    /* +0.6rem compensates for .primary-filters' grid margin trick below, so this lines up
       with the last visible pill rather than #nav-filter-slot's own padded edge. */
    margin-right: calc(var(--nav-content-inset, 40px) + 0.6rem);
}

body.search-morph-active .nav-links-container {
    flex-wrap: wrap;
    height: auto;
    min-height: 100px;
    row-gap: 0.5rem;
    padding: 0.5rem 0;
}

#marketplace-search {
    transition: height 200ms ease, border-color 200ms ease, background-color 200ms ease,
                font-size 200ms ease, padding 200ms ease, width 200ms ease;
}

body.search-morph-active #marketplace-search {
    height: 38px;
    width: 100%;
    padding: 0 0.6rem 0 1.6rem;
    font-size: 0.85rem;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    background: #fff;
    animation: search-handoff-pulse 480ms ease-out;
}

body.search-morph-active #marketplace-search:focus {
    border-color: #4578E5;
    outline: none;
}

@keyframes search-handoff-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(69, 120, 229, 0.35); }
    40%  { box-shadow: 0 0 0 6px rgba(69, 120, 229, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(69, 120, 229, 0); }
}

body.search-morph-active #searchbox {
    display: none;
}

@media screen and (min-width: 1441px) {

.nav-links-container > a:first-child {
    position: relative;
    display: inline-block;
    width: 352px;
    height: 99px;
    vertical-align: middle;
    transition: width 300ms ease, height 300ms ease;
}

body.search-morph-active .nav-links-container > a:first-child {
    width: 60px;
    height: 60px;
}

.nav-links-container .full-logo,
.nav-links-container .logo-only {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    transition: opacity 300ms ease;
}

.nav-links-container .full-logo {
    opacity: 1;
}

body.search-morph-active .nav-links-container .full-logo {
    opacity: 0;
    pointer-events: none;
}

.nav-links-container .logo-only {
    display: inline-block !important;
    opacity: 0;
    pointer-events: none;
}

body.search-morph-active .nav-links-container .logo-only {
    opacity: 1;
    pointer-events: auto;
}

}

/* 641px+ matches initStickyFilterMorph()'s own mobile cutoff - without this, the rules
   below (not gated on JS) bleed into the normal mobile header. */
@media screen and (min-width: 641px) {

.nav-links-container > ul.dropdown.menu,
#actions-container {
    transition: max-width 300ms ease, opacity 200ms ease, margin 300ms ease, padding 300ms ease;
}

body.search-morph-active .nav-links-container > ul.dropdown.menu,
body.search-morph-active #actions-container {
    max-width: 0 !important;
    /* overflow:hidden only while actually collapsing/collapsed - applied unconditionally
       here used to clip Equipment/Auctions' own Foundation dropdown submenus (position:
       absolute, extending past this element's bounds) even outside the morph. */
    overflow: hidden;
    /* white-space:nowrap keeps this pinned to one line's height while collapsing - without
       it, the squeezed-toward-0-width text wraps and inflates the row's real height even
       at opacity:0. */
    white-space: nowrap;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

}

#nav-filter-slot {
    display: none;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding-left: var(--nav-content-inset, 40px);
    padding-right: var(--nav-content-inset, 40px);
}

body.search-morph-active #nav-filter-slot {
    display: flex;
    flex: 0 0 100%;
}

#nav-filter-slot .primary-filters {
    display: grid;
    grid-template-columns: repeat(var(--filter-columns, 7), 1fr);
    margin: -0.3rem;
    width: 100%;
    /* No overflow-x:auto - setting only that axis forces overflow-y to compute as auto too
       (CSS spec), which clipped .filter-content's dropdown below this row. Confirmed live. */
}

#nav-filter-slot .filter-section {
    position: relative;
    min-width: 0;
    margin: 0.3rem;
    /* Resets the legacy base .filter-section border/background (line ~98) which otherwise
       leaks through here. */
    border: none;
    background: transparent;
    max-height: none;
    overflow: visible;
}

#nav-filter-slot .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#nav-filter-slot .filter-header:hover {
    border-color: #4578E5;
}

#nav-filter-slot .filter-header i {
    font-size: 0.75rem;
    color: #6b6b6b;
}

#nav-filter-slot .filter-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    width: max-content;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    margin-bottom: 0;
    padding: 0.6rem 0.85rem;
}

/* order:-1 rather than moving it before the logo in the DOM, which the crossfade's
   :first-child selector above depends on. */
.nav-links-container > .active-filters-container {
    order: -1;
    flex: 0 0 100%;
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem;
}

/*
 * .secondary-filters and .dynamic-specs have their visibility toggled by JS
 * (customDynamicRefinement / loadDynamicSpecFilters) based on result count —
 * via a `.filters-hidden` class now (see that class below), not inline
 * style.display, specifically so this `display: flex` isn't clobbered:
 * inline styles beat plain CSS rules regardless of specificity, so a JS-set
 * `style.display = 'block'` would have overridden this every time.
 *
 * Row/column spacing here is done with margin, not `gap` — flexbox `gap`
 * does not reliably add spacing between wrapped rows in this stack, verified
 * by isolated testing, while margin-based spacing on grid/flex children is
 * immune to that (they never margin-collapse). The container gets a negative
 * margin equal to the item margin so the row's outer edges still line up
 * with the rest of the page.
 *
 * These are CSS Grid, not flexbox, with a FIXED column count — not
 * auto-fit/auto-fill — specifically so a pill's width is the same everywhere
 * regardless of how many items happen to be in its own row. Flex-grow (or
 * auto-fit) sizes each row independently off its own item count, which is
 * why Year — the only item in .secondary-filters — used to stretch to the
 * full row width instead of matching a primary-filter pill's width: it had
 * no other items in its row to divide the space with. All of these groups
 * share the same --filter-columns custom property (set on .filter-bar-top,
 * from count($refinements) in the Blade template) so a pill is always
 * exactly one column wide, and that column width is identical across every
 * group — a row with fewer items just leaves the remaining columns empty
 * instead of stretching into them.
 */
.filter-bar-top .primary-filters,
.filter-bar-top .secondary-filters,
.filter-bar-top .dynamic-specs,
.filter-bar-top .spec-overflow-group {
    display: grid;
    grid-template-columns: repeat(var(--filter-columns, 7), 1fr);
    margin: -0.3rem;
}

@media screen and (max-width: 1100px) {
    .filter-bar-top .primary-filters,
    .filter-bar-top .secondary-filters,
    .filter-bar-top .dynamic-specs,
    .filter-bar-top .spec-overflow-group {
        grid-template-columns: repeat(4, 1fr);
    }
}

.filter-bar-top .dynamic-specs .secondary-filters-notice {
    grid-column: 1 / -1;
    margin: 0.3rem;
}

.filter-bar-top .filters-hidden {
    display: none !important;
}

.spec-filters-collapsed-link {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    text-align: left;
    cursor: pointer;
}

.spec-filters-collapsed-link:hover {
    border-color: #4578E5;
    color: #4578E5;
}

/* .dynamic-specs:not(.filters-hidden) requires it to actually have spec content - without
   this, the link showed (and clicking it did nothing) even when this result set has no
   specification facets at all. Adjacent-sibling selector since the Blade template places
   this button directly after #specs-filters-container. */
body.search-morph-active:not(.spec-filters-active):not(.spec-filters-expanded) .dynamic-specs:not(.filters-hidden) + .spec-filters-collapsed-link {
    display: flex;
}

/* !important - .filters-hidden already uses one, and both can apply at once. */
body.search-morph-active:not(.spec-filters-active):not(.spec-filters-expanded) .filter-bar-top .dynamic-specs {
    display: none !important;
}

/* Progressive disclosure for spec filters: first N shown inline (see
   PRIMARY_SPEC_COUNT in marketplace-search.js), the rest collapsed into this
   group until "Show N More Specs" is clicked. */
.filter-bar-top .spec-overflow-group {
    grid-column: 1 / -1;
}

.filter-bar-top .spec-toggle-more {
    grid-column: 1 / -1;
    margin: 0.3rem;
    padding: 0.4rem 0;
    background: none;
    border: none;
    color: #4578E5;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.filter-bar-top .spec-toggle-more:hover {
    text-decoration: underline;
}

.filter-bar-top .spec-toggle-more i {
    margin-left: 0.35rem;
    font-size: 0.75rem;
}

.filter-bar-top .filter-section {
    position: relative;
    min-width: 0;
    margin: 0.3rem;
    /* reset legacy sidebar-accordion styling from earlier in this file */
    border: none;
    background: transparent;
    max-height: none;
    overflow: visible;
}

.filter-bar-top .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    /* reset legacy sidebar-accordion styling from earlier in this file */
    margin-bottom: 0;
    border-bottom: 1px solid #d4d7dc;
}

.filter-bar-top .filter-header:hover {
    border-color: #4578E5;
}

.filter-bar-top .filter-header i {
    font-size: 0.75rem;
    color: #6b6b6b;
}

.filter-bar-top .filter-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    min-width: 240px;
    width: max-content;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    /* reset legacy sidebar-accordion styling from earlier in this file */
    margin-bottom: 0;
    padding: 0.6rem 0.85rem;
}

.filter-bar-top .dynamic-specs {
    margin-top: 0.6rem;
}

/*
 * Search box injected into each filter's checkbox list by refinementList's
 * `searchable: true`. This plain, unscoped rule is the mobile fallback: on
 * mobile, JS moves these same .filter-section elements into the slide-out
 * #mobile-filter-panel, well outside .filter-bar-top, so the more specific
 * desktop rule below (which also handles sticky positioning within the
 * floating dropdown) doesn't reach it there — without this, the search box
 * sits flush against the first checkbox with no separation. Lower
 * specificity than the desktop rule, so it only fills the gap where that
 * one doesn't apply, rather than fighting it.
 */
.ais-RefinementList-searchBox {
    /* A bordered input reads as heavier than a plain checkbox row, so matching
       the 5px item-to-item rhythm wasn't enough breathing room in practice —
       confirmed too tight once the mobile accordion bug (all filters open at
       once) was fixed and this could actually be seen in isolation. A visible
       divider plus more room frames the search box as its own zone, echoing
       the sticky-header treatment already used on desktop. */
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.filter-bar-top .filter-content .ais-RefinementList-searchBox {
    position: sticky;
    top: -0.6rem;
    margin: -0.6rem -0.85rem 0.5rem;
    padding: 0.6rem 0.85rem 0.5rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 1;
}

.filter-bar-top .filter-content .ais-SearchBox {
    max-width: none;
}

.filter-bar-top .filter-content .ais-SearchBox-form {
    border: 1px solid #d4d7dc;
    border-radius: 6px;
}

.filter-bar-top .filter-content .ais-SearchBox-input {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.filter-bar-top .filter-content .ais-SearchBox-form:focus-within {
    border-color: #4578E5;
}

@media screen and (max-width: 640px) {
    .filter-bar-top {
        display: none;
    }
}

/* SEO content section styling */
.seo-content-section {
    margin: 2rem 0;
    padding: 0 1rem;
}

.equipment-info-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.equipment-info-image {
    max-height: 200px;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.equipment-info-content h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.4rem;
}

.equipment-info-content p {
    color: #4a5568;
    line-height: 1.6;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.equipment-cta-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.equipment-cta-section .button {
    margin-bottom: 0;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.equipment-cta-section .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Filter sidebar image styling */
.type-box {
    margin-bottom: 1rem;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filter-type-image {
    max-height: 120px;
    max-width: 100%;
    border-radius: 6px;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 640px) {
    .seo-content-section {
        padding: 0 0.5rem;
    }

    .equipment-info-card {
        padding: 1.5rem;
    }

    .equipment-header-image {
        max-height: 120px;
        max-width: 150px;
    }

    .equipment-info-image {
        max-height: 150px;
    }
}
@media screen and (min-width: 641px) {
    .custom-search-container{
        padding-bottom: 25px;
        padding-top: 0;
        margin-top: 0;
    }

    .main-container {
        margin-bottom: 0;
        padding-bottom: 5px;
    }

    .main-container .breadcrumbs-wrapper {
        margin-bottom: 5px;
    }

    .main-container .breadcrumbs {
        margin-bottom: 0;
    }

    .active-filters-container {
        margin-bottom: 0;
    }

    /* Hide active filters container when no filters are applied */
    .active-filters-container:not(:has(.ais-CurrentRefinements-item)) {
        display: none;
    }

    /* Reduce grid-padding-x vertical spacing */
    .main-container.grid-padding-x > .cell {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Hide active filters container when no filters are applied (all screen sizes) */
.active-filters-container:not(:has(.ais-CurrentRefinements-item)) {
    display: none;
}
.front-end-description{
    padding: 0.5rem 0.5rem;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: rgb(51, 51, 51);
}

/*
 * Two-column layout for the brand/type/category description block: image on
 * the right, description text floats to the left. Scoped to #search-results
 * (not just .brand-box) since that class is also used, unrelatedly, on
 * frontend-v2/brands/filter-sidebar.blade.php.
 */
#search-results .brand-box {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem;
}

#search-results .brand-box .text-center {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
}

#search-results .brand-box .text-center img {
    display: block;
    max-width: 240px;
    width: 100%;
    height: auto;
}

#search-results .brand-box > div:not(.text-center) {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

/* Popular combos section */
.popular-combos-section {
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}

.popular-combos-list {
    columns: 3;
    column-gap: 2rem;
    margin-top: 1rem;
    list-style: none;
    padding-left: 0;
}

.popular-combos-item {
    margin-bottom: 0.5rem;
    break-inside: avoid;
}

.popular-combos-count {
    color: #999;
}

@media screen and (max-width: 768px) {
    .popular-combos-list {
        columns: 2;
        column-gap: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .popular-combos-list {
        columns: 1;
    }
}

.ais-SearchBox-input{
    height: 50px;
}
#searchbox{
    height: 75px;
    padding: 0 !important;
}