.wardrobe{--wd-gap:1rem;--wd-small:.5rem;--wd-radius:.5rem;--wd-touch:2.75rem;box-sizing:border-box;width:min(960px,96vw);max-height:94dvh;padding:var(--wd-gap);border:1px solid var(--trim);border-radius:var(--wd-radius);background:var(--well);color:var(--text);font:inherit;overflow:auto}
.wardrobe::backdrop{background:rgba(0,0,0,.7)}
.wardrobe header,.wardrobe-actions,.wardrobe-rotate{display:flex;justify-content:space-between;gap:var(--wd-small);align-items:center}
.wardrobe h2,.wardrobe h3,.wardrobe p{margin:0 0 var(--wd-small)}
.wardrobe-kicker{color:var(--accent);font-size:.8rem;letter-spacing:.12em}
.wardrobe-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:var(--wd-gap)}
.wardrobe-preview{align-self:start;position:sticky;top:0;background:var(--well)}
.wardrobe canvas{display:block;width:100%;height:240px;object-fit:contain;touch-action:pan-y;background:var(--surface);border-radius:var(--wd-radius)}
.wardrobe button,.wardrobe select,.wardrobe input{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--trim);border-radius:var(--wd-radius);min-height:var(--wd-touch);padding:var(--wd-small);box-sizing:border-box;max-width:100%}
.wardrobe button{cursor:pointer}.wardrobe button:hover{background:var(--raised)}
.wardrobe :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wardrobe button:disabled{opacity:.5;cursor:default}.wardrobe [aria-pressed=true]{border:2px solid var(--accent);background:var(--raised)}
.wardrobe-slot{display:grid;margin-top:var(--wd-small)}.wardrobe-preview>label{display:block;margin-top:var(--wd-small)}
.wardrobe nav{display:flex;gap:var(--wd-small);flex-wrap:wrap;margin-bottom:var(--wd-gap)}
.wardrobe-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wd-small);max-height:430px;overflow:auto;padding:3px}
.wardrobe-card{display:flex;flex-direction:column;align-items:center;gap:var(--wd-small);text-align:center;overflow-wrap:anywhere}.wardrobe-card svg{width:56px;height:56px}.wardrobe-card small{color:var(--muted)}
.wardrobe-presets{margin-top:var(--wd-gap)}.wardrobe-preset{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--wd-small);align-items:end;margin-bottom:var(--wd-small)}.wardrobe-preset label{display:grid;min-width:0}
.wardrobe footer{position:sticky;bottom:calc(-1 * var(--wd-gap));background:var(--well);border-top:1px solid var(--trim);padding:var(--wd-gap) 0;margin-top:var(--wd-gap);font-size:.9rem}.wardrobe [data-status]{color:var(--paper-300);margin:var(--wd-small) 0}
@media(max-width:600px){.wardrobe{width:96vw}.wardrobe-layout{grid-template-columns:1fr}.wardrobe-preview{position:static}.wardrobe canvas{height:190px}.wardrobe-catalog{grid-template-columns:repeat(2,minmax(0,1fr));max-height:330px}.wardrobe-actions{flex-wrap:wrap}.wardrobe-actions button{flex:1}.wardrobe-preset{grid-template-columns:minmax(0,1fr) auto}.wardrobe-preset [data-use-preset]{grid-column:2}.wardrobe-preset input{width:100%}}

.wardrobe-swatches{display:flex;gap:var(--wd-small);flex-wrap:wrap;margin-bottom:var(--wd-small)}.wardrobe-swatches button{display:flex;align-items:center;gap:.3rem;font-size:.85rem}.wardrobe-swatches span{width:1rem;height:1rem;border:1px solid var(--text);border-radius:50%}.wardrobe-preview>label:has([data-armour]){display:flex;align-items:center;gap:var(--wd-small);min-height:var(--wd-touch);cursor:pointer}.wardrobe [data-armour]{min-height:0;width:1.2rem;height:1.2rem}

#retailTabs{display:flex;flex-wrap:wrap;gap:.5rem}#retailTabs[hidden]{display:none}#retailTabs button{min-height:44px;min-width:44px}.retail-equipment-preview{display:block;width:160px;max-width:100%;height:160px;object-fit:contain;margin:.5rem auto;border-radius:.5rem}
