/* Product gallery controls: opaque contrast on every blue popup header. */
.hero-popup-close {
  color: #082c50;
  background: #fff;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hero-popup-close:hover, .hero-popup-close:active {
  color: #082c50;
  background: #eaf1ff;
}
.hero-popup-close:focus-visible {
  outline: 3px solid #ffc857;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #082c50;
}
.hero-popup-header { padding-right: 76px; }
.hero-popup-cta-secondary {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A zero-basis flex title can collapse beside the product badge even though
   the document itself fits the phone. Give each header item its own row. */
@media (max-width: 980px) {
  .hero-popup-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  .hero-popup-eyebrow { justify-self: start; }
  .hero-popup-title {
    min-width: 0;
    width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
}