/* Storefront popup banner. Bootstrap animates `.modal-dialog` on `.show` but reads the
   hide duration off `.modal` itself, so the panel's exit transition and the `.fade`
   opacity transition below have to stay in step or the close gets clipped at 150ms. */

.modal-popup-banner {
    --bs-modal-width: 33.75rem;
    --pb-radius: 1.125rem;
    --pb-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pb-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --pb-skeleton: rgba(var(--bs-body-bg-rgb), 1);
    --pb-skeleton-sheen: rgba(var(--absolute-white-rgb), 0.55);
}

.modal-popup-banner.fade {
    transition: opacity 0.34s ease;
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
}

.modal-popup-banner .modal-dialog {
    padding: 1.25rem;
}

/* Enter and exit are two transitions, not a keyframe: Chrome does not start a transition
   off a removed animation, so an animated entrance leaves the panel snapping out on close. */
.modal-popup-banner.fade .modal-dialog {
    opacity: 0;
    transform: translate3d(0, 1.625rem, 0) scale(0.94);
    transition: transform 0.24s ease-in, opacity 0.22s ease-in;
}

.modal-popup-banner.show .modal-dialog {
    opacity: 1;
    transform: none;
    transition: transform 0.52s var(--pb-spring), opacity 0.3s ease;
}

.modal-popup-banner .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--pb-radius);
    background-color: var(--bs-white);
    box-shadow: 0 1.875rem 4.375rem rgba(0, 0, 0, 0.32), 0 0.375rem 1.125rem rgba(0, 0, 0, 0.16);
    overflow: visible;
}

.modal-popup-banner .pb-media {
    position: relative;
    display: block;
    border-radius: var(--pb-radius);
    background-color: var(--pb-skeleton);
    overflow: hidden;
    isolation: isolate;
}

/* Shimmer stands in until the artwork decodes so the panel never opens on an empty frame. */
.modal-popup-banner .pb-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        var(--pb-skeleton) 30%,
        var(--pb-skeleton-sheen) 50%,
        var(--pb-skeleton) 70%
    );
    background-size: 220% 100%;
    animation: pb-shimmer 1.4s linear infinite;
}

.modal-popup-banner .pb-media.is-loaded::before {
    opacity: 0;
    animation: none;
    transition: opacity 0.3s ease;
}

@keyframes pb-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

.modal-popup-banner .pb-image {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: auto;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.45s ease, transform 0.7s var(--pb-ease);
}

.modal-popup-banner .pb-media.is-loaded .pb-image {
    opacity: 1;
    transform: none;
}

.modal-popup-banner .pb-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.modal-popup-banner .pb-media.is-loaded:hover .pb-image {
    transform: scale(1.035);
}

.modal-popup-banner .pb-link:focus-visible {
    outline: 0.1875rem solid var(--bs-primary);
    outline-offset: -0.1875rem;
}

.modal-popup-banner .btn-close.outside {
    --size: 2.375rem;
    inset-block-start: -0.8125rem;
    inset-inline-end: -0.8125rem;
    z-index: 6;
    opacity: 0;
    border-radius: 50%;
    background-color: var(--absolute-white);
    background-size: 0.75rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.24);
    transition: transform 0.25s var(--pb-ease), opacity 0.3s ease;
}

.modal-popup-banner.show .btn-close.outside {
    opacity: 1;
    transition-delay: 0.25s;
}

.modal-popup-banner .btn-close.outside:hover,
.modal-popup-banner .btn-close.outside:focus-visible {
    transform: rotate(90deg) scale(1.06);
}

.modal-popup-banner .btn-close.outside:focus-visible {
    outline: 0.125rem solid var(--bs-primary);
    outline-offset: 0.1875rem;
}

@media only screen and (max-width: 575px) {
    .modal-popup-banner {
        --bs-modal-width: 100%;
    }

    .modal-popup-banner .modal-dialog {
        padding: 0.75rem;
    }

    .modal-popup-banner .btn-close.outside {
        inset-block-start: 0.625rem;
        inset-inline-end: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-popup-banner.fade,
    .modal-popup-banner.fade .modal-dialog,
    .modal-popup-banner .pb-image,
    .modal-popup-banner .btn-close.outside {
        transition-duration: 0.01ms;
    }

    .modal-popup-banner.fade .modal-dialog {
        transform: none;
    }

    .modal-popup-banner.show .modal-dialog {
        transition-duration: 0.01ms;
    }

    .modal-popup-banner .pb-media::before {
        animation: none;
    }

    .modal-popup-banner .pb-media.is-loaded:hover .pb-image {
        transform: none;
    }
}