/**
 * Last-load card image fix.
 * Wrapper hugs the photo (no blank bar). On-image controls are transparent icons.
 */

html body .ipa-prompt-grid,
html body .masonry-grid,
html body #ipaPromptGrid,
html body .related-grid,
html body .related-section .related-grid {
  align-items: start !important;
}

html body .prompt-card,
html body .ipa-extracted-card,
html body .ipa-grid-item {
  align-self: start !important;
  height: auto !important;
}

html body .prompt-card .card-image-wrapper,
html body .ipa-extracted-card .card-image-wrapper,
html body.ipa-layout-magazine .prompt-card .card-image-wrapper,
html body.ipa-layout-masonry .prompt-card .card-image-wrapper,
html body.ipa-layout-grid2 .prompt-card .card-image-wrapper,
html body.ipa-layout-grid3 .prompt-card .card-image-wrapper,
html body.ipa-layout-grid4 .prompt-card .card-image-wrapper,
html body.ipa-layout-stack .prompt-card .card-image-wrapper {
  position: relative !important;
  display: block !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  line-height: 0 !important;
  justify-content: flex-start !important;
}

html body .prompt-card .card-image-wrapper::before,
html body .prompt-card .card-image-wrapper::after,
html body.ipa-layout-masonry .card-image-wrapper::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
}

