@media screen and (max-width:767px)
{
    predictive-search
    {
        height:100%;
        display:flex;
        flex-direction:column
    }
}
predictive-search:has(.predictive-search__results-container.fade-out) .predictive-search__search-bar,
predictive-search:not(:has(.predictive-search__results)) .predictive-search__search-bar
{
    border-bottom-left-radius:var(--block-border-radius);
    border-bottom-right-radius:var(--block-border-radius)
}
predictive-search:has(.predictive-search__results) .predictive-search__search-bar,
predictive-search:not(:has(.predictive-search__results-container.fade-out)) .predictive-search__search-bar
{
    border-radius:0
}
@media screen and (max-width:767px)
{
    .header-section:not(.sticky-header) predictive-search
    {
        transform:translate3d(0,0,0)
    }
}
.predictive-search__search-bar
{
    padding-top:20px;
    padding-bottom:20px;
    background-color:var(--header-color)
}
@media screen and (min-width:768px)
{
    .predictive-search__search-bar
    {
        padding-top:30px;
        padding-bottom:30px
    }
}
.predictive-search__input-container
{
    position:relative;
    display:flex;
    align-items:center;
    background:var(--nav-text-color-transparent5)
}
.border-radius-round .predictive-search__input-container
{
    padding:0 5px
}
.predictive-search__input
{
    width:100%;
    padding:10px 0;
    border:0;
    color:inherit
}
.predictive-search__input::placeholder
{
    opacity:.7;
    color:inherit
}
.predictive-search__clear,
.predictive-search__submit
{
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:0 0
}
.predictive-search__clear
{
    font-size:12px;
    padding:5px;
    animation:FadeIn .25s ease;
    color:inherit
}
.predictive-search__clear.fade-out
{
    animation:FadeOut .25s ease
}
.predictive-search__results-container
{
    background-color:var(--header-color)
}
.predictive-search__results-container.fade-out
{
    animation:FadeOut .25s ease forwards
}
@media screen and (max-width:767px)
{
    .predictive-search__results-container:not(:empty)
    {
        flex-grow:1
    }
}
@media screen and (max-width:767px)
{
    .predictive-search__results-wrapper
    {
        display:flex;
        flex-direction:column;
        height:100%
    }
}
.predictive-search__results
{
    padding-bottom:40px;
    animation:FadeIn 1s ease
}
@media screen and (max-width:767px)
{
    .predictive-search__results
    {
        flex-grow:1
    }
}
.predictive-search__results--is-grid
{
    display:flex;
    flex-direction:column;
    gap:40px
}
@media screen and (min-width:768px)
{
    .predictive-search__results--is-grid
    {
        display:grid;
        gap:30px;
        grid-template-columns:250px minmax(0,1fr)
    }
}
.predictive-search__results:has(.predictive-search__no-results)
{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:20px
}
@media screen and (min-width:768px)
{
    .predictive-search__results:has(.predictive-search__no-results)
    {
        padding-bottom:30px
    }
}
.predictive-search__results .nav-link-animated a,
.predictive-search__results .text-link-animated a
{
    transition:all .25s ease
}
.predictive-search__results .nav-link-animated a:hover,
.predictive-search__results .text-link-animated a:hover
{
    color:var(--nav-text-hover)
}
.predictive-search__list
{
    display:flex;
    flex-direction:column;
    gap:20px
}
@media screen and (min-width:768px)
{
    .predictive-search__list:not(:only-child)
    {
        width:250px
    }
}
.predictive-search__list-items
{
    display:flex;
    gap:20px
}
@media screen and (max-width:767px)
{
    .predictive-search__list-items:not(.predictive-search__list-items--list-only)
    {
        overflow-x:auto
    }
    .predictive-search__list-items:not(.predictive-search__list-items--list-only)::-webkit-scrollbar
    {
        height:3px
    }
    .predictive-search__list-items.predictive-search__list-items--list-only
    {
        flex-direction:column;
        gap:10px
    }
}
@media screen and (min-width:768px)
{
    .predictive-search__list-items
    {
        flex-direction:column;
        gap:10px
    }
}
.predictive-search__list-items::-webkit-scrollbar-thumb
{
    background-color:var(--nav-text-color-transparent30)
}
.predictive-search__title
{
    font-size:var(--base-font-size);
    padding-bottom:10px;
    border-bottom:1px solid var(--nav-text-color-transparent10);
    margin:0;
    line-height:1.6
}
.predictive-search__nav
{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    position:relative
}
.predictive-search__nav:after
{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background-color:var(--nav-text-color-transparent10)
}
.predictive-search__nav-buttons
{
    display:flex;
    gap:20px;
    overflow:auto
}
.predictive-search__nav-buttons::-webkit-scrollbar
{
    height:3px
}
.predictive-search__nav-buttons::-webkit-scrollbar-thumb
{
    background-color:var(--nav-text-color-transparent30)
}
@media screen and (min-width:768px)
{
    .predictive-search__nav-buttons
    {
        gap:30px
    }
}
.predictive-search__nav-button
{
    background:0 0;
    border:0;
    margin:0;
    color:inherit;
    font-size:inherit;
    line-height:1.6;
    padding-bottom:10px;
    position:relative
}
.predictive-search__nav-button:not(:only-child):after
{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background-color:var(--nav-text-color);
    opacity:0;
    transition:opacity .4s ease
}
.predictive-search__nav-button.active:not(:only-child):after
{
    opacity:1
}
.predictive-search__list-item
{
    color:inherit;
    display:inline-block;
    max-width:100%
}
@media screen and (max-width:767px)
{
    .predictive-search__list-item
    {
        width:max-content
    }
}
.predictive-search__list-item span
{
    overflow-wrap:break-word
}
.predictive-search__list-item mark
{
    background:0 0;
    font-weight:bolder;
    color:inherit
}
.predictive-search__view-all-desktop
{
    --link-border-color:var(--nav-text-color-transparent50);
    white-space:nowrap;
    line-height:1.6
}
@media screen and (max-width:767px)
{
    .predictive-search__view-all-desktop
    {
        display:none
    }
}
.predictive-search__view-all-mobile
{
    --link-border-color:var(--nav-text-color-transparent50);
    position:sticky;
    bottom:0;
    left:0;
    width:100%;
    background-color:var(--header-color);
    text-align:center;
    padding:20px 0;
    border-top:1px solid var(--nav-text-color-transparent10)
}
@media screen and (min-width:768px)
{
    .predictive-search__view-all-mobile
    {
        display:none
    }
}
.predictive-search__view-all-mobile a
{
    animation:FadeIn 1s ease;
    transition:color .25s ease
}
.predictive-search__view-all-mobile a:hover
{
    color:var(--nav-text-hover)
}
.predictive-search__main-results
{
    display:flex;
    flex-direction:column;
    gap:20px
}
.predictive-search__grid
{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:calc(var(--grid-spacing) * .75)
}
.predictive-search__grid[hidden]
{
    display:none
}
.predictive-search__grid--products
{
    row-gap:2em
}
.predictive-search__grid:not(.predictive-search__grid--products)
{
    row-gap:calc(var(--grid-spacing) * .75)
}
@media screen and (min-width:768px)
{
    .predictive-search__grid
    {
        column-gap:var(--grid-spacing)
    }
    .predictive-search__grid:not(.predictive-search__grid--products)
    {
        row-gap:var(--grid-spacing)
    }
}
@media screen and (min-width:1024px)
{
    .predictive-search__grid
    {
        grid-template-columns:repeat(3,1fr)
    }
    .predictive-search__grid>:nth-child(4n)
    {
        display:none
    }
}
@media screen and (min-width:1201px)
{
    .predictive-search__grid
    {
        grid-template-columns:repeat(4,1fr)
    }
    .predictive-search__grid>:nth-child(4n)
    {
        display:block
    }
}
.predictive-search__grid--products .product-grid--price .money,
.predictive-search__grid--products .product-grid--price a,
.predictive-search__grid--products .product-grid--title,
.predictive-search__grid--products .product-grid--title a
{
    color:inherit!important
}
.predictive-search__grid--products .product-card__image--secondary
{
    background-color:var(--header-color)
}
.predictive-search__collection-aspect img
{
    object-fit:cover;
    object-position:center
}
.predictive-search__collection-aspect--square img,
.predictive-search__collection-aspect--square.predictive-search__collection-link--no-image
{
    aspect-ratio:1/1
}
.predictive-search__collection-aspect--tall img,
.predictive-search__collection-aspect--tall.predictive-search__collection-link--no-image
{
    aspect-ratio:2/3
}
.predictive-search__collection-aspect--wide img,
.predictive-search__collection-aspect--wide.predictive-search__collection-link--no-image
{
    aspect-ratio:4/3
}
.predictive-search__collection-link
{
    color:inherit
}
.predictive-search__collection-image
{
    margin-bottom:8px
}
.predictive-search__collection-link--no-image
{
    display:flex;
    justify-content:center;
    padding:20px;
    border:1px solid var(--nav-text-color-transparent10)
}
.predictive-search__collection-title
{
    font-size:var(--base-font-size);
    margin:0;
    text-align:center
}
.predictive-search__grid-item--page-or-article
{
    background-color:var(--nav-text-color-transparent5);
    padding:10px
}
@media screen and (min-width:768px)
{
    .predictive-search__grid-item--page-or-article
    {
        padding:15px
    }
}
.predictive-search__grid-item--page-or-article a
{
    --link-border-color:var(--nav-text-color-transparent50);
    color:inherit
}
.predictive-search__page-or-article-title
{
    font-size:var(--base-font-size);
    margin-bottom:10px
}
.predictive-search__page-or-article-title:last-child
{
    margin-bottom:0
}
.predictive-search__page-or-article-content
{
    margin-bottom:10px
}
.predictive-search__no-results
{
    text-align:center;
    padding:60px 0
}
.predictive-search__no-results p
{
    margin-bottom:0
}
.predictive-search__empty-state
{
    background-color:var(--header-color)
}
.predictive-search__empty-state[hidden]
{
    display:none
}
@media screen and (max-width:767px)
{
    .predictive-search__empty-state
    {
        flex-grow:1
    }
}