/**
 * Product Card Interaction — rc.47.7
 * Progressive enhancement for mouse, keyboard and touch-capable layouts.
 */
.hdfl-product-card--interactive {
  isolation: isolate;
  transition:
    transform 360ms cubic-bezier(.2, .7, .2, 1),
    border-color 360ms ease,
    box-shadow 360ms ease,
    background-color 360ms ease;
}

.hdfl-product-card--interactive::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  content: "";
  transition: border-color 360ms ease;
}

.hdfl-product-card--interactive .hdfl-product-card__media::after {
  position: absolute;
  z-index: 2;
  inset: 48% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(20 17 13 / 12%));
  content: "";
  opacity: 0;
  transition: opacity 360ms ease;
}

.hdfl-product-card--interactive .hdfl-product-card__media > a {
  position: relative;
}

.hdfl-product-card--interactive .hdfl-product-card__image {
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
  transition:
    opacity 480ms ease,
    transform 560ms cubic-bezier(.2, .7, .2, 1),
    filter 360ms ease;
  will-change: opacity, transform;
}

.hdfl-product-card--interactive .hdfl-product-card__image--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hdfl-product-card--interactive .hdfl-product-card__title h3 a,
.hdfl-product-card--interactive .hdfl-product-card__arrow,
.hdfl-product-card--interactive .hdfl-product-card__details {
  transition:
    color 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease,
    transform 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .hdfl-product-card--interactive:hover,
  .hdfl-product-card--interactive:focus-within {
    z-index: 3;
    border-color: color-mix(in srgb, var(--hdfl-color-ink) 18%, var(--hdfl-color-border));
    box-shadow: 0 18px 42px rgb(30 24 18 / 13%);
    transform: translateY(-6px);
  }

  .hdfl-product-card--interactive:hover::after,
  .hdfl-product-card--interactive:focus-within::after {
    border-color: color-mix(in srgb, var(--hdfl-color-ink) 10%, transparent);
  }

  .hdfl-product-card--interactive:hover .hdfl-product-card__media::after,
  .hdfl-product-card--interactive:focus-within .hdfl-product-card__media::after {
    opacity: 1;
  }

  .hdfl-product-card--interactive:hover .hdfl-product-card__image--primary,
  .hdfl-product-card--interactive:focus-within .hdfl-product-card__image--primary {
    filter: brightness(1.02);
    transform: translateZ(0) scale(1.055);
  }

  .hdfl-product-card--has-secondary-image:hover .hdfl-product-card__image--primary,
  .hdfl-product-card--has-secondary-image:focus-within .hdfl-product-card__image--primary {
    opacity: 0;
  }

  .hdfl-product-card--has-secondary-image:hover .hdfl-product-card__image--secondary,
  .hdfl-product-card--has-secondary-image:focus-within .hdfl-product-card__image--secondary {
    filter: brightness(1.025);
    opacity: 1;
    transform: translateZ(0) scale(1.055);
  }

  .hdfl-product-card--interactive:hover .hdfl-product-card__arrow,
  .hdfl-product-card--interactive:focus-within .hdfl-product-card__arrow {
    border-color: var(--hdfl-color-border);
    transform: translate(2px, -2px);
  }
}

@media (hover: none), (pointer: coarse) {
  .hdfl-product-card--interactive {
    transform: none;
  }

  .hdfl-product-card--interactive .hdfl-product-card__image--secondary {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdfl-product-card--interactive,
  .hdfl-product-card--interactive::after,
  .hdfl-product-card--interactive .hdfl-product-card__media::after,
  .hdfl-product-card--interactive .hdfl-product-card__image,
  .hdfl-product-card--interactive .hdfl-product-card__title h3 a,
  .hdfl-product-card--interactive .hdfl-product-card__arrow,
  .hdfl-product-card--interactive .hdfl-product-card__details {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }

  .hdfl-product-card--interactive:hover,
  .hdfl-product-card--interactive:focus-within,
  .hdfl-product-card--interactive:hover .hdfl-product-card__image,
  .hdfl-product-card--interactive:focus-within .hdfl-product-card__image {
    transform: none;
  }
}