html body .prompt-card .card-image-wrapper > .card-image-link,
html body .prompt-card .card-image-wrapper a.card-image-link,
html body.ipa-layout-magazine .prompt-card .card-image-wrapper > .card-image-link,
html body.ipa-layout-masonry .prompt-card .card-image-wrapper > .card-image-link,
html body.ipa-layout-grid4 .prompt-card .card-image-wrapper > .card-image-link {
  position: relative !important;
  display: block !important;
  inset: auto !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

html body .prompt-card .card-image-wrapper img,
html body .prompt-card .card-image-wrapper .card-image-link img,
html body.ipa-layout-magazine .prompt-card .card-image-wrapper img,
html body.ipa-layout-masonry .prompt-card .card-image-wrapper img,
html body.ipa-layout-masonry .prompt-card:nth-child(n) .card-image-wrapper img,
html body.ipa-layout-grid4 .prompt-card .card-image-wrapper img {
  position: static !important;
  display: block !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: top center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  vertical-align: top !important;
}

@media (max-width: 767px) {
  html body .prompt-card .card-image-wrapper,
  html body .card-image-wrapper {
    aspect-ratio: auto !important;
    height: auto !important;
    padding-top: 0 !important;
  }
  html body .prompt-card .card-image-wrapper > .card-image-link,
  html body .card-image-wrapper > .card-image-link,
  html body .card-image-wrapper a.card-image-link {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }
  html body .prompt-card .card-image-wrapper img,
  html body .card-image-wrapper img,
  html body .card-image-wrapper .card-image-link img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

html body.ipa-imgfit-cover .prompt-card .card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
}
html body.ipa-imgfit-cover .prompt-card .card-image-wrapper > .card-image-link {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}
html body.ipa-imgfit-cover .prompt-card .card-image-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Overlay action buttons: only on the card the mouse is over */
html body .card-image-overlay,
html body.ipa-sitedesign .card-image-overlay {
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  bottom: 36px !important;
  left: auto !important;
  inset: auto 10px 36px auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  background: transparent !important;
  z-index: 7 !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

html body .prompt-card:hover .card-image-overlay,
html body .prompt-card:focus-within .card-image-overlay,
html body .card-image-wrapper:hover .card-image-overlay,
html body .card-image-wrapper:focus-within .card-image-overlay,
html body.ipa-sitedesign .prompt-card:hover .card-image-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Footer 4 outline buttons — not overlay glass. Copy is themed separately. */
html body .prompt-card .action-row-top .action-btn-sm:not(.ipa-act-copy),
html body .ipa-extracted-card .action-row-top .action-btn-sm:not(.ipa-act-copy),
html body.ipa-sitedesign .prompt-card .action-row-top .action-btn-sm:not(.ipa-act-copy) {
  background: var(--sd-card, #fff) !important;
  background-image: none !important;
  color: var(--sd-p, var(--primary, #C45C7A)) !important;
  border: 1px solid color-mix(in srgb, var(--sd-p, #C45C7A) 22%, transparent) !important;
  border-radius: var(--sd-br, 10px) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}
html body .prompt-card .action-row-top .action-btn-sm:not(.ipa-act-copy) i,
html body .ipa-extracted-card .action-row-top .action-btn-sm:not(.ipa-act-copy) i {
  color: inherit !important;
  filter: none !important;
  text-shadow: none !important;
}
html body .prompt-card .action-row-top .action-btn-sm:not(.ipa-act-copy):hover,
html body .ipa-extracted-card .action-row-top .action-btn-sm:not(.ipa-act-copy):hover {
  background: color-mix(in srgb, var(--sd-p, #C45C7A) 10%, var(--sd-card, #fff)) !important;
  color: var(--sd-p, var(--primary, #C45C7A)) !important;
  border-color: var(--sd-p, var(--primary, #C45C7A)) !important;
  transform: none !important;
}
html body .prompt-card .action-row-top .action-btn-sm:not(.ipa-act-copy):hover i,
html body .ipa-extracted-card .action-row-top .action-btn-sm:not(.ipa-act-copy):hover i {
  color: var(--sd-p, var(--primary, #C45C7A)) !important;
}

/* Copy = same fill as header Gallery / Explore (theme gradient) */
html body .prompt-card .action-row-top .ipa-act-copy,
html body .ipa-extracted-card .action-row-top .ipa-act-copy,
html body.ipa-sitedesign .prompt-card .action-row-top .action-btn-sm.ipa-act-copy,
html body.ipa-sitedesign .ah-gallery-btn,
html body.ipa-sitedesign .btn-hero-primary {
  background: var(--sd-grad) !important;
  background-color: var(--sd-p) !important;
  background-image: var(--sd-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sd-br, 10px) !important;
  box-shadow: var(--sd-sh) !important;
  -webkit-text-fill-color: #fff !important;
}
html body .prompt-card .action-row-top .ipa-act-copy i,
html body .prompt-card .action-row-top .ipa-act-copy .action-label,
html body .prompt-card .action-row-top .ipa-act-copy span,
html body .ipa-extracted-card .action-row-top .ipa-act-copy i,
html body .ipa-extracted-card .action-row-top .ipa-act-copy .action-label,
html body.ipa-sitedesign .prompt-card .action-row-top .ipa-act-copy i,
html body.ipa-sitedesign .prompt-card .action-row-top .ipa-act-copy .action-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  filter: none !important;
  text-shadow: none !important;
}

/* On-image overlay buttons: tinted glass + theme icon colors */
html body .card-overlay-btn,
html body .card-image-overlay .card-overlay-btn,
html body a.card-overlay-btn,
html body button.card-overlay-btn,
html body.ipa-sitedesign .card-overlay-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 22%, transparent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 42%, transparent) !important;
  border-radius: var(--sd-br, 12px) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .card-overlay-btn i,
html body .card-image-overlay .card-overlay-btn i,
html body.ipa-sitedesign .card-overlay-btn i,
html body .card-overlay-btn.ipa-act-view i,
html body .card-overlay-btn.ipa-act-like i,
html body .card-overlay-btn.ipa-act-share i,
html body .card-overlay-btn.ipa-act-save i {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

html body .card-overlay-btn:hover,
html body .card-image-overlay .card-overlay-btn:hover,
html body.ipa-sitedesign .card-overlay-btn:hover {
  background: color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 72%, transparent) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 80%, transparent) !important;
  transform: scale(1.06) !important;
}
html body .card-overlay-btn:hover i,
html body.ipa-sitedesign .card-overlay-btn:hover i {
  color: #fff !important;
}

/* On-image chips: tinted glass + theme icon/text colors */
html body .ipa-views-chip,
html body .ipa-time-chip,
html body .ipa-zoom-chip,
html body .card-image-wrapper .model-tag,
html body .card-image-wrapper .card-badges .model-tag,
html body .image-wrapper .model-badge-overlay,
html body .image-wrapper .image-overlay-like,
html body.ipa-sitedesign .ipa-views-chip,
html body.ipa-sitedesign .ipa-time-chip,
html body.ipa-sitedesign .card-image-wrapper .model-tag,
html body.ipa-sitedesign .image-wrapper .model-badge-overlay {
  background: color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sd-p, var(--primary, #C45C7A)) 38%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  filter: none !important;
  text-shadow: none !important;
}

html body .ipa-views-chip,
html body .ipa-views-chip i,
html body .ipa-time-chip,
html body .ipa-time-chip i,
html body .ipa-zoom-chip,
html body .ipa-zoom-chip i,
html body .card-image-wrapper .model-tag,
html body .card-image-wrapper .model-tag i,
html body .card-image-wrapper .model-tag span,
html body .image-wrapper .model-badge-overlay,
html body .image-wrapper .model-badge-overlay i,
html body .image-wrapper .model-badge-overlay span,
html body .image-wrapper .image-overlay-like,
html body .image-wrapper .image-overlay-like i {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

html body.ipa-time-c-br .ipa-time-chip {
  bottom: 10px !important;
  right: 10px !important;
  top: auto !important;
  left: auto !important;
  z-index: 6 !important;
}

html body.ipa-views-c-bl .ipa-views-chip {
  bottom: 10px !important;
  left: 10px !important;
  top: auto !important;
  right: auto !important;
  z-index: 6 !important;
}