/**
 * Bull Search - Modern Search Modal
 * @author Bullmade
 */

/* ============================================
   CSS Variables
   ============================================ */
.bm-search-container {
    --bm-primary: var(--bs-primary, #000);
    --bm-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --bm-body-color: var(--bs-body-color, #212529);
    --bm-highlight: var(--bm-primary);
    --bm-gray-100: var(--bs-gray-100, #f8f9fa);
    --bm-gray-200: var(--bs-gray-200, #e9ecef);
    --bm-gray-300: var(--bs-gray-300, #dee2e6);
    --bm-gray-400: var(--bs-gray-400, #ced4da);
    --bm-gray-500: var(--bs-gray-500, #6c757d);
    --bm-gray-600: var(--bs-gray-600, #6c757d);
    --bm-white: var(--bs-white, #fff);
    --bm-radius: 0;
    --bm-radius-sm: 0.5rem;
    --bm-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --bm-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Configurable color overrides - fallback to gray values */
    --bm-hover: var(--bm-gray-100);
    --bm-border: var(--bm-gray-200);
    --bm-secondary: var(--bm-gray-500);
    --bm-overlay: #000;
    --bm-overlay-rgb: 0, 0, 0;

    /* Search field (input) — overridable via admin colors + size option */
    --bm-input-bg: var(--bm-white);
    --bm-input-border-color: transparent;
    --bm-input-border-width: 0px;
    --bm-input-pad-y: 0.875rem;
    --bm-input-pad-x: 1rem;
    --bm-input-font-size: 1.125rem;
}

/* Search field size presets (set on .bm-search-container via input_size) */
.bm-search-container.bm-input-size-large {
    --bm-input-pad-y: 1.15rem;
    --bm-input-font-size: 1.25rem;
}

.bm-search-container.bm-input-size-xlarge {
    --bm-input-pad-y: 1.45rem;
    --bm-input-font-size: 1.45rem;
}

/* ============================================
   Search Trigger
   ============================================ */
.bm-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: unset;
    background: unset;
    cursor: pointer;
    transition: all var(--bm-transition);
    text-align: left;
}

.bm-search-trigger svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--bm-secondary);
}

.bm-search-trigger-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--bm-secondary);
    font-family: inherit;
    font-weight: 400;
}

/* Mock Input Trigger */
.bm-search-trigger-mock {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--bm-mock-bg, var(--bm-white));
    border: var(--bm-mock-border-width, 1px) solid var(--bm-mock-border-color, var(--bm-border));
    border-radius: var(--bm-mock-radius, 100vmax);
    cursor: text;
}

.bm-search-trigger-mock:hover {
    /* Keep the merchant's configured border color when set, else fall back to default hover. */
    border-color: var(--bm-mock-border-color, var(--bm-secondary));
}

.bm-search-trigger-mock:focus {
    border-color: var(--bm-mock-border-color, var(--bm-primary));
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bm-primary-rgb), 0.1);
}

.bm-search-mock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bm-secondary);
    flex-shrink: 0;
}

.bm-search-mock-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.bm-search-mock-placeholder {
    flex: 1;
    font-size: 0.875rem;
    color: var(--bm-secondary);
    font-family: inherit;
    font-weight: 400;
    text-align: left;
}

/* Mock input on mobile */
@media (max-width: 992px) {
    .bm-search-trigger-mock {
        max-width: none;
    }
}

/* ============================================
   Overlay
   ============================================ */
.bm-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
    z-index: 1050;
}

/* Only the overlay that is a sibling of the currently active container should
   show. Multiple widget copies (desktop + mobile) each emit their own overlay;
   activating on a global body class revealed every overlay at once. */
.bm-search-container.bm-search-active + .bm-search-overlay {
    display: block;
    animation: bm-overlayIn 0.3s ease-out;
}

/* Lock background scroll while any modal is open. iOS Safari does not honour
   overflow:hidden on body alone — html must be clipped too, and touch-action
   pins the gesture so the page cannot pan behind the modal. */
body.bm-search-overlay-active {
    overflow: hidden;
    touch-action: none;
}
html:has(body.bm-search-overlay-active) {
    overflow: hidden;
}

@keyframes bm-overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   Modal Popover
   ============================================ */
.bm-search-popover {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 640px;
    background: var(--bm-white);
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow), 0 0 100vw 100vw rgba(var(--bm-overlay-rgb), 0.2);
    z-index: 1055;
    max-height: 80vh;
    overflow: hidden;
    flex-direction: column;
}

