/* Transitions remain subtle and do not hide content when scripts are unavailable. */
@media(prefers-reduced-motion:no-preference){
  .primary,.secondary,.brand-tabs button,.filters button,.add,.floating-whatsapp{transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease,border-color .22s ease}
  .primary:active,.secondary:active,.add:active{transform:scale(.97)}
  .product-image.clean-cover>img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .cart-row{animation:bag-row-in .25s ease both}
  #toast{animation:toast-in .25s ease both}
  dialog::backdrop{animation:backdrop-in .2s ease both}
  @media(hover:hover){
    .primary:hover,.secondary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #30372915}
    .brand-tabs button:hover,.filters button:hover{transform:translateY(-2px)}
    .product-image.clean-cover:hover>img{transform:scale(1.045)}
    .add:hover{transform:rotate(90deg);border-color:#555a3d}
    .floating-whatsapp:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0003}
  }
}
@keyframes bag-row-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes backdrop-in{from{background-color:transparent}to{background-color:#25291a88}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}