/* Design Therapy title card fixes.
   Keep the card scrollable on smaller screens. The shopping PNG contains
   transparent canvas around the figure, so position the visible figure—not
   merely the PNG box—at the bottom and let the details panel overlap it. */

section:has(> img[alt="A luxurious boutique design studio"]) {
  min-height: 620px !important;
  height: auto !important;
  max-height: calc(100dvh - 112px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

section:has(> img[alt="A luxurious boutique design studio"]) > div.relative.z-10 {
  min-height: 620px !important;
}

section:has(> img[alt="A luxurious boutique design studio"]) div.min-h-\[405px\] {
  min-height: 305px !important;
  overflow: visible !important;
  z-index: 1 !important;
}

img[alt$="shopping for pieces that reflect her style"] {
  left: 50% !important;
  right: auto !important;
  bottom: -305px !important;
  width: 132% !important;
  height: 470px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) scale(1.42) !important;
  transform-origin: center bottom !important;
  z-index: 1 !important;
}

/* Keep the instructions and button above the avatar so her legs and feet
   continue behind the glass panel instead of ending above it. */
section:has(> img[alt="A luxurious boutique design studio"]) div.min-h-\[405px\] + div {
  position: relative !important;
  z-index: 10 !important;
}

/* Completion card text must stay crisp—no Tailwind drop-shadow filter. */
div:has(> img[alt$="proudly celebrating her designed space"]) h4,
div:has(> img[alt$="proudly celebrating her designed space"]) p {
  filter: none !important;
  text-shadow: none !important;
}