﻿.homeActionButtonsContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2em;
    flex-wrap: wrap;
    padding-top: 1em;
}

.productTagIcon {
    width: min-content;
    padding-inline: 1em;
    padding-block: 0.5em;
    height: max-content;
    color: white;
    font-weight: 700;
    border-radius: 8px;
    font-size: 0.75em;
    white-space: nowrap;
    margin-bottom: 0px;
}


.homePageMainContainer {
    display: flex;
    margin-top: 1.8em;
}

.homePageRightContainer {
    width: 100%;
}

    .homePageRightContainer .itemlisting {
        min-width: 20em;
        padding-top: 1.5em;
    }

.homePageLeftContainer {
    width: 20em;
    display: block;
}

    .homePageLeftContainer .homePageCard {
        height: fit-content;
        border-radius: 1em;
        background-color: white;
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 4px 0px;
        padding: 1.8em;
        width: 18em;
        margin: 0em 2em 2em 2em;
    }

        .homePageLeftContainer .homePageCard .filterTopContainer {
            display: flex;
            gap: 0.7em;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            margin-bottom: 0.3em;
        }

            .homePageLeftContainer .homePageCard .filterTopContainer * {
                border-width: 2px;
                white-space: nowrap;
                width: min-content;
            }

            .homePageLeftContainer .homePageCard .filterTopContainer .primaryButton {
                font-size: 0.8em;
                width: max-content;
                padding-inline: 2.5em;
                padding-block: 0.5em;
            }

        .homePageLeftContainer .homePageCard .divider {
            border-bottom: 1px solid var(--surface-100);
            margin-block: 1em;
        }

        .homePageLeftContainer .homePageCard h5 {
            font-weight: 700;
            margin-bottom: 1.2em;
        }

        .homePageLeftContainer .homePageCard .filterTopContainer h5 {
            margin-bottom: 0px;
        }

        .homePageLeftContainer .homePageCard .categoriesContainer {
            display: flex;
            flex-direction: column;
        }

        .homePageLeftContainer .homePageCard .sliderHelperText {
            font-size: 0.7rem;
            font-weight: 500;
            margin-top: 2em;
        }

.homePageCard .colorFilterOptions {
    display: flex;
    flex-direction: column;
    align-items: start;
}

    .homePageCard .colorFilterOptions .color-circle {
        width: 1em !important;
        height: 1em !important;
        display: block;
        border-radius: 50%;
        margin-top: 0.2em;
    }

.homePageCard .colorOptionContainer .circle-White, .homePageCard .colorOptionContainer .circle-Clear {
    outline: 1px solid var(--surface-500) !important;
    border: 1px solid var(--surface-500) !important;
}

.homePageCard .colorOptionContainer, .homePageCard .tagOptionContainer, .homePageCard .minnesotaMadeFilterOptions, .homePageCard .assembledInUsaFilterOptions {
    display: flex;
    gap: 0.8em;
    margin-top: 0.8em;
}

    .homePageCard .tagOptionContainer > *, .homePageCard .minnesotaMadeFilterOptions *, .homePageCard .assembledInUsaFilterOptions * {
        width: min-content;
    }

.homePageCard .tagOptionContainer, .homePageCard .minnesotaMadeFilterOptions, .homePageCard .assembledInUsaFilterOptions {
    white-space: nowrap;
}

    .homePageCard .tagOptionContainer *, .homePageCard .colorOptionContainer *, .homePageCard .minnesotaMadeFilterOptions *, .homePageCard .assembledInUsaFilterOptions * {
        font-weight: 500;
        font-size: 0.85em;
    }

#priceRange, #colorFilterOptionWrapper, #tagFilterOptionWrapper {
    margin: 1em 0em 0em 0.5em;
}

.collapseAnchor {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: var(--surface-800);
    padding: 0px;
}

    .collapseAnchor:hover {
        color: var(--surface-900);
    }

.expandableFilterOption {
    padding: 0em 0em;
}

.ui-slider-handle {
    background-color: black !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border: none !important;
    margin-top: 2px !important;
}

.ui-slider {
    border: none !important;
    height: 5px !important;
    padding: 0px !important;
    background-color: var(--surface-100) !important;
}

.ui-slider-range {
    background-color: var(--surface-900) !important;
}

.pagination-row-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-block: 2em;
    gap: 1em;
}

    .pagination-row-wrapper .itemsPerPageDropdown, .pagination-container {
        border: 1px solid var(--surface-200);
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        border-radius: 1em;
    }

    .pagination-row-wrapper .itemsPerPageDropdown {
        width: min-content;
        padding: 1em;
    }

