/* ============================================================================
   101 Universal Search — Frontend dropdown styling
   Matches the locked 101 Marketplace design system tokens:
     - Brand teal:        #06B18F
     - Brand teal hover:  #059473
     - Text dark:         #1d2128
     - Muted text:        #757575
     - Card radius:       8px (thumbnails) / 12px (rows)
     - Box shadow:        0 4px 28px rgba(0, 0, 0, 0.13)
     - Transition:        0.25s ease
   Inherits the site's Nunito/Poppins font stack — no font-family override.
   ========================================================================= */

/* -- Scroll container applied to Motta's results pane on first injection -- */
#site-header .header-search__results.us101-scroll-applied,
#search-modal .header-search__results.us101-scroll-applied,
#search-modal .search-results.us101-scroll-applied,
#search-modal .search-list.us101-scroll-applied {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #06B18F #f0f3f5;
}
@media (max-width: 767px) {
    #site-header .header-search__results.us101-scroll-applied,
    #search-modal .header-search__results.us101-scroll-applied,
    #search-modal .search-results.us101-scroll-applied,
    #search-modal .search-list.us101-scroll-applied {
        max-height: 80vh;
    }
}
.us101-scroll-applied::-webkit-scrollbar {
    width: 4px;
}
.us101-scroll-applied::-webkit-scrollbar-track {
    background: #f0f3f5;
    border-radius: 4px;
}
.us101-scroll-applied::-webkit-scrollbar-thumb {
    background: #06B18F;
    border-radius: 4px;
}

/* -- Vendor section wrapper -- */
/* v1.0.2: defensive layout. Some Motta search containers use flex/inline
   parents which would mis-position the section horizontally next to the
   input or the categories tab. Force block, full width, clear, and a high
   flex-order so we always sit at the bottom regardless of parent layout. */
.us101-vendors-section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: 999 !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
    border-top: 1px solid #e8ecef;
    margin-top: 6px;
    padding: 0 0 6px 0;
    color: #1d2128;
    background: #ffffff;
}