/* Wider modal on desktop when sidebar is present */
@media (min-width: 993px) {
    .bm-search-container.bm-search-has-sidebar .bm-search-popover {
        max-width: 900px;
    }
}

.bm-search-container.bm-search-active .bm-search-popover {
    display: flex;
    animation: bm-modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bm-modalIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

/* ============================================
   Search Header / Input Area
   ============================================ */
.bm-search-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--bm-border);
}

.bm-search-logo {
    display: none;
}

@media (max-width: 992px) {
    .bm-search-logo {
        display: flex;
        justify-content: center;
        padding: 1rem 1rem 0;
    }

    .bm-search-logo img {
        max-height: 2rem;
        width: auto;
    }
}

.bm-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Field background + border span the WHOLE row (input + close button),
       so the search bar reads as one continuous field full width. */
    background: var(--bm-input-bg);
    border: var(--bm-input-border-width) solid var(--bm-input-border-color);
    transition: all var(--bm-transition);
    overflow: hidden;
}

.bm-search-form:focus-within {
    /* Keep the merchant's configured border color on focus instead of switching
       to the theme primary (which is grey on some themes, e.g. "bull"). */
    border-color: var(--bm-input-border-color);
}

.bm-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    background: transparent;
    border: none;
    transition: all var(--bm-transition);
    overflow: hidden;
}

.bm-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bm-input-pad-y) 0 var(--bm-input-pad-y) 1.25rem;
    color: var(--bm-secondary);
    transition: color var(--bm-transition);
}

.bm-search-input-wrapper:focus-within .bm-search-icon {
    color: var(--bm-primary);
}

.bm-search-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.bm-search-input {
    flex: 1;
    border: none;
    padding: var(--bm-input-pad-y) var(--bm-input-pad-x);
    font-size: var(--bm-input-font-size);
    font-family: inherit;
    font-weight: 400;
    background: transparent;
    outline: none;
    min-width: 0;
    border-radius: 0;
    color: var(--bm-body-color);
}

.bm-search-input::placeholder {
    color: var(--bm-input-placeholder, var(--bm-secondary));
    opacity: 1;
}

/* Search Submit Button - Hidden */
.bm-search-btn {
    display: none;
}

/* Clear Button */
.bm-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bm-hover);
    border: none;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all var(--bm-transition);
    color: var(--bm-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.bm-search-clear:hover {
    background: var(--bm-border);
    color: var(--bm-body-color);
}

.bm-search-container.bm-search-has-value .bm-search-clear {
    display: flex;
}

/* Close Button */
.bm-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bm-secondary);
    transition: all var(--bm-transition);
    margin-inline: 0.5rem;
    flex-shrink: 0;
}

.bm-search-close:hover {
    background: var(--bm-hover);
    color: var(--bm-body-color);
}

.bm-search-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   Search Body - Scrollable Results Area
   ============================================ */
.bm-search-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 200px;
    max-height: calc(80vh - 160px);
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
.bm-search-body::-webkit-scrollbar {
    width: 6px;
}

.bm-search-body::-webkit-scrollbar-track {
    background: transparent;
}

.bm-search-body::-webkit-scrollbar-thumb {
    background: var(--bm-border);
    border-radius: 3px;
}

.bm-search-body::-webkit-scrollbar-thumb:hover {
    background: var(--bm-secondary);
}

/* ============================================
   Initial State
   ============================================ */
.bm-search-initial-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    text-align: center;
}

.bm-search-initial-state svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--bm-gray-300);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.bm-search-initial-state p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bm-secondary);
    font-weight: 500;
}

.bm-search-container.bm-search-is-loading .bm-search-initial-state,
.bm-search-container.bm-search-has-results .bm-search-initial-state,
.bm-search-container.bm-search-no-results .bm-search-initial-state {
    display: none;
}

/* ============================================
   Loading State
   ============================================ */
.bm-search-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    text-align: center;
}

.bm-search-container.bm-search-is-loading .bm-search-loading {
    display: flex;
}

.bm-search-loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--bm-border);
    border-top-color: var(--bm-primary);
    border-radius: 50%;
    animation: bm-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

.bm-search-loading p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bm-secondary);
    font-weight: 500;
}

/* ============================================
   No Results State
   ============================================ */
.bm-search-no-results-msg {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    text-align: center;
}

.bm-search-no-results-msg svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--bm-gray-300);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.bm-search-no-results-msg p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bm-secondary);
    font-weight: 500;
}

