.product-filter {
    position: relative;
    margin: 20px 0 40px;
    padding-top: 20px;
}

.product-filter:not(.show)::after {
    content: "";
    background: url("/static/img/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.product-filter > .container {
    opacity: 0;
    transition: 0.3s;
}

.product-filter.show > .container {
    opacity: 1;
}

.product-filter .product-filter-form {
    position: relative;
    z-index: 20;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li > a:before,
.product-filter .bootstrap-select .dropdown-menu.inner > li > a:after,
.select-mobile .option:before,
.select-mobile .option:after {
    content: "";
    width: 13px;
    height: 13px;
    transition: 0.3s;
    position: absolute;
    left: 10px;
    top: 5px;
}

.select-mobile .option:before,
.select-mobile .option:after {
    top: 6px;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li:not(.disabled) > a:before,
.select-mobile .option:not(.disabled):before {
    background: url("/static/img/icon_checkbox_empty.png");
    background-repeat: no-repeat;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li:not(.disabled) > a:after,
.select-mobile .option:not(.disabled):after {
    background: url("/static/img/icon_checkbox_checked.png");
    background-repeat: no-repeat;
    opacity: 0;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li > a.selected:before,
.select-mobile .option.selected:before {
    opacity: 0;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li > a.selected:after,
.select-mobile .option.selected:after {
    opacity: 1;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li.disabled {
    display: none;
}

.product-filter .bootstrap-select .dropdown-menu.inner > li > a,
.select-mobile .option {
    padding: 1px 10px 1px 26px;
}

.product-filter .active-filters {
    margin: 20px 0;
}

.product-filter .filter-active {
    display: inline-block;
    margin: 0 5px 10px;
    position: relative;
    transition: 0.3s;
    opacity: 0.8;
}

.product-filter .filter-active:hover,
.product-filter .filter-active:focus {
    opacity: 1;
}

.product-filter .filter-active .button {
    border: 1px solid #cdcdcd;
    font-size: 12px;
    height: 42px;
    padding: 14px 40px 10px 15px;
    cursor: pointer;
    margin: 0;
}

.product-filter .filter-active .button:before,
.product-filter .filter-active .button:after {
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    transition: 0.3s;
    right: 15px;
}

.product-filter .filter-active .button:before {
    background: url("/static/img/icon_x.png");
    background-repeat: no-repeat;
}

.product-filter .filter-active .button:after {
    background: url("/static/img/icon_x_red.png");
    background-repeat: no-repeat;
    opacity: 0;
}

.product-filter .filter-active .button:hover,
.product-filter .filter-active .button:focus {
    background: white !important;
    color: #333333 !important;
    border-color: #333333;
}

.product-filter .filter-active .button.reset-all,
.product-filter .filter-active .button.reset-all:hover,
.product-filter .filter-active .button.reset-all:focus {
    background: #e6e6e6 !important;
}

.product-filter .filter-active .button:hover:before,
.product-filter .filter-active .button:focus:before {
    opacity: 0;
}

.product-filter .filter-active .button:hover:after,
.product-filter .filter-active .button:focus:after {
    opacity: 1;
}

.product-list {
/*    margin: 40px -5px;*/
    /* Note setting margin top/bottom won't work with sticky footer in shop! */
    margin: 0 -5px;
    padding: 40px 0;
}

.product-list .product {
    color: #333333;
    padding: 3px;
    cursor: pointer;
    transition: 0.3s;
    display: block;
}

.product-list .product:hover .image-block,
.product-list .product.active .image-block {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.product-list .product:hover .description-block,
.product-list .product.active .description-block {
    background: #dc002e;
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.product-list .product:hover .description-block .info .stock-status,
.product-list .product.active .description-block .info .stock-status {
    background: white !important;
    color: #dc002e !important;
}

.product-list .product img {
    width: 100%;
}

.product-list .product .image-block {
    border: 1px solid #e6e6e6;
    position: relative;
    transition: 0.3s;
}

.product-list .product .image-block .size {
    position: absolute;
    right: 15px;
    top: 15px;
    background: #dc002e;
    color: white;
    padding: 5px 15px 3px;
    margin: 0;
    font-weight: bold;
    height: 34px;
}

.product-list .product .image-block .highlight {
    position: absolute;
    bottom: 15px;
    left: 0;
    background: #eaeaea;
    padding: 9px 15px 3px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    height: 34px;
    transition: 0.3s;
}

.product-list .product .description-block {
    padding: 15px;
    position: relative;
    transition: 0.3s;
}

.product-list .product .description-block .title {
    font-size: 18px;
    width: calc(100% - 120px);
    min-height: 20px;
}

.product-list .product .description-block .price {
    position: absolute;
    right: 15px;
    top: 15px;
    font-weight: bold;
    font-size: 24px;
}

.product-list .product .description-block .info {
    text-align: right;
}

.product-list .product .description-block .info .stock-status {
    margin: 0;
    background: #b4b4b4;
    display: inline-block;
    padding: 9px 15px 8px;
    font-size: 11px;
    text-transform: uppercase;
    transition: 0.3s;
}

.product-list .product .description-block .info .stock-status.available {
    background: #688816;
    color: white;
}

.product-list .product .description-block .info .stock-status.not-available {
    background: #dc002e;
    color: white;
}

.product-filter-form .button.mobile {
    display: none;
    width: calc(100% - 10px);
    margin-left: 5px;
    border: 1px solid #dc002e;
    text-align: center;
    font-size: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.product-filter-form .mobile-actions > div {
    float: right;
}

.product-filter-form .select-group {
    transition: 0.3s;
    display: none;
}

.product-filter-form .select-group.active {
    display: block;
}

.product-filter-form .select-group .price-filter {
    padding: 0 5px;
    margin-bottom: 10px;
}

.product-filter-form .select-group .price-filter .dropdown-toggle {
    border-radius: 0;
    border: 1px solid #cdcdcd;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 11px 30px 10px 15px;
    height: 42px;
    cursor: pointer;
}

.product-filter-form .select-group .price-filter .price-filter-dropdown {
    padding: 0 15px 15px;
    border: 1px solid #8c8c8c;
    border-top: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    position: absolute !important;
    width: calc(100% - 10px);
    z-index: 1;
    background: white;
    display: none;
    position: relative;
}

.product-filter-form .select-group .price-filter.open .price-filter-dropdown {
    display: block;
}

.product-filter-form .select-group .price-filter.open .dropdown-toggle {
    border-bottom: none;
    border-color: #8c8c8c;
    background: white;
    z-index: 2;
    position: relative;
}

.product-filter-form .select-group .price-filter label {
    font-size: 12px;
}

.product-filter-form .select-group .price-filter input {
    font-size: 12px;
    border: 1px solid #8c8c8c;
    width: calc(100% - 5px);
    padding: 5px 10px;
    font-weight: bold;
    margin-bottom: 15px;
}

.product-filter-form .select-group .price-filter #max-price {
    margin-left: 5px;
}

.product-filter-form .more-filters {
    padding: 10px 20px;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.product-list .product-list-footer {
    margin: 20px 0;
}
.product-list .product-list-footer .loaded-products,
.product-list .product-list-header .load-previous-products,
.product-list .product-list-footer .load-more-products {
    text-align: center;
}

.product-list .product-list-header .load-previous-products .button,
.product-list .product-list-footer .load-more-products .button {
    cursor: pointer;
}

.product-list .product-list-header .loading,
.product-list .product-list-footer .loading {
    margin: 21px 0;
    padding: 0;
}

span.color {
    width: 30px;
    display: block;
    float: left;
    margin-right: 10px;
    height: 15px;
    position: relative;
}

span.color:before {
    content: "";
    background: url("/static/img/color_overlay_30x15.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    height: 15px;
}

span.color.white::before {
    opacity: 0.5;
}

span.color.white {
    background: #FFFFFF;
}

span.color.silver {
    background: #c0c0c0;
}

span.color.gray {
    background: #808080;
}

span.color.black {
    background: #000000;
}

span.color.red {
    background: #ff0000;
}

span.color.maroon {
    background: #800000;
}

span.color.yellow {
    background: #ffff00;
}

span.color.olive {
    background: #808000;
}

span.color.lime {
    background: #00ff00;
}

span.color.green {
    background: #008000;
}

span.color.aqua {
    background: #00ffff;
}

span.color.blue {
    background: #0000ff;
}

span.color.navy {
    background: #000080;
}

span.color.purple {
    background: #800080;
}

span.color.brown {
    background: #553921;
}

span.color.gold {
    background: #ffd700;
}

span.color.violet {
    background: #ee82ee;
}

span.color.orange {
    background: #ffa500;
}

span.color.pink {
    background: #ffc0cb;
}

span.color.cyan {
    background: #00ffff;
}

span.color.metallic {
    background: #839eaa;
}

span.color.beige {
    background: #e4c3a0;
}

@media (max-width: 1050px) {
    .product-filter-form .button.mobile {
        display: block;
    }
}

@media (max-width: 480px) {
    .product-list .product .description-block .title {
        width: 100%;
    }

    .product-list .product .description-block .price {
        bottom: 0;
        top: auto;
        left: 15px;
        right: auto;
    }
}