/* Transição editorial do catálogo para o checkout, sem navegação de página. */
body.catalog-page {
    --checkout-transition-paper: #efe8ae;
    --checkout-transition-paper-light: #fffbe2;
    --checkout-transition-sage: rgba(174, 187, 139, .26);
    --checkout-transition-gold: rgba(196, 154, 50, .13);
    --checkout-transition-ink: var(--shop-ink, #3f4a30);
    --checkout-transition-earth: var(--shop-earth, #83521a);
    --checkout-transition-line: rgba(63, 74, 48, .18);
    --checkout-transition-ease: cubic-bezier(.22, .78, .16, 1);
    transition: background-color .72s ease;
}

body.catalog-page.is-dynamic-checkout {
    background-color: var(--checkout-transition-paper);
}

body.catalog-page #conteudo-loja {
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - 64px);
}

body.catalog-page #conteudo-loja::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 11% 8%, rgba(255, 255, 255, .52), transparent 33rem),
        radial-gradient(circle at 88% 24%, var(--checkout-transition-sage), transparent 36rem),
        linear-gradient(140deg, var(--checkout-transition-paper-light), var(--checkout-transition-paper) 58%, #e9dfa3);
    transition: opacity .68s ease;
}

body.catalog-page.is-checkout-switching #conteudo-loja::before,
body.catalog-page.is-dynamic-checkout #conteudo-loja::before {
    opacity: 1;
}

body.catalog-page #conteudo-loja > [data-checkout-source] {
    position: relative;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 8%;
    will-change: opacity, transform, filter;
    transition:
        opacity .3s ease,
        transform .46s var(--checkout-transition-ease),
        filter .36s ease;
}

body.catalog-page.is-checkout-switching #conteudo-loja > [data-checkout-source]:not([hidden]),
body.catalog-page.is-dynamic-checkout #conteudo-loja > [data-checkout-source]:not([hidden]) {
    opacity: 0;
    filter: saturate(.88) contrast(.98);
    transform: translate3d(0, -10px, 0) scale(.998);
    pointer-events: none;
}

.dynamic-checkout-view {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    min-height: calc(100svh - 64px);
    display: none;
    overflow-x: clip;
    color: var(--checkout-transition-ink);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 15px, 0);
    transform-origin: 50% 0;
    transition:
        opacity .4s ease,
        transform .62s var(--checkout-transition-ease),
        visibility 0s linear .62s;
}

.dynamic-checkout-view::before,
.dynamic-checkout-view::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.dynamic-checkout-view::before {
    inset: 0;
    background:
        radial-gradient(circle at 8% 28%, rgba(255, 255, 255, .26), transparent 28rem),
        radial-gradient(circle at 92% 58%, var(--checkout-transition-gold), transparent 34rem);
}

.dynamic-checkout-view::after {
    top: clamp(82px, 11vw, 170px);
    right: clamp(-180px, -8vw, -70px);
    width: min(34vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 76, 91, .055), transparent 70%);
}

.dynamic-checkout-view.is-mounted {
    display: block;
}

.dynamic-checkout-view.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.dynamic-checkout-view.is-leaving {
    visibility: visible;
    opacity: 0;
    transform: translate3d(0, -9px, 0);
    pointer-events: none;
    transition-delay: 0s;
}

.dynamic-checkout-back {
    width: min(1280px, calc(100% - 64px));
    min-height: 42px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 42px) 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    color: var(--checkout-transition-earth);
    background: transparent;
    font: 600 .62rem/1 var(--font-sans, Montserrat, sans-serif);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .24s ease, transform .34s var(--checkout-transition-ease);
}

.dynamic-checkout-back::before {
    content: "\2190";
    display: inline-block;
    font: 400 1.45rem/1 var(--font-serif, Georgia, serif);
    letter-spacing: 0;
    transition: transform .34s var(--checkout-transition-ease);
}

.dynamic-checkout-back:hover,
.dynamic-checkout-back:focus-visible {
    color: var(--shop-gold, #b17a20);
}

.dynamic-checkout-back:hover::before,
.dynamic-checkout-back:focus-visible::before {
    transform: translate3d(-5px, 0, 0);
}

.dynamic-checkout-back:active {
    transform: translate3d(0, 1px, 0);
}

.dynamic-checkout-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dynamic-checkout-view .checkout-shell {
    position: relative;
    z-index: 1;
}

.dynamic-checkout-view .checkout-layout {
    padding-top: clamp(34px, 4.5vw, 58px);
}

.dynamic-checkout-view .checkout-form,
.dynamic-checkout-view .checkout-summary {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity .44s ease,
        transform .62s var(--checkout-transition-ease);
}

.dynamic-checkout-view.is-visible:not(.is-leaving) .checkout-form {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: .08s;
}

.dynamic-checkout-view.is-visible:not(.is-leaving) .checkout-summary {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: .15s;
}

.dynamic-checkout-view.is-leaving .checkout-form,
.dynamic-checkout-view.is-leaving .checkout-summary {
    opacity: 0;
    transform: translate3d(0, -7px, 0);
    transition-delay: 0s;
}

@media (max-width: 900px) {
    .dynamic-checkout-back {
        width: calc(100% - 32px);
    }

    .dynamic-checkout-view .checkout-layout {
        padding-top: 30px;
    }

    .dynamic-checkout-view.is-visible:not(.is-leaving) .checkout-summary {
        transition-delay: .1s;
    }
}

@media (max-width: 560px) {
    .dynamic-checkout-view {
        min-height: calc(100svh - 64px);
    }

    .dynamic-checkout-back {
        width: calc(100% - 24px);
        min-height: 38px;
        padding-top: 20px;
        gap: 9px;
        font-size: .57rem;
        letter-spacing: .14em;
    }

    .dynamic-checkout-back::before {
        font-size: 1.28rem;
    }

    .dynamic-checkout-view .checkout-layout {
        padding-top: 24px;
    }

    .dynamic-checkout-view::after {
        top: 13%;
        right: -42%;
        width: 90vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.catalog-page,
    body.catalog-page #conteudo-loja::before,
    body.catalog-page #conteudo-loja > [data-checkout-source],
    .dynamic-checkout-view,
    .dynamic-checkout-view .checkout-form,
    .dynamic-checkout-view .checkout-summary,
    .dynamic-checkout-back,
    .dynamic-checkout-back::before {
        transition: none !important;
    }

    body.catalog-page.is-checkout-switching #conteudo-loja > [data-checkout-source]:not([hidden]),
    body.catalog-page.is-dynamic-checkout #conteudo-loja > [data-checkout-source]:not([hidden]),
    .dynamic-checkout-view,
    .dynamic-checkout-view.is-visible,
    .dynamic-checkout-view.is-leaving,
    .dynamic-checkout-view .checkout-form,
    .dynamic-checkout-view .checkout-summary,
    .dynamic-checkout-view.is-visible:not(.is-leaving) .checkout-form,
    .dynamic-checkout-view.is-visible:not(.is-leaving) .checkout-summary {
        transform: none;
    }
}