/* Sticky section header so users always know which section they're scrolling */
.us101-section-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    padding: 10px 16px 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1d2128;
    border-bottom: 1px solid #f0f3f5;
    display: flex;
    align-items: center;
    gap: 6px;
}
.us101-section-title {
    color: #1d2128 !important;
}
.us101-section-count {
    margin-left: auto;
    color: #757575 !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

/* -- Vendor list -- */
.us101-vendor-list {
    display: flex;
    flex-direction: column;
}

/* -- Vendor row -- */
.us101-vendor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none !important;
    color: #1d2128 !important;
    background: #ffffff;
    border-bottom: 1px solid #f7f8fa;
    transition: background-color 0.25s ease, transform 0.25s ease;
    min-height: 64px;
    box-sizing: border-box;
}
.us101-vendor-row:last-child {
    border-bottom: none;
}
.us101-vendor-row:hover,
.us101-vendor-row.is-focus {
    background: rgba(6, 177, 143, 0.04);
}
.us101-vendor-row:hover .us101-view-store-btn,
.us101-vendor-row.is-focus .us101-view-store-btn {
    background: #059473;
    transform: translateX(2px);
}
.us101-vendor-row.is-pinned {
    background: linear-gradient(90deg, rgba(6, 177, 143, 0.05) 0%, #ffffff 60%);
}

/* -- Logo -- */
.us101-vendor-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.us101-vendor-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.us101-vendor-logo-fallback {
    background: #06B18F;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

/* -- Body -- */
.us101-vendor-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.us101-vendor-name {
    font-size: 13px;
    font-weight: 700;
    color: #1d2128 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}
.us101-vendor-pin {
    display: inline-block;
    background: rgba(6, 177, 143, 0.12);
    color: #06B18F !important;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.us101-vendor-meta {
    font-size: 12px;
    color: #757575 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Action button -- */
.us101-vendor-action {
    flex: 0 0 auto;
    margin-left: 8px;
}
.us101-view-store-btn {
    display: inline-block;
    padding: 6px 12px;
    background: #06B18F;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    transition: background-color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

/* -- Mobile spacing -- */
@media (max-width: 767px) {
    .us101-vendor-row {
        min-height: 72px;
        padding: 12px 14px;
    }
    .us101-vendor-logo {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }
    .us101-vendor-name {
        font-size: 14px;
    }
    .us101-vendor-meta {
        font-size: 12px;
    }
    .us101-view-store-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    .us101-section-header {
        padding: 12px 14px 10px 14px;
        font-size: 13px;
    }
}

/* -- Defensive: anywhere we render text inside the dropdown, force dark
       so the white-bleed from the header icon-color rule cannot leak in -- */
.us101-vendors-section,
.us101-vendors-section *:not(.us101-view-store-btn):not(.us101-vendor-logo-fallback):not(.us101-vendor-pin) {
    color: #1d2128;
}


/* ============================================================================
   v1.0.5 — Aesthetic polish
   1. Round the product thumbnails in the search dropdown (8px to match
      design system token used elsewhere for product cards site-wide).
   2. Close the gap between the search input and the results pane so the
      dropdown sits flush against the search bar.
   ========================================================================= */

/* -- Round product thumbnails in dropdown (desktop + mobile) -- */
#site-header .header-search__results .list-item .image-item img,
#site-header .header-search__results .list-item img,
#search-modal .header-search__results .list-item .image-item img,
#search-modal .header-search__results .list-item img,
#search-modal .search-list .list-item .image-item img,
#search-modal .search-list .list-item img,
.header-search__results .list-item .image-item,
.header-search__results .list-item .image-item img {
    border-radius: 8px !important;
    overflow: hidden;
}

/* The image-item wrapper itself often holds the visual frame — round it too */
#site-header .header-search__results .list-item .image-item,
#search-modal .header-search__results .list-item .image-item,
#search-modal .search-list .list-item .image-item {
    border-radius: 8px !important;
    overflow: hidden;
}

/* -- Push the dropdown DOWN to align its top edge with the bottom of the
      search bar. Motta's default position has the dropdown starting roughly
      mid-way up the search input, so we translate downward to align with the
      bottom edge of the search bar pill. The search input is approximately
      48px tall, and Motta starts the dropdown at the input's vertical centre,
      so we push down by ~24-28px to land at the bottom edge.
      ⚠️  L7 NOTE: The 36px value below is a magic number measured against
      Motta theme as of ~2026-05. If Motta updates its search bar height,
      this value will need to be re-measured. After any Motta theme update,
      verify dropdown positioning visually and update the pixel value here.
      See TESTING_CHECKLIST.md Section 14, item 71. -- */
#site-header .header-search__results,
.header-search__container .header-search__results {
    transform: translateY(36px) !important;
    padding-top: 6px !important;
    z-index: 99 !important;
    will-change: transform;
}

/* Mobile modal: smaller offset because the modal layout differs */
#search-modal .header-search__results,
#search-modal .search-results,
#search-modal.modal--open .header-search__results,
#search-modal.modal--open .search-results {
    transform: translateY(12px) !important;
    padding-top: 6px !important;
}

/* Stacking context for the search container so the transformed dropdown
   stays above neighbouring header elements */
#site-header .header-search__container,
#site-header .header-search-form {
    z-index: 999 !important;
    position: relative !important;
}

/* -- Round the dropdown popup so it looks like a single continuous element
      with the search bar above it. Top corners SQUARE (so they tuck behind
      the search bar) and bottom corners ROUNDED. -- */
/* Desktop dropdown */
#site-header .header-search__results,
.header-search__container .header-search__results {
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-top: none !important;
}

/* Mobile modal dropdown — same treatment */
#search-modal .header-search__results,
#search-modal .search-results,
#search-modal.modal--open .header-search__results,
#search-modal.modal--open .search-results {
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
    border-top: none !important;
}

/* Inner scrollable list: round only the bottom corners so scroll edges stay
   visually consistent with the popup outline */
#site-header .header-search__results.us101-scroll-applied,
#search-modal .header-search__results.us101-scroll-applied,
#search-modal .search-results.us101-scroll-applied,
#search-modal .search-list.us101-scroll-applied {
    border-radius: 0 0 14px 14px !important;
}

/* Soften the section divider line so it doesn't visually fight the rounded
   container edges */
.us101-vendors-section {
    border-top: 1px solid #eef1f3 !important;
}


/* ============================================================================
   v1.0.11 — Mobile-specific override
   On mobile we don't need the desktop "tuck under search bar" treatment.
   Round all four corners of the dropdown popup, keep it as a standalone
   floating card with full rounded edges, no upward translate.
   ========================================================================= */
@media (max-width: 767px) {
    #search-modal .header-search__results,
    #search-modal .search-results,
    #search-modal.modal--open .header-search__results,
    #search-modal.modal--open .search-results {
        transform: none !important;
        border-radius: 14px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
        padding-top: 6px !important;
        margin-top: 8px !important;
    }
    /* Inner scrollable list — round all four corners on mobile too */
    #search-modal .header-search__results.us101-scroll-applied,
    #search-modal .search-results.us101-scroll-applied,
    #search-modal .search-list.us101-scroll-applied {
        border-radius: 14px !important;
    }
}