.bm-search-container.bm-search-no-results .bm-search-no-results-msg {
    display: flex;
    padding: 1.5rem 2rem;
}

/* More compact no-results when showing with default products */
.bm-search-container.bm-search-no-results.bm-search-has-defaults .bm-search-no-results-msg {
    padding: 1rem 1.25rem;
    flex-direction: row;
    gap: 0.75rem;
    justify-content: flex-start;
    border-bottom: 1px solid var(--bm-border);
}

.bm-search-container.bm-search-no-results.bm-search-has-defaults .bm-search-no-results-msg svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0;
}

.bm-search-container.bm-search-no-results.bm-search-has-defaults .bm-search-no-results-msg p {
    font-size: 0.875rem;
}

/* ============================================
   Default Products (shown when input is empty)
   ============================================ */
.bm-search-default-products {
    display: none;
}

.bm-search-container.bm-search-has-defaults .bm-search-default-products {
    display: block;
}

/* Hide default products when has results or is loading */
.bm-search-container.bm-search-has-results .bm-search-default-products,
.bm-search-container.bm-search-is-loading .bm-search-default-products {
    display: none;
}

/* Show default products when no results */
.bm-search-container.bm-search-no-results.bm-search-has-defaults .bm-search-default-products {
    display: block;
}

/* Hide initial state when showing defaults */
.bm-search-container.bm-search-has-defaults .bm-search-initial-state {
    display: none;
}

.bm-search-default-products-loading {
    display: none;
    justify-content: center;
    padding: 2rem;
}

.bm-search-container.bm-search-loading-defaults .bm-search-default-products-loading {
    display: flex;
}

.bm-search-container.bm-search-loading-defaults .bm-search-default-products-list {
    display: none;
}

/* Popular Searches */
.bm-search-popular-searches {
    display: none;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bm-border);
}

/* Show popular searches when has defaults or no results */
.bm-search-container.bm-search-has-defaults .bm-search-popular-searches.has-content,
.bm-search-container.bm-search-no-results .bm-search-popular-searches.has-content {
    display: block;
}

/* Hide popular searches when has results or is loading or is searching */
.bm-search-container.bm-search-has-results .bm-search-popular-searches,
.bm-search-container.bm-search-is-loading .bm-search-popular-searches,
.bm-search-container.bm-search-is-searching .bm-search-popular-searches {
    display: none;
}

/* But show in no-results state even after searching */
.bm-search-container.bm-search-no-results .bm-search-popular-searches.has-content {
    display: block;
}

.bm-search-popular-title {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bm-secondary);
    margin-bottom: 0.75rem;
}

.bm-search-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-search-popular-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--bm-hover);
    border: 1px solid var(--bm-border);
    border-radius: 50px;
    font-size: 0.8125rem;
    color: var(--bm-body-color);
    text-decoration: none;
    transition: all var(--bm-transition);
    cursor: pointer;
}

.bm-search-popular-tag:hover {
    background: var(--bm-primary);
    border-color: var(--bm-primary);
    color: var(--bm-white);
    text-decoration: none;
}

/* Default Products Carousel Header */
.bm-search-default-products-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem 0.5rem;
}

.bm-search-container.bm-search-has-defaults .bm-search-default-products-header,
.bm-search-container.bm-search-no-results.bm-search-has-defaults .bm-search-default-products-header {
    display: flex;
}

.bm-search-default-products-title {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bm-secondary);
}

/* Second row of the no-results heading: normal case, lighter. */
.bm-search-default-products-title .bm-search-title-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bm-secondary);
}

.bm-search-carousel-nav {
    /* Grid layout wraps into rows, so the prev/next slider arrows are not needed. */
    display: none;
    gap: 0.25rem;
}

.bm-search-carousel-prev,
.bm-search-carousel-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--bm-hover);
    border: 1px solid var(--bm-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--bm-secondary);
    transition: all var(--bm-transition);
}

.bm-search-carousel-prev:hover,
.bm-search-carousel-next:hover {
    background: var(--bm-primary);
    border-color: var(--bm-primary);
    color: var(--bm-white);
}

.bm-search-carousel-prev:disabled,
.bm-search-carousel-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bm-search-carousel-prev:disabled:hover,
.bm-search-carousel-next:disabled:hover {
    background: var(--bm-hover);
    border-color: var(--bm-border);
    color: var(--bm-secondary);
}

.bm-search-carousel-prev svg,
.bm-search-carousel-next svg {
    width: 1rem;
    height: 1rem;
}

