/* ==========================================================
   SUNARB UI V2.2
   SEARCH + HOME SECTIONS
   ========================================================== */


/*
 * Hide category scrollbar while keeping
 * horizontal scrolling functional.
 */
.category-scroll {
    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}


/* ----------------------------------------------------------
   SEARCH
   ---------------------------------------------------------- */

.search-strip {
    padding: 10px 0;
    border-bottom: 1px solid var(--sun-border);
    background: var(--sun-surface);
}


.site-search {
    display: flex;
    width: min(620px, 100%);
    margin-inline: auto;
    gap: 7px;
}


.site-search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 42px;
    padding-inline: 15px;
    border: 1px solid var(--sun-border);
    border-radius: 11px;
    outline: none;
    background: #f7f8f9;
    color: var(--sun-text);
    font: inherit;
    font-size: 14px;
}


.site-search input:focus {
    border-color: #aeb4bc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,.035);
}


.site-search button {
    flex: 0 0 auto;
    min-width: 74px;
    height: 42px;
    padding-inline: 16px;
    border: 0;
    border-radius: 11px;
    background: #202124;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}


.site-search button:hover {
    background: #34363a;
}


/* ----------------------------------------------------------
   HOME SECTIONS
   ---------------------------------------------------------- */

.home-intro {
    margin-bottom: 31px;
}


.home-intro h1 {
    margin: 0 0 9px;
    font-size: clamp(29px, 3vw, 39px);
    letter-spacing: -.6px;
}


.home-intro p {
    margin: 0;
    color: var(--sun-muted);
    line-height: 1.8;
}


.home-section {
    margin-top: 38px;
}


.home-section:first-of-type {
    margin-top: 0;
}


.home-section-heading {
    margin-bottom: 16px;
}


.home-section-heading h2 {
    margin: 0;
    font-size: 26px;
}


.home-section-heading p {
    margin: 5px 0 0;
    color: var(--sun-muted);
    font-size: 13px;
}


/* ----------------------------------------------------------
   SEARCH RESULTS
   ---------------------------------------------------------- */

.search-heading {
    margin-bottom: 22px;
}


.search-empty {
    padding: 30px 20px;
    border: 1px dashed #d6dade;
    border-radius: 14px;
    background: rgba(255,255,255,.65);
    color: var(--sun-muted);
    text-align: center;
    line-height: 1.8;
}


.search-pagination {
    margin-bottom: 10px;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 640px) {

    .search-strip {
        padding: 8px 0;
    }


    .site-search {
        gap: 6px;
    }


    .site-search input {
        height: 39px;
        padding-inline: 12px;
        border-radius: 10px;
        font-size: 13px;
    }


    .site-search button {
        min-width: 59px;
        height: 39px;
        padding-inline: 11px;
        border-radius: 10px;
        font-size: 12px;
    }


    .home-intro {
        margin-bottom: 25px;
    }


    .home-intro h1 {
        font-size: 29px;
    }


    .home-intro p {
        font-size: 14px;
        line-height: 1.7;
    }


    .home-section {
        margin-top: 31px;
    }


    .home-section-heading h2 {
        font-size: 23px;
    }


    .home-section-heading p {
        font-size: 12px;
    }

}