input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

html[color-preferences="light"] {
    body {
        svg path {
            stroke: #000;
        }

        .arrow {
            border-color: #000;
        }

        section {
            .search-input-content span {
                color: rgb(0, 87, 0);
            }
        
            > .content {
                #filtration-container {
                    .open-filters {
                        background-color: rgb(0, 212, 0);
                    }
        
                    #filters-container {
                        background-color: #fff;
                        border: 2px solid #c0c0c0;
                
                        .checkbox {
                            border: 2px solid #c0c0c0;
                        }
                
                        .active {
                            background-color: rgb(0, 212, 0);
                            border: 2px solid rgb(0, 212, 0);
                        }
                
                        .price-range-container {
                            .inputs-container input {
                                border: 2px solid #c0c0c0;
                                color: #000;
                            }
                
                            .price-range {
                                .price-range-progress-bar {
                                    background-color: rgb(0, 172, 0);
                                }
                
                                .price-range-bar {
                                    background-color: #c0c0c0;
                                }
                
                                .price-range-min {
                                    background-color: rgb(0, 212, 0);
                                }
                
                                .price-range-max {
                                    background-color: rgb(0, 212, 0);
                                }
                            }
                        }
                    }
                }
            
                #shop-container {
                    > .header .sort-by-container {
                        .sort-by {
                            border: 2px solid #c0c0c0;
                            background-color: #c0c0c0;
                        
                            .header {
                                background-color: #fff;
                            }
                        
                            .header:hover {
                                background-color: #f1f1f1;
                            }
                        
                            .content {
                                div {
                                    background-color: #fff;
                                }
                        
                                div:hover {
                                    background-color: rgb(0, 212, 0) !important;
                                }
                            }
                        }
                    }
            
                    > .content {
                        .sold-banner {
                            background-color: rgb(0, 212, 0);
                        }
            
                        > div {
                            border: 2px solid #c0c0c0;
                
                            .content {     
                                .down {
                                    .add-to-cart {
                                        border: 2px solid #c0c0c0;
                                    }
            
                                    .onhover {
                                        div {
                                            color: #fff;
                                            background-color: #000;
                                        }
            
                                        svg {
                                            path {
                                                stroke: none;
                                                fill: #000;
                                            }
                                        }
                                    }
            
                                    .add-to-cart:hover {
                                        border: 2px solid rgb(0, 212, 0);
                                        background-color: rgb(0, 212, 0);
                                    }
                                }
                            }
                        }
                        
                        > div:hover {
                            box-shadow: 0 0 4px 3px rgba(221, 221, 221, 0.6);
                        }
                    }
                }
            }
        }
    }
}

html[color-preferences="dark"] {
    body {
        svg path {
            stroke: #fff;
        }

        .arrow {
            border-color: #fff;
        }

        section {
            .search-input-content span {
                color: rgb(0, 238, 0);
            }
        
            > .content {
                #filtration-container {
                    .open-filters {
                        background-color: rgb(0, 131, 0);
                    }
        
                    #filters-container {
                        background-color: rgb(22, 22, 22);
                        border: 2px solid #313131;
                
                        .checkbox {
                            border: 2px solid #313131;
                        }
                
                        .active {
                            background-color: rgb(0, 131, 0);
                            border: 2px solid rgb(0, 131, 0);
                        }
                
                        .price-range-container {
                            .inputs-container input {
                                border: 2px solid #313131;
                                color: #fff;
                            }
                
                            .price-range {
                                .price-range-progress-bar {
                                    background-color: rgb(0, 131, 0);
                                }
                
                                .price-range-bar {
                                    background-color: #313131;
                                }
                
                                .price-range-min {
                                    background-color: rgb(0, 175, 0);
                                }
                
                                .price-range-max {
                                    background-color: rgb(0, 175, 0);
                                }
                            }
                        }
                    }
                }
            
                #shop-container {
                    > .header .sort-by-container {
                        .sort-by {
                            border: 2px solid #313131;
                            background-color: #313131;
                        
                            .header {
                                background-color: rgb(22, 22, 22);
                            }
                        
                            .header:hover {
                                background-color: rgb(44, 44, 44);
                            }
                        
                            .content {
                                div {
                                    background-color: rgb(22, 22, 22);
                                }
                        
                                div:hover {
                                    background-color: rgb(0, 131, 0) !important;
                                }
                            }
                        }
                    }
            
                    > .content {
                        .sold-banner {
                            background-color: rgb(0, 131, 0);
                        }
            
                        > div {
                            border: 2px solid #313131;
                
                            .content {            
                                .down {
                                    .add-to-cart {
                                        border: 2px solid #313131;
                                    }
            
                                    .onhover {
                                        div {
                                            color: #000;
                                            background-color: #fff;
                                        }
            
                                        svg {
                                            path {
                                                stroke: none;
                                                fill: #fff;
                                            }
                                        }
                                    }
            
                                    .add-to-cart:hover {
                                        border: 2px solid rgb(0, 131, 0);
                                        background-color: rgb(0, 131, 0);
                                    }
                                }
                            }
                        }
                        
                        > div:hover {
                            box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.7);
                        }
                    }
                }
            }
        }
    }
}

