@media(max-width:800px){
/* Consistent cart feedback, followed by one compact cart control. */
html body #toast.cart-notice{display:flex;align-items:center;justify-content:space-between;width:410px;max-width:calc(100vw - 32px);height:72px;min-height:72px;padding:12px 14px 12px 18px;gap:16px;border-radius:22px;text-align:left;box-sizing:border-box;background:rgba(24,19,16,.94);border:1px solid #f1f0e929;box-shadow:0 8px 28px #0004;font:14px/1.35 Arial,Helvetica,sans-serif}
html body #toast.cart-notice .toast-message{flex:1;min-width:0}
html body #toast.cart-notice .toast-cart-action{flex:0 0 162px;width:162px;height:44px;min-height:44px;max-width:none;padding:8px 12px;margin:0;font:13px/1.2 Arial,Helvetica,sans-serif;white-space:nowrap;border-radius:999px;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07}
html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;right:24px;bottom:24px;width:56px;height:56px;min-height:56px;max-width:56px;padding:0;border:0;border-radius:50%;box-shadow:0 5px 18px #0005,inset 0 1px 2px #ffd4b14d;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07}
html body button.floating-cart.button>span{display:none}
html body button.floating-cart.button>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
html body button.floating-cart.button{transition:none!important}
.cart-morph-proxy{position:fixed;right:24px;bottom:24px;width:56px;height:56px;z-index:21;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;border:0;border-radius:50%;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07;box-shadow:0 5px 18px #0005;overflow:hidden;cursor:pointer}
.cart-morph-label{position:absolute;white-space:nowrap;font:13px/1.2 Arial,Helvetica,sans-serif}
.cart-morph-proxy svg{position:absolute;width:24px;height:24px;opacity:0;fill:none;stroke:currentColor;stroke-width:1.6}
html:has(dialog[open]) .cart-morph-proxy,html.catalog-sheet-open .cart-morph-proxy{visibility:hidden;pointer-events:none}
@media(max-width:800px){
 html body #toast.cart-notice{height:72px;min-height:72px;padding:10px 12px;gap:10px;font-size:13px}
 html body #toast.cart-notice .toast-cart-action{flex-basis:148px;width:148px;font-size:12px;padding:8px}
 html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]),.cart-morph-proxy{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 html.standalone-dock body button.floating-cart.button:not(.is-cart-hidden):not([hidden]),html.standalone-dock .cart-morph-proxy{bottom:var(--dock-toast-bottom,calc(82px + env(safe-area-inset-bottom,0px)))}
}
@media(max-width:360px){html body #toast.cart-notice{gap:8px;font-size:12px}html body #toast.cart-notice .toast-cart-action{flex-basis:136px;width:136px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.cart-morph-proxy{display:none}}

}

@media(max-width:800px){
 html body #toast.cart-notice{width:max-content;max-width:calc(100vw - 32px);height:48px;min-height:48px;padding:6px 12px;gap:10px;border-radius:18px;left:50%;right:auto;font-size:12px;justify-content:center;white-space:nowrap}
 html body #toast.cart-notice.with-cart{height:52px;min-height:52px;padding:6px 8px 6px 12px;gap:10px}
 html body #toast.cart-notice .toast-cart-action{width:auto;flex:0 0 auto;height:38px;min-height:38px;padding:8px 10px;font-size:11px}
 .cart-burst{position:fixed;z-index:22;pointer-events:none;background:linear-gradient(180deg,#ff803d,#ff641f);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#100a07}
 .cart-burst svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
 .cart-burst-dot{position:fixed;width:6px;height:6px;margin:-3px;background:#ff792e;border-radius:50%;z-index:22;pointer-events:none}
}

/* Do not restart the opacity transition when the absorption animation releases its fill. */
html body #toast.is-absorbing{transition:none!important;pointer-events:none!important}

@media(max-width:800px){
 html body #toast.is-absorbing{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
 .cart-absorb-outline{position:fixed;z-index:19;overflow:visible;pointer-events:none;transform-origin:center}
}

/* The original toast stays hidden while its single SVG copy deforms. */
html body #toast.is-absorbing{visibility:hidden!important;opacity:0!important}

/* Desktop shares the approved mobile feedback, with hover expansion only here. */
@media(min-width:801px){
html body #toast.cart-notice{display:flex;align-items:center;justify-content:space-between;width:410px;max-width:calc(100vw - 32px);height:72px;min-height:72px;padding:12px 14px 12px 18px;gap:16px;border-radius:22px;text-align:left;box-sizing:border-box;background:rgba(24,19,16,.94);border:1px solid #f1f0e929;box-shadow:0 8px 28px #0004;font:14px/1.35 Arial,Helvetica,sans-serif}
html body #toast.cart-notice .toast-message{flex:1;min-width:0}
html body #toast.cart-notice .toast-cart-action{flex:0 0 162px;width:162px;height:44px;min-height:44px;max-width:none;padding:8px 12px;margin:0;font:13px/1.2 Arial,Helvetica,sans-serif;white-space:nowrap;border-radius:999px;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07}
html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;right:24px;bottom:24px;width:56px;height:56px;min-height:56px;max-width:56px;padding:0;border:0;border-radius:50%;box-shadow:0 5px 18px #0005,inset 0 1px 2px #ffd4b14d;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07}
html body button.floating-cart.button>span{display:none}
html body button.floating-cart.button>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
html body button.floating-cart.button{transition:none!important}
.cart-morph-proxy{position:fixed;right:24px;bottom:24px;width:56px;height:56px;z-index:21;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;border:0;border-radius:50%;background:linear-gradient(180deg,#ff803d,#ff641f 55%,#ed5418);color:#100a07;box-shadow:0 5px 18px #0005;overflow:hidden;cursor:pointer}
.cart-morph-label{position:absolute;white-space:nowrap;font:13px/1.2 Arial,Helvetica,sans-serif}
.cart-morph-proxy svg{position:absolute;width:24px;height:24px;opacity:0;fill:none;stroke:currentColor;stroke-width:1.6}
html:has(dialog[open]) .cart-morph-proxy,html.catalog-sheet-open .cart-morph-proxy{visibility:hidden;pointer-events:none}

 html body #toast.cart-notice{width:max-content;height:48px;min-height:48px;padding:8px 16px;gap:14px;border-radius:20px;font-size:13px}
 html body #toast.cart-notice.with-cart{height:56px;min-height:56px;padding:8px 10px 8px 16px}
 html body #toast.cart-notice .toast-cart-action{width:auto;flex:0 0 auto;height:40px;min-height:40px;padding:9px 14px;font-size:12px}
 html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]){box-sizing:border-box;justify-content:flex-start;gap:0;padding:0 16px;border-radius:28px;overflow:hidden;transition:width 300ms cubic-bezier(.22,1,.36,1),max-width 300ms cubic-bezier(.22,1,.36,1),gap 300ms ease!important}
 html body button.floating-cart.button>svg{flex:0 0 24px}
 html body button.floating-cart.button>span{display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:14px;transition:opacity 150ms ease,max-width 300ms ease}
 .cart-absorb-outline{position:fixed;z-index:19;overflow:visible;pointer-events:none;transform-origin:center}
 .cart-burst{position:fixed;z-index:22;pointer-events:none;background:linear-gradient(180deg,#ff803d,#ff641f);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#100a07}
 .cart-burst svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
 .cart-burst-dot{position:fixed;width:6px;height:6px;margin:-3px;background:#ff792e;border-radius:50%;z-index:22;pointer-events:none}
 html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]):focus-visible{width:210px;max-width:210px;gap:10px}
 html body button.floating-cart.button:focus-visible>span{max-width:150px;opacity:1}
}
@media(min-width:801px) and (hover:hover) and (pointer:fine){
 html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]):hover{width:210px;max-width:210px;gap:10px}
 html body button.floating-cart.button:hover>span{max-width:150px;opacity:1;transition-delay:70ms}
}
@media(min-width:801px) and (prefers-reduced-motion:reduce){html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]),html body button.floating-cart.button>span{transition:none!important}}
/* Align desktop cart with the hero arrow's vertical axis. */
@media(min-width:801px){
 html body button.floating-cart.button:not(.is-cart-hidden):not([hidden]){justify-content:center;right:calc(3vw + 2px)}
 .cart-morph-proxy{right:calc(3vw + 2px)}
}

/* Installed app uses its existing cart navigation. */
@media(display-mode:standalone){html body button.floating-cart.button,.cart-morph-proxy,.cart-absorb-outline,.cart-burst,.cart-burst-dot{display:none!important}}
html.standalone-dock body button.floating-cart.button,html.standalone-dock .cart-morph-proxy,html.standalone-dock .cart-absorb-outline,html.standalone-dock .cart-burst,html.standalone-dock .cart-burst-dot{display:none!important}
