/*Fullscreen Imag*/
#wm-e-fullscreen-img-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: #ffffffaa;
}
/*Disabled*/
.wm-engine-container-disabled,
.wm-engine-disabled,
.prod-pagination-disabled {
    cursor: auto;
    opacity: .5;
}

.wm-e-hide,
.hide {
    display: none;
}

/*Main Template*/
div#product-category-template {
    display: grid;
    grid-template-columns: 20% 70%;
    justify-content: space-between;
}

/*Header Template*/
div#product-header-outer-container {
    margin-bottom: 50px;
}

.sort-outer-container {
    display: grid;
    grid-template-columns: repeat(2,48%);
    justify-content: space-between;
    margin-top: 100px;
    align-items: center;
}

.sort-container {
    display: flex;
    gap: 5%;
}

.sort-inner-container {
    margin-bottom: 15px;
}

.prod-pagination-results {
    text-align: right;
}

/*Pagination Template*/
.prod-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.prod-pagination-inner-container {
    display: flex;
    gap: 5px;
}

.prod-pagination-item,
.prod-pagination-indicator {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-pagination-item {
    cursor: pointer;
    transition: .2s;
    border-radius: 50%;
}

.prod-pagination-item:hover,
.prod-pagination-item-active {
    background-color: var(--red);
    color: var(--white);
}

.prod-pagination-next, .prod-pagination-previous {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.arrow {
    width: 14px;
}

.rotate-left {
    transform: rotate(90deg);
}

.rotate-right {
    transform: rotate(-90deg);
}

/*Filter Template*/
.wm-engine-filter-attribute-container {
    margin-bottom: 25px;
}

.wm-filter-select-wrapper,
.wm-engine-filter-attribute-values {
    margin-bottom: 15px;
}

button#wm-engine-filter-reset {
    margin-top: 10px;
}

.filter-container {
    margin-bottom: 25px;
}

/*Preisslider**/
#priceslider .noUi-handle::before,
#priceslider .noUi-handle::after {
    display: none;
}

#priceslider {
    height: 10px;
}

#priceslider .noUi-connect {
    background: var(--red);
}

#priceslider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
}

/*Single Product Template*/
.prodimg > img {
    width: 100%;
}

.wm-engine-rating-star-container svg {
    width: 12px
}
.wm-engine-ratin-star-container {
    display: flex;
    gap: 3px;
}

/*Product Loop*/
div#product-container {
    display: grid;
    grid-auto-rows: 1fr;
}

.wm-single-products {
    display: grid;
}

.loop-initial-5 > #product-container {
    grid-template-columns: repeat(5, 1fr);
}

.loop-initial-4 > #product-container {
    grid-template-columns: repeat(4, 1fr);
}

.loop-initial-3 > #product-container {
    grid-template-columns: repeat(3, 1fr);
}

.loop-initial-2 > #product-container {
    grid-template-columns: repeat(2, 1fr);
}

.loop-initial-1 > #product-container {
    grid-template-columns: 1fr;
}

.loop-gap {
    column-gap: 4%;
    row-gap: 100px;
}

.wm-single-products>a.last-button {
    align-self: end;
}

.wm-e-crossed-out {
    text-decoration: line-through;
}

/*Footer Template*/
div#product-footer-outer-container {
    margin-top: 100px;
}

/*Overlay*/
#wm-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: #ffffffaa;
}

#wm-overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*Media Query---------------------------------------------------------------------------------*/
/*Tablet Quer*/
@media only screen and (max-width: 1280px){  
    /*Product Loop*/
    .loop-initial-5 > #product-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .loop-initial-4 > #product-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .loop-initial-3 > #product-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/*Tablet*/
@media only screen and (max-width: 980px){
    /*Disable grid and flex*/
    .sort-outer-container,
    div#product-category-template {
        display: block;
    }

    /*Pagination*/
    .prod-pagination-results {
        text-align: left;
        margin-top: 15px;
    }

    /*Filter*/
    div#product-filter-outer-container {
        margin-bottom: 50px;
    }

    h4.wm-engine-filter-title::after {
        content: "";
        height: 20px;
        width: 20px;
        background-image: url(../assets/images/arrow.svg);
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        right: 0;
        transition: .2s;
        transition-delay: .2s;
        transform-origin:  center center;
    }

    #product-filter-outer-container.open .wm-engine-filter-title::after{
        transform: rotate(180deg);
        transition-delay: .4s;
    }

    #filter-attributes-container {
        max-height: 0;
        overflow: hidden;
        transition: .8s;
    }

    #product-filter-outer-container.open #filter-attributes-container {
        max-height: 800px;
    }
    
    /*Product Loop*/
    .loop-initial-5 > #product-container,
    .loop-initial-4 > #product-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*Woo Tablet*/
@media only screen and (max-width: 768px){
    .loop-initial-5 > #product-container,
    .loop-initial-4 > #product-container,
    .loop-initial-3 > #product-container {
        grid-template-columns: repeat(2, 1fr);
    }

}

/*Phone*/
@media only screen and (max-width: 480px){    
    /*Disable grid and flex*/
    .sort-container {
        display: block;
    }

    /*Hide Elements on Mobile*/
    .pagination-label {
        display: none;
    }

    /*Select*/
    .wm-select {
        width: 100%;
    }

    /*Product Loop*/
    .loop-initial-5 > #product-container,
    .loop-initial-4 > #product-container,
    .loop-initial-3 > #product-container,
    .loop-initial-2 > #product-container {
        grid-template-columns: 1fr;
    }
}

/*iPhone SE*/
@media only screen and (max-width: 320px){

}

/*Galaxy Fold*/
@media only screen and (max-width: 280px){

}