/* ============================================================
   LV LIVE SEARCH — CSS
   Prefix: lvs-  |  Wrapper: #lvs-wrap
   Mobile-First, Conflict-Free
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   WRAPPER
   ============================================================ */
#lvs-wrap {
    --lvs-orange:  #f97316;
    --lvs-oranged: #ea6a0a;
    --lvs-red:     #c0392b;
    --lvs-black:   #111111;
    --lvs-navy:    #1a2238;
    --lvs-gray:    #999999;
    --lvs-bg:      #fafafa;
    --lvs-h:       54px;

    all:           initial;
    display:       block;
    width:         100%;
    max-width:     860px;
    margin:        0 auto;
    position:      relative;
    z-index:       9999;
    font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing:    border-box;
}
#lvs-wrap * {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
#lvs-wrap .lvs-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    height:      var(--lvs-h);
    width:       100%;
}

/* ============================================================
   LEFT: Category Pill
   ============================================================ */
#lvs-wrap .lvs-cat-wrap {
    position:    relative;
    flex-shrink: 0;
    height:      var(--lvs-h);
}

/* Invisible native select on top */
#lvs-wrap .lvs-cat-sel {
    all:      unset;
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    opacity:  0;
    cursor:   pointer;
    z-index:  4;
    display:  block;
}
#lvs-wrap .lvs-cat-sel option {
    background: #111;
    color:      #fff;
    font-size:  13px;
}

/* Visual pill */
#lvs-wrap .lvs-pill {
    display:         flex;
    align-items:     center;
    gap:             7px;
    height:          var(--lvs-h);
    min-width:       165px;
    max-width:       200px;
    padding:         0 16px;
    background:      var(--lvs-orange);
    border-radius:   50px;
    pointer-events:  none;
    box-shadow:      0 2px 14px rgba(249,115,22,0.28);
    transition:      background .2s, box-shadow .2s;
    white-space:     nowrap;
    overflow:        hidden;
    position:        relative;
    z-index:         1;
}
#lvs-wrap .lvs-cat-wrap:hover .lvs-pill {
    background: var(--lvs-oranged);
    box-shadow: 0 4px 20px rgba(249,115,22,0.40);
}

/* Icons — NO font-family override */
#lvs-wrap .lvs-ico-menu {
    color:       #fff;
    font-size:   15px;
    flex-shrink: 0;
    line-height: 1;
    display:     inline-block;
}
#lvs-wrap .lvs-ico-chevron {
    color:       #fff;
    font-size:   13px;
    flex-shrink: 0;
    line-height: 1;
    opacity:     .85;
    display:     inline-block;
    transition:  transform .2s;
}

/* Pill label */
#lvs-wrap .lvs-pill-label {
    flex:           1;
    font-family:    'Inter', sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color:          #fff;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    line-height:    1;
}

/* ============================================================
   MIDDLE: Input
   ============================================================ */
#lvs-wrap .lvs-input-wrap {
    flex:          1;
    display:       flex;
    align-items:   center;
    height:        var(--lvs-h);
    background:    #fff;
    border:        2px solid var(--lvs-navy);
    border-radius: 10px;
    padding:       0 16px;
    min-width:     0;
    transition:    border-color .2s, box-shadow .2s;
}
#lvs-wrap .lvs-input-wrap:focus-within {
    border-color: var(--lvs-orange);
    box-shadow:   0 0 0 3px rgba(249,115,22,.12);
}

#lvs-wrap .lvs-input {
    all:         unset;
    display:     block;
    flex:        1;
    width:       100%;
    font-family: 'Inter', sans-serif;
    font-size:   14px;
    font-weight: 400;
    color:       var(--lvs-black);
    line-height: 1.4;
    cursor:      text;
}
#lvs-wrap .lvs-input::placeholder {
    color:       #b0b0b0;
    font-weight: 400;
}

/* ============================================================
   RIGHT: Search Button
   ============================================================ */
#lvs-wrap .lvs-btn {
    all:             unset;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           54px;
    height:          var(--lvs-h);
    background:      var(--lvs-orange);
    border-radius:   10px;
    cursor:          pointer;
    box-shadow:      0 2px 14px rgba(249,115,22,.28);
    transition:      background .2s, box-shadow .2s, transform .12s;
}
#lvs-wrap .lvs-btn:hover  { background: var(--lvs-oranged); box-shadow: 0 4px 20px rgba(249,115,22,.40); }
#lvs-wrap .lvs-btn:active { transform: scale(.93); }

