.j7-mbp3d-host {
  position: relative !important;
}

.j7-mbp3d {
  --mbp3d-width: 168px;
  --mbp3d-duration: 8s;
  --mbp3d-depth: 5px;
  z-index: 12;
  display: block;
  width: var(--mbp3d-width);
  max-width: 100%;
  margin: 0;
  aspect-ratio: 1.62 / 1;
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
  isolation: isolate;
  perspective: 900px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.j7-mbp3d--hero-desktop,
.j7-mbp3d--hero-mobile {
  position: absolute;
  top: 0;
  left: 0;
}

.j7-mbp3d--hero-mobile-inline {
  --mbp3d-depth: 4px;
  position: relative;
  flex: 0 0 auto;
  margin: 0 !important;
  filter: drop-shadow(0 11px 17px rgba(0, 0, 0, 0.38));
}

.j7-mbp3d-mobile-inline-slot {
  position: relative !important;
  display: flex !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  margin: 28px 0 10px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  text-align: center !important;
  transform: none !important;
  overflow: visible !important;
}

.j7-mbp3d--hero-mobile {
  --mbp3d-depth: 3px;
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.3));
}

.j7-mbp3d--hero-desktop[data-mbp3d-status="preparing"],
.j7-mbp3d--hero-mobile[data-mbp3d-status="preparing"] {
  visibility: hidden;
}

.j7-mbp3d--no-safe-zone {
  display: none !important;
}

.j7-mbp3d-slot,
.j7-mbp3d-footer-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.j7-mbp3d--explicit-slot {
  position: relative;
  inset: auto;
}

.j7-mbp3d--footer {
  --mbp3d-width: var(--mbp3d-footer-desktop-width, 128px);
  position: relative;
  margin: 34px auto 42px;
}

.j7-mbp3d__stage,
.j7-mbp3d__card,
.j7-mbp3d__face {
  display: block;
  width: 100%;
  height: 100%;
}

.j7-mbp3d__stage {
  perspective: 900px;
  -webkit-perspective: 900px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.j7-mbp3d--spin-rescue .j7-mbp3d__stage {
  animation: j7-mbp3d-rescue var(--mbp3d-duration) linear infinite;
  -webkit-animation: j7-mbp3d-rescue var(--mbp3d-duration) linear infinite;
}

.j7-mbp3d__card {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  animation: j7-mbp3d-continuous var(--mbp3d-duration) linear infinite;
  -webkit-animation: j7-mbp3d-continuous var(--mbp3d-duration) linear infinite;
}

.j7-mbp3d--paused .j7-mbp3d__card,
.j7-mbp3d--paused .j7-mbp3d__stage,
.j7-mbp3d--paused .j7-mbp3d__face::after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.j7-mbp3d__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(243, 146, 0, 0.86);
  border-radius: 13px;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.j7-mbp3d--hero-mobile .j7-mbp3d__face,
.j7-mbp3d--hero-mobile-inline .j7-mbp3d__face {
  border-radius: 7px;
}

.j7-mbp3d__face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.2) 43%, transparent 58%);
  transform: translateX(-145%);
  animation: j7-mbp3d-shine var(--mbp3d-duration) ease-in-out infinite;
  -webkit-animation: j7-mbp3d-shine var(--mbp3d-duration) ease-in-out infinite;
  pointer-events: none;
}

.j7-mbp3d__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.j7-mbp3d__face--front {
  transform: rotateY(0deg) translateZ(var(--mbp3d-depth));
  -webkit-transform: rotateY(0deg) translateZ(var(--mbp3d-depth));
}

.j7-mbp3d__face--back {
  transform: rotateY(180deg) translateZ(var(--mbp3d-depth));
  -webkit-transform: rotateY(180deg) translateZ(var(--mbp3d-depth));
}

.j7-mbp3d__edge {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: calc(50% - var(--mbp3d-depth));
  width: calc(var(--mbp3d-depth) * 2);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffb020, #f39200 48%, #9e5500);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.j7-mbp3d__edge--left {
  transform: translateX(calc(var(--mbp3d-width) / -2 + var(--mbp3d-depth))) rotateY(90deg);
  -webkit-transform: translateX(calc(var(--mbp3d-width) / -2 + var(--mbp3d-depth))) rotateY(90deg);
}

.j7-mbp3d__edge--right {
  transform: translateX(calc(var(--mbp3d-width) / 2 - var(--mbp3d-depth))) rotateY(90deg);
  -webkit-transform: translateX(calc(var(--mbp3d-width) / 2 - var(--mbp3d-depth))) rotateY(90deg);
}

.j7-mbp3d:focus-visible {
  border-radius: 15px;
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@keyframes j7-mbp3d-continuous {
  0% { transform: rotateX(-4deg) rotateY(0deg) translateY(0) scale(1); }
  25% { transform: rotateX(1deg) rotateY(90deg) translateY(-1px) scale(0.985); }
  50% { transform: rotateX(-4deg) rotateY(180deg) translateY(-2px) scale(1); }
  75% { transform: rotateX(1deg) rotateY(270deg) translateY(-1px) scale(0.985); }
  100% { transform: rotateX(-4deg) rotateY(360deg) translateY(0) scale(1); }
}

@-webkit-keyframes j7-mbp3d-continuous {
  0% { -webkit-transform: rotateX(-4deg) rotateY(0deg) translateY(0) scale(1); }
  25% { -webkit-transform: rotateX(1deg) rotateY(90deg) translateY(-1px) scale(0.985); }
  50% { -webkit-transform: rotateX(-4deg) rotateY(180deg) translateY(-2px) scale(1); }
  75% { -webkit-transform: rotateX(1deg) rotateY(270deg) translateY(-1px) scale(0.985); }
  100% { -webkit-transform: rotateX(-4deg) rotateY(360deg) translateY(0) scale(1); }
}

@keyframes j7-mbp3d-rescue {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@-webkit-keyframes j7-mbp3d-rescue {
  from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(360deg); }
}

@keyframes j7-mbp3d-shine {
  0% { transform: translateX(-145%); }
  42%, 100% { transform: translateX(145%); }
}

@-webkit-keyframes j7-mbp3d-shine {
  0% { -webkit-transform: translateX(-145%); }
  42%, 100% { -webkit-transform: translateX(145%); }
}

@media (min-width: 1181px) {
  .j7-mbp3d--hero-mobile,
  .j7-mbp3d--hero-mobile-inline {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .j7-mbp3d--hero-desktop,
  .j7-mbp3d--hero-mobile,
  .j7-mbp3d--hero-mobile-inline {
    display: none !important;
  }

  .j7-mbp3d--footer {
    --mbp3d-width: var(--mbp3d-footer-mobile-width, 96px);
  }
}

@media (max-width: 767px) {
  .j7-mbp3d--hero-desktop {
    display: none !important;
  }

  .j7-mbp3d--footer {
    --mbp3d-width: var(--mbp3d-footer-mobile-width, 96px);
    --mbp3d-depth: 4px;
    margin-top: 28px;
    margin-bottom: 34px;
  }
}