/* Optional motion: content remains visible until a finite animation starts. */
@media screen and (prefers-reduced-motion:no-preference) {
  html.motion-ready .motion-enter {
    animation:motion-enter 420ms cubic-bezier(.2,.65,.3,1) var(--motion-delay,0ms) 1;
  }

  html.motion-ready :is(a.button,.section-head>a)>.icon,
  html.motion-ready :is(.add-button,.buy-row .button)>.icon {
    transition:transform 180ms ease;
  }

  html.motion-ready :is(a.button,.section-head>a):focus-visible>.icon {
    transform:translateX(3px);
  }

  html.motion-ready :is(.add-button,.buy-row .button):focus-visible>.icon {
    transform:rotate(90deg);
  }

  html.motion-ready .product-picture {
    transition:box-shadow 180ms ease;
  }

  html.motion-ready .product-card:focus-within .product-picture {
    box-shadow:0 5px 16px #0002;
  }

  html.motion-ready .category {
    transition:border-color 180ms ease,box-shadow 180ms ease;
  }

  html.motion-ready .category:focus-visible {
    border-color:var(--accent);
    box-shadow:0 3px 12px #0001;
  }

  html.motion-ready .category-panel[open]>nav,
  html.motion-ready .field-filters[open]>div {
    animation:motion-panel 180ms ease-out 1;
  }

  html.motion-ready .motion-cart {
    animation:motion-cart 280ms ease-out 1;
  }

  html.motion-ready .toast.motion-toast:not([hidden]) {
    animation:motion-toast 220ms ease-out 1;
  }

  @media (hover:hover) and (pointer:fine) {
    html.motion-ready :is(a.button,.section-head>a):hover>.icon {
      transform:translateX(3px);
    }

    html.motion-ready :is(.add-button,.buy-row .button):hover>.icon {
      transform:rotate(90deg);
    }

    html.motion-ready .product-card:hover .product-picture {
      box-shadow:0 5px 16px #0002;
    }

    html.motion-ready .category:hover {
      box-shadow:0 3px 12px #0001;
    }
  }

  @media (max-width:760px) {
    html.motion-ready .main-nav.open {
      animation:motion-panel 180ms ease-out 1;
    }
  }
}

@keyframes motion-enter {
  from {opacity:.84;transform:translateY(8px)}
  to {opacity:1;transform:translateY(0)}
}

@keyframes motion-panel {
  from {opacity:.86;transform:translateY(-3px)}
  to {opacity:1;transform:translateY(0)}
}

@keyframes motion-cart {
  0%,100% {transform:scale(1)}
  45% {transform:scale(1.12)}
}

@keyframes motion-toast {
  from {opacity:.82;transform:translate(-50%,6px)}
  to {opacity:1;transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce),print {
  html.motion-ready .motion-enter,
  html.motion-ready .motion-cart,
  html.motion-ready .motion-toast,
  html.motion-ready .main-nav.open,
  html.motion-ready .category-panel[open]>nav,
  html.motion-ready .field-filters[open]>div {
    animation:none!important;
  }

  html.motion-ready :is(a.button,.section-head>a,.add-button,.buy-row .button)>.icon,
  html.motion-ready .product-picture,
  html.motion-ready .category {
    transition:none!important;
  }
}