/* Overlay */
#bw-popup-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  place-items: center;
}
#bw-popup-overlay.is-open { display: grid; }

/* Shell */
.bw-popup {
  background: #fff;
  border-radius: 8px;
  width: min(680px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "close"
    "image"
    "title"
    "body"
    "actions";
}

/* Variants */
.bw-popup--image-only { grid-template-areas: "close" "image"; padding: 0; }
.bw-popup--image-only .bw-popup__image { border-radius: 8px; }

.bw-popup--text-only { max-width: 520px; }

.bw-popup--wide { width: min(900px, 92vw); }

.bw-popup--image-left {
  grid-template-areas:
    "image close"
    "image title"
    "image body"
    "image actions";
  grid-template-columns: 1fr 2fr;
}

/* Slots */
.bw-popup__close {
  grid-area: close;
  justify-self: end;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.bw-popup__image  { grid-area: image; }
.bw-popup__image img { width: 100%; border-radius: 4px; display: block; }
.bw-popup__title  { grid-area: title; font-size: 1.4rem; font-weight: 600; margin: 0; }
.bw-popup__body   { grid-area: body; line-height: 1.6; }
.bw-popup__actions { grid-area: actions; display: flex; gap: .75rem; flex-wrap: wrap; }

/* Tokens — change brand colors here only */
:root {
  --bw-popup-accent: #b8860b;
  --bw-popup-radius: 8px;
  --bw-popup-font:   inherit;
}