section {
    margin-top: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
    
    .search-input-content {
        display: flex;
        justify-content: center;
        font-size: 30px;
        margin-bottom: 30px;
        white-space: pre;
        flex-wrap: wrap;
    }

    > .content {
        display: flex;
        width: 100%;

        #filtration-container {
            position: sticky;
            display: flex;
            flex-direction: column;
            align-items: center;
            user-select: none;
            transition: bottom 400ms;
            z-index: 2;
            pointer-events: none;

            .open-filters {
                display: none;
                padding: 3px 8px 3px 8px;
                font-size: 20px;
                pointer-events: all;
            }

            #filters-container {
                display: flex;
                gap: 10px;
                flex-direction: column;
                padding: 13px;
                width: calc(100% - 30px);
                height: 100%;
                overflow-y: auto;
                pointer-events: all;
        
                > div {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;

                    > .content {
                        display: flex;
                        flex-direction: column;
                        gap: 5px;
                        flex-wrap: wrap;
                        max-height: 150px;

                        > div {
                            display: flex;
                            flex-direction: row;
                            cursor: pointer;
                        }
                    }
                }
        
                .checkbox {
                    display: flex;
                    height: 18px;
                    width: 18px;
                    margin-right: 5px;
                }
        
                .active {
                }
        
                h4 {
                    margin: 0;
                }
        
                .price-range-container {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
        
                    .inputs-container {
                        display: flex;
                        justify-content: space-between;
                        cursor: auto;
        
                        input {
                            outline: none;
                            background-color: transparent;
                            text-align: center;
                            height: 24px;
                            max-width: 100px;
                            min-width: 50px;
                        }
    
                        svg {
                            padding: 0 5px 0 5px;
                        }
                    }
        
                    .price-range {
                        position: relative;
                        width: 100%;
                        height: 20px;
                        cursor: auto;
        
                        .price-range-progress-bar {
                            height: 10px;
                            position: absolute;
                            left: 10px;
                            right: 10px;
                            top: 10px;
                            pointer-events: none;
                        }
        
                        .price-range-bar {
                            width: 100%;
                            height: 10px;
                            margin-top: 10px;
                            border-radius: 8px;
                            background-color: #313131;
                        }
        
                        .price-range-min {
                            height: 20px;
                            width: 20px;
                            border-radius: 10px;
                            top: 5px;
                            position: absolute;
                            cursor: pointer;
                        }
        
                        .price-range-max {
                            height: 20px;
                            width: 20px;
                            border-radius: 10px;
                            top: 5px;
                            position: absolute;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    
        #shop-container {
            user-select: none;
            width: 100%;
    
            > .header {
                font-size: 26px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;

                span {
                    display: flex;
                    align-items: center;
                    text-overflow: ellipsis;
                }
    
                .sort-by-container {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 20px;
                    gap: 10px;
    
                    .sort-by {
                        font-size: 18px;
                        display: flex;
                        position: relative;
                        flex-direction: column;
                        gap: 2px;
                        overflow: hidden;
                        user-select: none;
                        white-space: pre;
                    
                        .header {
                            padding: 3px 10px 3px 10px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                    
                            span {
                                margin-right: 10px;
                            }
                        }
                    
                        .content {
                            flex-direction: column;
                            width: 100%;
                    
                            div {
                                padding: 3px 10px 3px 10px;
                            }
                        }
                    }
                }
            }
    
            > .content {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
    
                .sold-banner {
                    top: 15px;
                    position: absolute;
                    padding: 5px 8px 5px 5px;
                    font-size: 16px;
                    border-top-right-radius: 20px;
                    border-bottom-right-radius: 20px;
                    z-index: 1;
                }
    
                > div {
                    transition: box-shadow 200ms;
                    width: calc(100% - 30px);
                    padding: 13px;
                    display: flex;
                    flex-direction: column;
            
                    img {
                        width: 100%;
                        transition: scale 200ms;
                    }
                
                    > a {
                        position: relative;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        aspect-ratio: 3 / 4;
                        overflow: hidden;
                        border-radius: 8px;
                    }
        
                    .content {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        gap: 5px;
                        margin-top: 10px;
                        flex-grow: 1;
        
                        a {
                            display: flex;
                            justify-content: center;
                            font-size: 26px;
                            text-decoration: none;
                        }
        
                        .down {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            gap: 5px;
                            
                            .add-to-cart-container {
                                position: relative;
                            }
    
                            .add-to-cart {
                                display: block;
                                height: 20px;
                                width: 20px;
                                padding: 5px;
                                border-radius: 5px;
                                transition: all 200ms;
        
                                img {
                                    height: 20px;
                                    width: 20px;
                                }
                            }
    
                            .onhover {
                                position: absolute;
                                display: none;
                                top: 48px;
                                z-index: 1;
    
                                div {
                                    padding: 5px;
                                    border-radius: 5px;
                                    white-space: nowrap;
                                    font-size: 16px;
                                }
    
                                svg {
                                    position: absolute;
                                    top: -10px;
                                    left: calc(50% - 10px);
                                }
                            }
                        }
                    }
                }
                
                > div:hover .img {
                    scale: 1.05;
                }
            }
        }
    }
}

.filters-active {
    bottom: 0 !important;
}

#filters-blur {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
}

.header-filters-active {
    margin-right: var(--body-margin);
}

.body-filters-active {
    overflow: hidden;
    width: calc(100vw - var(--body-margin));
}

.arrow {
    border-style: solid;
    border-width: 0 3px 3px 0;
    display: inline-block;
    width: 6px;
    height: 6px;
}

.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    translate: 0 3px;
}

