.ecsf-cart{position:fixed;inset:0 0 0 auto;margin:0;border:0;width:min(480px,100%);max-width:100%;height:100vh;height:100dvh;max-height:100dvh;padding:24px;background:var(--ecsf-bg);color:var(--ecsf-text);box-sizing:border-box;overflow:auto}.ecsf-cart:not([open]){display:none}.ecsf-cart::backdrop{background:rgb(0 0 0/.45)}.ecsf-cart-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.ecsf-cart-heading h2{font-family:var(--ecsf-font-display);font-size:30px;font-weight:400;margin:0}.ecsf-cart-heading small{font:400 14px var(--ecsf-font-body);color:var(--ecsf-muted)}.ecsf-cart-heading button{width:44px;height:44px;background:none;color:inherit;border:0;font-size:30px;cursor:pointer}.ecsf-cart a{color:inherit}.ecsf-cart :focus-visible{outline:2px solid var(--ecsf-focus);outline-offset:3px}
/* Initial dialog focus is an announcement target, not an interactive control.
   Override legacy global focus decoration only on this heading. */
.ecsf-cart #ecsf-cart-title:focus{outline:none!important;box-shadow:none!important}.ecsf-cart .ecsf-cart-heading button{border-radius:50%}.ecsf-cart .ecsf-cart-heading button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ecsf-cart-loading{display:none;color:var(--ecsf-muted);font:400 14px/1.5 var(--ecsf-font-body)}.ecsf-cart[data-loading] .ecsf-cart-loading{display:block;margin:auto}.ecsf-cart[data-loading] #ecsf-cart-root{display:none}
/* Keep legacy page-wide heading/paragraph/span colors from overriding the bag's
   current browsing palette. Keep provider-owned express buttons untouched.
   Load this with the shell so the heading and loading state are protected too. */
body.ecsf #ecsf-cart :where(h1,h2,h3,h4,h5,h6,p,li,span,a,button):not(:where(.ecsf-cart-gateways,.ecsf-cart-gateways *,.ecsf-cart-checkout,.ecsf-cart-checkout *)){color:inherit!important;-webkit-text-fill-color:currentColor!important}
body.ecsf #ecsf-cart :is(.ecsf-cart-heading small,.ecsf-cart-loading,.ecsf-cart-item p,.ecsf-cart-secondary,.ecsf-cart-update,.ecsf-cart-express-label,[role=status]):not(:where(.ecsf-cart-gateways,.ecsf-cart-gateways *,.ecsf-cart-checkout,.ecsf-cart-checkout *)){color:var(--ecsf-muted)!important}
body.ecsf #ecsf-cart a.ecsf-cart-checkout{color:var(--ecsf-cart-button-text)!important}

/* Checkout text is a child span: a directly assigned legacy page color beats
   inherited link color. Own its contrast in the shell AND lazy runtime CSS. */
body.ecsf #ecsf-cart a.ecsf-cart-checkout .ecsf-cart-checkout-label{color:inherit!important;-webkit-text-fill-color:currentColor!important}