/* V19/V20 layout safety: media must never overlap labels, metadata or following content. */
img{display:block;max-width:100%}

/* Every visual card owns/clips its media. Text is always a separate flow block. */
.item-card,.outfit-card,.memory-card,.strip-card,.linked-outfit,.search-list button,.mini-cards button,.pair-list>div,.hotspot-linked-row,.hotspot-piece-choice{position:relative;min-width:0;overflow:hidden}
.item-photo,.outfit-cover,.outfit-collage,.detail-hero,.memory-hero{position:relative;min-width:0;overflow:hidden;isolation:isolate}
.item-photo>img,.outfit-cover>img,.detail-hero>img,.memory-hero>img,.memory-card>img,.strip-card>img,.linked-outfit>img,.search-list button>img,.pair-list img,.hotspot-linked-row img,.hotspot-piece-choice img{position:relative!important;inset:auto!important;float:none!important;transform:none;max-width:100%!important}
.item-meta,.outfit-copy,.memory-card>div,.linked-outfit>span,.search-list button>span,.hotspot-linked-row>span:last-child,.hotspot-piece-choice>span:last-child{position:relative;z-index:1;min-width:0;max-width:100%}

/* Wardrobe cards: fixed media box, metadata below it. */
.item-card{display:flex!important;flex-direction:column!important;align-items:stretch!important}
.item-photo{width:100%!important;flex:0 0 auto!important;aspect-ratio:4/5!important;height:auto!important}
.item-photo>img{width:100%!important;height:100%!important;object-fit:contain!important}
.item-meta{display:block!important;padding:9px 2px 3px!important;flex:0 0 auto!important}
.item-meta strong,.item-meta span{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Outfit feed: image and copy are separate siblings, never layered. */
.outfit-card .outfit-cover,.outfit-card .outfit-collage{flex:0 0 auto!important;z-index:0}
.outfit-card .outfit-copy{z-index:1!important;background:inherit}
@media(max-width:600px){
  .outfit-card{display:flex!important;flex-direction:column!important;gap:0!important;align-items:stretch!important}
  .outfit-card .outfit-cover{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important}
  .outfit-card .outfit-cover>img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .outfit-card .outfit-copy{display:block!important;width:100%!important;padding:12px 13px 14px!important}
  .memory-card{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .memory-card>img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;flex:0 0 auto!important}
  .memory-card>div{display:block!important;flex:0 0 auto!important}
}

/* Detail photos participate in normal document flow. Marker/CTA overlays stay inside only. */
.detail-hero,.memory-hero{display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;contain:paint}
.detail-hero>img,.memory-hero>img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
.outfit-hotspot-layer{overflow:hidden!important}
.photo-piece-overlay-cta{position:absolute!important}

/* Linked item/outfit rows use explicit media + text columns. */
.linked-outfit,.search-list button,.hotspot-linked-row,.hotspot-piece-choice{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important}
.linked-outfit>img{width:52px!important;height:60px!important;max-width:52px!important;object-fit:contain!important;grid-column:1!important}
.search-list button>img{width:46px!important;height:52px!important;max-width:46px!important;object-fit:contain!important;grid-column:1!important}
.hotspot-linked-row img,.hotspot-piece-choice img{grid-column:1!important;object-fit:contain!important}
.linked-outfit>span,.search-list button>span,.hotspot-linked-row>span:last-child,.hotspot-piece-choice>span:last-child{grid-column:2!important;overflow:hidden!important}

/* V20: cropped item preview must define its own height in normal form flow. */
.v17-item-form form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:15px!important}
.v17-item-preview{position:relative!important;display:block!important;width:min(360px,78vw)!important;height:auto!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important;margin:0 auto 14px!important;overflow:hidden!important;isolation:isolate!important;flex:0 0 auto!important}
.v17-item-preview>img{position:static!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;float:none!important;transform:none!important}
.v17-item-preview+ p{position:relative!important;display:block!important;z-index:1!important;flex:0 0 auto!important;margin-top:0!important}
.v17-item-form label,.v17-item-form-two{position:relative!important;z-index:1!important;flex:0 0 auto!important}
@media(max-width:430px){.v17-item-preview{width:min(320px,86vw)!important;margin-bottom:16px!important}}

/* Defensive text wrapping: no image or long label can push outside a card. */
.outfit-copy,.item-meta,.linked-outfit>span,.hotspot-linked-row>span:last-child,.hotspot-piece-choice>span:last-child{overflow-wrap:anywhere}