/* V21: Bilder in Kleidungs- und Ausrüstungsslots wirklich mittig ausrichten. */

/* Der zusätzliche React-Wrapper füllt den kompletten Slot. Die Innenabstände
   halten Titel und Itemname frei, ohne die Grafik selbst abzuschneiden. */
.inventory-v16-clothing-grid > button > span,
.inventory-v16-equipment-grid > button > span,
.inventory-v16-equipment-grid > button.wide > span {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.inventory-v16-clothing-grid > button > span {
    padding: 18px 10px 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 58% 58% !important;
}

.inventory-v16-clothing-grid > button.filled > span > img {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 74% !important;
    max-height: 70% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
}

.inventory-v16-equipment-grid > button > span,
.inventory-v16-equipment-grid > button.wide > span {
    padding: 19px 11px 18px !important;
}

.inventory-v16-equipment-grid > button > span > img,
.inventory-v16-equipment-grid > button > span > svg {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 72% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
}

/* Der Werkzeugslot ist doppelt breit. Die Grafik bleibt dennoch ungefähr so
   groß wie in einem normalen Slot und sitzt exakt in dessen Mitte. */
.inventory-v16-equipment-grid > button.wide > span > img,
.inventory-v16-equipment-grid > button.wide > span > svg {
    max-width: 38% !important;
    max-height: 72% !important;
}

.inventory-v16-clothing-grid > button > small,
.inventory-v16-clothing-grid > button > strong,
.inventory-v16-equipment-grid > button > small,
.inventory-v16-equipment-grid > button > strong,
.inventory-v16-equipment-grid > button > b {
    position: relative !important;
    z-index: 4 !important;
}