header #MainHeader #HeaderMenu ul {
    min-height: 3.8em;
}

header #MainHeader #HeaderMenu #SearchMenu {
    display: none;
}

header #MainHeader #HeaderMenu ul li:nth-child(2) a {
    border-right: 0;
}

#SearchProductPage li,
#SearchProductPage ul {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
}

#SearchProductPage > .InnerContent {
    max-width: 120em;
    margin: 0 auto;
    padding: 0 2em;
    box-sizing: border-box;
}

#SearchProductPage #DefualtSearchBarSection {
    max-width: 35em;
    margin: 2em auto;
    padding: 2em;
}

    #SearchProductPage #DefualtSearchBarSection #SearchResultEmpty {
        text-align: center;
        margin: 0 auto;
        padding: 2em;
        width: 100%;
        max-width: 40em;
        box-sizing: border-box;
    }

        #SearchProductPage #DefualtSearchBarSection #SearchResultEmpty img {
            max-width: 18em;
        }

    #SearchProductPage #DefualtSearchBarSection .SearchProductSection {
        display: flex;
        border-radius: 3.335em;
        border: 1px solid rgba(0 0 0/.15);
        background: #fff;
    }

        #SearchProductPage #DefualtSearchBarSection .SearchProductSection input {
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
            height: unset;
            border: none;
            color: #000;
            font-weight: 700;
            font-size: 1em;
            padding-inline-start: 1.85em;
            padding-inline-end: 1.25em;
            padding-block: 1em;
            line-height: 1.5;
        }

        #SearchProductPage #DefualtSearchBarSection .SearchProductSection:has(> input:focus),
        #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper:has(> input:focus) {
            border: 2px solid var( --theme-color-light);
        }

        #SearchProductPage #DefualtSearchBarSection .SearchProductSection #SearchProductSearchBtn {
            display: flex;
            width: 2.8em;
            height: 2.8em;
            justify-content: center;
            align-items: center;
            border-radius: 100%;
            background-color: var(--theme-color-light);
            margin: 0.585em 0.585em 0.585em 0;
            cursor: pointer;
        }

            #SearchProductPage #DefualtSearchBarSection .SearchProductSection #SearchProductSearchBtn::after,
            #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper #SearchProductSearchBtn::after {
                content: "\f002";
                font-family: "Font Awesome 6 Free";
                font-size: 1em;
                font-weight: 600;
                color: #fff;
                padding: 0.85em;
            }

#SearchProductPage #SearchResultSection {
    display: grid;
    grid-template-columns: 25em 1fr;
    gap: 4em;
    align-items: flex-start;
    margin: 3.5em 0;
    min-height: 35em;
}

    #SearchProductPage #SearchResultSection > #SearchSideBarSection {
        position: sticky;
        top: calc(var(--header-height) + 3em);
        z-index: 1;
        margin: 2em 0;
    }

    #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper {
        display: flex;
        border-radius: 3.335em;
        background: #fff;
        border: 1px solid rgba(0 0 0/.09);
        position: relative;
        box-sizing: border-box;
    }

        #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper input {
            border: 0;
            background-color: transparent;
            height: unset;
            color: currentColor;
            font-size: 1em;
            padding: unset;
            padding-inline-start: 1.4em;
            padding-inline-end: 1.25em;
            padding-block: .7em;
            font-weight: 600;
            line-height: 1.5;
        }

        #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper #SearchProductSearchBtn {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

            #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper #SearchProductSearchBtn::after {
                color: currentColor;
                font-size: 1.2em;
                padding: 0.45em .9em;
            }

    #SearchProductPage #SearchResultSection > #SearchSideBarSection ul {
        margin: 1.5em;
    }

    #SearchProductPage #SearchResultSection > #SearchSideBarSection a {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2em;
        align-items: center;
        padding: .75em 0;
        color: currentColor;
        text-decoration: none;
        font-weight: 700;
    }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection a span {
            display: block;
            white-space: nowrap;
        }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection a::after {
            content: attr(data-result-count);
            display: block;
            min-width: 3em;
            padding: 0 .5em;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden;
            background: rgba(0 0 0 / 5%);
            border-radius: 2em;
            font-weight: 800;
        }


    #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper {
        margin: 2em 0 4em;
        scroll-margin-block-start: calc(var(--header-height) + 3em);
    }

        #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper h3 {
            font-size: 1.5em;
            font-weight: 700;
            margin-bottom: 0;
        }

        #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
            gap: 1.5em 2em;
            margin: 2em 0;
        }

            #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList > li > a {
                display: grid;
                grid-template-columns: 5em 1fr;
                gap: 1.3em;
                align-items: center;
                color: currentColor;
                text-decoration: none;
            }

            #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList .ProductName {
                word-break: break-word;
                font-weight: 800;
            }

            #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList .ProductRegion {
                display: flex;
                align-items: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 600;
                opacity: .5;
            }

            #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList .ProductImageIcon {
                width: 5em;
                height: 5em;
                background: rgba(0 0 0 / 5%);
                box-shadow: rgba(0 0 0 / 5%) 0 0 0 1px;
                border-radius: 25%;
                overflow: hidden;
                position: relative;
                align-self: start;
            }

                #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList .ProductImageIcon img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }

