/* Interaction feedback for real UI state: press, hover, the adoption toggles, the bag and the bottom bars. */
.wmui .product-media-stage{overflow:hidden}
.wmui .image-tabs button:focus-visible{outline-offset:4px}
/* Ghosts are short-lived copies drawn by motion-ui.js: the previous price while it rolls away, the previous hero photograph while it fades. */
.wm-roll-ghost{position:absolute;margin:0;white-space:nowrap;pointer-events:none;user-select:none}
.wm-hero-ghost{position:absolute;z-index:2;max-width:none;margin:0;object-fit:cover;pointer-events:none}
.wmui .bag-next strong{display:inline-block}
.wmui .bag-bar small{transform-origin:0 50%}
.wmui .bag-meter-fill{transform-origin:0 50%}
/* Bottom bars leave the screen while the footer is in view, so it reads in full; they return on the way back up. */
html[data-footer-near="true"] .wmui :is(.sticky-cta,.bag-bar){translate:0 calc(100% + 24px);visibility:hidden}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.co-button,.co-chip-button){transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.co-button,.co-chip-button):not(:disabled):active{transform:scale(.97)}
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.co-button)>span[aria-hidden]{display:inline-block;transition:transform .3s var(--ease-out)}
  html:not([data-motion-paused="true"]) .wmui .image-tabs button{transition:box-shadow .2s ease,transform .25s var(--ease-out)}
  html:not([data-motion-paused="true"]) .wmui .image-tabs button[aria-pressed="true"]{transform:translateY(-2px)}
  /* Tiles and chips that navigate or filter: a lighter press than buttons, because they are larger. */
  html:not([data-motion-paused="true"]) .wmui :is(.product-tile>a,.inc-tile>a,.animal-row-photos,.animal-row-photo){transition:transform .16s var(--ease-out)}
  html:not([data-motion-paused="true"]) .wmui :is(.product-tile>a,.inc-tile>a,.animal-row-photos,.animal-row-photo):active{transform:scale(.985)}
  html:not([data-motion-paused="true"]) .wmui :is(.filter-bar button,.co-trip-chips a,.footer-controls button){transition:background-color .18s ease,transform .16s var(--ease-out)}
  html:not([data-motion-paused="true"]) .wmui :is(.filter-bar button,.co-trip-chips a,.footer-controls button):active{transform:scale(.96)}
  /* Bottom bars enter and leave through the bottom edge they live on; the exit is a little quicker. */
  html:not([data-motion-paused="true"]) .wmui :is(.sticky-cta,.bag-bar){transition:translate .3s var(--ease-out),display .3s allow-discrete}
  html:not([data-motion-paused="true"]) .wmui :is(.sticky-cta,.bag-bar)[hidden]{translate:0 calc(100% + 24px);transition-duration:.2s}
  html[data-footer-near="true"]:not([data-motion-paused="true"]) .wmui :is(.sticky-cta,.bag-bar){transition:translate .2s var(--ease-out),visibility 0s linear .2s}
  @starting-style{
    html:not([data-motion-paused="true"]) .wmui :is(.sticky-cta,.bag-bar):not([hidden]){translate:0 calc(100% + 24px)}
  }
  /* Set by motion-ui.js when the bag re-renders a bar that was already on screen. */
  html:not([data-motion-paused="true"]) .wmui :is(.sticky-cta,.bag-bar)[data-motion-instant]{transition:none}
}
/* The phone menu drops from the header it belongs to. */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px){
  html:not([data-motion-paused="true"]) .wmui #navigation.open{transition:opacity .18s var(--ease-out),translate .18s var(--ease-out)}
  @starting-style{
    html:not([data-motion-paused="true"]) .wmui #navigation.open{opacity:0;translate:0 -8px}
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.co-button):not(:disabled):hover>span[aria-hidden]{transform:translate(2px,-2px)}
}
@media (prefers-reduced-motion: reduce){.wmui *{transition-duration:.01ms!important}}