/* Profile-picture decorations: PNG overlay on a circular photo.
   The avatar box keeps its normal size. The wreath is a larger overlay
   centered on that photo so every page uses the same scale as the store. */

.pfp-frame {
    position: relative;
    isolation: isolate;
    --pfp-deco-scale: 1.58;
}

.pfp-frame-initial {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.pfp-frame > img:not(.pfp-frame-deco),
.pfp-frame .pfp-frame-photo {
    position: relative;
    z-index: 1;
}

.pfp-frame-deco {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% * var(--pfp-deco-scale)) !important;
    height: calc(100% * var(--pfp-deco-scale)) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: 50% 50%;
    pointer-events: none;
    z-index: 3;
}

.pfp-frame.has-deco {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pfp-frame.has-deco .pfp-frame-deco {
    display: block;
}

.pfp-frame.has-deco > img:not(.pfp-frame-deco),
.pfp-frame.has-deco .pfp-frame-photo,
.pfp-frame.has-deco > .wd-pfp-initial,
.pfp-frame.has-deco > .pfp-frame-initial,
.pfp-frame.has-deco > .profile-avatar-preview-initial,
.pfp-frame.has-deco > #authorAvatarInitial,
.pfp-frame.has-deco > #authorEndAvatarInitial {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.wd-welcome-bar,
.wd-welcome-inner {
    overflow: visible;
}

.wd-welcome-bar {
    min-height: 108px;
    padding: 12px clamp(20px, 3vw, 36px);
}

.ww-fighter-avatar.pfp-frame,
.sms-avatar.pfp-frame,
.avatar.pfp-frame,
.lounge-member-avatar.pfp-frame,
.profile-avatar.pfp-frame,
.profile-avatar-preview.pfp-frame,
.author-end-avatar.pfp-frame {
    overflow: visible;
}