/* ---------- card: left screen edge se juri hui ---------- */
body.single-product #dwcsp-widget{
    position:fixed;left:0;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    z-index:9990;
    display:flex;align-items:stretch;
    width:min(320px,calc(100vw - 72px));min-height:84px;
    margin:0;padding:0;box-sizing:border-box;
    background:#fff;color:#354448;
    border:1px solid #e2d9ce;border-left:0;
    border-radius:0 20px 20px 0;
    box-shadow:none;
    font-family:inherit;text-transform:none;letter-spacing:normal;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s;
}
#dwcsp-widget[hidden],
#dwcsp-tab[hidden]{display:none!important}
#dwcsp-widget *{box-sizing:border-box}

/* band hone par left mein sarak jata hai */
body.single-product #dwcsp-widget.is-off,
body.single-product #dwcsp-tab.is-off{
    transform:translateX(-112%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;
}

/* ---------- photo: screen ke kinare tak ---------- */
#dwcsp-widget .dwcsp-photo{
    position:relative;flex:0 0 54px;overflow:hidden;background:#e2d9ce;
}
#dwcsp-widget .dwcsp-photo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(53,68,72,0) 60%,rgba(53,68,72,.18));
}
#dwcsp-widget .dwcsp-photo img{
    position:absolute;top:0;left:0;display:block;
    width:100%;height:100%;max-width:none;
    margin:0;padding:0;border:0;border-radius:0;object-fit:cover;
}

/* ---------- naam, price, buttons ---------- */
#dwcsp-widget .dwcsp-body{
    flex:1;min-width:0;display:grid;gap:6px;align-content:center;padding:10px 12px;
}
#dwcsp-widget .dwcsp-name{
    display:block;margin:0;font-size:11.5px;font-weight:600;line-height:1.3;
    color:#6f8084;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#dwcsp-widget .dwcsp-row{display:flex;align-items:center;gap:8px;min-width:0}
#dwcsp-widget .dwcsp-price{
    flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.1;
    color:#354448;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-variant-numeric:tabular-nums;
}
#dwcsp-widget .dwcsp-price small{
    font-size:10.5px;font-weight:600;color:#6f8084;margin-left:3px;
}

#dwcsp-widget .dwcsp-cart,
#dwcsp-widget .dwcsp-wa{
    appearance:none;-webkit-appearance:none;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin:0;border:0;box-shadow:none;
    text-decoration:none;text-transform:none;letter-spacing:0;
    font-family:inherit;cursor:pointer;transform:none;
    transition:background .2s;
}
#dwcsp-widget .dwcsp-cart{
    gap:6px;height:40px;min-height:0;padding:0 14px 0 12px;
    border-radius:20px;background:#354448;color:#fff;
    font-size:12.5px;font-weight:700;line-height:1;
}
#dwcsp-widget .dwcsp-cart:hover{background:#46595e}
#dwcsp-widget .dwcsp-cart:disabled{opacity:.65;cursor:not-allowed}
#dwcsp-widget .dwcsp-cart[data-state="done"]{background:#4f7a5b;opacity:1}
#dwcsp-widget .dwcsp-cart[data-state="busy"]{cursor:progress}
#dwcsp-widget .dwcsp-wa{
    width:40px;height:40px;min-height:0;padding:0;border-radius:50%;
    background:#e2d9ce;color:#354448;
}
#dwcsp-widget .dwcsp-wa:hover{background:#d4c6b5;color:#354448}
#dwcsp-widget .dwcsp-cart::before,
#dwcsp-widget .dwcsp-cart::after,
#dwcsp-widget .dwcsp-wa::before,
#dwcsp-widget .dwcsp-wa::after,
#dwcsp-tab::before,
#dwcsp-tab::after{content:none!important;display:none!important}
#dwcsp-widget .dwcsp-cart:focus-visible,
#dwcsp-widget .dwcsp-wa:focus-visible,
#dwcsp-widget .dwcsp-x:focus-visible,
#dwcsp-tab:focus-visible{outline:3px solid #b7a48e;outline-offset:2px}

#dwcsp-widget .dwcsp-cart svg{
    display:block;width:19px;height:19px;flex-shrink:0;
    fill:none!important;stroke:currentColor!important;stroke-width:1.7;
}
#dwcsp-widget .dwcsp-wa svg{
    display:block;width:22px;height:22px;flex-shrink:0;
    fill:currentColor!important;stroke:none!important;
}

