/* Interaction feedback follows the existing Wildomi controls and real UI state. */
.wmui .product-media-stage { overflow: hidden; border-radius: 8px; }
.wmui .package-option { position: relative; }
.wmui .package-option:has(input:checked) {
  border-color: var(--ocean, #123f3c);
  background: var(--sage, #e7ebdf);
  box-shadow: inset 0 0 0 1px var(--ocean, #123f3c);
}
.wmui .image-tabs button:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.button,.co-button) {
    transition: background-color .2s ease, border-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.button,.co-button):not(:disabled):active { transform: scale(.975); }
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.button,.co-button) > span {
    display: inline-block;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
  }
  html:not([data-motion-paused="true"]) .wmui .package-option {
    transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
  }
  html:not([data-motion-paused="true"]) .wmui .image-tabs button {
    transition: border-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }
  html:not([data-motion-paused="true"]) .wmui .image-tabs button.active { transform: translateY(-3px); }
  html:not([data-motion-paused="true"]) .wmui details summary > span {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  html:not([data-motion-paused="true"]) .wmui .round-arrow {
    transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .25s ease;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.button,.co-button):not(:disabled):hover { transform: translateY(-2px); }
  html:not([data-motion-paused="true"]) .wmui :is(.btn,.button,.co-button):not(:disabled):hover > span { transform: translate(2px,-2px); }
  html:not([data-motion-paused="true"]) .wmui .animal-visual:hover .round-arrow { transform: rotate(7deg); background: var(--lime,#d4ed75); }
  html:not([data-motion-paused="true"]) .wmui .product-tile .tile-photo > img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
  html:not([data-motion-paused="true"]) .wmui .product-tile > a:hover .tile-photo > img { transform: scale(1.045); }
  html:not([data-motion-paused="true"]) .wmui .image-tabs button:not(.active):hover { transform: translateY(-2px); }
}

html[data-motion-paused="true"] .wmui :is(.btn,.button,.co-button,.package-option,.image-tabs button,.round-arrow,details summary > span,.product-tile .tile-photo > img),
html[data-motion-paused="true"] .wmui :is(.btn,.button,.co-button) > span { transition: none; }
html[data-motion-paused="true"] .wmui :is(.btn,.button,.co-button,.image-tabs button,.round-arrow,.product-tile .tile-photo > img),
html[data-motion-paused="true"] .wmui :is(.btn,.button,.co-button) > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wmui :is(.btn,.button,.co-button,.package-option,.image-tabs button,.round-arrow,details summary > span,.product-tile .tile-photo > img),
  .wmui :is(.btn,.button,.co-button) > span { transition: none; }
  .wmui :is(.btn,.button,.co-button,.image-tabs button,.round-arrow,.product-tile .tile-photo > img),
  .wmui :is(.btn,.button,.co-button) > span { transform: none; }
}