#hub-dialog .hat-position{flex:none;min-width:0;padding:8px 10px;border:1px solid #bba0ec;border-bottom:3px solid #624280;border-radius:15px;background:linear-gradient(115deg,#573b79,#362b58);box-shadow:inset 0 1px #e8caff33;color:#fff1cf}
#hub-dialog .hat-position-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
#hub-dialog .hat-position-title strong{font-size:14px;color:#ffe7a1}#hub-dialog .hat-position-title small{font-size:10px;color:#ddcbf1}
#hub-dialog .hat-position-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#hub-dialog .hat-position-options button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px!important;padding:5px 8px!important;font-size:12px!important;font-weight:750;border:1px solid #ac90d5!important;border-bottom:3px solid #392746!important;border-radius:10px!important;background:#6b508b!important;color:#fff2db!important;transition:transform .15s,background .15s}
#hub-dialog .hat-position-options button span{font-size:23px;line-height:1}#hub-dialog .hat-position-options button[aria-pressed=true]{background:linear-gradient(#fde7ae,#edcc72)!important;color:#3d3125!important;border-color:#fef0ca!important;border-bottom-color:#948250!important;box-shadow:0 0 12px #fcda7b22}
#hub-dialog .hat-position-options button:active{transform:translateY(2px)}#hub-dialog .hat-position-options button:focus-visible{outline:3px solid #fff2a2;outline-offset:2px}#hub-dialog .hat-position-options button:disabled{opacity:.45}
#hub-dialog .cosmetic-expanded-body>.hat-position{margin:5px 0}
@media(max-height:550px){#hub-dialog .hat-position{padding:5px 8px}#hub-dialog .hat-position-title{margin-bottom:3px}#hub-dialog .hat-position-options button{min-height:30px!important;font-size:11px!important}#hub-dialog .hat-position-title strong{font-size:12px}}

/* Keep the gallery's height for artwork; hat controls belong with the wizard. */
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-preview{grid-template-rows:20px minmax(60px,1fr) 18px auto 30px!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-preview>.hat-position{grid-row:4;width:100%;box-sizing:border-box;padding:6px;position:relative;z-index:4}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-preview .hat-position-title small{display:none}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-preview .hat-position-options{grid-template-columns:1fr;gap:4px}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-preview .hat-position-options button{min-height:30px!important;white-space:nowrap;font-size:11px!important;padding:3px!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-actions{grid-row:5;grid-template-columns:1fr!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-actions button[hidden]{display:none!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-actions button:last-child{height:28px!important;min-height:28px!important;font-size:11px!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .fitting-actions button:last-child:after{content:none}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .wardrobe-cards{grid-auto-rows:190px!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .wardrobe-cards article.cosmetic-expand-card{box-sizing:border-box;height:100%!important;grid-template-rows:minmax(80px,1fr) 36px 20px!important;gap:5px!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .cosmetic-expand-card .wardrobe-art{min-height:80px!important;align-self:stretch;visibility:visible!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .hat-controls-in-preview .wardrobe-cards{grid-auto-rows:clamp(220px,36vh,340px)!important}