/* Carousel Wrapper */
.bm-search-carousel-wrapper {
    overflow: visible;
    padding: 0 1.25rem 1rem;
}

/* Grid layout (wrapped rows) for default / no-results products */
.bm-search-default-products-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 992px) {
    .bm-search-default-products-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .bm-search-default-products-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Grid Product Card */
.bm-search-carousel-item {
    min-width: 0;
}

.bm-search-carousel-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--bm-body-color);
    transition: all var(--bm-transition);
}

.bm-search-carousel-item a:hover {
    text-decoration: none;
}

.bm-search-carousel-item-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--bm-radius-sm);
    overflow: hidden;
    background: var(--bm-hover);
    border: 1px solid var(--bm-border);
    margin-bottom: 0.5rem;
}

.bm-search-carousel-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bm-transition);
}

.bm-search-carousel-item a:hover .bm-search-carousel-item-image img {
    transform: scale(1.05);
}

.bm-search-carousel-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bm-body-color);
    margin: 0 0 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.bm-search-carousel-item-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bm-body-color);
    margin: 0;
}

/* Did You Mean Section */
.bm-search-did-you-mean {
    display: none;
    padding: 1rem 1.25rem;
    background: var(--bm-hover);
    border-bottom: 1px solid var(--bm-border);
}

/* Show did you mean when has content and (no results or has results with few items) */
.bm-search-container.bm-search-no-results .bm-search-did-you-mean.has-content,
.bm-search-container.bm-search-has-results .bm-search-did-you-mean.has-content {
    display: block;
}

/* Hide did you mean when loading */
.bm-search-container.bm-search-is-loading .bm-search-did-you-mean {
    display: none;
}

.bm-search-did-you-mean-title {
    display: block;
    font-size: 0.8125rem;
    color: var(--bm-secondary);
    margin-bottom: 0.5rem;
}

.bm-search-did-you-mean-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-search-suggestion {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--bm-white);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bm-primary);
    text-decoration: none;
    transition: all var(--bm-transition);
    cursor: pointer;
}

.bm-search-suggestion:hover {
    background: var(--bm-primary);
    border-color: var(--bm-primary);
    color: var(--bm-white);
    text-decoration: none;
}

/* Hide did you mean when showing defaults (no search active) */
.bm-search-container.bm-search-has-defaults:not(.bm-search-no-results):not(.bm-search-has-results) .bm-search-did-you-mean {
    display: none;
}

/* ============================================
   Results
   ============================================ */
/* Mobile Tabs */
.bm-search-tabs {
    display: none;
}

