:root {
    --zindex: 40;
    --zindextop: 50;
    --color-orange: #E08D18;
    --color-grey: #5C5D5F;
    --color-blue: #ADCBE7;
    --box-maxwidth: 344px;
    --color-bluem: #5f9ba9;
}

.smartshop.smartshopbasket {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items:flex-end;
}

.smartshop.smartshopbasket .basket{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    overflow:hidden;
    width:48px;
    height:56px;
    margin-right:4px;
    background-image: image-set(url('/media/mod_smartshopbasket/images/basket/basket2_32.webp') 1x, url('/media/mod_smartshopbasket/images/basket/basket2_64.webp') 2x);
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: 8px 4px;
    background-color:rgba(121,161,188,.15);
    backdrop-filter: blur(5px);
    border-radius: 12%;
    border: 1px solid rgba(121,161,188,.9);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(121,161,188,.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all .2s;
    z-index:var(--zindextop);
    cursor:pointer;
    &:hover{
        border:solid 1px rgba(121,161,188,.7);
        background-color:rgba(121,161,188,.95);
    }

}

.smartshop.smartshopbasket .basket>.count{
    position:relative;
    z-index:var(--zindex);
    display:inline-block;
    color:#524E2F;
    font-size:16px;
    font-weight:700;
    width:100%;
    text-align:center;
    user-select: none;
}

.smartshop.smartshopbasket div:first-of-type:hover + div.cart, .smartshop.smartshopbasket div.cart:hover {
    display:block;
    height:auto;
}

.smartshop.cart {
    display:none;
    height:0;
    position:absolute;
    right:0;
    margin-right:0;
    top:20px;
    width:100%;
    background: rgba(121,161,188,.8);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(121,161,188, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index:var(--zindex);
    color:#fff;
    transition: height 1s ease .2s;
}

.smartshop .cartheader{
    padding:4px 16px;
    width:100%;
    font-weight:600;
}

.smartshop .cartlist>.entry{
    position:relative;
    margin: 0 8px 0 8px;
    padding: 2px 0;

    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    align-items:center;
}

.smartshop .cartlist>.entry>span{
    display:block;
}

.smartshop .cartlist>.entry>span.name{
    width:200px;
}

.smartshop .cartlist>.entry>span.name>a{
    color:#fff;
    text-decoration-color:#fff;
    cursor:pointer;
}

.smartshop .cartlist>.entry>span.price{
    width:90px;
    text-align:center;
}

.smartshop .cartlist>.entry>span.removefromcart{
    width:16px;
    cursor:pointer;
}



.smartshop .cartfooter {
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    justify-content:center;
}

.smartshop .cartfooter .total {
    font-weight:500;
}

.smartshop .cartfooter .total {
    font-weight:500;
}

.smartshop .cartfooter>a{
    color:#fff;
    text-decoration-color:#fff;
    font-weight:500;
    cursor:pointer;
}

@media (min-width: 360px) {
    .smartshop .cartlist>.entry>span.name{
        width:240px;
    }
}

@media (min-width: 400px) {
    .smartshop.cart {
        width:400px;
        margin-right:4px;
    }
    .smartshop .cartlist>.entry>span.name{
        width:240px;
    }
}