/*
================================================

Space Vanta Theme 1.0

Feature:
Featured Functions / Find

Module:
Find Panel

Version:
FIND-BRAND-PANEL-003

Responsibility:
- Panel layout
- Spatial composition
- Functional content width
- Responsive structure
- Independent scrolling

================================================
*/


/* =========================================================
   01. FOUNDATION
   ========================================================= */

.sv-featured-panel--find {

    --sv-find-panel-gutter-desktop:
        clamp(32px, 4.2vw, 76px);

    --sv-find-panel-gutter-mobile:
        16px;

    --sv-find-panel-top:
        clamp(24px, 3.5vw, 56px);

    --sv-find-panel-bottom:
        clamp(56px, 7vw, 104px);

    position:
        relative;

    width:
        100%;

    height:
        100vh;

    min-height:
        100vh;

    max-height:
        100vh;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior-y:
        contain;

    -webkit-overflow-scrolling:
        touch;

    box-sizing:
        border-box;

background:
        linear-gradient(180deg,
            #F7F7F4 0%,
            #F0F1EE 42%,
            #E9EBE9 100%);

    color:
        var(--sv-color-text-primary);

    isolation:
        isolate;
}


@supports (height: 100dvh) {

    .sv-featured-panel--find {

        height:
            100dvh;

        min-height:
            100dvh;

        max-height:
            100dvh;
    }
}


/* =========================================================
   02. CONTENT
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__content {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-height:
        100%;

    box-sizing:
        border-box;

    padding:
        var(--sv-find-panel-top) var(--sv-find-panel-gutter-desktop) var(--sv-find-panel-bottom);
}


/* =========================================================
   03. VISUAL
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__visual {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        clamp(200px, 27vh, 300px);

    margin:
        0 auto;

    padding:
        18px 0 6px;

    overflow:
        visible;

    flex:
        0 0 auto;
}


/* =========================================================
   04. BODY
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__body {

    position:
        relative;

    z-index:
        3;

    width:
        min(1240px, 100%);

    margin:
        0 auto;

    flex:
        1 1 auto;
}


/* =========================================================
   05. SEARCH CORE
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__search {

    position:
        relative;

    width:
        min(860px, 100%);

    margin:
        0 auto;
}


/* =========================================================
   06. SEARCH HEADER
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__search-header {

    margin:
        0 auto 28px;

    text-align:
        center;
}


/* =========================================================
   07. FORM
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__form {

    width:
        100%;

    margin:
        0 auto;
}


/* =========================================================
   08. ACCESSIBLE LABEL
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__label {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


/* =========================================================
   09. INPUT FRAME
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__input-wrap {

    display:
        flex;

    align-items:
        stretch;

    width:
        100%;

    min-height:
        58px;

    box-sizing:
        border-box;
}


/* =========================================================
   10. INPUT
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__input {

    flex:
        1 1 auto;

    min-width:
        0;

    height:
        56px;

    padding:
        0 20px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--sv-color-text-primary);
}


/* =========================================================
   11. RESULTS
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__results {

    width:
        100%;

    margin-top:
        clamp(58px, 6vw, 78px);

    padding-bottom:
        24px;
}


/* =========================================================
   12. SECTION HEADER
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid rgba(67, 79, 84, 0.22);
}


/* =========================================================
   13. PRODUCT GRID
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__product-list,

.sv-featured-panel--find .sv-find-discovery__suggestions-list {

    display:
        grid;

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

    gap:
        clamp(14px, 1.8vw, 22px);

    width:
        100%;
}


/* =========================================================
   14. ITEMS
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__product-list>*,

.sv-featured-panel--find .sv-find-discovery__suggestions-list>* {

    min-width:
        0;
}


/* =========================================================
   15. WHAT'S MORE
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__more {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        32px;
}


/* =========================================================
   16. SUGGESTIONS
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__suggestions {

    margin-top:
        64px;
}


/* =========================================================
   17. HIGHLIGHTS
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__highlights {

    margin-top:
        72px;

    padding-top:
        12px;
}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-featured-panel--find {

        --sv-find-panel-top:
            18px;

        --sv-find-panel-bottom:
            56px;
    }


    .sv-featured-panel--find .sv-featured-panel__content {

        padding:
            var(--sv-find-panel-top) var(--sv-find-panel-gutter-mobile) var(--sv-find-panel-bottom);
    }


    .sv-featured-panel--find .sv-featured-panel__visual {

        min-height:
            178px;

        padding:
            24px 0 2px;
    }


    .sv-featured-panel--find .sv-featured-panel__body {

        width:
            100%;
    }


    .sv-featured-panel--find .sv-find-discovery__search {

        width:
            100%;
    }


    .sv-featured-panel--find .sv-find-discovery__search-header {

        margin-bottom:
            23px;
    }


    .sv-featured-panel--find .sv-find-discovery__input-wrap {

        min-height:
            52px;
    }


    .sv-featured-panel--find .sv-find-discovery__input {

        height:
            50px;

        padding:
            0 15px;
    }


    .sv-featured-panel--find .sv-find-discovery__results {

        margin-top:
            50px;
    }


    .sv-featured-panel--find .sv-find-discovery__section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;

        margin-bottom:
            17px;

        padding-bottom:
            10px;
    }


    .sv-featured-panel--find .sv-find-discovery__product-list,

    .sv-featured-panel--find .sv-find-discovery__suggestions-list {

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

        gap:
            12px;
    }


    .sv-featured-panel--find .sv-find-discovery__more {

        margin-top:
            26px;
    }


    .sv-featured-panel--find .sv-find-discovery__suggestions {

        margin-top:
            48px;
    }


    .sv-featured-panel--find .sv-find-discovery__highlights {

        margin-top:
            56px;
    }

}


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-featured-panel--find *,
    .sv-featured-panel--find *::before,
    .sv-featured-panel--find *::after {

        transition:
            none !important;
    }

}