#diturelastic-filters [data-filter-value] .count {
    margin-left: 10px;
}
#diturelastic-filters [data-filter-value] .count:before {
    content : '(';
}
#diturelastic-filters [data-filter-value] .count:after {
    content : ')';
}


#diturelastic-product-list .product-image-photo {
    position: relative !important;
}

@media (max-width: 767px) {
    .filters-overlay:after {
        content: '';
        position: absolute;
        height: 100%;
        width: 20px;
        right: 0;
        top: 0;
        background: rgb(255,255,255);
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }

}

/* mask-image itself can't be transitioned (browsers treat gradient-to-gradient as discrete),
   so the gradient shape stays fixed and only mask-size (a plain length) animates: oversizing the
   mask pushes the fade band past the edge (= no fade), shrinking it slides the band into view. */
.scroll-fade-right-mask,
.scroll-fade-down-mask {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: mask-size .2s ease, -webkit-mask-size .2s ease;
}

.scroll-fade-right-mask {
    -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent 100%);
    -webkit-mask-size: calc(100% + 24px) 100%;
    mask-size: calc(100% + 24px) 100%;
}

.scroll-fade-down-mask {
    -webkit-mask-image: linear-gradient(to bottom, black, black calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(to bottom, black, black calc(100% - 42px), transparent 100%);
    -webkit-mask-size: 100% calc(100% + 42px);
    mask-size: 100% calc(100% + 42px);
}

.scroll-fade-right-mask.scroll-fade-right {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.scroll-fade-down-mask.scroll-fade-down {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}