.pagination-container {
    text-align: center;
    display: flex;
    gap: 1.5em;
    justify-content: center;
    width: fit-content;
    padding: 1em 2em;
}

.paginator-option {
    color: var(--surface-900);
    text-decoration: none;
    width: min-content !important;
}

    .paginator-option:hover {
        font-weight: bold;
        color: var(--surface-900);
    }

    .paginator-option.active {
        font-weight: bold;
        border-bottom: 1px solid black;
    }

.itemsPerPageWrapper {
    margin-right: 3em;
}

    .itemsPerPageWrapper .resultsPerPageText {
        font-size: 0.75em;
    }

.hidden {
    display: none !important;
}

.homePageCard .colorOptionContainer .color-circle {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin-top: 3px;
}

.homePageCard .colorOptionContainer input {
    width: max-content;
    margin-top: 3px;
}


/* Categories / Catalog */

.topLevelCatalogOption {
    display: flex;
    justify-content: space-between;
}

.topLevelCatalogOption, .layerOneSubmenu * {
    margin-block: 0.3em;
}

.submenu.layerTwoSubmenu {
    margin: 0px;
}

.linksContainer {
    margin-left: 2em;
}

.linkItem {
    text-decoration: none;
    font-weight: 600;
    color: var(--surface--700);
    cursor: pointer;
    font-size: 0.85em;
}

    .linkItem:hover {
        font-weight: 600;
        text-decoration: none;
    }

.subCategoryOption {
    margin-left: 1.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu {
    display: none;
    overflow: hidden;
}

.leafLink {
    margin-left: 3em;
    display: block;
    text-align: left;
}

.subcategoriesContainer, .linksContainer, .subcategoriesContainer *, .linksContainer * {
    transition: height 0.1s all;
}

.filter-menu-button {
    display: none;
    margin-top: 2em;
}

.closeFiltersButton {
    display: none;
    width: 17px;
    height: 17px;
    position: absolute;
    left: calc(100% - 5em);
}

.searchResultSummary {
    width: 100%;
}

.searchResultSummaryText {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.3em;
}



.expandSymbol {
    font-size: 0.9em;
    color: var(--surface-600);
}

    .expandSymbol * {
        transition: 300ms linear all;
    }

.categoriesContainer .highlight, .categoriesContainer highlight:hover, .categoriesContainer .linkItem:hover {
    color: var(--fey-blue-500);
}


/* Products Header Styles */

.productsHeader {
    display: flex;
    justify-content: space-between;
    padding-inline: 5%;
    padding-block: 2em;
}

    .productsHeader > .resultInfoHeader {
        font-size: 1.6em;
        font-weight: 700;
    }

    .productsHeader > .numResults {
        color: var(--surface-700);
        font-size: 0.85em;
    }


@media screen and (max-width: 700px) {
    .productsHeader {
        flex-direction: column;
    }

    .homePageLeftContainer {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 51;
        overflow-y: auto;
        box-sizing: border-box;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        padding: 2em;
    }

        .homePageLeftContainer .homePageCard {
            width: calc(100vw - 4em);
            max-width: calc(100vw - 4em);
            margin-bottom: 2em;
            margin-inline: 0px;
        }

    .filter-menu-button {
        display: block;
        margin-inline: auto;
    }

    .closeFiltersButton {
        display: block;
    }

    .homePageLeftContainer .homePageCard .filterTopContainer .primaryButton {
        font-size: 0.9em;
        width: max-content;
        padding-inline: 1.4em;
    }

    .searchResultSummaryText {
        text-align: center;
        margin: 0px;
        padding: 0px;
        padding-top: 2em;
    }

    .pagination-row-wrapper {
        flex-direction: column;
    }

    .itemsPerPageWrapper {
        margin-inline: 0px;
        margin-bottom: 1em;
    }

    .homePageLeftContainer #desktopAds {
        display: none;
    }

    .homePageMainContainer #mobileAds {
        display: flex;
        flex-direction: column;
        margin: 2em;
        width: unset;
        row-gap: 2em;
    }
}

@media screen and (min-width: 700px) {
    .homePageLeftContainer #desktopAds {
        display: flex;
        flex-direction: column;
        margin: 2em;
        width: 18em;
        row-gap: 2em;
    }

    .homePageMainContainer #mobileAds {
        display: none;
    }
}

.flexslider {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