@media (any-hover) {
    #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList a:focus .ProductImageIcon,
    #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList a:hover .ProductImageIcon {
        transform: scale(1.06);
    }
}

@media only screen and (max-width: 1000px) {

    #SearchProductPage #SearchResultSection {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 0;
        margin-top: 1em;
    }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection {
            position: inherit;
            margin-block-end: 1em;
        }

        #SearchProductPage #SearchResultSection #SearchSideBarSection .SearchProductInputWrapper {
            max-width: 28em;
            border-radius: 3em;
        }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection ul {
            margin: 1.3em -2em 0;
            padding: 0 2em;
            display: flex;
            align-items: center;
            gap: 1em;
            width: 100vw;
            overflow: hidden;
            overflow-x: auto;
            box-sizing: border-box;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

            #SearchProductPage #SearchResultSection > #SearchSideBarSection ul::-webkit-scrollbar {
                display: none;
            }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection a {
            gap: 1em;
            background: #fff;
            border-radius: 3em;
            padding: .75em 1.5em;
            font-weight: 600;
        }

            #SearchProductPage #SearchResultSection > #SearchSideBarSection a::after {
                background: unset;
                min-width: unset;
                padding: 0;
            }
}



@media only screen and (max-width: 480px) {
    #SearchProductPage > .InnerContent {
        padding: 0 1.5em;
    }

    #SearchProductPage #DefualtSearchBarSection #SearchResultEmpty {
        padding: 1.5em;
    }

        #SearchProductPage #DefualtSearchBarSection #SearchResultEmpty img {
            max-width: 15em;
        }

    #SearchProductPage #DefualtSearchBarSection {
        padding: 0;
        margin-block: 2em 10em;
    }

        #SearchProductPage #DefualtSearchBarSection .SearchProductSection {
            border-radius: 2em;
        }

            #SearchProductPage #DefualtSearchBarSection .SearchProductSection input {
                padding-inline-start: 1.5em;
            }

            #SearchProductPage #DefualtSearchBarSection .SearchProductSection #SearchProductSearchBtn {
                width: 3.5em;
                height: 2.9em;
            }

    #SearchProductPage #SearchResultSection > #SearchSideBarSection {
        margin: 1.5em 0;
    }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection ul {
            padding: 0 1.5em;
            margin: 1.3em -1.5em 0;
        }

        #SearchProductPage #SearchResultSection > #SearchSideBarSection a {
            display: block;
        }

            #SearchProductPage #SearchResultSection > #SearchSideBarSection a::after {
                content: none;
            }

    #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper h3::after {
        content: '(' attr(data-result-count) ')';
        opacity: .5;
        margin-inline-start: 1em;
    }

    #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList {
        gap: 1em;
    }

        #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList > li > a {
            grid-template-columns: 4em 1fr;
        }

        #SearchProductPage #SearchResultSection > .SearchResultSection .ResultWrapper .ResultItemList .ProductImageIcon {
            width: 4em;
            height: 4em;
        }
}