.shop-frame-custom {
    --shop-frame-turn: 0deg;
}

@property --shop-frame-turn {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.shop-frame-custom.shop-frame-custom.shop-frame-custom.shop-frame-custom {
    border: var(--shop-frame-width, 3px) solid transparent !important;
    border-radius: var(--shop-frame-radius, 12px) !important;
    background:
        linear-gradient(var(--shop-frame-surface, var(--bg-panel)), var(--shop-frame-surface, var(--bg-panel))) padding-box,
        linear-gradient(var(--shop-frame-angle, 135deg), var(--shop-frame-a, #68809a), var(--shop-frame-b, #68809a), var(--shop-frame-a, #68809a)) border-box !important;
    box-shadow: 0 0 var(--shop-frame-glow, 0px) color-mix(in srgb, var(--shop-frame-a, #68809a) 72%, transparent) !important;
}

.shop-frame-custom.shop-frame-custom.shop-frame-custom.shop-frame-custom.is-shop-frame-animated {
    background:
        linear-gradient(var(--shop-frame-surface, var(--bg-panel)), var(--shop-frame-surface, var(--bg-panel))) padding-box,
        conic-gradient(
            from calc(var(--shop-frame-angle, 135deg) + var(--shop-frame-turn)),
            var(--shop-frame-a, #68809a) 0deg,
            var(--shop-frame-b, #68809a) 90deg,
            var(--shop-frame-a, #68809a) 180deg,
            var(--shop-frame-b, #68809a) 270deg,
            var(--shop-frame-a, #68809a) 360deg
        ) border-box !important;
    animation: shop-frame-gradient var(--shop-frame-speed, 6s) linear infinite !important;
    will-change: --shop-frame-turn;
}

@keyframes shop-frame-gradient {
    from { --shop-frame-turn: 0deg; }
    to { --shop-frame-turn: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-frame-custom.shop-frame-custom.shop-frame-custom.shop-frame-custom.is-shop-frame-animated { animation: none !important; }
}