/* Short, action-led motion in the storefront's existing visual language. */
:root{--motion-fast:160ms;--motion-enter:240ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
.add,.review,.cart-btn,.qty button,.close{transition:background-color var(--motion-fast),transform var(--motion-fast) var(--motion-ease)}
.add:active:not(:disabled),.review:active:not(:disabled),.cart-btn:active,.qty button:active{transform:scale(.97)}
.pic>svg,.pic>img{transition:transform 260ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.product:hover .pic>svg,.product:hover .pic>img{transform:scale(1.035)}.add:hover:not(:disabled),.review:hover:not(:disabled),.cart-btn:hover{background-color:#174b43}}
dialog[open]{animation:storefront-dialog-in var(--motion-enter) var(--motion-ease)}
dialog[open]::backdrop{animation:storefront-backdrop-in 180ms ease-out}
.toast{animation:storefront-toast-in 200ms var(--motion-ease);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
#badge{display:inline-block;transform-origin:center}
.add[data-added]{background-color:#28715d}
@keyframes storefront-dialog-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes storefront-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes storefront-toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:650px){.toast{bottom:calc(100px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.product:hover .pic>svg,.product:hover .pic>img,.add:active:not(:disabled),.review:active:not(:disabled),.cart-btn:active,.qty button:active{transform:none}}

.cart-flight{position:fixed!important;z-index:10000;pointer-events:none;object-fit:contain;filter:drop-shadow(0 8px 12px #125b5033)}
@media(prefers-reduced-motion:no-preference){.subcategory-list{animation:category-reveal 220ms var(--motion-ease)}.fill{transition:width 450ms var(--motion-ease)}}
@keyframes category-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}