/* ==========================================================================
   TURBOLEMONS SEARCH PAGE
   ========================================================================== */

.tl-search-page,
.tl-search-page *,
.tl-search-page *::before,
.tl-search-page *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   ROOT
   ========================================================================== */

.tl-search-page{
    width:100%;

    background:#FFFFFF;
    color:#171717;
}

.tl-search-page__container.container{
    padding-top:72px;
    padding-bottom:96px;
}


/* ==========================================================================
   HEAD
   ========================================================================== */

.tl-search-page__head{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:40px;

    padding-bottom:48px;

    border-bottom:1px solid rgba(82,82,82,.16);
}


.tl-search-page__heading{
    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:8px;
}


.tl-search-page__eyebrow{
    font-family:Inter,sans-serif;

    font-size:16px;
    font-weight:500;
    line-height:22px;

    letter-spacing:-.4px;

    color:#A3A3A3;
}


.tl-search-page__title{
    margin:0;
    padding:0;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:72px;
    line-height:63px;

    letter-spacing:-1px;

    text-transform:uppercase;

    color:#171717;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}


/* ==========================================================================
   SEARCH FORM
   ========================================================================== */

.tl-search-page__form{
    width:100%;
    height:64px;

    display:flex;
    align-items:center;

    gap:12px;

    margin:0;
    padding:0 0 0 20px;

    background:#F5F5F5;

    border:1px solid transparent;
    border-radius:0;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}


.tl-search-page__form:hover{
    background:#EFEFEF;
}


.tl-search-page__form:focus-within{
    background:#FFFFFF;

    border-color:#D2FF00;

    box-shadow:
        inset 0 0 0 1px #D2FF00;
}


/* ==========================================================================
   SEARCH ICON
   ========================================================================== */

.tl-search-page__search-icon{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#171717;
}


.tl-search-page__search-icon svg{
    width:24px;
    height:24px;

    display:block;
}


/* ==========================================================================
   INPUT
   ========================================================================== */

.tl-search-page__input{
    min-width:0;

    flex:1;

    height:100%;

    margin:0;
    padding:0;

    border:0;
    outline:0;

    background:transparent;

    font-family:Inter,sans-serif;

    font-size:18px;
    font-weight:400;
    line-height:24px;

    letter-spacing:-.4px;

    color:#171717;
}


.tl-search-page__input::placeholder{
    color:#A3A3A3;

    opacity:1;
}


.tl-search-page__input::-webkit-search-decoration,
.tl-search-page__input::-webkit-search-cancel-button{
    display:none;
}


/* ==========================================================================
   CLEAR
   ========================================================================== */

.tl-search-page__clear{
    position:relative;

    width:40px;
    height:40px;

    flex:0 0 40px;

    margin:0;
    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;
}


.tl-search-page__clear[hidden]{
    display:none;
}


.tl-search-page__clear span{
    position:absolute;

    top:50%;
    left:50%;

    width:18px;
    height:1.5px;

    background:#A3A3A3;

    transition:background-color .2s ease;
}


.tl-search-page__clear span:first-child{
    transform:
        translate(-50%,-50%)
        rotate(45deg);
}


.tl-search-page__clear span:last-child{
    transform:
        translate(-50%,-50%)
        rotate(-45deg);
}


.tl-search-page__clear:hover span{
    background:#171717;
}


/* ==========================================================================
   SEARCH SUBMIT
   ========================================================================== */

.tl-search-page__submit{
    height:64px;

    flex:0 0 auto;

    min-width:176px;

    margin:-1px -1px -1px 0;
    padding:0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:0;

    background:#D2FF00;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:16px;
    line-height:22px;

    letter-spacing:-.4px;

    text-transform:uppercase;

    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}


.tl-search-page__submit:hover{
    background:#C2EB00;
}


/* ==========================================================================
   META
   ========================================================================== */

.tl-search-page__meta{
    width:100%;

    padding:32px 0;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:24px;
}


.tl-search-page__meta[hidden]{
    display:none;
}


.tl-search-page__meta-query{
    min-width:0;

    font-family:Inter,sans-serif;

    font-size:16px;
    font-weight:400;
    line-height:22px;

    letter-spacing:-.4px;

    color:#737373;
}


.tl-search-page__meta-query strong{
    margin-left:4px;

    font-family:Inter,sans-serif;

    font-weight:600;

    color:#171717;
}


.tl-search-page__count{
    flex:0 0 auto;

    font-family:Inter,sans-serif;

    font-size:14px;
    font-weight:500;
    line-height:18px;

    letter-spacing:-.3px;

    color:#A3A3A3;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.tl-search-page__results[hidden]{
    display:none;
}


.tl-search-page__grid{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    column-gap:12px;
    row-gap:48px;
}


/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.tl-search-card{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:20px;
}


.tl-search-card__image{
    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    display:block;

    overflow:hidden;

    background:#F5F5F5;

    border:1px solid rgba(82,82,82,.16);

    text-decoration:none;
}


.tl-search-card__image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
    object-position:center;

    transition:
        transform .45s ease;
}


