/* Isolated from the existing room and hero demonstrations. */
#wardrobe .wardrobe-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
#wardrobe h2 { margin: 0 0 24px; font-size: var(--h2); line-height: 1.15; letter-spacing: -0.05em; }
#wardrobe .wardrobe-flow { margin: 28px 0 16px; font-size: 14px; line-height: 1.8; font-weight: 600; }
#wardrobe .wardrobe-note { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
#wardrobe .wardrobe-tryon { text-align: center; }
#wardrobe .wardrobe-stage { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto 24px; }
#wardrobe .wardrobe-character { display: block; width: 100%; height: 100%; }
#wardrobe .wardrobe-item { position: absolute; object-fit: fill; transform-origin: top left; }
/* Default pose on the app's 120 × 120 canvas. Figma rotation is negated. */
#wardrobe [data-item="flower"] { left: 47.5%; top: 43.333333%; width: 20.55%; height: 13.15%; }
#wardrobe [data-item="antenna"] { left: 27.5%; top: 15.833333%; width: 37.041667%; height: 16.258333%; }
#wardrobe [data-item="towel"] { left: 27.5%; top: 18.333333%; width: 60%; height: 20%; }
#wardrobe [data-item="bunny_band"] { left: 27.675%; top: 9.516667%; width: 52.833333%; height: 26.591667%; transform: rotate(2.79deg); }
#wardrobe .wardrobe-hint { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
#wardrobe .wardrobe-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#wardrobe .wardrobe-choices button { display: flex; align-items: center; flex-direction: column; gap: 12px; min-height: 112px; padding: 16px 6px; color: var(--fg); border: 1px solid var(--border); border-radius: 12px; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
#wardrobe .wardrobe-choices img { width: 56px; height: 42px; object-fit: contain; }
#wardrobe .wardrobe-choices [aria-pressed="true"] { border-color: var(--fg); background: var(--soft); box-shadow: inset 0 0 0 1px var(--fg); }
#wardrobe button:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
#wardrobe .wardrobe-remove { min-height: 44px; margin: 12px 0 0; border: 0; padding: 8px 16px; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: 14px; cursor: pointer; }
#wardrobe button:disabled { cursor: default; }
@media (max-width: 760px) {
  #wardrobe .wardrobe-layout { grid-template-columns: 1fr; }
  #wardrobe .wardrobe-stage { width: 260px; }
  #wardrobe .wardrobe-flow { font-size: 12px; }
}