.product-card.storefront-card,
.gallery-card,
.hero-mini-card {
  transform-style: preserve-3d;
}

.product-card.storefront-card {
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, border-color .32s ease;
}

.product-card.storefront-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(24, 39, 51, .16);
  border-color: rgba(62, 113, 139, .24);
}

.product-art,
.gallery-card,
.hero-mini-card {
  isolation: isolate;
}

.product-art::before,
.gallery-card::after,
.hero-mini-card .soleia-hover-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.34) 43%, rgba(255,255,255,0) 62%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.28), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(10, 18, 24, 0) 58%, rgba(10, 18, 24, .20));
  opacity: 0;
  transform: translateX(-32%) skewX(-10deg);
  transition: opacity .36s ease, transform .72s cubic-bezier(.2, .8, .2, 1);
}

.product-card.storefront-card:hover .product-art::before,
.product-card.storefront-card.soleia-card-hovering .product-art::before,
.product-card.storefront-card:focus-within .product-art::before,
.product-link-area:hover .product-art::before,
.product-link-area:focus-visible .product-art::before,
.gallery-card:hover::after,
.hero-mini-card:hover .soleia-hover-frame::after {
  opacity: 1;
  transform: translateX(34%) skewX(-10deg);
}

.product-photo {
  transform-origin: center;
  transition:
    opacity .52s cubic-bezier(.2, .8, .2, 1),
    transform .72s cubic-bezier(.2, .8, .2, 1),
    filter .52s ease !important;
}

.product-photo:not(.product-photo-secondary) {
  transform: scale(1.012);
}

.product-photo-secondary {
  opacity: 0;
  position: absolute;
  inset: 0;
  transform: scale(1.075);
  filter: saturate(.94) contrast(.98);
}

.product-card.storefront-card:hover .product-photo:not(.product-photo-secondary),
.product-card.storefront-card.soleia-card-hovering .product-photo:not(.product-photo-secondary),
.product-card.storefront-card:focus-within .product-photo:not(.product-photo-secondary),
.product-link-area:hover .product-photo:not(.product-photo-secondary),
.product-link-area:focus-visible .product-photo:not(.product-photo-secondary) {
  opacity: 0 !important;
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

.product-card.storefront-card:hover .product-photo-secondary,
.product-card.storefront-card.soleia-card-hovering .product-photo-secondary,
.product-card.storefront-card:focus-within .product-photo-secondary,
.product-link-area:hover .product-photo-secondary,
.product-link-area:focus-visible .product-photo-secondary {
  opacity: 1 !important;
  transform: scale(1.015);
  filter: saturate(1.08) contrast(1.03);
}

.product-link-area:hover + .product-copy .product-title-link h3,
.product-card:hover .product-title-link h3 {
  color: #2f6680;
}

.soleia-hover-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}

.soleia-hover-primary,
.soleia-hover-secondary {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity .52s cubic-bezier(.2, .8, .2, 1),
    transform .72s cubic-bezier(.2, .8, .2, 1),
    filter .52s ease;
}

.soleia-hover-primary {
  display: block;
  transform: scale(1.012);
}

.soleia-hover-secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.075);
  filter: saturate(.94) contrast(.98);
}

.hero-mini-card:hover .soleia-hover-primary,
.gallery-card:hover .soleia-hover-primary {
  opacity: 0;
  transform: scale(1.035);
}

.hero-mini-card:hover .soleia-hover-secondary,
.gallery-card:hover .soleia-hover-secondary {
  opacity: 1;
  transform: scale(1.015);
  filter: saturate(1.08) contrast(1.03);
}

.hero-mini-card .soleia-hover-frame {
  width: 82px;
  height: 102px;
  border-radius: 16px;
  flex: 0 0 auto;
}

.hero-mini-card .hero-mini-photo {
  width: 100%;
  height: 100%;
}

.gallery-card .soleia-hover-frame {
  position: absolute;
  inset: 0;
}

.gallery-card .gallery-photo {
  position: static;
}

@media (hover: none), (pointer: coarse) {
  .product-card.storefront-card:hover,
  .hero-mini-card:hover {
    transform: none;
  }

  .product-photo,
  .soleia-hover-primary,
  .soleia-hover-secondary {
    transition-duration: .28s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card.storefront-card,
  .product-photo,
  .soleia-hover-primary,
  .soleia-hover-secondary,
  .product-art::before,
  .gallery-card::after,
  .hero-mini-card .soleia-hover-frame::after {
    transition: none !important;
  }
}