/* HW_AVATAR_CROP_V98
   Some avatar sources have extra black padding / dark ring around the art.
   Crop avatar art more consistently in the gallery and the large preview. */

/* Small avatar circles in the catalog grid */
html body .skins-screen .skin-orb,
html body .avatars-screen .skin-orb,
html body .skins-screen .avatar-orb,
html body .avatars-screen .avatar-orb,
html body #modal[data-view="skins"] .skin-orb,
html body #modal[data-view="avatars"] .skin-orb {
  overflow: hidden !important;
  border-radius: 50% !important;
}

html body .skins-screen .skin-orb img,
html body .avatars-screen .skin-orb img,
html body .skins-screen .avatar-orb img,
html body .avatars-screen .avatar-orb img,
html body #modal[data-view="skins"] .skin-orb img,
html body #modal[data-view="avatars"] .skin-orb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  transform: scale(1.10) !important;
  transform-origin: center center !important;
}

/* Large preview image on the right side */
html body .skins-screen .skin-preview img,
html body .skins-screen .preview-orb img,
html body .skins-screen .skin-hero img,
html body .skins-screen .skin-showcase img,
html body .skins-screen .skin-detail-avatar img,
html body .skins-screen .avatar-preview img,
html body .avatars-screen .skin-preview img,
html body .avatars-screen .preview-orb img,
html body .avatars-screen .skin-hero img,
html body .avatars-screen .skin-showcase img,
html body .avatars-screen .skin-detail-avatar img,
html body .avatars-screen .avatar-preview img,
html body #modal[data-view="skins"] .skin-preview img,
html body #modal[data-view="skins"] .preview-orb img,
html body #modal[data-view="skins"] .skin-hero img,
html body #modal[data-view="skins"] .skin-showcase img,
html body #modal[data-view="skins"] .skin-detail-avatar img,
html body #modal[data-view="skins"] .avatar-preview img,
html body #modal[data-view="avatars"] .skin-preview img,
html body #modal[data-view="avatars"] .preview-orb img,
html body #modal[data-view="avatars"] .skin-hero img,
html body #modal[data-view="avatars"] .skin-showcase img,
html body #modal[data-view="avatars"] .skin-detail-avatar img,
html body #modal[data-view="avatars"] .avatar-preview img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

/* Keep the selected check and card shadows above the cropped image */
html body .skins-screen .skin-card,
html body .avatars-screen .skin-card,
html body #modal[data-view="skins"] .skin-card,
html body #modal[data-view="avatars"] .skin-card {
  overflow: visible !important;
}

@media (max-width: 980px) {
  html body .skins-screen .skin-orb img,
  html body .avatars-screen .skin-orb img,
  html body #modal[data-view="skins"] .skin-orb img,
  html body #modal[data-view="avatars"] .skin-orb img {
    transform: scale(1.08) !important;
  }
}