@media (max-width: 992px) {
    .bm-search-container.bm-search-has-tabs.bm-search-has-results .bm-search-tabs {
        display: flex;
        overflow-x: auto;
        gap: 0;
        border-bottom: 1px solid var(--bm-border);
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bm-search-container.bm-search-has-tabs.bm-search-has-results .bm-search-tabs::-webkit-scrollbar {
        display: none;
    }

    .bm-search-tab {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.625rem 1rem;
        border: none;
        background: none;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--bm-tab-color, #000);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        border-bottom: 2px solid transparent;
        transition: all var(--bm-transition);
    }

    .bm-search-tab.active {
        color: var(--bm-tab-color, #000);
        border-bottom-color: var(--bm-tab-color, #000);
    }

    .bm-search-tab-count {
        font-size: 0.625rem;
        background: var(--bm-gray-200);
        color: var(--bm-secondary);
        padding: 0.0625rem 0.375rem;
        border-radius: 50px;
    }

    .bm-search-tab.active .bm-search-tab-count {
        background: rgba(var(--bm-primary-rgb), 0.15);
        color: var(--bm-primary);
    }

    /* Hide sections by default when tabs are active, show only the active one */
    .bm-search-container.bm-search-has-tabs .bm-search-section[data-section-type] {
        display: none;
    }

    .bm-search-container.bm-search-has-tabs .bm-search-section.bm-search-section-tab-active {
        display: block;
    }

    /* Hide section titles on mobile when tabs are active (tabs replace them) */
    .bm-search-container.bm-search-has-tabs .bm-search-section-title {
        display: none;
    }

    /* Flatten main/sidebar separation on mobile with tabs */
    .bm-search-container.bm-search-has-tabs.bm-search-has-sidebar .bm-search-results-wrapper {
        flex-direction: column;
    }

    .bm-search-container.bm-search-has-tabs.bm-search-has-sidebar .bm-search-results-main {
        border-right: none;
    }
}

.bm-search-results-wrapper {
    display: none;
}

.bm-search-container.bm-search-has-results .bm-search-results-wrapper {
    display: flex;
    flex-direction: column;
}

.bm-search-results {
    display: block;
}

.bm-search-results:empty {
    display: none;
}

/* Independent column scrolling (desktop). When results are shown, the modal
   body stops being the single scroller and hands its bounded height to the
   results columns, so the main (products) column and the sidebar scroll
   independently of each other. Mobile keeps the single-body scroll (tabs). */
@media (min-width: 993px) {
    .bm-search-container.bm-search-has-results .bm-search-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .bm-search-container.bm-search-has-results .bm-search-results-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .bm-search-container.bm-search-has-results .bm-search-results-main,
    .bm-search-container.bm-search-has-results .bm-search-results-sidebar {
        min-height: 0;
        overflow-y: auto;
    }

    /* Products-only (no sidebar): the single column must fill the wrapper so
       it scrolls instead of overflowing the clipped body. */
    .bm-search-container.bm-search-has-results:not(.bm-search-has-sidebar) .bm-search-results-main {
        flex: 1 1 auto;
    }

    /* Match the body's custom scrollbar on the columns. */
    .bm-search-results-main::-webkit-scrollbar,
    .bm-search-results-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .bm-search-results-main::-webkit-scrollbar-track,
    .bm-search-results-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .bm-search-results-main::-webkit-scrollbar-thumb,
    .bm-search-results-sidebar::-webkit-scrollbar-thumb {
        background: var(--bm-border);
        border-radius: 3px;
    }

    .bm-search-results-main::-webkit-scrollbar-thumb:hover,
    .bm-search-results-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--bm-secondary);
    }
}

/* Desktop: Two-column layout with sidebar */
@media (min-width: 993px) {
    .bm-search-container.bm-search-has-sidebar .bm-search-results-wrapper {
        flex-direction: row;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-main {
        flex: 1;
        min-width: 0;
        border-right: 1px solid var(--bm-border);
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar {
        width: 280px;
        flex-shrink: 0;
        background: var(--bm-hover);
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-section {
        padding: 0.25rem 0;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-section:not(:last-child) {
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-section-title {
        padding: 0.5rem 1rem;
        font-size: 0.625rem;
        background: var(--bm-hover);
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-items {
        padding: 0 0.375rem;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-item a {
        padding: 0.5rem 0.625rem;
        gap: 0.625rem;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-item-icon {
        width: 2rem;
        height: 2rem;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-item-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-item-name {
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .bm-search-container.bm-search-has-sidebar .bm-search-results-sidebar .bm-search-item-meta {
        font-size: 0.6875rem;
    }
}

/* Result Section */
.bm-search-section {
    padding: 0.5rem 0;
}

.bm-search-section:not(:last-child) {
    border-bottom: 1px solid var(--bm-border);
}

.bm-search-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bm-secondary);
    margin: 0;
    position: sticky;
    top: 0;
    background: var(--bm-white);
    z-index: 1;
}

.bm-search-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bm-border);
}

/* Card Layout */
.bm-search-section-card .bm-search-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.bm-search-section-card .bm-search-item a {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    position: relative;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    overflow: hidden;
}

.bm-search-section-card .bm-search-item a:hover {
    transform: none;
    border-color: var(--bm-primary);
}

.bm-search-section-card .bm-search-item-image {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--bm-border);
    position: relative;
}

.bm-search-section-card .bm-search-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bm-search-section-card .bm-search-item-content {
    padding: 0.5rem 0.625rem;
}

.bm-search-section-card .bm-search-item-name {
    font-size: 0.8125rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4375em;
}

.bm-search-section-card .bm-search-item-meta {
    font-size: 0.75rem;
}

.bm-search-section-card .bm-search-item-price {
    margin: 0 0.625rem 0.5rem;
    text-align: left;
    font-size: 0.8125rem;
}

/* Result Items */
.bm-search-items {
    list-style: none;
    margin: 0;
    padding: 0 0.5rem;
}

.bm-search-item {
    margin: 0;
    padding: 0;
}

.bm-search-item a {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--bm-body-color);
    border-radius: var(--bm-radius-sm);
    transition: all var(--bm-transition);
    gap: 1rem;
}

.bm-search-item a:hover,
.bm-search-item a:focus {
    background: var(--bm-hover);
    text-decoration: none;
    color: var(--bm-body-color);
    transform: translateX(4px);
}

.bm-search-item a:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bm-primary);
}

/* Item Image */
.bm-search-item-image {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--bm-radius-sm);
    overflow: hidden;
    background: var(--bm-hover);
    border: 1px solid var(--bm-border);
}

.bm-search-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bm-transition);
}

