/*
 * Shop Popup — a site-wide promo modal: a white centred text column (title /
 * subtitle / CTA / skip link) beside a cover image, with a circular close
 * button in the popup's top-right corner. Below 768px the two columns stack
 * into one (text first, image below).
 *
 * THEME IMMUNITY: themes (Blonwe and friends) ship blanket rules for `button`,
 * `a` and `svg`, which repainted the CTA, hid the stroke-drawn × and broke the
 * layout. Every rule here is therefore scoped under .espop-overlay and the
 * layout/paint-critical properties are forced, so the popup renders identically
 * on any theme. Override these from a child theme with equal-or-higher
 * specificity if a site needs different values.
 *
 * Configurable values arrive as CSS custom properties on .espop-overlay
 * (printed by shop_popup_render()); the fallbacks below apply when a setting is
 * missing.
 */

/* Body scroll lock while the popup is open (added by shop-popup.js). */
.espop-body-lock {
  overflow: hidden !important;
}

/* ---- Overlay ---- */
.espop-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  background-color: var(--espop-overlay-bg, rgba(0, 0, 0, 0.6)) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * The popup stays hidden until the script opens it. This rule is required:
 * the author-level `display: flex` above would otherwise beat the browser's
 * default `[hidden] { display: none }`.
 */
.espop-overlay[hidden] {
  display: none !important;
}

/* ---- Dialog ---- */
.espop-overlay .espop-dialog {
  position: relative !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  max-width: var(--espop-width, 880px) !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: var(--espop-radius, 18px) !important;
  background-color: #ffffff !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28) !important;
  text-align: left !important;
}

/* No image set → the text column takes the full width. */
.espop-overlay .espop-dialog--no-media {
  grid-template-columns: 1fr !important;
}

/* ---- Close button (popup top-right) ---- */
.espop-overlay .espop-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #222222 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.espop-overlay .espop-close:hover,
.espop-overlay .espop-close:focus {
  background-color: #222222 !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

/*
 * The × is drawn with strokes. Themes that force `svg { fill: currentColor }`
 * or `svg { stroke: none }` leave the button blank, so the stroke is re-forced
 * on both the svg and its lines.
 */
.espop-overlay .espop-close svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.espop-overlay .espop-close svg line {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

/* ---- Left column: text + actions ---- */
.espop-overlay .espop-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: var(--espop-padding, 40px) !important;
  border: 0 !important;
  background-color: #ffffff !important;
  font-family: var(--espop-font, inherit);
  text-align: center !important;
}

.espop-overlay .espop-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--espop-title-size, 42px) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: var(--espop-title-color, #222222) !important;
}

.espop-overlay .espop-subtitle {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  max-width: 34ch !important;
  font-family: inherit !important;
  font-size: var(--espop-subtitle-size, 15px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--espop-subtitle-color, #666666) !important;
}

/* CTA: full-width bar button. */
.espop-overlay .espop-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 320px !important;
  min-height: 0 !important;
  margin: 24px 0 0 !important;
  padding: 15px 24px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: var(--espop-cta-bg, #b1814b) !important;
  background-image: none !important;
  color: var(--espop-cta-color, #ffffff) !important;
  font-family: inherit !important;
  font-size: var(--espop-cta-size, 13px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.espop-overlay .espop-cta:hover,
.espop-overlay .espop-cta:focus {
  background-color: var(--espop-cta-bg-hover, #96693a) !important;
  color: var(--espop-cta-color-hover, #ffffff) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Skip link: plain grey text button under the CTA. */
.espop-overlay .espop-skip {
  display: inline-block !important;
  margin: 10px 0 0 !important;
  padding: 6px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: var(--espop-skip-color, #555555) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color 0.2s ease;
}

.espop-overlay .espop-skip:hover,
.espop-overlay .espop-skip:focus {
  background-color: transparent !important;
  color: var(--espop-skip-hover, #222222) !important;
  text-decoration: none !important;
}

/* ---- Right column: cover image ---- */
.espop-overlay .espop-media {
  position: relative !important;
  min-height: var(--espop-media-height, 260px) !important;
  background-color: #f5f5f5 !important;
}

.espop-overlay .espop-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

/* ---- Mobile / small screens: single column, text first ---- */
@media (max-width: 767px) {
  .espop-overlay .espop-dialog {
    grid-template-columns: 1fr !important;
  }

  .espop-overlay .espop-title {
    font-size: calc(var(--espop-title-size, 42px) * 0.76) !important;
  }
}