/* Controls acknowledge the action without moving cards or changing the grid. */
html body .button:not(.floating-cart){transition:filter 140ms ease,box-shadow 140ms ease,background-color 140ms ease,border-color 140ms ease,color 140ms ease,translate 100ms ease!important}
@media(hover:hover) and (pointer:fine){
 html body .button:not(:disabled):not(.secondary):not(.floating-cart):hover{filter:brightness(1.06)}
 html body .button.secondary:not(:disabled):hover{background-color:rgba(255,100,31,.07);border-color:#b99073}
}
html body .button:not(:disabled):not(.floating-cart):active{translate:0 1px;filter:brightness(.97);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
html body #modal .pick-option{transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
html body #modal .pick-option:has(input:checked){background-color:rgba(255,100,31,.12);border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
html body #pick-count{font-variant-numeric:tabular-nums;border-radius:4px}
@keyframes stp-filter-enter{from{opacity:.3;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes stp-filter-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes stp-filter-backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:no-preference){
 html body #catalog-filter-sheet[open]{animation:stp-filter-enter 220ms cubic-bezier(.16,1,.3,1)}
 html body #catalog-filter-sheet[open]::backdrop{animation:stp-filter-backdrop-in 180ms ease-out}
 html body #catalog-filter-sheet.is-closing::backdrop{animation:stp-filter-backdrop-out 160ms ease-in forwards}
}
@media(prefers-reduced-motion:reduce){
 html body .button:not(.floating-cart),html body #modal .pick-option{transition:none!important}
 html body .button:active{translate:none}
 html body #catalog-filter-sheet[open],html body #catalog-filter-sheet::backdrop{animation:none}
}

/* Keep one SVG mounted: favorite state changes paint only, never geometry. */
html body #main .product-card .card-media-wrap>.icon-button.favorite>svg>path{fill:var(--orange);fill-opacity:0;stroke:currentColor;transition:fill-opacity 140ms ease,color 140ms ease}
html body #main .product-card .card-media-wrap>.icon-button.favorite.on>svg>path{fill-opacity:1}
@media(prefers-reduced-motion:reduce){html body #main .product-card .card-media-wrap>.icon-button.favorite>svg>path{transition:none}}

/* Decorative rotation runs only while visible, with the tab active. */
html body .poster-hero .poster-orbit{animation-play-state:paused!important}
html body .poster-hero .poster-orbit[data-motion-visible="true"]{animation-play-state:running!important}