.tl-search-card:hover
.tl-search-card__image img{
    transform:scale(1.035);
}


/* ==========================================================================
   IMAGE PLACEHOLDER
   ========================================================================== */

.tl-search-card__placeholder{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;
}


.tl-search-card__placeholder::before{
    content:"";

    width:64px;
    height:64px;

    border:1px solid rgba(82,82,82,.16);
}


/* ==========================================================================
   SECTION
   ========================================================================== */

.tl-search-card__section{
    position:absolute;

    top:20px;
    left:20px;

    min-height:28px;

    display:inline-flex;
    align-items:center;

    padding:4px 10px;

    background:rgba(255,255,255,.88);

    border:1px solid rgba(82,82,82,.12);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    font-family:Inter,sans-serif;

    font-size:13px;
    font-weight:500;
    line-height:18px;

    letter-spacing:-.3px;

    color:#171717;
}


/* ==========================================================================
   ARROW
   ========================================================================== */

.tl-search-card__arrow{
    position:absolute;

    right:20px;
    bottom:20px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#FFFFFF;

    font-family:Inter,sans-serif;

    font-size:24px;
    font-weight:400;

    color:#171717;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.tl-search-card:hover
.tl-search-card__arrow{
    background:#D2FF00;

    transform:translateX(2px);
}


/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.tl-search-card__content{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:8px;
}


.tl-search-card__name{
    width:100%;

    display:block;

    margin:0;
    padding:0;

    overflow:hidden;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:24px;
    line-height:28px;

    letter-spacing:-.5px;

    color:#171717;

    text-decoration:none;

    transition:color .2s ease;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}


.tl-search-card__name:hover{
    color:#6F8700;
}


/* ==========================================================================
   PRICES
   ========================================================================== */

.tl-search-card__prices{
    min-height:26px;

    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:10px;
}


.tl-search-card__price{
    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:18px;
    line-height:24px;

    color:#171717;
}


.tl-search-card__price--request{
    font-family:Inter,sans-serif;

    font-style:normal;
    font-weight:500;

    font-size:14px;
    line-height:18px;

    color:#737373;
}


.tl-search-card__old-price{
    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:15px;
    line-height:20px;

    color:#A3A3A3;

    text-decoration:line-through;
}


/* ==========================================================================
   MORE
   ========================================================================== */

.tl-search-page__more{
    width:100%;

    padding-top:56px;

    display:flex;
    justify-content:center;
}


.tl-search-page__more[hidden]{
    display:none;
}


.tl-search-page__more-btn{
    min-width:280px;
    height:56px;

    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    border:0;
    border-radius:0;

    background:#D2FF00;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:16px;
    line-height:22px;

    letter-spacing:-.4px;

    text-transform:uppercase;

    color:#171717;

    cursor:pointer;

    transition:
        background-color .2s ease,
        opacity .2s ease;
}


.tl-search-page__more-btn:hover{
    background:#C2EB00;
}


.tl-search-page__more-btn:disabled{
    opacity:.5;

    cursor:wait;
}


.tl-search-page__more-count{
    color:#737373;
}


/* ==========================================================================
   START / EMPTY STATE
   ========================================================================== */

.tl-search-page__state,
.tl-search-page__empty{
    width:100%;

    min-height:420px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,2fr);

    align-items:center;

    gap:48px;

    padding:72px 0;
}


