:root {
  --sp-motion-fast: 150ms;
  --sp-motion-base: 200ms;
  --sp-motion-slow: 480ms;
  --sp-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

button,
a,
input,
select,
textarea {
  transition-duration: var(--sp-motion-fast);
  transition-timing-function: ease-out;
}

button,
a {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
}

input,
select,
textarea {
  transition-property: border-color, box-shadow, background-color;
}

.sp-search-overlay,
.sp-login-overlay,
.sp-cart-overlay,
.sp-region-backdrop {
  animation: sp-motion-fade var(--sp-motion-base) ease-out both;
}

.sp-search-dialog,
.sp-login-dialog,
.sp-region-dialog {
  animation: sp-motion-rise var(--sp-motion-base) var(--sp-motion-ease) both !important;
}

.sp-cart-modal-mini {
  transform-origin: top right;
  animation: sp-motion-cart-in 220ms var(--sp-motion-ease) both !important;
}

.sp-cart-modal-full {
  animation: sp-motion-rise 220ms var(--sp-motion-ease) both !important;
  transition: width var(--sp-motion-base) var(--sp-motion-ease), height var(--sp-motion-base) var(--sp-motion-ease);
}

.sp-cart-modal-row {
  transition: background-color var(--sp-motion-fast) ease-out;
}

.sp-cart-modal-row:hover {
  background: #fff9f7;
}

#sp-home-hero-image {
  transition: opacity var(--sp-motion-slow) ease-in-out, transform 8s ease;
}

.sp-home-hero-image-layer {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.sp-search-dialog,
.sp-login-dialog,
.sp-region-dialog,
.sp-cart-modal-mini,
.sp-cart-modal-full {
  will-change: transform, opacity;
}

@keyframes sp-motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sp-motion-rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sp-motion-cart-in {
  from { opacity: 0; transform: translateX(12px) scale(.992); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .sp-search-overlay,
  .sp-login-overlay,
  .sp-cart-overlay,
  .sp-region-backdrop,
  .sp-search-dialog,
  .sp-login-dialog,
  .sp-region-dialog,
  .sp-cart-modal-mini,
  .sp-cart-modal-full {
    animation: none !important;
    transition: none !important;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  html,
  body {
    -webkit-overflow-scrolling: touch;
  }

  .sp-home-hero-image-layer {
    animation: none !important;
    transform: none !important;
    will-change: opacity;
  }

  #sp-home-hero-image {
    transform: none !important;
    transition: opacity 260ms ease-out !important;
    will-change: auto;
  }
}

/* Hydration guard.
   Storefront pages ship the DesignCode template inline, so until the runtime
   boots the browser can paint raw bindings ("{{ tab.label }}", "{{ addedLabel }}")
   — visible on slow connections or when a script is delayed. The runtime
   replaces <x-dc> within ~150ms, so hiding it costs nothing in the normal
   case. The delayed animation is a safety net: if the runtime never boots,
   the template still reveals after 6s rather than leaving a blank page. */
x-dc {
  visibility: hidden;
  animation: spTemplateReveal 0s linear 6s forwards;
}

@keyframes spTemplateReveal {
  to { visibility: visible; }
}