/* Short composited transitions, with no extra scripts or animation library. */
@media(prefers-reduced-motion:no-preference){
 .page.active{animation:achar-page-in .2s ease-out both}
 .account-dropdown:not([hidden]){animation:achar-menu-in .16s ease-out both;transform-origin:top right}
 .category-children:not([hidden]){animation:achar-menu-in .18s ease-out both}
 .category-row-icon .ui-icon{transition:transform .18s ease-out}
 .admin-dialog[open],.marketing-report-dialog[open]{animation:achar-panel-in .2s ease-out both}
 .product-detail:not(.hidden) .product-detail-panel{animation:achar-panel-in .22s ease-out both}
 .drawer.open .drawer-panel{animation:achar-panel-in .2s ease-out both}
 :is(.primary,.ghost,.category-row-icon,.account-dropdown button,.bottom-nav button){transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
 :is(.primary,.ghost,.category-row-icon):active{transform:scale(.98)}
 @media(hover:hover) and (pointer:fine){.product-card{transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out}.product-image img{transition:transform .25s ease-out}.product-card:hover .product-image img{transform:scale(1.025)}}
}
.category-row-icon.leaf{cursor:pointer;color:inherit;font:inherit}
@keyframes achar-page-in{from{opacity:.6;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes achar-menu-in{from{opacity:.45;translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes achar-panel-in{from{opacity:.4;translate:0 9px}to{opacity:1;translate:0 0}}