/* UI01 REV4 Fidelity R1 — feature-only motion and asset fallback.
   This file must not alter the approved REV4 static visual composition. */

:root {
  --mina-motion-instant: 110ms;
  --mina-motion-fast: 190ms;
  --mina-motion-standard: 280ms;
  --mina-motion-panel: 340ms;
  --mina-motion-ease: cubic-bezier(.22,.8,.3,1);
}

[data-system-icon],
.product-card,
.flash-card,
.quick-chip,
.catalog-toggle,
.drawer-link,
.drawer-support-card,
.icon-button,
.search-clear,
.site-footer a {
  -webkit-tap-highlight-color: transparent;
}

/* Only runs during an actual asset replacement or failure. */
img.asset-is-swapping { opacity: .72; transition: opacity var(--mina-motion-fast) ease; }
img.asset-swap-complete { opacity: 1; transition: opacity var(--mina-motion-standard) ease; }
img.asset-fallback-active { opacity: .88; transition: opacity var(--mina-motion-standard) ease; }

/* Additional state feedback without changing resting appearance. */
.product-card.is-pressing,
.flash-card.is-pressing,
.drawer-link.is-pressing,
.catalog-toggle.is-pressing,
.icon-button.is-pressing { transform: scale(.985); }

.offline-bar,
.mina-toast,
.search-results,
.flash-ended-note,
.stock-badge {
  transition-property: opacity, transform, visibility;
  transition-duration: var(--mina-motion-standard);
  transition-timing-function: var(--mina-motion-ease);
}

@media (prefers-reduced-motion: reduce) {
  img.asset-is-swapping,
  img.asset-swap-complete,
  img.asset-fallback-active,
  .offline-bar,
  .mina-toast,
  .search-results,
  .flash-ended-note,
  .stock-badge {
    transition-duration: 1ms !important;
  }
  .product-card.is-pressing,
  .flash-card.is-pressing,
  .drawer-link.is-pressing,
  .catalog-toggle.is-pressing,
  .icon-button.is-pressing { transform: none !important; }
}

/* Minimal functional correction: keep the REV4 pill, but never hide a nominal.
   Only narrow mobile widths may wrap after “Mulai”; card composition remains unchanged. */
@media (max-width: 390px) {
  .product-price {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    padding-inline: 5px;
  }
}
@media (max-width: 330px) {
  .product-price { padding-inline: 3px; }
}