/* Add here all your CSS customizations */
.product-thumb-info .product-thumb-info-image {
    overflow: hidden;
}

.product-thumb-info img {
    transform: scale(1.25);
}

.product-thumb-info img:hover {
    transform: scale(1.45);
}


.shop .products .product .onsale {
    background-color: #de006d;
    border-bottom-color: #a30000;
}


.onsale.small {
    background-color: #de006d;
    border-bottom-color: #a30000;
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    font-size: .5em;
    top: -65px;
    line-height: 20px;

    background-image: none;
    border-radius: 100%;
    left: auto;
    right: 0;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    z-index: 10;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #FFF;
    border-bottom: 2px solid transparent;
}

.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.plus.disabled, .minus.disabled {
    background-color: #ddd !important;
}

.product-main {
    border: 1px solid rgba(0,0,0,0.1);
}

#header .header-logo {
    z-index: 2;
}


li.sidebar.active {
    font-weight: bold;
}


/* */
.product .product-thumb-info .product-thumb-info-badges-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-ecommerce {
    font-size: 9.6px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 0;
    padding: 6.4px 8px;
    padding: 0.4rem 0.5rem;
}

.action-buttons {
    width: max-content;
}


/* spinner */
.overlay {
    position: fixed;

    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
}
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height:60px;
    width:60px;
    margin:0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:6px solid rgba(0,174,239,.15);
    border-right:6px solid rgba(0,174,239,.15);
    border-bottom:6px solid rgba(0,174,239,.15);
    border-top:6px solid rgba(0,174,239,.8);
    border-radius:100%;
    z-index: 1000;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}