.bm-search-item a:hover .bm-search-item-image img {
    transform: scale(1.05);
}

.bm-search-item-image.bm-search-item-image-sm {
    width: 2.75rem;
    height: 2.75rem;
}

/* Item Icon */
.bm-search-item-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bm-hover), var(--bm-border));
    border-radius: var(--bm-radius-sm);
    color: var(--bm-secondary);
    transition: all var(--bm-transition);
}

.bm-search-item a:hover .bm-search-item-icon {
    background: linear-gradient(135deg, rgba(var(--bm-primary-rgb), 0.1), rgba(var(--bm-primary-rgb), 0.2));
    color: var(--bm-primary);
}

.bm-search-item-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Item Content */
.bm-search-item-content {
    flex: 1;
    min-width: 0;
}

.bm-search-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bm-body-color);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.bm-search-item-meta {
    font-size: 0.8125rem;
    color: var(--bm-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Item Price */
.bm-search-item-price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bm-body-color);
    flex-shrink: 0;
}

/* Stock Indicator - only visible in card layout */
.bm-search-item-stock {
    display: none;
}

.bm-search-section-card .bm-search-item-stock {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: left;
    padding: 0.125rem 0.625rem;
}

.bm-search-section-card .bm-search-item-stock-in {
    color: #fff;
    background: #15803d;
    width: fit-content;
    border-radius: 100vmax;
    margin: 0 0.5em 0.5em;
}

.bm-search-section-card .bm-search-item-stock-out {
    color: #fff;
    background: #dc2626;
    width: fit-content;
    border-radius: 100vmax;
    margin: 0 0.5em 0.5em;
}

/* Add to Cart Icon - only visible in card layout */
.bm-search-item-cart {
    display: none;
}

.bm-search-section-card .bm-search-item-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #3f7c28;
    color: #fff;
    transition: opacity var(--bm-transition);
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.bm-search-section-card .bm-search-item-cart svg {
    width: 1.125rem;
    height: 1.125rem;
}

.bm-search-item:hover .bm-search-item-cart {
    opacity: 0.8;
}

/* Color Swatch */
.bm-search-item-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--bm-white);
    box-shadow: 0 0 0 1px var(--bm-gray-300), 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Highlight */
.bm-search-highlight {
    background: color-mix(in srgb, var(--bm-highlight) 25%, transparent);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .bm-search-highlight {
        background: linear-gradient(120deg, rgba(var(--bm-primary-rgb), 0.2), rgba(var(--bm-primary-rgb), 0.3));
    }
}

/* Boosted/Promoted Items */
.bm-search-item-boosted {
    position: relative;
}

/* ============================================
   View All Link
   ============================================ */
.bm-search-view-all {
    display: none;
    padding: 1rem 1.25rem;
    text-align: center;
    background: var(--bm-hover);
    color: var(--bm-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all var(--bm-transition);
    flex-shrink: 0;
    border-top: 1px solid var(--bm-border);
}

.bm-search-container.bm-search-has-results .bm-search-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.bm-search-view-all::after {
    content: '→';
    transition: transform var(--bm-transition);
}

.bm-search-view-all:hover,
.bm-search-view-all:focus {
    background: var(--bm-primary);
    color: var(--bm-white);
    text-decoration: none;
}

.bm-search-view-all:hover::after {
    transform: translateX(4px);
}

/* ============================================
   Mobile Styles
   ============================================ */
@media (max-width: 992px) {
    .bm-search-popover {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .bm-search-container.bm-search-active .bm-search-popover {
        animation: bm-modalInMobile 0.3s ease-out;
    }

    @keyframes bm-modalInMobile {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bm-search-body {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);
    }

    .bm-search-trigger-text {
        display: none;
    }

    .bm-search-trigger:not(.bm-search-trigger-mock) {
        width: auto;
        max-width: none;
        padding: 0.625rem;
        border-radius: 50%;
        background: unset;
    }

}

/* ============================================
   Keyboard Navigation Focus Styles
   ============================================ */
.bm-search-item a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bm-primary);
}

.bm-search-view-all:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bm-white);
}

/* ============================================
   Hide Legacy Elements
   ============================================ */
.bm-search-mobile-close {
    display: none !important;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .bm-search-container,
    .bm-search-container * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}