.badge-face-preview {
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 1;
    margin: 36px auto 44px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #00000012;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 1px 1px #ffffffb3,
        0 2px 1px #69717880,
        0 3px 1px #e4e6e7,
        1px 5px 3px #28313a33,
        3px 10px 12px #17202b26,
        6px 18px 26px #17202b14;
}
.badge-face-preview::before,
.badge-face-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}
.badge-face-preview::before {
    /* The printed face rolls over the shoulder; there is no exposed metal frame. */
    background:
        radial-gradient(circle closest-side, transparent 82%, #00000003 88%,
            #0000000b 94%, #00000020 98%, #00000012 100%);
    box-shadow:
        inset 0 2px 2px #fffffff2,
        inset 2px 0 2px #ffffff80,
        inset -1px -2px 2px #26323d33;
}
.badge-face-preview::after {
    background:
        radial-gradient(ellipse 65% 22% at var(--badge-light-x, 28%) var(--badge-light-y, 15%),
            #ffffff99 0%, #ffffff38 45%, transparent 100%),
        linear-gradient(122deg, transparent 17%, #ffffff0d 20%, #ffffff4d 24%,
            #ffffff14 31%, transparent 36%),
        radial-gradient(ellipse 75% 55% at 65% 88%, #ffffff26, transparent 75%);
}
.award-badge-builder .badge-face-preview {
    transform: perspective(1000px) rotateX(var(--badge-tilt-x, 0deg)) rotateY(var(--badge-tilt-y, 0deg));
    transition: transform 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .award-badge-builder .badge-face-preview { transform: none; transition: none; }
}
.badge-face-preview > svg { position: absolute; width: 124.137931%; height: 124.137931%; max-width: none; left: -12.068966%; top: -12.068966%; }
.store-badge-scene { position: relative; width: 232px; height: 242px; }
.store-badge-scene .store-badge-catalog { position: absolute; margin: 0; }
.store-badge-scene .store-badge-catalog-gold { width: 135px; left: 0; top: 2px; transform: rotate(-12deg); }
.store-badge-scene .store-badge-catalog-silver { width: 112px; left: -4px; bottom: 0; transform: rotate(9deg); }
.store-badge-scene .store-badge-catalog-main { width: 158px; right: 0; top: 67px; transform: rotate(7deg); }
.store-product-award_badges .store-product-body > p { font-size: 16px; }
.store-product-award_badges .store-product-body .small { font-size: 14px; }
.award-badge-builder .form-floating > label { opacity: .85; transform: scale(.85) translateY(-.5rem) translateX(.15rem); }
.award-badge-builder .form-floating > .form-control { padding-top: 1.625rem; padding-bottom: .625rem; }
.award-badge-builder p, .award-badge-builder label, .award-badge-builder #badge-status { font-size: 14px; }
.award-badge-builder .form-control, .award-badge-builder .form-select { font-size: 16px; }
.badge-award-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; margin-bottom: 12px; }
.badge-award-color { grid-column: 1 / -1; }
.badge-award-actions { grid-column: 1 / -1; display: flex; gap: 12px; }
.award-badge-builder .store-builder-controls {
    position: static;
    max-height: none;
    overflow: visible;
}
.award-badge-builder .store-builder-controls h2 { font-size: 16px; }
@media (max-width: 991.98px) { .award-badge-builder .store-builder-preview { grid-row: 1; } }