.tl-search-page__state[hidden],
.tl-search-page__empty[hidden]{
    display:none;
}


.tl-search-page__state-number,
.tl-search-page__empty-index{
    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:160px;
    line-height:.8;

    letter-spacing:-5px;

    color:rgba(23,23,23,.08);

    user-select:none;
}


.tl-search-page__state-content,
.tl-search-page__empty-content{
    max-width:650px;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:16px;
}


.tl-search-page__state-content h2,
.tl-search-page__empty-content h2{
    margin:0;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:48px;
    line-height:44px;

    letter-spacing:-1px;

    text-transform:uppercase;

    color:#171717;
}


.tl-search-page__state-content p,
.tl-search-page__empty-content p{
    max-width:560px;

    margin:0;

    font-family:Inter,sans-serif;

    font-size:16px;
    font-weight:400;
    line-height:22px;

    letter-spacing:-.4px;

    color:#737373;
}


.tl-search-page__catalog-btn{
    height:56px;

    margin-top:8px;
    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#D2FF00;

    font-family:"Roboto Flex Custom",sans-serif;

    font-style:italic;
    font-weight:700;
    font-variation-settings:"wght" 700;

    font-size:16px;
    line-height:22px;

    letter-spacing:-.4px;

    text-transform:uppercase;

    color:#171717;

    text-decoration:none;

    transition:background-color .2s ease;
}


.tl-search-page__catalog-btn:hover{
    background:#C2EB00;
}


/* ==========================================================================
   LOADING
   ========================================================================== */

.tl-search-page__loading[hidden]{
    display:none;
}


.tl-search-page__skeleton-grid{
    width:100%;

    padding-top:32px;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:48px 12px;
}


.tl-search-skeleton{
    display:flex;
    flex-direction:column;

    gap:20px;
}


.tl-search-skeleton__image{
    width:100%;

    aspect-ratio:1 / 1;

    background:
        linear-gradient(
            90deg,
            #F5F5F5 0%,
            #ECECEC 50%,
            #F5F5F5 100%
        );

    background-size:200% 100%;

    animation:
        tlSearchSkeleton
        1.4s ease infinite;
}


