/* overlay */
.swell-bpp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 99998;
}
.swell-bpp-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* popup base */
.swell-bpp {
  width: min(var(--swell-bpp-width, 360px), calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow: auto;

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);

  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 99999;
}

/* open state */
.swell-bpp.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --- PC positions (>=769px) --- */
@media (min-width: 769px) {
  .swell-bpp.pos-pc-rb {
    position: fixed;
    right: var(--swell-bpp-rb-right, 16px);
    bottom: var(--swell-bpp-rb-bottom, 16px);
    transform: translateY(16px);
  }
  .swell-bpp.pos-pc-lb { position: fixed; left: 16px; bottom: 16px; transform: translateY(16px); }
  .swell-bpp.pos-pc-center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); }

  .swell-bpp.pos-pc-rb.is-open,
  .swell-bpp.pos-pc-lb.is-open { transform: translateY(0); }

  .swell-bpp.pos-pc-center.is-open { transform: translate(-50%, -50%) scale(1); }
}

/* --- SP positions (<=768px) --- */
@media (max-width: 768px) {
  .swell-bpp.pos-sp-rb {
    position: fixed;
    right: var(--swell-bpp-rb-right, 12px);
    bottom: var(--swell-bpp-rb-bottom, 12px);
    transform: translateY(16px);
  }
  .swell-bpp.pos-sp-lb { position: fixed; left: 12px; bottom: 12px; transform: translateY(16px); }
  .swell-bpp.pos-sp-center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); }

  .swell-bpp.pos-sp-rb.is-open,
  .swell-bpp.pos-sp-lb.is-open { transform: translateY(0); }

  .swell-bpp.pos-sp-center.is-open { transform: translate(-50%, -50%) scale(1); }
}

.swell-bpp__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
  color: #333;
}

.swell-bpp__body {
  padding: 0 16px 16px;
}

/* SWELL側の要素が大きすぎる場合の保険 */
.swell-bpp .wp-block-image img {
  height: auto;
}