/* Finite entrances and useful interaction feedback on every storefront route. */
@keyframes pp-page-in {
  from {
    opacity: 0.7;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pp-reveal {
  from {
    opacity: 0.65;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pp-photo-in {
  from {
    opacity: 0.55;
    transform: scale(1.015);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pp-confirm {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
}
@keyframes pp-dialog-in {
  from {
    opacity: 0.5;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pp-store #content {
  animation: pp-page-in 540ms var(--pp-ease) both;
}
.pp-store .pp-motion-reveal {
  animation: pp-reveal 600ms var(--pp-ease) both;
}
.pp-store .pp-photo-changing {
  animation: pp-photo-in 340ms var(--pp-ease);
}
.pp-store .pp-cart-confirm {
  animation: pp-confirm 400ms var(--pp-ease);
}
.pp-store .pp-photo-dialog[open] {
  animation: pp-dialog-in 220ms var(--pp-ease);
}
.pp-store .pp-product-details details[open] .pp-detail-body {
  animation: pp-page-in 240ms var(--pp-ease);
}
.pp-store .pp-button,
.pp-store .btn,
.pp-store .pp-size-option {
  transition:
    transform 160ms var(--pp-ease),
    background-color 180ms var(--pp-ease),
    color 180ms var(--pp-ease);
}
.pp-store .pp-button:active,
.pp-store .btn:active,
.pp-store .pp-size-option:active {
  transform: translateY(1px) scale(0.985);
}
.pp-store .pp-size-option:disabled:active,
.pp-store .pp-button:disabled:active {
  transform: none;
}
.pp-store .pp-navigation > a {
  position: relative;
}
.pp-store .pp-navigation > a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 2px;
  background: var(--pp-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--pp-ease);
}
.pp-store .pp-navigation > a:hover::after,
.pp-store .pp-navigation > a:focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pp-store #content,
  .pp-store .pp-motion-reveal,
  .pp-store .pp-photo-changing,
  .pp-store .pp-cart-confirm,
  .pp-store .pp-photo-dialog[open],
  .pp-store .pp-product-details details[open] .pp-detail-body {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .pp-store .pp-button:active,
  .pp-store .btn:active,
  .pp-store .pp-size-option:active {
    transform: none;
  }
  .pp-store *,
  .pp-store *::before,
  .pp-store *::after {
    transition: none !important;
  }
}