/* =========================================================
   SEARCH SUGGESTIONS DROPDOWN
   Shared by the desktop header search and the mobile header
   search — both forms get [data-search-form] + position:relative
   from .has-search-suggest below so the panel always tracks
   whichever search box it belongs to.
========================================================= */

.has-search-suggest{
    position:relative;
    /* .search-box normally uses overflow:hidden to clip its input/
       button corners to its pill shape; that would also clip this
       dropdown, so the shape is preserved on the children instead
       (below) and overflow is opened back up on the container. */
    overflow:visible !important;
    /* IMPORTANT: this element must carry its own high z-index (not
       just isolation) or it loses to later-painted siblings like
       the site navbar, which sits directly beneath the header
       search box in the DOM. A prior version used isolation:isolate
       here without a matching z-index — that traps the dropdown's
       z-index:9999 *inside* this box's own stacking context, so it
       only wins fights against its own children, not against the
       navbar next to it. The navbar (painted later, same implicit
       stacking level) then rendered on top of the dropdown, which
       is exactly the "nav text bleeding through the suggestions"
       bug. Giving this element z-index:9999 directly makes the box
       itself — not just its child — win the outer stacking fight.
    */
    z-index:9999;
}

.search-box.has-search-suggest input{
    border-radius:50px 0 0 50px;
}

.search-box.has-search-suggest button{
    border-radius:0 50px 50px 0;
}

.search-suggest-panel{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:#ffffff;
    border:1px solid var(--store-border,#e5e7eb);
    border-radius:14px;
    box-shadow:var(--shadow-lg, 0 15px 35px rgba(0,0,0,.15));
    max-height:70vh;
    overflow-y:auto;
    z-index:9999;
    padding:8px 0;
}

.search-suggest-status{
    padding:16px 18px;
    font-size:13.5px;
    color:var(--store-muted,#66737c);
    text-align:center;
}

.search-suggest-group + .search-suggest-group{
    border-top:1px solid var(--store-border,#eef1f3);
    margin-top:6px;
    padding-top:6px;
}

.search-suggest-label{
    padding:6px 16px 4px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8a97a0;
}

.search-suggest-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 16px;
    text-decoration:none;
    color:var(--ink, var(--store-dark,#2F5F66));
    cursor:pointer;
}

.search-suggest-item:hover,
.search-suggest-item.is-active{
    background:var(--bg,#f4f7fb);
}

.search-suggest-item mark{
    background:transparent;
    color:var(--store-primary,#4F7F86);
    font-weight:700;
}

.search-suggest-product img{
    width:36px;
    height:36px;
    object-fit:contain;
    border-radius:6px;
    background:#f4f7fb;
    flex-shrink:0;
    padding:3px;
}

.search-suggest-text{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}

.search-suggest-name{
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.search-suggest-meta{
    font-size:11.5px;
    color:#8a97a0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.search-suggest-price{
    font-family:var(--font-mono, inherit);
    font-size:12.5px;
    font-weight:600;
    color:var(--deep-teal, var(--store-dark,#2F5F66));
    flex-shrink:0;
    white-space:nowrap;
}

.search-suggest-tag{
    display:block;
    font-size:13.5px;
    font-weight:500;
}

.search-suggest-viewall{
    display:block;
    margin-top:6px;
    padding:11px 16px;
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:var(--store-primary,#4F7F86);
    text-decoration:none;
    border-top:1px solid var(--store-border,#eef1f3);
}

.search-suggest-viewall:hover{
    background:var(--bg,#f4f7fb);
}

/* MOBILE */

@media(max-width:768px){
    .search-suggest-panel{
        left:-16px;
        right:-16px;
        border-radius:0 0 14px 14px;
        max-height:60vh;
    }

    .search-suggest-item{
        padding:11px 16px;
    }

    .search-suggest-name{
        font-size:14px;
    }
}