/* Search icon — NO font-family override */
#lvs-wrap .lvs-ico-search {
    color:       #fff;
    font-size:   19px;
    line-height: 1;
    display:     inline-block;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
#lvs-wrap .lvs-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 10px);
    left:          0;
    right:         0;
    background:    #fff;
    border:        1.5px solid rgba(249,115,22,.22);
    border-radius: 16px;
    overflow:      hidden;
    z-index:       999999;
    max-height:    520px;
    overflow-y:    auto;
    box-shadow:    0 16px 60px rgba(0,0,0,.12), 0 4px 16px rgba(249,115,22,.09);
    animation:     lvsDropIn .22s cubic-bezier(.22,1,.36,1);
}
#lvs-wrap .lvs-dropdown.lvs-open { display: block; }

#lvs-wrap .lvs-dropdown::-webkit-scrollbar       { width: 5px; }
#lvs-wrap .lvs-dropdown::-webkit-scrollbar-track { background: #f5f5f5; }
#lvs-wrap .lvs-dropdown::-webkit-scrollbar-thumb { background: var(--lvs-orange); border-radius: 4px; }

@keyframes lvsDropIn {
    from { opacity:0; transform: translateY(-8px) scale(.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Section Title */
#lvs-wrap .lvs-sec-title {
    display:        flex;
    align-items:    center;
    gap:            7px;
    padding:        10px 18px 8px;
    background:     var(--lvs-bg);
    border-bottom:  1px solid #f0f0f0;
    font-family:    'Inter', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--lvs-gray);
}
#lvs-wrap .lvs-dot {
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--lvs-orange);
    flex-shrink:   0;
}

/* Category Chips */
#lvs-wrap .lvs-chips {
    display:       flex;
    flex-wrap:     wrap;
    gap:           7px;
    padding:       10px 16px 14px;
    border-bottom: 1px solid #f0f0f0;
}
#lvs-wrap .lvs-chip {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      #fff5ec;
    color:           var(--lvs-red);
    font-family:     'Inter', sans-serif;
    font-size:       11.5px;
    font-weight:     600;
    border:          1.5px solid #ffd9b8;
    border-radius:   30px;
    padding:         5px 14px;
    cursor:          pointer;
    text-decoration: none;
    transition:      all .15s ease;
    white-space:     nowrap;
    line-height:     1.4;
}
#lvs-wrap .lvs-chip:hover {
    background:   var(--lvs-orange);
    color:        #fff;
    border-color: var(--lvs-orange);
    transform:    translateY(-1px);
    box-shadow:   0 3px 10px rgba(249,115,22,.28);
}
#lvs-wrap .lvs-chip-count { opacity:.55; font-size:10.5px; font-weight:400; }

/* Product Items */
#lvs-wrap .lvs-product {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         11px 18px;
    border-bottom:   1px solid #f7f7f7;
    cursor:          pointer;
    transition:      background .14s ease;
    text-decoration: none;
    color:           var(--lvs-black);
    background:      transparent;
}
#lvs-wrap .lvs-product:hover      { background: #fff9f5; }
#lvs-wrap .lvs-product:last-child { border-bottom: none; }

#lvs-wrap .lvs-thumb {
    width:         52px;
    height:        52px;
    border-radius: 10px;
    object-fit:    cover;
    border:        1.5px solid #ffe4cc;
    flex-shrink:   0;
    background:    #f5f5f5;
    display:       block;
}
#lvs-wrap .lvs-thumb-ph {
    width:           52px;
    height:          52px;
    border-radius:   10px;
    background:      linear-gradient(135deg,#fff0e0 0%,#ffe4cc 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    border:          1.5px solid #ffe4cc;
}
#lvs-wrap .lvs-thumb-ph svg { width:22px; height:22px; stroke:var(--lvs-orange); fill:none; stroke-width:1.8; opacity:.75; }

#lvs-wrap .lvs-prod-info { flex:1; min-width:0; }
#lvs-wrap .lvs-prod-name {
    font-family:   'Inter', sans-serif;
    font-size:     13.5px;
    font-weight:   600;
    color:         var(--lvs-black);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.35;
    margin-bottom: 3px;
}
#lvs-wrap .lvs-prod-name em { font-style:normal; color:var(--lvs-orange); font-weight:700; }
#lvs-wrap .lvs-prod-cat {
    font-family:   'Inter', sans-serif;
    font-size:     11px;
    color:         var(--lvs-gray);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
