.banner-palette-orange {
  --custom-banner-start: #8f2d00;
  --custom-banner-end: #b94305;
  --custom-banner-accent: #ffd2b9;
  --custom-banner-text: #fff;
}

.banner-palette-graphite {
  --custom-banner-start: #ffff00;
  --custom-banner-end: #ffff00;
  --custom-banner-accent: #0000ff;
  --custom-banner-text: #14161a;
}

.banner-palette-graphite .custom-banner-mark {
  color: #ffff00;
  background: #14161a;
  border-color: rgba(20,22,26,.32);
}

.banner-palette-blue {
  --custom-banner-start: #001b67;
  --custom-banner-end: #003aa5;
  --custom-banner-accent: #c7e2ff;
  --custom-banner-text: #fff;
}

.banner-palette-red {
  --custom-banner-start: #711816;
  --custom-banner-end: #9e2821;
  --custom-banner-accent: #ffd0cc;
  --custom-banner-text: #fff;
}

.custom-listing-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 9px 15px;
  overflow: hidden;
  color: var(--custom-banner-text);
  background: linear-gradient(112deg, var(--custom-banner-start), var(--custom-banner-end));
  border-left: 5px solid var(--custom-banner-accent);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 22px rgba(20,22,26,.12);
  transform-origin: 50% 50%;
}

.custom-listing-banner::after {
  position: absolute;
  inset: -45%;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.custom-banner-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--custom-banner-accent);
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.custom-banner-copy { min-width: 0; }
.custom-banner-copy small {
  display: block;
  color: var(--custom-banner-accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.custom-banner-copy strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--custom-banner-text);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.banner-motion-pulse::after {
  background: radial-gradient(circle, rgba(255,255,255,.38) 0, rgba(255,255,255,0) 62%);
  opacity: 0;
  animation: custom-banner-pulse 2.4s ease-in-out 3;
}

.banner-motion-shimmer::after {
  inset: -60% auto -60% -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg) translateX(-450%);
  animation: custom-banner-shimmer 2.8s ease-in-out 3;
}

.banner-motion-slide { animation: custom-banner-slide 520ms cubic-bezier(.22,.8,.28,1) both; }

@keyframes custom-banner-pulse {
  0%, 100% { opacity: 0; transform: scale(.72); }
  45% { opacity: .42; transform: scale(1.08); }
}

@keyframes custom-banner-shimmer {
  0%, 38% { transform: skewX(-18deg) translateX(-450%); }
  72%, 100% { transform: skewX(-18deg) translateX(900%); }
}

@keyframes custom-banner-slide {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 430px) {
  .custom-listing-banner { gap: 9px; min-height: 48px; padding: 8px 12px; }
  .custom-banner-mark { width: 28px; height: 28px; font-size: 12px; }
  .custom-banner-copy strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-listing-banner,
  .custom-listing-banner::after { animation: none !important; }
}