#gpsgems-filter-bar {
    margin-bottom: 80px;
}

@media(width<768px) {
    #gpsgems-filter-bar {
        margin-bottom: 32px;
    }
}

#gpsgems-filter-bar,
#gpsgems-filter-bar * {
    color: var(--Fixed-Black, #383839);
    font-family: var(--Font-Size-Name-Font-2, "Open Sans");
    font-size: var(--Font-Size-sm-Font-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Size-sm-Height-sm, 24px);
}
.search-box::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    left: 12px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.031 16.617L22.314 20.899L20.899 22.314L16.617 18.031C15.0237 19.3082 13.042 20.0029 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20.0029 13.042 19.3082 15.0237 18.031 16.617ZM16.025 15.875C17.2941 14.5699 18.0029 12.8204 18 11C18 7.132 14.867 4 11 4C7.132 4 4 7.132 4 11C4 14.867 7.132 18 11 18C12.8204 18.0029 14.5699 17.2941 15.875 16.025L16.025 15.875Z' fill='%23383839'/%3E%3C/svg%3E") no-repeat center center;
}

#gpsgems-filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    padding: 6px 12px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "";
    width: 48px;
    height: 36px;
    position: absolute;
    top: 1px;
    right: 1px;
    background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0002 13.172L16.9502 8.22198L18.3642 9.63598L12.0002 16L5.63623 9.63598L7.05023 8.22198L12.0002 13.172Z' fill='%23383839'/%3E%3C/svg%3E") no-repeat center center;
    pointer-events: none;
}

.select-wrapper select {
    border-radius: 0px !important;
    font-family: "Open Sans";
    font-size: 16px;
}

.select-wrapper select:focus-within {
    outline-width: 0px !important;
}

.cat {
    width: 140px
}

.metal {
    width: 110px;
}

.gem {
    width: 136px;
}

.sort {
    width: 200px;
}

/* Loader */
.custom-loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid #0000;
    border-right-color: #2A2F80;
    position: relative;
    animation: l24 1s infinite linear;
}

.custom-loader:before,
.custom-loader:after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: inherit;
    animation: inherit;
    animation-duration: 2s;
}

.custom-loader:after {
    animation-duration: 4s;
}

@keyframes l24 {
    100% {
        transform: rotate(1turn)
    }
}

#gpsgems-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 80px 24px;
}

@media (768px<width<1024px) {
    #gpsgems-product-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 32px 16px;
    }
}

@media (width<800px) {
    #gpsgems-product-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 32px 16px;
    }
}

.responsive-filter-trigger-wrapper {
    display: none;
}

@media (width<1270px) {
    #gpsgems-clear-filters {
        align-self: flex-end;
    }

    .responsive-filter-trigger-wrapper {
        display: flex;
        align-items: center;
    }

    .responsive-filter-trigger-close {
        display: none;
    }

    .filter-sort-box {
        display: none !important;
    }

    .filter-sort-box.active {
        display: flex !important;
    }
	
   .filter-sort-box {
        position: absolute;
        right: 0px;
        background: white;
        top: 60px;
        flex-direction: column;
        z-index: 4;
        padding: 24px;
        background: rgb(246, 246, 246);
        width:  calc(100vw - 48px) !important;
        border: 2px solid #e2e2e2;
    }

    .select-wrapper::after {
        background-color: rgb(246, 246, 246);
    }

    .select-wrapper {
        width: 100% !important;
    }

    .filter-by {
        text-align: left !important;
        align-self: flex-start !important;
    }

    .responsive-filter-trigger-close {
        display: none;
    }

    #gpsgems-filter-bar:has(.active) .responsive-filter-trigger-open {
        display: none;
    }

    #gpsgems-filter-bar:has(.active) .responsive-filter-trigger-close {
        display: block;
    }
}

@media (width<768px) {
    .search-box {
        width: 200px !important;
    }

    .search-box input,
    .search-box {
        width: 200px !important;
        min-width: 200px !important;
    }
}