/* Seasonal surfaces only. Status badges and their semantic colours stay intact. */
body.ascend-halloween .ascend-status {
  --status-line: rgba(255, 156, 77, .26);
  --status-muted: #c8b9c4;
}

body.ascend-halloween .ascend-status__intro {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-right: clamp(12rem, 25vw, 16rem);
  overflow: hidden;
  border: 1px solid rgba(255, 156, 77, .3);
  border-radius: 22px;
  background: radial-gradient(ellipse at 0 0, #6b302147, transparent 70%),
    linear-gradient(115deg, #21131e, #15101d);
  box-shadow: 0 18px 55px #0004, inset 0 1px #ffd0a111;
}

body.ascend-halloween .ascend-status__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../images/halloween-moon.svg') right -18px top -34px / 235px auto no-repeat,
    url('../images/halloween-pumpkins.svg') right 100px bottom -9px / 155px auto no-repeat;
  opacity: .78;
}

body.ascend-halloween .ascend-status__eyebrow {
  color: #ffb46c;
}

body.ascend-halloween .ascend-status__intro h1 {
  color: #fff0e1;
  text-shadow: 0 0 35px #ff7a2520;
  overflow-wrap: anywhere;
}

body.ascend-halloween .ascend-status__intro p {
  max-width: 34rem;
  color: #d1bdc7;
}

body.ascend-halloween .ascend-status__product {
  border-color: var(--status-line);
  background: linear-gradient(110deg, #271820f5, #16111df5);
  box-shadow: 0 8px 28px #0003, inset 0 1px #ffd0a108;
}

body.ascend-halloween .ascend-status__product:hover {
  border-color: #ffad6580;
  background: linear-gradient(110deg, #352026, #1f1627);
}

body.ascend-halloween .ascend-status__product:focus-visible {
  outline-color: #ffc38b;
}

body.ascend-halloween .ascend-status__image {
  border-color: #ffa45a40;
  background: #f9731612;
  color: #ffbd83;
}

body.ascend-halloween .ascend-status__name {
  color: #fff0e6;
}

body.ascend-halloween .ascend-status__arrow {
  color: #c89774;
}

body.ascend-halloween .ascend-status__empty {
  border-color: var(--status-line);
  background: linear-gradient(115deg, #261820, #17111d);
}

@media (max-width: 600px) {
  body.ascend-halloween .ascend-status__intro {
    min-height: 0;
    padding: 1.4rem 1.2rem 6rem;
    border-radius: 18px;
  }

  body.ascend-halloween .ascend-status__intro::before {
    background-size: 155px auto, 135px auto;
    background-position: right -12px bottom -28px, left 4px bottom -8px;
    opacity: .7;
  }
}