/* Local, decorative illustrations share a fixed frame and heading inset.
 * Only their interior artwork moves: title baselines and left edges stay still. */
.catalog-store {
    --section-heading-inset: 20px;
}
.catalog-store > :is(.catalog-notice, .catalog-panel) > .panel-header,
.catalog-store > :is(.catalog-notice, .catalog-panel) > .panel-body {
    padding-left: var(--section-heading-inset);
    padding-right: var(--section-heading-inset);
}
.catalog-store .panel-title.brand-section-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.catalog-store .section-illustration {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    overflow: visible;
    fill: none;
}
.catalog-store .section-illustration__megaphone {
    transform-box: fill-box;
    transform-origin: 50% 75%;
    animation: n321-notice-sway 4.8s ease-in-out infinite;
}
.catalog-store .section-illustration__waves {
    transform-box: fill-box;
    transform-origin: left center;
    animation: n321-notice-waves 4.8s ease-in-out infinite;
}
.catalog-store .section-illustration__bag {
    transform-box: fill-box;
    transform-origin: 50% 10%;
    animation: n321-shop-sway 5.2s ease-in-out infinite;
}
.catalog-store .section-illustration__sparkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: n321-shop-sparkle 5.2s ease-in-out infinite;
}
@keyframes n321-notice-sway {
    0%, 42%, 100% { transform: rotate(0deg); }
    12%, 28% { transform: rotate(-5deg); }
    20%, 36% { transform: rotate(3deg); }
}
@keyframes n321-notice-waves {
    0%, 42%, 100% { opacity: .65; transform: translateX(0); }
    18%, 30% { opacity: 1; transform: translateX(.7px); }
}
@keyframes n321-shop-sway {
    0%, 45%, 100% { transform: rotate(0deg); }
    14% { transform: rotate(-4deg); }
    28% { transform: rotate(4deg); }
    37% { transform: rotate(-2deg); }
}
@keyframes n321-shop-sparkle {
    0%, 45%, 100% { opacity: .72; transform: scale(.9); }
    20% { opacity: 1; transform: scale(1.12); }
}
@media (max-width: 640px) {
    .catalog-store { --section-heading-inset: 12px; }
    .catalog-store .section-illustration {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-store .section-illustration :is(
        .section-illustration__megaphone,
        .section-illustration__waves,
        .section-illustration__bag,
        .section-illustration__sparkle
    ) {
        animation: none;
        transform: none;
        opacity: 1;
    }
}