#lvs-wrap .lvs-prod-price {
    font-family:  'Inter', sans-serif;
    font-size:    14px;
    font-weight:  700;
    color:        var(--lvs-red);
    flex-shrink:  0;
    text-align:   right;
    min-width:    64px;
}
#lvs-wrap .lvs-prod-price .woocommerce-Price-amount { color:var(--lvs-red); font-size:14px; }
#lvs-wrap .lvs-prod-price ins { text-decoration:none; }
#lvs-wrap .lvs-prod-price del { opacity:.4; font-size:11px; display:block; }

/* Arrow */
#lvs-wrap .lvs-arrow { flex-shrink:0; width:14px; height:14px; transition:transform .15s; }
#lvs-wrap .lvs-arrow::after {
    content:''; display:block; width:14px; height:14px;
    background-color:#ccc;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:contain; mask-size:contain;
    transition:background-color .15s;
}
#lvs-wrap .lvs-product:hover .lvs-arrow        { transform:translateX(3px); }
#lvs-wrap .lvs-product:hover .lvs-arrow::after { background-color:var(--lvs-orange); }

/* Loading */
#lvs-wrap .lvs-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         26px 18px;
    font-family:     'Inter', sans-serif;
    font-size:       13px;
    font-weight:     500;
    color:           var(--lvs-gray);
}
#lvs-wrap .lvs-spinner {
    display:          inline-block;
    width:            18px; height:18px;
    border:           2.5px solid #ffd4a8;
    border-top-color: var(--lvs-orange);
    border-radius:    50%;
    animation:        lvsSpin .65s linear infinite;
    flex-shrink:      0;
}
@keyframes lvsSpin { to { transform:rotate(360deg); } }

/* No Results */
#lvs-wrap .lvs-no-results {
    padding:     28px 20px;
    text-align:  center;
    font-family: 'Inter', sans-serif;
    color:       var(--lvs-gray);
    font-size:   14px;
    line-height: 1.6;
}
#lvs-wrap .lvs-no-results strong { color:var(--lvs-black); display:block; font-size:15px; font-weight:600; margin-bottom:4px; }
#lvs-wrap .lvs-no-results small  { font-size:12px; }

/* View All */
#lvs-wrap .lvs-view-all {
    display:         block;
    background:      linear-gradient(135deg,var(--lvs-orange) 0%,var(--lvs-red) 100%);
    color:           #fff;
    text-align:      center;
    padding:         13px 18px;
    font-family:     'Inter', sans-serif;
    font-size:       11.5px;
    font-weight:     700;
    letter-spacing:  1.8px;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      filter .18s;
    width:           100%;
    cursor:          pointer;
    line-height:     1.4;
}
#lvs-wrap .lvs-view-all:hover { filter:brightness(1.1); }

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 768px) {
    #lvs-wrap          { max-width:100%; }
    #lvs-wrap .lvs-pill { min-width:140px; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    #lvs-wrap { --lvs-h: 48px; }
    #lvs-wrap .lvs-bar   { gap:6px; }

    /* Pill icon-only */
    #lvs-wrap .lvs-pill {
        min-width:       46px;
        max-width:       46px;
        padding:         0;
        justify-content: center;
        border-radius:   12px;
        gap:             0;
    }
    #lvs-wrap .lvs-pill-label,
    #lvs-wrap .lvs-ico-chevron { display:none; }
    #lvs-wrap .lvs-ico-menu    { font-size:16px; }

    /* Button */
    #lvs-wrap .lvs-btn           { width:48px; border-radius:12px; }
    #lvs-wrap .lvs-ico-search    { font-size:17px; }

    /* Input */
    #lvs-wrap .lvs-input         { font-size:13px; }

    #lvs-wrap .lvs-prod-price    { display:none; }
    #lvs-wrap .lvs-dropdown      { border-radius:14px; }
}

/* ============================================================
   RESPONSIVE — Small Mobile (≤ 420px)
   ============================================================ */
@media (max-width: 420px) {
    #lvs-wrap                { --lvs-h:46px; }
    #lvs-wrap .lvs-cat-wrap  { display:none; }
    #lvs-wrap .lvs-input     { font-size:12.5px; }
    #lvs-wrap .lvs-btn       { width:46px; }
    #lvs-wrap .lvs-input-wrap { border-radius:10px; }
}