.catalogo-publico #dialog-checkout {
    width: min(980px, 96vw);
}

.catalogo-publico .checkout-organizado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "cabecalho cabecalho" "passos resumo" "corpo resumo";
    height: min(820px, 92dvh);
    max-height: 92dvh;
}

.checkout-organizado .checkout-cabecalho {
    grid-area: cabecalho;
    padding: 20px 24px;
}

.checkout-organizado .checkout-passos {
    grid-area: passos;
    min-width: 0;
    padding: 16px 24px 8px;
}

.checkout-passos ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-passos li {
    min-width: 0;
}

.checkout-passos button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 68px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--cor-texto);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.checkout-passos button > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--cor-texto) 25%, transparent);
    border-radius: 50%;
}

.checkout-passos button[aria-current="step"] {
    border-color: color-mix(in srgb, var(--cor-primaria) 35%, transparent);
    background: color-mix(in srgb, var(--cor-primaria) 9%, transparent);
    color: var(--cor-primaria);
}

.checkout-passos button[aria-current="step"] > span,
.checkout-passos button.concluida > span {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
    color: #fff;
}

.checkout-passos button:disabled {
    opacity: .6;
    cursor: wait;
}

.checkout-organizado .checkout-corpo {
    grid-area: corpo;
    padding: 8px 24px 16px;
}

.checkout-organizado .checkout-etapa > h3,
.checkout-organizado .checkout-rodape > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
}

.checkout-organizado label {
    margin: 8px 0;
    color: var(--cor-texto);
    font-size: 12px;
}

.checkout-organizado .form-duplo {
    gap: 8px;
}

.checkout-organizado input,
.checkout-organizado select,
.checkout-organizado textarea {
    margin-top: 8px;
    font-size: 14px;
}

.checkout-organizado .check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    line-height: 1.5;
}

.checkout-organizado .check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkout-organizado .checkout-rodape {
    grid-area: resumo;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 20px;
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--cor-texto) 15%, transparent);
    box-shadow: none;
}

.checkout-organizado .checkout-rodape #resumo-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 12px;
    background: color-mix(in srgb, var(--cor-texto) 4%, transparent);
}

.checkout-organizado #resumo-checkout > span {
    overflow-wrap: anywhere;
}

.checkout-organizado #resumo-checkout > strong {
    float: none;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--cor-texto) 15%, transparent);
    font-size: 17px;
    white-space: normal;
}

.checkout-organizado .checkout-navegacao {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.checkout-organizado .checkout-opcional {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--cor-texto) 15%, transparent);
}

.checkout-opcional > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.checkout-opcional > summary::-webkit-details-marker {
    display: none;
}

.checkout-opcional > summary > span {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
}

.checkout-opcional[open] > summary > .fa-chevron-down {
    transform: rotate(180deg);
}

.checkout-organizado .checkout-cashback {
    margin-top: 8px;
}

.checkout-organizado .checkout-etapa-erro {
    margin: 0 0 8px;
    color: #b42318;
    font-size: 12px;
}

.checkout-organizado [aria-invalid="true"] {
    border-color: #b42318;
}

.modo-escuro .checkout-organizado .checkout-etapa-erro {
    color: #fda29b;
}

.checkout-organizado .checkout-acessivel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.catalogo-publico .checkout-passos[hidden] {
    display: none;
}

@media (max-width: 760px), (max-height: 560px) {
    .catalogo-publico .checkout-organizado {
        display: flex;
    }

    .checkout-organizado .checkout-cabecalho {
        padding: 16px;
    }

    .checkout-organizado .checkout-passos {
        flex: 0 0 auto;
        padding: 8px 16px;
    }

    .checkout-passos button {
        min-height: 60px;
        font-size: 11px;
    }

    .checkout-organizado .checkout-corpo {
        padding: 8px 16px 16px;
    }

    .checkout-organizado .checkout-rodape {
        gap: 8px;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--cor-texto) 15%, transparent);
    }

    .checkout-organizado .checkout-rodape > h3 {
        display: none;
    }

    .checkout-organizado .checkout-rodape #resumo-checkout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        padding: 8px;
    }

    .checkout-organizado #resumo-checkout > strong {
        grid-column: 1 / -1;
    }

    .checkout-organizado .checkout-navegacao {
        display: flex;
        margin: 0;
    }

    .checkout-navegacao > [data-checkout-voltar] {
        flex: 0 0 auto;
        width: auto;
    }

    .checkout-navegacao > [data-checkout-avancar],
    .checkout-navegacao > button[type="submit"] {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .catalogo-publico #dialog-checkout {
        width: 100vw;
    }

    .catalogo-publico .checkout-organizado {
        height: 96dvh;
        max-height: 96dvh;
    }

    .checkout-organizado input,
    .checkout-organizado select,
    .checkout-organizado textarea {
        font-size: 16px;
    }
}

@media (max-height: 560px) {
    .checkout-organizado .checkout-cabecalho p {
        display: none;
    }

    .checkout-passos button {
        flex-direction: row;
        min-height: 44px;
    }
}