/* Cache-busting corrective layer for the delayed Populous preview. */
.flpop .flpop-card__preview[hidden] { display: none !important; }

.flpop-card {
  --flpop-tilt-x: 0deg;
  --flpop-tilt-y: 0deg;
}

.flpop-card:hover {
  border-color: rgba(224, 71, 47, .62);
  box-shadow: 0 20px 38px rgba(36, 36, 36, .18), 0 0 0 3px rgba(224, 71, 47, .08);
  transform: perspective(900px) translateY(-8px) rotateX(var(--flpop-tilt-x)) rotateY(var(--flpop-tilt-y)) !important;
}

.flpop-card__visual {
  --flpop-pointer-x: 50%;
  --flpop-pointer-y: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 0 rgba(224, 71, 47, 0);
  transition: box-shadow .35s ease;
}

.flpop-card__visual::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at var(--flpop-pointer-x) var(--flpop-pointer-y), rgba(255, 180, 90, .42), rgba(224, 71, 47, .12) 24%, transparent 52%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .25s ease, transform .4s ease;
}

.flpop-card__visual:hover { box-shadow: inset 0 0 0 3px rgba(224, 71, 47, .24), inset 0 -24px 48px rgba(224, 71, 47, .08); }
.flpop-card__visual:hover::before { opacity: 1; transform: scale(1); }

.flpop-card__image {
  position: relative;
  z-index: 1;
  transition: transform .55s cubic-bezier(.16, .8, .2, 1), filter .4s ease, opacity .35s ease;
}

.flpop-card__visual:hover .flpop-card__image {
  filter: drop-shadow(0 18px 18px rgba(36, 36, 36, .24)) saturate(1.16);
  transform: scale(1.13) rotate(-1deg);
}

.flpop-card__preview {
  position: absolute;
  z-index: 8;
  inset: .45rem;
  display: flex;
  flex-direction: column;
  padding: .8rem .85rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, rgba(28, 28, 28, .97), rgba(79, 31, 24, .96));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
  pointer-events: none;
  opacity: 0;
  transform: translateY(108%) scale(.94);
  transition: opacity .3s ease, transform .45s cubic-bezier(.18, .8, .2, 1);
}

.flpop-card.is-preview-open .flpop-card__preview { opacity: 1; transform: translateY(0) scale(1); }
.flpop-card.is-preview-open .flpop-card__image { filter: blur(7px) saturate(.6); opacity: .2; transform: scale(1.2); }

.flpop-card__preview-kicker { margin-bottom: .28rem; color: #ffbd78; font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.flpop-card__preview-name { display: -webkit-box; overflow: hidden; color: #fff; font-size: .9rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.flpop-card__preview-text { display: -webkit-box; margin: .38rem 0; overflow: hidden; color: rgba(255, 255, 255, .82); font-size: .7rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.flpop-card__preview-meta { display: flex; align-items: center; justify-content: space-between; gap: .45rem; margin-top: auto; color: rgba(255, 255, 255, .68); font-size: .61rem; }
.flpop-card__preview-stock { display: inline-flex; align-items: center; gap: .28rem; color: #fff; text-align: right; }
.flpop-card__preview-stock::before { width: 6px; height: 6px; flex: 0 0 6px; content: ""; background: #a6a6a6; border-radius: 50%; }
.flpop-card__preview-stock--available::before { background: #65d681; box-shadow: 0 0 7px rgba(101, 214, 129, .8); }
.flpop-card__preview-stock--order::before { background: #ffbd78; box-shadow: 0 0 7px rgba(255, 189, 120, .7); }
.flpop-card__preview-stock--unavailable::before { background: #ff766c; }
.flpop-card__preview-cta { margin-top: .42rem; color: #fff; font-size: .68rem; font-weight: 850; }
.flpop-card__preview-cta > span { display: inline-block; margin-left: .2rem; color: #ffbd78; }

@media (hover: none), (pointer: coarse) {
  .flpop-card__preview { display: none !important; }
  .flpop-card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .flpop-card:hover { transform: none !important; }
  .flpop-card__preview { transition: opacity .15s linear; }
}