/* Scoped to the actual result renderer. Saved looks and wardrobe keep their layouts. */
html[data-graphite-review] .generated-result .outfit-stage.deck-collage.expanded,
html[data-graphite-review] .generated-result .outfit-stage.deck-collage.expanded:has(.garment:nth-child(4)){grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
html[data-graphite-review] .deck-collage .garment.deck-piece{background:var(--white);border:1px solid var(--line)}
html[data-graphite-review] .deck-piece .result-piece-media{position:absolute;inset:var(--piece-media-top,32px) 8px 35px;display:grid;place-items:center}
html[data-graphite-review] .deck-piece .result-piece-media img.outfit-item-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:50% 50%!important;transform:none!important}
html[data-graphite-review] .deck-piece .piece-caption{position:absolute;inset:auto 6px 6px;width:auto;height:27px;clip:auto;white-space:normal;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;color:var(--ink)}
html[data-graphite-review] .deck-piece .piece-caption small{font-size:11px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-graphite-review] .result-piece-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);width:100%;height:100%}
html[data-graphite-review] .result-piece-placeholder svg{width:40px;height:40px;max-height:70%;flex:none}
html[data-graphite-review] .result-piece-placeholder small{font-size:10px;line-height:1.4}
html[data-graphite-review] .deck-piece .piece-swap{width:28px;height:28px;top:4px;inset-inline-end:4px;background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
html[data-graphite-review] .deck-piece.swap-target .piece-swap{background:var(--accent);color:var(--on-accent)}

/* Free composition, on the app's existing result card. Physical coordinates
   preserve garment arrangements in both Arabic and English; text keeps its RTL. */
html[data-graphite-review] .generated-result .outfit-stage.deck-collage.wardrobe-composition,
html[data-graphite-review] .generated-result .outfit-stage.deck-collage.wardrobe-composition:has(.garment:nth-child(4)){
  display:block;position:relative;width:100%;height:auto;min-height:0;padding:0;
  grid-template:none;overflow:visible;
}
html[data-graphite-review] .wardrobe-composition .garment.deck-piece{
  position:absolute;display:block;margin:0;padding:0;min-width:0;min-height:44px;
  background:transparent;border:0;border-radius:12px;box-shadow:none;
  overflow:hidden;container-type:normal;
}
html[data-graphite-review] .wardrobe-composition .deck-piece .result-piece-media{
  inset:8px 7px 28px;
}
html[data-graphite-review] .wardrobe-composition .deck-piece .piece-caption{
  inset:auto 4px 1px;height:25px;color:var(--muted);
}
html[data-graphite-review] .wardrobe-composition .deck-piece .piece-caption small{
  font-size:10px;line-height:1.3;
}
html[data-graphite-review] .wardrobe-composition .deck-piece .piece-swap{
  top:5px;inset-inline-end:5px;width:25px;height:25px;
  border:1px solid var(--line);background:var(--white);
  color:var(--accent-text);opacity:.94;
}
html[data-graphite-review] .wardrobe-composition .deck-piece:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:-2px;
}
html[data-graphite-review] .wardrobe-composition .deck-piece.swap-target .piece-swap{
  background:var(--accent);color:var(--on-accent);
}
html[data-graphite-review] .wardrobe-composition .result-piece-placeholder svg{
  width:34px;height:34px;
}

html[data-graphite-review] .wardrobe-composition .deck-piece .result-piece-media img.outfit-item-photo{background:transparent!important}

/* Layer the original cutouts. Keep controls outside the overlapping centres. */
html[data-graphite-review] .wardrobe-composition .deck-piece[data-composition-role] .result-piece-media{inset:5px}
html[data-graphite-review] .wardrobe-composition .deck-piece[data-composition-role] .piece-caption{opacity:0;pointer-events:none}
html[data-graphite-review] .wardrobe-composition .deck-piece[data-composition-role="back"] .piece-swap{left:auto;right:3px;top:3px}
html[data-graphite-review] .wardrobe-composition .deck-piece[data-composition-role="lower"] .piece-swap{left:auto;right:3px;top:auto;bottom:5px}
html[data-graphite-review] .wardrobe-composition .deck-piece[data-composition-role="front"] .piece-swap{left:3px;right:auto;top:3px}
html[data-graphite-review] .composition-main-labels{margin:10px 4px 14px;text-align:center;color:var(--muted);font-size:11px;line-height:1.8}
html[data-graphite-review] [data-outfit-template="layered"] .deck-piece[data-layout-role="sunglasses"] .result-piece-media{left:20%;right:20%}