/* Keep close controls visible above the modal panel on every public page. */
body .modal > .modal-close {
  position: fixed;
  z-index: 10;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #bda18b;
  border-radius: 50%;
  background: #fffaf3;
  color: #30241e;
  box-shadow: 0 3px 15px #30241e22;
  cursor: pointer;
  pointer-events: auto;
}
body .modal-close::before, body .modal-close::after {
  width: 22px;
  height: 2px;
  background: #30241e;
  pointer-events: none;
}
body .modal-close:focus-visible, body .dialog-close:focus-visible {
  outline: 3px solid #c6563e;
  outline-offset: 3px;
}
body .dialog-close {
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 1px solid #bda18b;
  border-radius: 50%;
  background: #fffaf3;
  color: #30241e;
  box-shadow: 0 2px 10px #30241e18;
}
body .dialog-close svg { pointer-events: none; }
.purchase-close-bar { position: sticky; top: 16px; height: 0; z-index: 10; pointer-events: none; }
.purchase-close-bar > .dialog-close { position: absolute; top: 0; right: 0; pointer-events: auto; }
.media-dialog .media-bar { position: sticky; top: 0; z-index: 3; background: #fffaf3; }