.arrow.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    translate: 0 -1px;
}

@media (max-width: 1200px) {
    section {
        > .content {
            #shop-container {
                > .content {
                    grid-template-columns: 1fr 1fr;
                }
            }
        }
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    section {
        > .content {
            #filters-container .price-range-container input {
                width: 80px;
            }
        }
    }
}

@media (min-width: 900px) {
    section {
        > .content {
            gap: 30px;
    
            #shop-container > .content {
                gap: 30px;
            }
        }
    }
}

@media (max-width: 900px) {
    section {
        > .content {
            gap: 20px;
    
            #shop-container > .content {
                gap: 20px;
            }
        }
    }
}

@media (min-width: 700px) and (max-width: 900px) {
    section {
        > .content {
            #filters-container .price-range-container input {
                width: 60px;
            }
    
            #shop-container {
                > .header {
                    > span {
                        font-size: 20px;
                    }

                    .sort-by-container > span {
                        font-size: 0;
                    }
                }
            }
        }
    }
}

@media (min-width: 700px) {
    #filters-blur {
        display: none !important;
    }

    section {
        > .content #filtration-container {
            height: calc(100vh - 164px);
            top: 100px;
        }
    }
}

@media (max-width: 700px) {
    section {
        > .content #filtration-container {
            position: fixed;
            bottom: calc(-100% + 130px);
            height: calc(100% - 100px);
            
            .open-filters {
                display: flex;
            }

            #filters-container {
                .price-range-container input {
                    width: 100px;
                }

                > div > .content {
                    max-height: 110px;
                }
            }
        }
    }
}

@media (min-width: 520px) and (max-width: 700px) {
    section {
        > .content {
            #filtration-container {
                left: calc(50% - 300px);
                width: 600px;
            }

            #shop-container {
                > .header {
                    > span {
                        font-size: 22px;
                    }

                    .sort-by-container > span {
                        font-size: 18px;
                    }
                }
            }
        }
        
        > .content {
            #shop-container {
                > .content {
                    > div {
                        .content {
                            a {
                                font-size: 22px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 550px) and (max-width: 600px) {
    section {
        .search-input-content {
            font-size: 24px;
        }
    }
}

@media (max-width: 600px) {
    section {
        .search-input-content {
            font-size: 26px;
        }

        #filtration-container {
            width: calc(100% - 20px) !important;
            left: 10px !important;
        }
    }
}

@media (max-width: 450px) {
    section {
        .search-input-content {
            font-size: 22px;
        }

        > .content {
            gap: 15px;

            #shop-container {
                > .content {
                    gap: 15px;

                    > div {
                        padding: 10px;
                        width: calc(100% - 24px);
                    }
                }
            }
        }
    }
}

@media (min-width: 370px) and (max-width: 520px) {
    section {
        > .content {
            #shop-container {
                > .header {
                    > span {
                        font-size: 20px;
                    }
                
                    .sort-by-container > span {
                        font-size: 0;
                    }
                }
            }
        }
        
        > .content {
            #shop-container {
                > .content {
                    > div {
                        .content {
                            a {
                                font-size: 17px;
                            }
                            
                            .price {
                                font-size: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 400px) {
    section {
        > .content {
            #shop-container {
                > .header {
                    > span {
                        font-size: 0;
                    }
                
                    .sort-by-container > span {
                        font-size: 20px;
                    }
                }
            }
        }
        
        > .content {
            #shop-container {
                > .content {
                    > div {
                        .content {
                            a {
                                font-size: 15px;
                            }
                            
                            .price {
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
    }
}