.tl-search-skeleton__body{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.tl-search-skeleton__line{
    height:18px;

    background:#F0F0F0;
}


.tl-search-skeleton__line--small{
    width:32%;
    height:14px;
}


.tl-search-skeleton__line--title{
    width:86%;
    height:24px;
}


.tl-search-skeleton__line--price{
    width:42%;
    height:20px;
}


@keyframes tlSearchSkeleton{

    0%{
        background-position:100% 0;
    }

    100%{
        background-position:-100% 0;
    }

}


/* ==========================================================================
   ≤ 1280
   ========================================================================== */

@media(max-width:1280px){

    .tl-search-page__grid,
    .tl-search-page__skeleton-grid{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

}


/* ==========================================================================
   ≤ 991
   ========================================================================== */

@media(max-width:991px){

    .tl-search-page__container.container{
        padding-top:40px;
        padding-bottom:64px;
    }


    .tl-search-page__head{
        gap:28px;

        padding-bottom:32px;
    }


    .tl-search-page__title{
        font-size:56px;
        line-height:50px;

        letter-spacing:-.6px;
    }


    .tl-search-page__form{
        height:56px;

        padding-left:16px;
    }


    .tl-search-page__submit{
        height:56px;

        min-width:144px;

        padding:0 24px;
    }


    .tl-search-page__meta{
        padding:24px 0;
    }


    .tl-search-page__grid,
    .tl-search-page__skeleton-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        row-gap:36px;
    }


    .tl-search-card__name{
        font-size:20px;
        line-height:24px;
    }


    .tl-search-page__state,
    .tl-search-page__empty{
        min-height:360px;

        grid-template-columns:
            1fr;

        gap:32px;

        padding:56px 0;
    }


    .tl-search-page__state-number,
    .tl-search-page__empty-index{
        font-size:96px;

        letter-spacing:-3px;
    }


    .tl-search-page__state-content h2,
    .tl-search-page__empty-content h2{
        font-size:40px;
        line-height:38px;
    }

}


/* ==========================================================================
   ≤ 600
   ========================================================================== */

@media(max-width:600px){

    .tl-search-page__container.container{
        padding-top:32px;
        padding-bottom:48px;
    }


    .tl-search-page__eyebrow{
        font-size:14px;
        line-height:18px;
    }


    .tl-search-page__title{
        font-size:48px;
        line-height:44px;
    }


    .tl-search-page__form{
        height:auto;

        display:grid;

        grid-template-columns:
            24px
            minmax(0,1fr)
            40px;

        gap:12px;

        padding:0 12px 0 16px;
    }


    .tl-search-page__search-icon{
        height:56px;
    }


    .tl-search-page__input{
        height:56px;

        font-size:16px;
        line-height:22px;
    }


    .tl-search-page__clear{
        height:56px;
    }


    .tl-search-page__submit{
        grid-column:1 / -1;

        width:
            calc(
                100%
                + 28px
            );

        min-width:0;

        margin:0 -12px 0 -16px;

        height:56px;
    }


    .tl-search-page__meta{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }


    .tl-search-page__grid,
    .tl-search-page__skeleton-grid{
        gap:32px 8px;
    }


    .tl-search-card{
        gap:12px;
    }


    .tl-search-card__section{
        top:10px;
        left:10px;

        max-width:
            calc(
                100%
                - 20px
            );

        overflow:hidden;

        white-space:nowrap;
        text-overflow:ellipsis;

        font-size:11px;
        line-height:14px;

        min-height:22px;

        padding:3px 6px;
    }


    .tl-search-card__arrow{
        display:none;
    }


    .tl-search-card__content{
        gap:6px;
    }


    .tl-search-card__name{
        font-size:16px;
        line-height:20px;

        letter-spacing:-.3px;

        display:-webkit-box;

        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;

        overflow:hidden;
    }


    .tl-search-card__price{
        font-size:16px;
        line-height:20px;
    }


    .tl-search-card__old-price{
        font-size:13px;
        line-height:18px;
    }


    .tl-search-page__more{
        padding-top:40px;
    }


    .tl-search-page__more-btn{
        width:100%;
        min-width:0;
    }


    .tl-search-page__state,
    .tl-search-page__empty{
        min-height:320px;

        gap:24px;

        padding:48px 0;
    }


    .tl-search-page__state-number,
    .tl-search-page__empty-index{
        font-size:72px;
    }


    .tl-search-page__state-content h2,
    .tl-search-page__empty-content h2{
        font-size:32px;
        line-height:30px;
    }


    .tl-search-page__catalog-btn{
        width:100%;
    }

}


/* ==========================================================================
   ≤ 375
   ========================================================================== */

@media(max-width:375px){

    .tl-search-page__title{
        font-size:44px;
        line-height:40px;
    }


    .tl-search-page__grid,
    .tl-search-page__skeleton-grid{
        grid-template-columns:1fr;
    }


    .tl-search-card__name{
        font-size:18px;
        line-height:22px;
    }

}