/* =====================================================
   SHOP BUTTON
   ===================================================== */

.shop-button{
    flex:1;
    height:44px;
    margin:0;
    padding:0 1rem;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:8px;

    background:#e3e3e3;
    color:rgb(163,28,28);

    font-weight:500;
    font-size:1rem;
    line-height:1;

    cursor:pointer;
    transition:all .25s ease;
    box-sizing:border-box;
}


@media (hover: hover) and (pointer: fine) {

    .shop-button:hover{
        background:#7f1d1d;
        color:#fff;
    }

}

.shop-button:active{
    background:#7f1d1d;
    color:#fff;
}



/* =====================================================
   BUTTON STATUS
   ===================================================== */

.shop-button-success{
    background:#b91c1c !important;
    color:#fff !important;
}

.shop-button-warning{
    background:#eedb33 !important;
    color:#923737 !important;
}

.shop-button-error{
    background:#dc2626 !important;
    color:#fff !important;
}
/* =====================================================
   WARENKORB-PUNKT (Artikel im Warenkorb)
   ===================================================== */

.shop-cart-dot{
    width:18px;
    height:18px;
    flex-shrink:0;
    border-radius:50%;
    background:#22c55e;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    display:none;
}

.shop-product.is-in-cart .shop-cart-dot{
    display:block;
}



/* =====================================================
   PRODUKT
   ===================================================== */

.shop-product{

    display:flex;
    align-items:center;
    gap:12px;

    width:100%;
    margin-top:12px;

}

.shop-qty{

    width:70px;
    height:44px;

    padding:0 .5rem;
    margin:0;

    text-align:center;
    font-size:1rem;

    border:1px solid #9ca3af;
    border-radius:8px;

    box-sizing:border-box;
    flex-shrink:0;

}

@media (max-width:768px){

    .shop-product{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:12px;
        position:relative;
    }

    .shop-product p{
        margin:0 !important;
        width:auto;
    }

    .shop-qty{
        width:80px;
    }

    .shop-button{
        display:flex !important;
        justify-content:center;
        align-items:center;

        width:100% !important;
        max-width:none !important;
        flex:none !important;

        margin:0 !important;
    }

    .shop-cart-dot{
        position:absolute;
        right:0;
        top:50%;
        transform:translateY(-50%);
    }

}

.prose .shop-product{
    display:flex;
    align-items:center;
    gap:12px;
}

.prose .shop-product p{
    margin:0 !important;
    padding:0 !important;
    display:flex;
}

.prose .shop-qty{
    width:70px;
    height:44px;
    margin:0;
}

.prose .shop-button{
    height:44px;
    margin:0;
    flex:1;
}

/* =====================================================
   WARENKORB-ICON + BADGE
   ===================================================== */

.shop-cart-svg{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.shop-cart-badge{
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);

    min-width:24px;
    height:24px;

    padding:0 6px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#b91c1c;
    color:#fff;

    font-size:14px;
    font-weight:600;
    line-height:1;

    border:2px solid #fff;
    border-radius:9999px;

    box-sizing:border-box;

    pointer-events:none;
}

.shop-cart-badge-empty{
    display:none;
}