/* button ka text: Add / Add to cart, Adding..., Added */
#dwcsp-widget .dwcsp-label{white-space:nowrap}
#dwcsp-widget .dwcsp-lg,
#dwcsp-widget .dwcsp-busy,
#dwcsp-widget .dwcsp-done{display:none}
#dwcsp-widget .dwcsp-cart[data-state="busy"] .dwcsp-idle,
#dwcsp-widget .dwcsp-cart[data-state="done"] .dwcsp-idle{display:none}
#dwcsp-widget .dwcsp-cart[data-state="busy"] .dwcsp-busy,
#dwcsp-widget .dwcsp-cart[data-state="done"] .dwcsp-done{display:inline}

#dwcsp-widget .dwcsp-spinner{
    display:none;width:16px;height:16px;flex-shrink:0;font-style:normal;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;
}
#dwcsp-widget .dwcsp-cart[data-state="busy"] .dwcsp-spinner{
    display:block;animation:dwcsp-spin .65s linear infinite;
}
#dwcsp-widget .dwcsp-cart[data-state="busy"] svg{display:none}
@keyframes dwcsp-spin{to{transform:rotate(360deg)}}

/* close (x) badge */
#dwcsp-widget .dwcsp-x{
    appearance:none;-webkit-appearance:none;
    position:absolute;top:-11px;right:-11px;
    display:flex;align-items:center;justify-content:center;
    width:24px;height:24px;min-height:0;margin:0;padding:0;
    border:2px solid #fff;border-radius:50%;
    background:#354448;color:#fff;box-shadow:none;cursor:pointer;
    transition:background .2s;
}
#dwcsp-widget .dwcsp-x:hover{background:#46595e}
#dwcsp-widget .dwcsp-x::before,
#dwcsp-widget .dwcsp-x::after{content:none!important;display:none!important}
#dwcsp-widget .dwcsp-x svg{
    display:block;width:10px;height:10px;
    fill:none!important;stroke:currentColor!important;stroke-width:3;
}

/* band hone ke baad: chhota photo-tab */
body.single-product #dwcsp-tab{
    appearance:none;-webkit-appearance:none;
    position:fixed;left:0;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    z-index:9990;
    display:flex;align-items:center;justify-content:center;
    width:42px;height:68px;min-height:0;margin:0;padding:0;box-sizing:border-box;
    border:1px solid #e2d9ce;border-left:0;border-radius:0 16px 16px 0;
    background-color:#354448;background-size:cover;background-position:center;
    color:#fff;box-shadow:none;cursor:pointer;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s;
}
#dwcsp-tab svg{
    display:block;width:23px;height:23px;
    fill:none!important;stroke:currentColor!important;stroke-width:1.7;
}

/* chhote phone (370px se kam): Add sirf icon */
@media(max-width:369px){
    #dwcsp-widget .dwcsp-label{display:none}
    #dwcsp-widget .dwcsp-cart{width:40px;padding:0;border-radius:50%}
}

/* desktop aur tablet: bara card, poora "Add to cart", phir bhi left side */
@media(min-width:768px){
    body.single-product #dwcsp-widget{
        bottom:28px;width:460px;min-height:98px;border-radius:0 24px 24px 0;
    }
    #dwcsp-widget .dwcsp-photo{flex-basis:86px}
    #dwcsp-widget .dwcsp-body{padding:14px 20px;gap:8px}
    #dwcsp-widget .dwcsp-name{font-size:13px}
    #dwcsp-widget .dwcsp-price{font-size:22px}
    #dwcsp-widget .dwcsp-price small{font-size:12px}
    #dwcsp-widget .dwcsp-cart{
        height:46px;padding:0 20px 0 18px;border-radius:23px;font-size:13.5px;
    }
    #dwcsp-widget .dwcsp-lg{display:inline}
    #dwcsp-widget .dwcsp-sh{display:none}
    #dwcsp-widget .dwcsp-wa{width:46px;height:46px}
    body.single-product #dwcsp-tab{bottom:28px;width:46px;height:72px}
}

@media(prefers-reduced-motion:reduce){
    body.single-product #dwcsp-widget,
    body.single-product #dwcsp-tab,
    body.single-product #dwcsp-widget.is-off,
    body.single-product #dwcsp-tab.is-off{transition:none}
    #dwcsp-widget .dwcsp-cart[data-state="busy"] .dwcsp-spinner{animation-duration:2s}
}