@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Sem o "elástico" do macOS ao rolar além do fim da página, como no resto do
   produto (ver main.css, que explica por que é só no `html` e só no eixo
   vertical). O checkout não carrega o main.css, então a regra vive aqui também. */
html {
    overscroll-behavior-y: none;
}

:root:hover,
:root:focus {
    outline: none !important;
}

/*Definição de cores*/
:root {
    --black: #000000;
    --gray-light: #616161;
    --white: #ffffff;
    --dark-gray: #303030;
    --dark-blue: #1b264d;
    --blue: #243267;
    --mid-blue: #1b264d;
    --lil-blue: #2464ae;
    --lil-gray: #f8f8f8;
    --dark-purple: #5c1860;
    --dark-wine: #5a1732;
    --dark-red: #670805;
    --red: #cd100a;
    --mid-green: #3bb42d;
    --golden: #b49a2d;
    --mid-yellow: #ffd109;
    --lil-purple: #954d9a;
    --pink: #b42d63;
    --lil-pink: #e1706c;
    --soft-green: #a4c382;
    --lil-yellow: #ffda3a;
    --lil-golden: #d2c381;
    --mid-yellow-opacity: rgb(255 209 9 / 25%);
}

body {
    font-family: "Inter", sans-serif;
    background-color: #eff1f3;
    color: #303030;
    font-weight: 400;
    font-style: normal;
}

.c-white {
    color: var(--white);
}

.c-dark-gray {
    color: var(--dark-gray);
}

.c-lil-blue {
    color: var(--lil-blue);
}

.c-mid-blue {
    color: var(--mid-blue);
}

.c-gray-light {
    color: var(--gray-light);
}

.c-mid-green {
    color: var(--mid-green);
}

.bg-mid-blue {
    background-color: var(--mid-blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}
.bg-white {
    background-color: var(--white);
}

.bg-gray {
    background-color: #cdcdcd;
}

.bg-red {
    background-color: #f44747cc;
}

.bg-gray-checkout {
    background-color: #cdcdcd;
}

a.c-mid-blue.underline {
    color: var(--mid-blue);
    text-decoration: underline;
}

a.c-mid-blue.underline:hover,
a.c-mid-blue.underline:focus {
    color: var(--mid-blue);
    text-decoration: none;
}

hr.hr {
    background-color: var(--ck-border);
}

/* Loader de requisição — o mesmo do painel (main.css, "Loader de requisição"),
   com a paleta do checkout: logo na cor do botão sobre um véu do fundo do tema.
   O checkout não carrega o main.css, por isso a regra se repete aqui. */
#loader-wrapper.carregamento {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    display: grid;
    place-items: center;
    color: var(--ck-brand, #17171b);
    background-color: color-mix(in srgb, var(--ck-bg, #fbfbfb) 55%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease-out, visibility 0s linear 0s;
}

#loader-wrapper.carregamento.stoped {
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .2s ease-out, visibility 0s linear .2s;
}

.carregamento__logo {
    width: 64px;
    height: auto;
    overflow: visible;
}

.carregamento__base {
    fill: none;
    stroke: currentColor;
    stroke-width: 22;
    stroke-linejoin: round;
    opacity: .18;
    animation: carregamento-respiro 1.6s ease-in-out infinite;
}

.carregamento__traco {
    fill: none;
    stroke: currentColor;
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: .24 .76;
    stroke-dashoffset: 1;
    animation: carregamento-traco 1.6s linear infinite;
}

@keyframes carregamento-traco {
    to { stroke-dashoffset: 0; }
}

@keyframes carregamento-respiro {
    0%, 100% { opacity: .18; }
    50% { opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
    .carregamento__traco {
        animation: none;
        stroke-dasharray: none;
        opacity: .5;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

a {
    color: #1b264d;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    background-color: rgba(0,0,0,.125);
    opacity: 1;
    margin-top: 10px;
    margin-bottom: 20px;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 1290px;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.container-aux .row {
    margin-right: -15px;
    margin-left: -15x;
}

.container-aux .row > * {
    padding-right: 15px;
    padding-left: 15px;
}

.img-centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.img-right {
    float: right;
}

.force-vertical-row-center {
    display: flex;
    align-items: center;
}

.force-direction-column {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

.hidden-m {
    display: block !important;
}

.oculta-upsell {
    display: none!important;
}

.visible-m {
    display: none !important;
}

.qtd-parcelas-view{
    font-size: 0.8rem;
}

.card-box {
    border-bottom: 1px solid #cdcdcd;
    padding: 20px 10px;
    background-color: #F7F7F7;
}

.card-box-new {
    border-bottom: none;
    padding: 20px 10px;
    background-color: #F7F7F7;
}

.border-cartao-bandeira {
    width: 40px;
    height: 40px;
    background-color: #dcdcdc;
    border-radius: 100%;
}

.box-cartao {
    border: 1px solid #F7F7F7;
}

.imagem-produto-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

img.bandeira-cartao {
    width: 35px;
    height: 15px;
}

@media (min-width: 993px) {
    .vertical-row-center {
        display: flex;
        align-items: center;
    }

    .direction-column {
        flex-direction: column;
    }

    .justify-content-end {
        display: flex;
        justify-content: flex-end;
    }

    .max_line {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .max_line_1 {
        -webkit-line-clamp: 1;
    }

    .max_line_2 {
        -webkit-line-clamp: 2;
    }

    .max_line_3 {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 992px) {
    body {
        /* padding-top: 93px; */
    }

    .hidden-m {
        display: none !important;
    }

    .visible-m {
        display: block !important;
    }

    .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .container-aux .row {
        margin-right: -15px;
        margin-left: -15x;
    }

    .container-aux .row > * {
        padding-right: 15px;
        padding-left: 15px;
    }

    .text-m-center,
    .text-m-center.text-start,
    .text-m-center .text-end {
        text-align: center;
    }

    .text-m-left {
        text-align: left !important;
    }

    .text-m-right {
        text-align: right;
    }

    .img-centered-m {
        display: block;
        margin: 0 auto;
    }

    .justify-content-center-m {
        justify-content: center !important;
    }
}

.bolder {
    font-weight: 900 !important;
}

.bold {
    font-weight: 700 !important;
}

.semi-bold {
    font-weight: 600 !important;
}

.regular {
    font-weight: 400 !important;
}

.medium {
    font-weight: 500 !important;
}

.lighter {
    font-weight: 300 !important;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

a.underline:hover {
    text-decoration: none;
}

.underline:hover,
.underline:focus {
    text-decoration: none;
}

.nodecoration {
    text-decoration: none;
}

.hnodecoration:hover,
.hnodecoration:focus {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.justify {
    text-align: justify;
}

section {
    padding: 50px 0;
}

@media (min-width: 1566px) {
    section {
        padding: 80px 0;
    }
}

.cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

footer {
    padding: 30px 0 60px;
}

.fast-checkout footer {
    padding: 30px 0;
}

#sticky_bottom {
    display: flex;
    align-items: center;
}

#sticky_bottom img {
    width: 110px;
}

#sticky_bottom .content-info-produto {
    width: calc(100% - 140px);
    padding-left: 20px;
}

.buttons a {
    display: inline-block;
    margin: 15px 10px;
}

footer .buttons img {
    height: 55px;
}

footer .social a {
    font-size: 36px;
    display: inline-block;
    color: var(--lil-yellow);
    margin: 0 5px;
}

footer ul {
    display: block;
    padding: 0;
    margin: 20px 0 0;
}

footer ul li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
}

footer ul li a {
    font-weight: normal;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 0.05em;
    color: var(--white);
    opacity: 0.8;
    text-transform: uppercase;
}

footer ul li a:hover,
footer ul li a:focus {
    opacity: 1;
}

.margint120 {
    margin-top: 120px;
}

.margint60 {
    margin-top: 60px;
}

.margint50 {
    margin-top: 50px;
}

.margint45 {
    margin-top: 45px;
}

.margint40 {
    margin-top: 40px;
}

.margint30 {
    margin-top: 30px;
}

.margint25 {
    margin-top: 25px;
}

.margint20 {
    margin-top: 20px;
}

.margint15 {
    margin-top: 15px;
}

.margint10 {
    margin-top: 10px !important;
}

.margint15 {
    margin-top: 15px !important;
}

.margint5 {
    margin-top: 5px;
}

.marginl5 {
    margin-left: 5px;
}

.marginl10 {
    margin-left: 10px;
}

.marginl15 {
    margin-left: 15px;
}

.marginl25 {
    margin-left: 25px;
}

.marginr25 {
    margin-right: 25px;
}

.marginb15 {
    margin-bottom: 15px;
}
.marginb30 {
    margin-bottom: 30px;
}
.marginb40 {
    margin-bottom: 40px;
}

.marginr5 {
    margin-right: 5px;
}

.marginr10 {
    margin-right: 10px;
}

.marginr15 {
    margin-right: 15px;
}
.marginr30 {
    margin-right: 30px;
}
.marginr50 {
    margin-right: 50px;
}

.nopaddingt {
    padding-top: 0;
}

.padding10 {
    padding: 10px;
}

.padding15 {
    padding: 15px;
}

.padding20 {
    padding: 20px;
}

.padding30 {
    padding: 30px;
}

.paddingl30 {
    padding-left: 30px;
}

.paddingb30 {
    padding-bottom: 30px;
}

.paddingr30 {
    padding-right: 30px;
}

.paddingr20 {
    padding-right: 20px;
}

.paddingl20 {
    padding-left: 20px;
}

.fixed {
    position: fixed;
}

.z-index-top {
    top: 0;
    z-index: 999;
}

.vhpadding60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
}
.nopadding {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar {
    padding: 15px 0;
    background-color: #1b264d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.nav-mobile {
    background-color: #1b264d;
}

.navbar.navbar-shrink{
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.45);
}

.navbar .row {
    width: calc(100% + 22px);
}

.navbar .navbar-brand {
    padding: 0;
    margin: 0;
    display: inline-block;
}

.navbar .navbar-brand img {
    height: 52px;
}

ul.cert {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

ul.cert li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    padding: 0 30px;
}

ul.cert li:first-child {
    padding-left: 0;
}

ul.cert li:last-child {
    padding-right: 0;
}

ul.cert li span {
    display: block;
    padding-left: 10px;
}

ul.cert li i {
    font-size: 24px;
    color: #3bb42d;
}

.seu-pedido {
    color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: normal;
    margin: 0;
}

h1.max,
.t-h1.max {
    font-weight: normal;
    font-size: 64px;
    line-height: 70px;
}

h1,
.t-h1 {
    font-weight: normal;
    font-size: 48px;
    line-height: 52px;
}

h2,
.t-h2 {
    font-weight: normal;
    font-size: 40px;
    line-height: 42px;
}

h3,
.t-h3 {
    font-weight: normal;
    font-size: 36px;
    line-height: 40px;
}

h4,
.t-h4 {
    font-weight: normal;
    font-size: 32px;
    line-height: 36px;
}

h5,
.t-h5 {
    font-weight: normal;
    font-size: 24px;
    line-height: 26px;
}

h6,
.t-h6 {
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
}

p,
.t-p {
    font-size: 18px;
    line-height: 27px;
}

p.min,
.t-p.min {
    font-size: 16px;
    line-height: 22px;
}

p.mid-min,
.t-p.mid-min {
    font-size: 14px;
    line-height: 18px;
}

p.sup-min,
.t-p.sup-min {
    font-size: 12px;
    line-height: 13px;
    letter-spacing: 0.5px;
}

.t-destaque {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
}

.t-citacao {
    font-weight: 900;
    font-size: 24px;
    line-height: 26px;
}

.t-autor {
    font-weight: 300;
    font-size: 20px;
    line-height: 20px;
}

.t-legenda {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
}

.t-copy {
    font-weight: 500;
    font-size: 13px;
    line-height: 13px;
}

.t-link {
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
}

.t-menu {
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 0.05em;
}

.capitalize-medium {
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 20%;
}

.capitalize-tiny {
    font-weight: 500;
    font-size: 10px;
    line-height: 10px;
    letter-spacing: 20%;
}

.icon-max {
    font-size: 64px;
}

.icon-middle {
    font-size: 20px;
}

.no-position {
    background-position: 0 0;
}

.opacity8 {
    opacity: 0.8;
}

article p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px;
}

article p:last-child {
    margin-bottom: 0;
}

/*.t-icon-destak:after {
    content: '';
    position: absolute;
    top: 5px;
    left: -13px;
    border-top: 13px solid transparent;
    border-left: 13px solid transparent;
    border-right: 13px solid var(--lil-blue);
}*/

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: none;
}

.btn {
    font-size: 14px;
    line-height: 18px;
    border-radius: 5px;
    padding: 8px 20px;
    font-weight: 700;
    border: 0;
    background-color: #1b264d;
    color: var(--white);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.btn:hover,
.btn:focus {
    color: var(--white);
    background-color: #3bb42d;
    border-color: #3bb42d;
}

.btn.btn-primary {
    color: var(--white);
    background-color: var(--mid-blue);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #3bb42d;
    border-color: #3bb42d;
}

.btn-dark-gray {
    color: var(--white);
    background-color: var(--dark-gray);
}

.btn-h-mid-green:hover,
.btn-h-mid-green:focus {
    color: var(--white);
    background-color: var(--mid-green);
}

.btn.btn-icon {
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

.btn.btn-icon i {
    font-size: 24px;
    margin-left: 10px;
}

.btn.btn-red {
    background-color: var(--red);
    color: var(--white);
}

.btn.btn-red:hover, .btn.btn-red:focus {
    background-color: var(--dark-red);
    color: var(--white);
}

.btn.btn-whatsapp {
    background-color: #3bb42d !important;
    color: #FFFFFF !important;
}
.btn.btn-whatsapp:hover {
    background-color: #207a15 !important;
}

.tipo {
    background-color: #1b264d;
    color: #FFFFFF;
}

.vh-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vh-align-center.left {
    justify-content: start;
}

.vh-align-center span.aux {
    position: relative;
    top: 6px;
}

.tag {
    font-size: 14px;
    line-height: 14px;
    border-radius: 5px;
    padding: 13px 20px;
    font-weight: 700;
    border: 0;
    color: var(--white);
    background-color: var(--mid-blue);
}

form {
    margin-top: 20px;
}

form .form-group label {
    font-size: 14px;
    line-height: 20px;
}

form .form-group label .min {
    font-size: 12px;
    line-height: 12px;
}

form .form-group input,
form .form-group select,
form .form-group textarea {
    width: 100%;
    background: #e8e8e8;
    border-radius: 6px;
    padding: 7px 15px;
    margin-top: 0;
    border: 2px solid transparent;
    font-size: 14px;
    line-height: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

form .form-check input {
    width: auto;
}

form .form-check{
    padding-left: 0px;
}

form .form-group input:focus,
form .form-group select:focus,
form .form-group textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: #1b264d;
}

form .form-group textarea {
    height: 120px;
}

form .form-group {
    padding-bottom: 14px;
}

form .form-group select {
    background-image: url("../../img/icons/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 12px;
}

form .form-group select#platform {
    appearance: none !important;
}

form .form-group .help-block.with-errors {
    position: absolute;
    color: var(--red);
    font-size: 12px;
    margin-top: 0;
}

form .form-group.has-error.has-danger input {
    border-color: var(--red);
}

::-webkit-input-placeholder {
    color: #c4c4c4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

:-moz-placeholder {
    color: #c4c4c4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

::-moz-placeholder {
    color: #c4c4c4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

:-ms-input-placeholder {
    color: #c4c4c4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

*:focus::-webkit-input-placeholder {
    color: transparent !important;
}

*:focus:-moz-placeholder {
    color: transparent !important;
}

*:focus::-moz-placeholder {
    color: transparent !important;
}

*:focus:-ms-input-placeholder {
    color: transparent !important;
}

.radiosPagamentos {
}

.menos_opcoes_pagamentos .radiosPagamentos {
    justify-content: center;
    gap: 10px;
}

.menos_opcoes_pagamentos p:first-child {
    text-align: center;
}

.radiosPagamentos input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radiosPagamentos .radiomark {
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: normal;
    background: #1b264d;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    line-height: 14px;
    padding: 8px 18px;
    text-align: left;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.radiosPagamentos .radiomark svg {
    width: 25px;
}

.radiosPagamentos .item:hover input ~ .radiomark {
    background-color: var(--lil-blue);
    color: var(--white);
}

.radiosPagamentos .item input:checked ~ .radiomark {
    background-color: #3bb42d;
    border-color: #3bb42d;
    color: var(--white);
}

.radiosPagamentos .item.op-pagamento {
    width: 100%;
    height: 100%;
}

.radiosDoacoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* margin-left: -15px;
    margin-right: -15px; */
}

.radiosDoacoes .item {
    padding: 2px;
    width: 50%;
}

.radiosDoacoes input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radiosDoacoes .radiomark {
    font-weight: normal;
    background: #d9d9d9;
    border-radius: 6px;
    color: var(--mid-blue);
    font-size: 14px;
    line-height: 14px;
    padding: 16px 20px 10px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.radiosDoacoes .item:hover input ~ .radiomark {
    background-color: var(--lil-blue);
    color: var(--white);
}

.radiosDoacoes .item input:checked ~ .radiomark {
    background-color: var(--mid-blue);
    color: var(--white);
}

.jp-card.jp-card-identified {
    box-shadow: none !important;
}

.jp-card.jp-card-flipped {
    left: -15px !important;
}

.jp-card .jp-card-back, .jp-card .jp-card-front {
    width: 95% !important;
}

#sidebar {
    position: sticky !important;
    /* top: 100px; */
}

.box-produto {
    background: var(--white);
    width: 100%;
    border-radius: 6px;
}

.box-produto > img {
    width: 100%;
    height: auto;
    /* height: 150px; */
    border-radius: 6px 6px 0 0;
    /* object-fit: cover; */
}

.box-produto .content {
    padding: 30px;
}

.preco {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    color: #1b264d;
}

.preco span {
    font-size: 14px;
    line-height: 14px;
}

.destaque {
    color: #1b264d;
}

.box-produto .footer {
    border-top: 1px solid #f8f8f8;
    padding: 20px 15px;
}

.nopaddingb {
    padding-bottom: 0;
}

.banner_superior img {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
}

.box-fields {
    background-color: #fff;
    border-radius: 6px;
    padding: 30px;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.box-fields.open {
    background-color: var(--white);
}

.box-fields .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-fields .header .title {
    display: flex;
    align-items: center;
    opacity: 0.4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.box-fields.open .header .title {
    opacity: 1;
}

.box-fields .header .title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: #1b264d;
    border-radius: 16px;
    margin-right: 10px;
    width: 32px;
    height: 32px;
}

.box-fields .header .icon .iconNormal {
    opacity: 0.4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.box-fields.open .header .icon .iconNormal {
    opacity: 1;
}

.box-fields .header .icon .iconNormal i {
    font-size: 32px;
    color: var(--mid-blue);
}

.box-fields.validated:not(.open) .header .icon .iconNormal {
    display: none;
}

.box-fields .header .icon .iconEdit {
    display: none;
    color: var(--mid-blue);
    cursor: pointer;
}

.box-fields.validated:not(.open) .header .icon .iconEdit {
    display: inline-flex;
    align-items: flex-end;
    height: 32px;
}

.box-fields .header .icon .iconEdit i {
    font-size: 20px;
    line-height: 20px;
}

.box-fields .header .icon .iconEdit span {
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    text-decoration: underline;
    margin-left: 3px;
}

.box-fields .buscaCep {
    display: flex;
    align-items: flex-end;
}

.box-fields .buscaCep .form-group {
    width: calc(100% - 130px);
    padding-right: 30px;
    padding-bottom: 0;
}

.box-fields .buscaCep .form-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-fields .buscaCep .form-group label a {
    font-size: 13px;
    line-height: 13px;
    color: var(--mid-blue);
    text-decoration: underline;
}

.box-fields .buscaCep .form-group label a:hover,
.box-fields .buscaCep .form-group label a:focus {
    color: var(--mid-blue);
    text-decoration: none;
}

.box-fields .buscaCep button {
    width: 130px;
}

.box-fields.box-min {
    width: calc(100% - 30px);
    max-width: 678px;
}

.form-check label {
    cursor: pointer;
    font-weight: normal;
    font-size: 13px;
    line-height: 17px;
    color: #616161;
}

.boxDoisCartoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin-bottom: 25px;
}

.tab-dois-cartoes .card-wrapper {
    display: none;
}

.showDoisCartoes {
    display: none;
}

.tab-dois-cartoes .showDoisCartoes {
    display: block;
}

.box {
    background-color: var(--white);
    padding: 30px 60px 45px;
    border-radius: 6px;
}

.content-info-boleto,
.content-info-pix {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}

.content-info-boleto .content-text,
.content-info-pix .content-text {
    width: calc(100% - 270px);
    padding-left: 15px;
    padding-right: 15px;
}

.content-info-boleto .content-actions,
.content-info-pix .content-actions {
    width: 270px;
    padding-left: 15px;
    padding-right: 15px;
}

.box-boleto {
    background: var(--lil-gray);
    border: 1px solid var(--lil-golden);
    box-sizing: border-box;
    border-radius: 6px;
    padding: 20px 50px;
}

.box-pix-cc {
    background: var(--lil-gray);
    border: 1px solid var(--lil-golden);
    box-sizing: border-box;
    border-radius: 6px;
    padding: 20px;
}

.box-pix-texto .input-copiar {
    font-weight: 700;
    font-size: 13px;
    line-height: 13px;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    height: 64px;
}

.pix-texto-texto textarea {
    resize: none;
    overflow: hidden;
    word-wrap: normal;
}

.box-linha-digitavel {
    background: #d9d9d9;
    border-radius: 6px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.box-linha-digitavel .linha-digitavel-botao {
    width: 68px;
}

.box-linha-digitavel .linha-digitavel-texto {
    width: calc(100% - 68px);
    display: flex;
    align-items: center;
}

.box-linha-digitavel .linha-digitavel-texto .t-copy {
    width: 100px;
    text-align: left;
}

.box-linha-digitavel .input-copiar {
    font-weight: 500;
    font-size: 13px;
    line-height: 13px;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    width: calc(100% - 100px);
}

.box-linha-digitavel .linha-digitavel-botao a {
    cursor: pointer !important;
}

/* Style alerts */
/*
 * Diálogos do SweetAlert no layer dialog do painel (.swal-zero7, no main.css), com
 * as cores do checkout. O requisicaoformulario.js põe as classes e monta a superfície
 * quando acha esta folha na página: a CASCA é o popup e só emoldura; a SUPERFÍCIE
 * carrega título e texto; as ações ficam na casca, embaixo.
 *
 * O SweetAlert injeta o CSS dele no <head> depois desta folha: os `!important`
 * aqui são os mesmos do main.css, e é por eles que o desenho ganha do padrão.
 */
.swal2-container > .swal2-popup.swal-zero7 {
    width: min(448px, calc(100vw - 32px)) !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background-color: var(--ck-surface-sunken) !important;
    box-shadow: 0 0 0 1px var(--ck-border), 0 24px 48px -12px rgba(0, 0, 0, 0.45) !important;
    color: var(--ck-text);
}

/* Raio concêntrico: 16 da casca menos os 6 de respiro. */
.swal-zero7__corpo {
    border-radius: 10px;
    padding: 14px;
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 1px var(--ck-border-strong);
    text-align: start;
}

.swal-zero7 .swal2-title.swal-zero7__titulo {
    display: block;
    /* Espaço para o X não encostar no título de uma linha. */
    margin: 0 0 2px !important;
    padding: 0 32px 0 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: var(--ck-text) !important;
    text-align: start !important;
    text-wrap: balance;
}

.swal-zero7 .swal2-html-container.swal-zero7__texto {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--ck-text-muted) !important;
    text-align: start !important;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* Sem título, o texto é a primeira linha e é ele quem desvia do X. */
.swal-zero7 .swal2-title[style*="none"] + .swal-zero7__texto {
    padding-inline-end: 32px !important;
}

.swal-zero7__texto p {
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.swal-zero7__texto p + p {
    margin-top: 8px !important;
}

/* O diálogo do painel não tem ícone: título e texto dizem o que houve. */
.swal-zero7 .swal2-icon {
    display: none !important;
}

/* Campo do diálogo (textarea do motivo): na casca, logo abaixo da superfície. */
.swal-zero7 > .swal-zero7__campo {
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: var(--ck-surface) !important;
    box-shadow: inset 0 0 0 1px var(--ck-field-ring) !important;
    color: var(--ck-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.swal-zero7 > textarea.swal-zero7__campo {
    min-height: 96px;
    resize: vertical;
}

.swal-zero7 > .swal-zero7__campo::placeholder {
    color: var(--ck-placeholder) !important;
}

.swal-zero7 > .swal-zero7__campo:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--ck-field-focus) !important;
}

.swal-zero7 .swal-zero7__validacao {
    justify-content: flex-start !important;
    margin: 6px 0 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    color: var(--ck-danger) !important;
    font-size: 13px !important;
}

.swal-zero7 .swal-zero7__validacao::before {
    display: none !important;
}

/* Rodapé apoiado na casca: a ação principal à direita, "Fechar" à esquerda. */
.swal-zero7 .swal-zero7__acoes {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 2px 2px !important;
}

/* O diálogo abre com `buttonsStyling: false`, que tira o `.swal2-styled`: sem ele no
   seletor, os botões não dependem do desenho padrão. */
.swal-zero7 .swal-zero7__ok,
.swal-zero7 .swal-zero7__fechar {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition-property: background-color, color, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.swal-zero7 .swal-zero7__ok {
    background-color: var(--ck-brand);
    color: var(--ck-brand-contrast);
}

.swal-zero7 .swal-zero7__ok:hover {
    background-color: var(--ck-accent-hover);
}

.swal-zero7 .swal-zero7__fechar {
    order: -1;
    margin-inline-end: auto;
    padding: 0 12px;
    background-color: transparent;
    color: var(--ck-text-muted);
}

.swal-zero7 .swal-zero7__fechar:hover {
    background-color: var(--ck-surface-muted);
    color: var(--ck-text);
}

.swal-zero7 .swal-zero7__ok:active,
.swal-zero7 .swal-zero7__fechar:active {
    scale: 0.96;
}

.swal-zero7 .swal-zero7__ok:focus-visible,
.swal-zero7 .swal-zero7__fechar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

.swal-zero7 .swal-zero7__ok.swal-zero7__ok_destrutivo {
    background-color: #dc2626;
    color: #ffffff;
}

.swal-zero7 .swal-zero7__ok.swal-zero7__ok_destrutivo:hover {
    background-color: #b91c1c;
}

.swal-zero7 .swal-zero7__ok:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* X fantasma no canto da SUPERFÍCIE: 6 da casca + 14 do respiro dela. */
.swal-zero7 .swal-zero7__close {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ck-text-muted);
    font-size: 0;
    transition-property: background-color, color;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.swal-zero7 .swal-zero7__close:hover,
.swal-zero7 .swal-zero7__close:focus-visible {
    background-color: var(--ck-surface-muted);
    color: var(--ck-text);
    outline: none;
}

.swal-zero7 .swal-zero7__close svg {
    width: 16px;
    height: 16px;
}

/* Entrada e saída do layer dialog: sobe 8px com fade, 200ms, sem escala. */
.swal2-popup.swal-zero7-entra {
    animation: swal-zero7-entra 0.2s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.swal2-popup.swal-zero7-sai {
    animation: swal-zero7-sai 0.2s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes swal-zero7-entra {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
}

@keyframes swal-zero7-sai {
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
}

/* O fundo é o mesmo dos diálogos do checkout: preto a 80% com desfoque. A saída
   usa a classe própria, porque o `.swal2-backdrop-hide` zera o fundo na hora. */
body .swal2-container:has(> .swal-zero7) {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

body .swal2-container.swal2-backdrop-show:has(> .swal-zero7) {
    animation: swal-zero7-fundo-entra 0.2s cubic-bezier(0.32, 0.72, 0, 1) both;
}

body .swal2-container.swal-zero7-fundo-sai {
    animation: swal-zero7-fundo-sai 0.2s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes swal-zero7-fundo-entra {
    from {
        opacity: 0;
    }
}

@keyframes swal-zero7-fundo-sai {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal-zero7-entra,
    .swal2-popup.swal-zero7-sai,
    body .swal2-container.swal2-backdrop-show:has(> .swal-zero7),
    body .swal2-container.swal-zero7-fundo-sai {
        animation-duration: 1ms;
    }
}

/*
 * Toast do painel (Kumo), com as cores do checkout: cartão de 340px, raio 12, anel
 * fino e véu na cor da variante, ícone preenchido (Phosphor) e título na cor dela,
 * X no canto. Desce do topo e sobe ao sair, em 500ms. As classes vêm do mixin Toast
 * do requisicaoformulario.js, o mesmo do painel.
 */
.swal2-container.toast-kumo-container {
    padding: 16px !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.swal2-popup.swal2-toast.toast-kumo {
    --toast: 113 113 122;
    position: relative;
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    width: min(340px, calc(100vw - 32px)) !important;
    padding: 16px 36px 16px 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background-color: var(--ck-surface-raised) !important;
    background-image: linear-gradient(rgb(var(--toast) / 0.07), rgb(var(--toast) / 0.07)) !important;
    box-shadow: 0 0 0 1px rgb(var(--toast) / 0.45), 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    color: var(--ck-text) !important;
    overflow: hidden;
}

.ck-tema-escuro .swal2-popup.swal2-toast.toast-kumo {
    box-shadow: 0 0 0 1px rgb(var(--toast) / 0.45), 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.35) !important;
}

/* Tons da variante, mais claros no escuro para o título manter contraste. */
.swal2-popup.toast-kumo.swal2-icon-success { --toast: 22 163 74; }
.swal2-popup.toast-kumo.swal2-icon-error { --toast: 220 38 38; }
.swal2-popup.toast-kumo.swal2-icon-warning { --toast: 217 119 6; }
.swal2-popup.toast-kumo.swal2-icon-info,
.swal2-popup.toast-kumo.swal2-icon-question { --toast: 37 99 235; }

.ck-tema-escuro .swal2-popup.toast-kumo.swal2-icon-success { --toast: 74 222 128; }
.ck-tema-escuro .swal2-popup.toast-kumo.swal2-icon-error { --toast: 248 113 113; }
.ck-tema-escuro .swal2-popup.toast-kumo.swal2-icon-warning { --toast: 251 191 36; }
.ck-tema-escuro .swal2-popup.toast-kumo.swal2-icon-info,
.ck-tema-escuro .swal2-popup.toast-kumo.swal2-icon-question { --toast: 96 165 250; }

/* O círculo animado do SweetAlert sai; fica o ícone preenchido. */
.swal2-popup.toast-kumo .swal2-icon.toast-kumo__icone {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 20px !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: rgb(var(--toast)) !important;
    animation: none !important;
}

.swal2-popup.toast-kumo .swal2-icon.toast-kumo__icone > :not(i) {
    display: none !important;
}

.swal2-popup.toast-kumo .toast-kumo__titulo {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-align: start !important;
    color: rgb(var(--toast)) !important;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.swal2-popup.toast-kumo:not([class*="swal2-icon-"]) .toast-kumo__titulo {
    grid-column: 1 / -1;
    color: var(--ck-text) !important;
}

.swal2-popup.toast-kumo .toast-kumo__texto {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: start !important;
    color: var(--ck-text-muted) !important;
}

/* `background` com !important também vence o `button {}` das cores do lojista. */
.swal2-popup.toast-kumo .toast-kumo__fechar {
    position: absolute !important;
    top: 8px;
    right: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--ck-text-muted) !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transition-property: background-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

.swal2-popup.toast-kumo .toast-kumo__fechar:hover {
    background: rgb(var(--toast) / 0.15) !important;
    color: var(--ck-text) !important;
}

.swal2-popup.toast-kumo .toast-kumo__fechar:focus-visible {
    outline: 2px solid rgb(var(--toast)) !important;
    outline-offset: 1px;
}

.swal2-popup.toast-kumo.toast-kumo-entra {
    animation: toast-kumo-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.swal2-popup.toast-kumo.toast-kumo-sai {
    animation: toast-kumo-sai 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes toast-kumo-entra {
    from {
        opacity: 0;
        transform: translateY(-150%);
    }
}

@keyframes toast-kumo-sai {
    to {
        opacity: 0;
        transform: translateY(-150%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup.toast-kumo.toast-kumo-entra,
    .swal2-popup.toast-kumo.toast-kumo-sai {
        animation-duration: 0.01ms;
    }
}

/* Cores do lojista: o header pinta todo <button> com a cor dele (`!important`). Os
   botões fantasma dos diálogos seguem transparentes, senão viram um bloco colorido. */
.ck-custom-colors .ck-dialog .ck-dialog__fantasma,
.ck-custom-colors .swal-zero7 .swal-zero7__fechar,
.ck-custom-colors .swal-zero7 .swal-zero7__close {
    background-color: transparent !important;
}

.ck-custom-colors .ck-dialog .ck-dialog__fantasma:hover,
.ck-custom-colors .swal-zero7 .swal-zero7__fechar:hover,
.ck-custom-colors .swal-zero7 .swal-zero7__close:hover {
    background-color: var(--ck-surface-muted) !important;
}

.swal-button-max {
    padding: 5px 10px;
    display: block;
    line-height: 20px;
}

.swal2-container.swal2-center>.swal2-popup {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* No layer dialog a superfície e o rodapé ocupam a largura da casca. */
.swal2-container.swal2-center > .swal2-popup.swal-zero7 {
    align-items: stretch !important;
}

.swal2-input {
    text-align: center !important;
}

.box-order-bump {
    background: #F6F6F6;
    border-radius: 6px;
    /* margin-bottom: 15px; */
}

.box-order-bump .header {
    border-radius: 6px 6px 0 0;
    padding: 17px 18px 13px;
    background-color: var(--red);
    display: flex;
    justify-content: space-between;
}

.box-order-bump .header .icone-diamante {
    background-image: url('../../img/checkout/diamante.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 24px;
    padding-left: 32px;
}

.box-order-bump .content {
    padding: 18px;
}

.box-order-bump .content .box-order-bump-produto {
    display: flex;
    align-items: center;
}

.box-order-bump .content .box-order-bump-produto img {
    border: 1px solid #C4C4C4;
    border-radius: 12px;
    width: 110px;
}

.box-order-bump .content .box-order-bump-produto .info {
    width: 100%;
    padding-left: 20px;
}

.box-order-bump .content .box-order-bump-produto .info .valor_oferta {
    font-size: 14px;
    line-height: 20px;
}

.valor_de {
    text-decoration: line-through;
}

.box-order-bump .content .box-order-bump-produto .info .valor_oferta .valor_de {
    font-size: 14px;
    line-height: 20px;
    color: var(--red);
}

.box-order-bump .content .box-order-bump-produto .info .valor_oferta .valor_por {
    color: #1b264d;
    font-size: 18px;
    line-height: 20px;
}

.box-order-bump .content .box-mensagem {
    background: #FFFFFF;
    border: 1px dashed var(--red);
    border-radius: 6px;
    padding: 18px;
}

.box-order-bump .footer {
    background: #d9d9d9;
    border-radius: 0px 0px 6px 6px;
    text-align: center;
}

.box-order-bump .adicionar-oferta {
    display: flex;
    justify-content: space-evenly;
}

.box-order-bump .footer label {
    font-size: 18px;
    line-height: 20px;
    color: var(--mid-blue);
    padding: 24px 0 21px;
}

.customCheckbox {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: #d9d9d9;
    padding: 20px;
    border-radius: 6px 6px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#modalZap .modal-header {
    border-bottom: 0;
}

/* Hide the browser's default checkbox */
.customCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    height: 18px;
    width: 18px;
    padding: 0;
    display: inline-block;
    border-radius: 2px;
    border: 2px solid var(--mid-blue);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px;
    margin-right: 13px;
    position: relative;
    top: -2px;
}

.customCheckbox input:checked ~ .checkmark {
    background-image: url('../../img/icons/form-item-checkbox-mid-blue.svg');
}

#col-sidebar {
    transition: all 0.3s;
}

.box-pedido {
    background: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 2rem;
}

.box-pedido .header {
    background-color: #1b264d;
    border-radius: 6px 6px 0 0;
    padding: 22px 18px 18px;
}

.box-pedido .content .item {
    padding: 20px 18px;
    border-bottom: 1px solid #F8F8F8;
    display: flex;
    align-items: flex-start;
}

.box-pedido .content .item:last-child {
    border-bottom: 0;
}

.box-pedido .content .item img {
    width: 75px;
    height: auto;
}

.box-pedido .content .item .info {
    width: calc(100% - 75px);
    padding-left: 15px;
}

.box-pedido .content .item .info .valor_produto, .box-produto .valor_produto {
    font-size: 16px;
    line-height: 20px;
}

.box-pedido .content .item .info .valor_produto .valor_de, .box-produto .valor_produto .valor_de {
    font-size: 16px;
    line-height: 20px;
    color: var(--red);
    text-decoration-line: line-through;
}

.box-pedido .content .item .info .valor_produto .valor_por, .box-produto .valor_produto .valor_por {
    color: var(--mid-blue);
    font-size: 18px;
    line-height: 20px;
}

.box-pedido .total {
    background: #F6F6F6;
    padding: 20px 18px;
}

.box-pedido .footer {
    border-top: 1px solid #f8f8f8;
    padding: 20px 15px;
}

.swal-width-assinatura {
    width: 640px !important;
}

.nomargint {
    margin-top: 0px !important;
}

#termos_aceite .modal-dialog {
    max-width: 700px;
}

svg.powered path {
    fill: #1b264d;
}
svg.powered path.white {
    fill: #ffffff;
}

/**************Página Aguardando Pagamento*************************/
.btn-copy-paste {
    padding: 15px 30px;
}

.logo-pix-awaiting {
    width: 150px;
}

.simple-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #003B82;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid #003B82;
}

@media (min-width: 993px) {
}

@media (max-width: 992px) {
    body {
        padding-top: 82px;
    }

    section {
        padding: 30px 0;
    }

    footer {
        padding: 30px 0 30px;
    }

    .content-invert-m {
        display: flex;
        flex-direction: column-reverse;
    }

    h1,
    .t-h1 {
        font-size: 36px;
        line-height: 46px;
    }

    h4,
    .t-h4 {

        font-weight: normal;
        font-size: 24px;
        line-height: 36px;
    }

    p.min,
    .t-p.min {
        font-size: 14px;
        line-height: 19px;
    }

    p,
    .t-p {
        font-size: 16px;
        line-height: 25px;
    }

    .t-citacao {
        font-size: 18px;
        line-height: 24px;
    }

    .t-link {
        font-size: 12px;
        line-height: 13px;
    }

    .m-block {
        display: block;
    }

    .row {
        margin-right: -8px;
        margin-left: -8px;
    }
    
    .row > * {
        padding-right: 8px;
        padding-left: 8px;
    }

    .nomargintm {
        margin-top: 0px !important;
    }

    .margintm5 {
        margin-top: 5px;
    }

    .margintm15 {
        margin-top: 15px;
    }

    .margintm20 {
        margin-top: 20px;
    }

    .margintm30 {
        margin-top: 30px;
    }
    .marginbm10 {
        margin-bottom: 10px;
    }
    .marginbm15 {
        margin-bottom: 15px;
    }
    .marginrm5 {
        margin-right: 5px;
    }
    .marginlm5 {
        margin-left: 5px;
    }
    .marginrm10 {
        margin-right: 10px;
    }

    ul.cert {
        justify-content: space-between;
    }

    ul.cert li {
        padding: 0 20px;
    }

    .box-produto .footer {
        padding: 15px 10px;
    }

    .box-produto .content {
        padding: 15px;
    }

    form .form-group label .min {
        font-size: 11px;
        line-height: 13px;
    }

    .box-fields {
        padding: 20px 10px;
        margin-top: 90px;
    }

    form .form-group label {
        font-size: 16px;
        line-height: 25px;
    }

    form .form-group input, form .form-group select, form .form-group textarea {
        padding: 7px 8px;
        font-size: 14px;
        line-height: 18px;
    }

    .box-fields .buscaCep {
        align-items: flex-end;
        flex-direction: column;
    }

    .box-fields .buscaCep .form-group {
        width: 100%;
        padding-right: 0;
    }

    .box-fields .buscaCep button {
        width: 100%;
        margin-top: 22px;
    }

    .box-fields .header .icon .iconNormal i {
        font-size: 30px;
    }

    .radiosPagamentos {
        flex-direction: column;
    }

    .radiosPagamentos .item {
        width: 100%;
        margin-bottom: 10px;
    }

    .box-fields.validated:not(.open) .header .icon .iconEdit {
        height: 30px;
    }

    .box {
        padding: 25px;
    }

    .icon-max {
        font-size: 42px;
    }

    .content-info-boleto,
    .content-info-pix {
        margin: 0;
        flex-direction: column;
    }
    .box-boleto {
        padding: 20px;
    }

    .box-linha-digitavel {
        text-align: center;
        height: auto;
        flex-direction: column;
        padding: 15px;
    }

    .box-linha-digitavel .linha-digitavel-texto {
        width: 100%;
        flex-direction: column;
    }

    .content-info-boleto .content-text,
    .content-info-pix .content-text {
        width: 100%;
        padding: 0;
    }

    .content-info-boleto .content-actions,
    .content-info-pix .content-actions {
        width: 100%;
        padding: 0;
    }
    .box-linha-digitavel .linha-digitavel-botao {
        width: 100%;
    }
    .box-linha-digitavel .linha-digitavel-botao a {
        display: inline-flex;
        align-items: center;
    }
    .box-linha-digitavel .input-copiar {
        width: 100%;
        margin: 15px 0;
        font-size: 12px;
        height: 30px;
        word-wrap: normal;
    }

    .vh-align-center span.aux {
        text-align: left;
    }

    .box-order-bump .content {
        padding: 12px;
    }

    .box-order-bump .content .box-order-bump-produto img {
        width: 90px;
    }

    .box-order-bump .content .box-order-bump-produto .info {
        width: calc(100% - 90px);
        padding-left: 15px;
    }

    .box-order-bump .content .box-order-bump-produto .info .valor_oferta {
        font-size: 12px;
        line-height: 18px;
    }

    .box-order-bump .content .box-order-bump-produto .info .margint15 {
        margin-top: 5px;
    }

    .box-order-bump .content .box-order-bump-produto .info .valor_oferta .valor_por {
        font-size: 14px;
    }

    .box-order-bump .content .box-mensagem {
        padding: 12px;
    }

    .box-order-bump .content .box-mensagem .t-legenda {
        font-size: 11px;
    }

    .box-order-bump .header .min {
        text-align: right;
    }

    .banner_superior.mobile img {
        height: auto;
    }

    #sidebar {
        position: inherit !important;
    }

    .radiosPagamentos .radiomark {
        padding: 10px 20px 10px !important;
    }

    .radiosPagamentos .radiomark svg{
        width: 24px !important;
        height: 16px !important;
    }

    #sticky_bottom.fixed-bottom {
        background-color: rgb(255, 255, 255);
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 10px;
    }
    
    
    #sticky_bottom p.valor_produto {
        font-size: 14px;
    }
    
    #sticky_bottom.fixed-bottom p, #sticky_bottom.fixed-bottom p.valor_produto {
        font-size: 12px;
    }
    
    #sticky_bottom p.margint10 {
        margin-top: 0 !important;
    }
    
    #sticky_bottom img {
        width: 90px;
    }
    
    #sticky_bottom .content-info-produto {
        width: calc(100% - 90px);
        padding-left: 15px;
    }

    #sticky_bottom.fixed-bottom img {
        width: 80px;
    }
    
    #sticky_bottom.fixed-bottom .content-info-produto {
        width: calc(100% - 80px);
        padding-left: 15px;
    }
}

@media (max-width: 480px) {
}

.bg-checkout {
    background-color: #09090b;
}

.bg-checkout .text-countdown {
    color: #f9f9f9;
}

svg.icon-countdown path {
    fill: #f9f9f9; /* Cor desejada */
}

.marginb90 {
    margin-bottom: 90px !important;
}

.marginb100 {
    margin-bottom: 100px !important;
}

.diagonal-strike, #product_value span {
    font-weight: 400;
    line-height: 20px;
    font-style: normal;
}

.diagonal-strike {
    position: relative;
    display: inline-block;
    color: #999;
    font-size: 14px !important;
}

#product_value span, .label-price {
    font-size: 10px !important;
}

.diagonal-strike::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 2px solid red;
    transform: rotate( 3deg );
    transform-origin: top left;
    pointer-events: none;
}

.bg-success-light {
    background-color: rgba(40, 167, 69, 0.1);
    font-size: 0.8rem;
}

/* BRL Estimate Badge */
.brl-estimate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background-color: #f0f4ff;
    border: 1px solid #d4ddf2;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #4a5a82;
}

.brl-estimate__label {
    font-weight: 600;
    color: #8895b3;
    font-size: 14px;
}

.brl-estimate__value {
    font-weight: 700;
    color: var(--mid-blue);
    font-size: 14px;
}

.brl-estimate__hint {
    font-weight: 400;
    color: #8895b3;
    font-size: 11px;
    white-space: nowrap;
}

/* Coupon feedback */
.coupon-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    border: 1px solid transparent;
}

.coupon-feedback--success {
    background: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.35);
    color: #146c43;
}

.coupon-feedback--error {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.35);
    color: #b02a37;
}

.coupon-feedback--warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.45);
    color: #997404;
}

.coupon-feedback__text {
    flex: 1;
}

.btn-remove-cupom {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

.input-cupom.is-coupon-applied {
    border-color: rgba(25, 135, 84, 0.55);
    background-color: rgba(25, 135, 84, 0.04);
}

.btn-cupom[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Order bump do Replicador (issue #317) — a caixa segue o desenho dos campos do checkout. */
.order-bump-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 20px;
}

.order-bump-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 15px;
    border: 2px dashed #c9c9c9;
    border-radius: 6px;
    background: #f8f8f8;
    cursor: pointer;
    transition: all 0.3s;
}

.order-bump-item:hover {
    border-color: var(--dark-blue);
}

.order-bump-item:has(.order-bump-check:checked) {
    border-style: solid;
    border-color: var(--dark-blue);
    background: #ffffff;
}

.order-bump-item .order-bump-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--dark-blue);
}

.order-bump-item strong {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--dark-blue);
}

.order-bump-item .order-bump-detail {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    color: var(--gray-light);
}

/*
|--------------------------------------------------------------------------
| Checkout no desenho do painel
|--------------------------------------------------------------------------
|
| Mesmo HTML de sempre, vestido com a linguagem visual do painel: superfície
| com anel de 1px, campos de 36px com raio 8, rótulos de 14px/500, abas
| segmentadas e botões sem caixa-alta. É tudo CSS escrito aqui, à mão: o
| checkout é um layout à parte e não carrega o main.css nem os componentes
| Blade do painel.
|
| As cores seguem as do tema do checkout (--ck-*, em theme.css), então o modo
| escuro e as cores configuradas pelo lojista continuam valendo.
|
| Tudo fica sob #checkout, e é esse id que faz estas regras ganharem das do
| theme.css, que é carregado depois deste arquivo. Os `!important` daqui só
| existem para vencer utilitárias que já são `!important` no próprio HTML
| (.bold, .bolder, .margint10, .p-3, .me-3...).
|
*/

/*
| Superfícies
*/

/* A página é um flex em coluna com os filhos centralizados (.ck-page), então a
   seção media a largura pelo conteúdo: ao trocar de cartão para PIX o conteúdo
   mudava e a tela inteira encolhia um pouco. Com a largura cheia, quem manda é o
   .container, e ela não depende mais do que está dentro. */
#checkout {
    width: 100%;
}

/* Mesmo motivo na vertical: o .ck-page centraliza na altura (min-height: 100vh),
   e com o checkout mais baixo que a janela a troca entre cartão e PIX, que têm
   alturas diferentes, fazia a tela inteira pular metade da diferença. A margem
   automática fica com a sobra embaixo e prende o checkout no topo; as telas
   curtas (aguardando, obrigado, falha) seguem centralizadas. */
#checkout {
    margin-bottom: auto;
}

#checkout .box-fields {
    padding: 24px;
    border: 0;
    border-radius: 10px;
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 1px var(--ck-border), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/*
| Cabeçalho do produto
*/

#checkout #sticky_bottom {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ck-border);
}

#checkout #sticky_bottom img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-surface-sunken);
    box-shadow: 0 0 0 1px var(--ck-border);
}

/* Ícone de reserva (onerror no HTML): no tamanho próprio, centralizado no quadro. */
#checkout #sticky_bottom img.is-fallback {
    object-fit: none;
}

#checkout #sticky_bottom .content-info-produto {
    min-width: 0;
}

#checkout #sticky_bottom .content-info-produto > p:first-child {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--ck-text);
    text-wrap: balance;
}

#checkout .view_valor_produto {
    margin-top: 6px;
}

/* O preço muda com cupom, plataforma e replicador: dígito de largura fixa para
   o valor não pular de largura a cada troca. */
#checkout .view_valor_produto #product_value,
#checkout .view_valor_produto .precounico {
    margin: 0 !important;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
}

/* "De / Por" do desconto. O script do cupom reescreve este trecho com as mesmas
   classes, então o estilo vale para os dois caminhos. */
#checkout .view_valor_produto > .d-flex {
    align-items: flex-end;
    column-gap: 16px !important;
}

#checkout .view_valor_produto .pricing-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#checkout .view_valor_produto .label-price {
    font-size: 12px !important;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ck-text-muted);
}

/* Riscado tipográfico no lugar da linha vermelha girada. */
#checkout .view_valor_produto .diagonal-strike {
    font-size: 14px !important;
    line-height: 1.4;
    color: var(--ck-text-muted);
    font-variant-numeric: tabular-nums;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

#checkout .view_valor_produto .diagonal-strike::after {
    content: none;
}

#checkout #sticky_bottom .destaque.t-link {
    width: fit-content;
    margin-top: 8px !important;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ck-text-soft);
    text-decoration: underline;
    text-decoration-color: var(--ck-border-strong);
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}

#checkout #sticky_bottom .destaque.t-link:hover {
    color: var(--ck-text);
    text-decoration-color: currentColor;
}

/* Barra fixa do celular: a mesma linha do produto, compacta. */
#checkout #sticky_bottom.fixed-bottom {
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 0;
    border-top: 1px solid var(--ck-border);
}

#checkout #sticky_bottom.fixed-bottom img {
    width: 44px;
    height: 44px;
}

#checkout #sticky_bottom.fixed-bottom .content-info-produto > p:first-child {
    font-size: 14px;
}

#checkout #sticky_bottom.fixed-bottom .view_valor_produto {
    margin-top: 2px;
}

#checkout #sticky_bottom.fixed-bottom #product_value,
#checkout #sticky_bottom.fixed-bottom .precounico {
    font-size: 16px;
}

#checkout #sticky_bottom.fixed-bottom .destaque.t-link {
    display: none !important;
}

#checkout .package-contents {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--ck-border);
}

/*
| Campos
*/

/* O respiro de baixo é onde a mensagem do validador aparece (ela é absoluta). */
#checkout form .form-group {
    margin: 0;
    padding-bottom: 18px;
}

#checkout form .form-group label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ck-text);
}

/* O campo do painel: 36px, raio 8, anel de 1px sobre a cor da superfície. No
   foco o anel engrossa em vez de o campo trocar de fundo. */
#checkout form .form-group input:not([type="checkbox"]):not([type="radio"]),
#checkout form .form-group select,
#checkout form select.form-control {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--ck-text);
    background-color: var(--ck-surface);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--ck-field-ring);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#checkout form .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
#checkout form .form-group select:focus,
#checkout form .form-control:focus {
    outline: none;
    border: 0;
    color: var(--ck-text);
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 2px var(--ck-field-focus);
}

#checkout form .form-group input:not([type="checkbox"]):not([type="radio"]):disabled {
    color: var(--ck-text-muted);
    background-color: var(--ck-surface);
    cursor: not-allowed;
}

#checkout form .form-group.has-error input:not([type="checkbox"]):not([type="radio"]),
#checkout form .form-group.has-error select {
    box-shadow: 0 0 0 1px var(--ck-danger);
}

#checkout form .form-group.has-error input:not([type="checkbox"]):not([type="radio"]):focus,
#checkout form .form-group.has-error select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-danger) 50%, transparent);
}

/* A seta é a do painel (para cima e para baixo), na cor apagada do tema
   (--ck-select-arrow, uma por tema no theme.css). */
#checkout form .form-group select,
#checkout form select.form-control {
    padding-right: 36px;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--ck-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}


#checkout form .help-block.with-errors {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ck-danger);
}

#checkout form .help-block.with-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
| Campos do cartão
*/

/* Dica curta embaixo do campo, alinhada à direita ("Como está impresso no
   cartão", "CVV / CVC"). A mensagem do validador continua à esquerda. */
#checkout .ck-hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

#checkout .ck-hint_end {
    text-align: right;
}

/* Bandeiras aceitas na ponta do campo do número, em escala de cinza para não
   competirem com o campo. No tema escuro a imagem também é invertida: o logo da
   Elo é preto e sumiria no fundo. A opacidade acerta o tom com o texto apagado
   da tela sem perder a leitura. */
#checkout .ck-card-number,
#checkout .ck-cvv {
    position: relative;
}

#checkout form .ck-card-number #number {
    padding-right: 100px;
}

#checkout .ck-card-number__flags {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}

#checkout .ck-card-number__flags img {
    display: block;
    width: auto;
    height: 8px;
    filter: grayscale(1) contrast(1.15);
    opacity: 0.7;
}

/* A da Amex é quadrada: um pouco mais alta para ter o mesmo peso das outras. */
#checkout .ck-card-number__flags img[src$="amex.svg"] {
    height: 11px;
}

.ck-tema-escuro #checkout .ck-card-number__flags img {
    filter: grayscale(1) invert(1) contrast(1.15);
    opacity: 0.75;
}

/* Validade e CVV colados: sem o respiro do grid entre as colunas e sem o raio do
   lado em que se encostam. O anel de cada um cobre a emenda, e o campo em foco
   sobe para o anel dele não ficar por baixo do vizinho. */
#checkout .ck-card-pair > .col-6:first-child {
    padding-right: 0;
}

#checkout .ck-card-pair > .col-6:last-child {
    padding-left: 0;
}

#checkout form .ck-card-pair #card_expiry {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#checkout form .ck-card-pair #cvv {
    padding-right: 38px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#checkout form .ck-card-pair #card_expiry:focus,
#checkout form .ck-card-pair #cvv:focus {
    position: relative;
    z-index: 1;
}

#checkout .ck-cvv__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 20px;
    height: 16px;
    color: var(--ck-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Celular estreito: sem espaço para quatro selos e o número ao mesmo tempo. */
@media (max-width: 374.98px) {
    #checkout .ck-card-number__flags img:nth-child(n + 3) {
        display: none;
    }

    #checkout form .ck-card-number #number {
        padding-right: 60px;
    }
}

/*
| Checkbox
*/

/* O checkbox do painel (caixa de 16px, raio 4, anel de 1px, marcado na cor do
   botão cheio com o check no contraste dela), desenhado aqui à mão. Vale para o
   aceite dos termos e para o replicador. */
#checkout input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: var(--ck-surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    box-shadow: 0 0 0 1px var(--ck-field-ring);
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#checkout input[type="checkbox"]:hover {
    box-shadow: 0 0 0 1px var(--ck-text-muted);
}

#checkout input[type="checkbox"]:checked {
    background-color: var(--ck-accent-strong);
    background-image: var(--ck-check-icon);
    box-shadow: 0 0 0 1px var(--ck-accent-strong);
}

#checkout input[type="checkbox"]:focus {
    outline: none;
}

#checkout input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 1px var(--ck-field-ring), 0 0 0 3px var(--ck-focus-ring);
}

#checkout input[type="checkbox"]:checked:focus-visible {
    box-shadow: 0 0 0 1px var(--ck-accent-strong), 0 0 0 3px var(--ck-focus-ring);
}

/* Termos não aceitos na tentativa de compra: o validador marca o grupo. */
#checkout .has-error input[type="checkbox"] {
    box-shadow: 0 0 0 1px var(--ck-danger);
}

/*
| Cupom: "Aplicar" dentro do campo
*/

/* Como o mostrar/esconder da senha: o botão flutua na ponta direita do campo, e o
   campo reserva esse espaço para o código digitado nunca passar por baixo dele. */
#checkout .ck-coupon {
    position: relative;
}

#checkout form .form-group .ck-coupon input.input-cupom {
    padding-right: 96px;
}

#checkout form .form-group .ck-coupon input.input-cupom.is-coupon-applied {
    background-color: var(--ck-success-soft);
    box-shadow: 0 0 0 1px var(--ck-success);
}

/* 4px de respiro em volta, raio de dentro = raio do campo (8) menos o respiro. */
#checkout .ck-coupon .btn-cupom {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    border: 0;
    border-radius: 4px;
    background-color: var(--ck-surface-sunken);
    color: var(--ck-text);
    box-shadow: inset 0 0 0 1px var(--ck-border);
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

#checkout .ck-coupon .btn-cupom:hover,
#checkout .ck-coupon .btn-cupom:focus {
    background-color: var(--ck-border);
    color: var(--ck-text);
}

#checkout .ck-coupon .btn-cupom:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--ck-border-strong), 0 0 0 3px var(--ck-focus-ring);
}

#checkout .ck-coupon .btn-cupom:active {
    transform: scale(0.97);
}

#checkout .ck-coupon .btn-cupom[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Com cores do lojista o header pinta todo <button> com a cor de botão dele; o
   texto passa a ser o contraste da marca para não sumir nessa cor. */
.ck-custom-colors #checkout .ck-coupon .btn-cupom,
.ck-custom-colors #checkout .ck-coupon .btn-cupom:hover,
.ck-custom-colors #checkout .ck-coupon .btn-cupom:focus {
    color: var(--ck-brand-contrast);
    box-shadow: none;
}

#checkout .coupon-feedback {
    margin: 0 0 16px;
    border-radius: 8px;
}

/* Asterisco de obrigatório, em vermelho. O `required` do campo é o que o leitor
   de tela anuncia; o asterisco é só visual (aria-hidden). */
#checkout .ck-required {
    margin-left: 2px;
    color: var(--ck-danger);
}

/*
| Forma de pagamento: abas segmentadas
*/

#checkout .ck-section {
    margin-top: 4px;
}

#checkout .ck-section__title {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ck-text);
}

#checkout .ck-section > .col-lg-12 {
    padding: 0;
}

/* O raio de dentro é o de fora menos o respiro, para as curvas ficarem
   concêntricas. As duas opções ficam lado a lado também no celular. */
#checkout .radiosPagamentos > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border-radius: 10px;
    background-color: var(--ck-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--ck-border);
}

#checkout .radiosPagamentos > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

#checkout .radiosPagamentos .item {
    display: block;
    margin: 0;
    cursor: pointer;
}

#checkout .radiosPagamentos .radiomark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ck-text-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

#checkout .radiosPagamentos .radiomark span {
    margin: 0;
    font-weight: 500 !important;
    text-transform: none;
}

#checkout .radiosPagamentos .radiomark i {
    padding: 0 !important;
    font-size: 13px;
}

#checkout .radiosPagamentos .radiomark svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    padding: 0 !important;
    fill: currentColor;
}

#checkout .radiosPagamentos .item:hover input ~ .radiomark {
    border: 0;
    background-color: transparent;
    color: var(--ck-text);
}

#checkout .radiosPagamentos .item input:checked ~ .radiomark {
    border: 0;
    background-color: var(--ck-surface);
    color: var(--ck-text);
    box-shadow: 0 0 0 1px var(--ck-border), 0 1px 2px rgba(16, 24, 40, 0.06);
}

#checkout .radiosPagamentos .item input:checked ~ .radiomark i,
#checkout .radiosPagamentos .item input:checked ~ .radiomark svg {
    color: var(--ck-accent-strong);
}

#checkout .radiosPagamentos .item input:focus-visible ~ .radiomark {
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

/* Os painéis de cartão e PIX deixam de ser uma caixa dentro da caixa: os campos
   assentam direto na superfície. */
#checkout #metodoCartaoDeCredito.card,
#checkout #metodoPix.card {
    margin-top: 16px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* A prévia do cartão acompanha o topo do campo do número (rótulo de 18px mais 6px
   de respiro), em vez de centralizar numa coluna que cresceu com as parcelas. */
#checkout #metodoCartaoDeCredito > .row:first-child {
    align-items: flex-start;
}

@media (min-width: 992px) {
    #checkout #metodoCartaoDeCredito > .row:first-child > .col-lg-6:last-child {
        margin-top: 24px !important;
    }
}

/* PIX: os três argumentos em lista, ícone à esquerda, sem moldura. */
#checkout #metodoPix > .row {
    row-gap: 14px;
}

#checkout #metodoPix .card {
    grid-template-columns: 32px 1fr;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#checkout #metodoPix .card > i,
#checkout #metodoPix .card > svg {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
}

#checkout #metodoPix .card p.min {
    margin: 0 0 2px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500 !important;
    color: var(--ck-text);
}

#checkout #metodoPix .card p.mid-min {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

#checkout #metodoPix > p.mid-min {
    margin-top: 16px !important;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

#checkout #metodoPix .preco {
    margin-top: 16px !important;
    padding-top: 16px;
}

#checkout #metodoPix .preco > span:first-child {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ck-text-muted);
}

#checkout #metodoPix .preco .valor-total {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}

/*
| Replicador (order bump)
*/

#checkout .order-bump-list {
    gap: 8px;
    margin: 0 0 18px;
}

#checkout .order-bump-item {
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-surface);
    box-shadow: inset 0 0 0 1px var(--ck-field-ring);
    transition: background-color 0.15s, box-shadow 0.15s;
}

#checkout .order-bump-item:hover {
    box-shadow: inset 0 0 0 1px var(--ck-text-muted);
}

#checkout .order-bump-item:has(.order-bump-check:checked) {
    background-color: var(--ck-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ck-accent-strong);
}

#checkout .order-bump-item .order-bump-check {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--ck-accent-strong);
}

#checkout .order-bump-item strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ck-text);
}

#checkout .order-bump-item .order-bump-detail {
    font-size: 13px;
    line-height: 18px;
    color: var(--ck-text-muted);
    font-variant-numeric: tabular-nums;
}

/*
| Termos e botão de compra
*/

#checkout .form-check.form-group {
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    margin-top: 16px !important;
    padding-left: 0;
}

#checkout .form-check.form-group input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 !important;
    accent-color: var(--ck-accent-strong);
}

#checkout .form-check.form-group label {
    margin: 0 !important;
    font-weight: 400;
    cursor: pointer;
}

#checkout .form-check.form-group label p.t-link {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ck-text-soft);
    text-wrap: pretty;
}

#checkout .form-check.form-group label a.destaque {
    font-size: 13px;
    font-weight: 500;
    color: var(--ck-text);
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
}

/* O único botão cheio da tela. Cor, hover e estado bloqueado continuam os do
   theme.css; aqui entram a medida e a tipografia do painel. */
#checkout #form-card button[type="submit"].btn {
    gap: 8px;
    height: 44px;
    margin-top: 4px;
    padding: 0 20px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 8px;
    box-shadow: none;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

#checkout #form-card button[type="submit"].btn:focus-visible {
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

#checkout #form-card button[type="submit"].btn:active {
    transform: scale(0.98);
}

/* Bloqueado até o formulário fechar (o validador põe .disabled). O verde apagado
   com borda parecia um botão "selecionado", não travado: agora é neutro, na
   mesma forma, e só o do estado liberado leva a cor da marca. */
#checkout #form-card button[type="submit"].btn.disabled,
#checkout #form-card button[type="submit"].btn:disabled {
    opacity: 1;
    border: 0;
    background-color: var(--ck-surface-sunken);
    color: var(--ck-text-muted);
    box-shadow: inset 0 0 0 1px var(--ck-border);
    cursor: not-allowed;
}

/* Com cores do lojista o fundo é sempre o dele (!important no header): o
   bloqueio aparece pela opacidade. */
.ck-custom-colors #checkout #form-card button[type="submit"].btn.disabled,
.ck-custom-colors #checkout #form-card button[type="submit"].btn:disabled {
    opacity: 0.5;
    color: #ffffff;
    box-shadow: none;
}

/*
| Dados do comprador: cartão em camadas
*/

/* Moldura, faixa de título e superfície, como o layer card do painel. O anel é
   box-shadow e não border, senão a superfície ficaria 2px mais estreita que a
   moldura. As duas camadas têm o mesmo raio porque dividem as bordas. */
#checkout .ck-layer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--ck-surface-sunken);
    box-shadow: 0 0 0 1px var(--ck-border);
    color: var(--ck-text);
}

#checkout .ck-layer__title {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ck-text-muted);
}

#checkout .ck-layer__body {
    padding: 16px;
    border-radius: 10px;
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 1px var(--ck-border-strong);
}

#checkout .ck-buyer__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

#checkout .ck-buyer__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--ck-accent-soft);
    color: var(--ck-accent-strong);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

#checkout .ck-buyer__name {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

#checkout .ck-buyer__group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ck-border);
}

#checkout .ck-buyer__group-title {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ck-text-muted);
}

#checkout .ck-buyer__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ícone e texto alinhados pela primeira linha: um endereço longo quebra em duas
   e o ícone fica na altura da primeira, não no meio do bloco. */
#checkout .ck-buyer__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-text-soft);
    font-variant-numeric: tabular-nums;
}

#checkout .ck-buyer__list li > span {
    min-width: 0;
}

/* Ícones do Lucide, o mesmo conjunto do painel: 14px, traço fino, cor apagada. */
#checkout .ck-buyer__list svg,
#checkout .ck-buyer__secure svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
}

#checkout .ck-buyer__list svg {
    margin-top: 3px;
    color: var(--ck-text-muted);
}

/* E-mail longo não pode vazar do cartão. */
#checkout .ck-buyer__break {
    overflow-wrap: anywhere;
}

#checkout .ck-buyer__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ck-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ck-text-muted);
}

#checkout .ck-buyer__secure svg {
    color: var(--ck-success);
}

/*
| Diálogos (detalhes do produto e termos)
*/

/* O layer dialog do painel: casca na cor de camada com 6px de respiro e raio 16,
   superfície do conteúdo com anel e raio 10 (16 - 6, concêntrico) e o rodapé
   apoiado na casca. Os modais ficam fora do #checkout, daí o escopo por classe. */
.ck-dialog .modal-dialog.ck-dialog__janela {
    width: auto;
    max-width: min(480px, calc(100vw - 32px));
    margin-inline: auto;
}

.ck-dialog.ck-dialog_largo .modal-dialog.ck-dialog__janela {
    max-width: min(640px, calc(100vw - 32px));
}

.ck-dialog .modal-content.ck-dialog__casca {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 32px);
    padding: 6px;
    border: 0;
    border-radius: 16px;
    background-color: var(--ck-surface-sunken);
    box-shadow: 0 0 0 1px var(--ck-border), 0 24px 48px -12px rgba(0, 0, 0, 0.45);
    color: var(--ck-text);
}

.ck-dialog .ck-dialog__superficie {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 10px;
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 1px var(--ck-border-strong);
}

.ck-dialog .ck-dialog__cabecalho {
    padding: 16px 18px 0;
}

.ck-dialog .ck-dialog__titulo {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ck-text);
    text-wrap: balance;
}

/* Frase de apoio logo abaixo do título, no tom apagado. */
.ck-dialog .ck-dialog__descricao {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

/* Termo longo rola dentro da superfície; o rodapé fica sempre à vista. */
.ck-dialog .ck-dialog__conteudo {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 18px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ck-text-soft);
}

.ck-dialog .ck-dialog__conteudo article p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty;
}

.ck-dialog .ck-dialog__rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 2px 2px;
}

/* Ação principal do diálogo: o botão cheio do painel (claro no escuro, escuro no
   claro), 36px. */
.ck-dialog .ck-dialog__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-brand);
    color: var(--ck-brand-contrast);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition-property: background-color, opacity, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* A ação principal do diálogo também é <a> (ir para login, criar cadastro): o
   hover do link não pode trocar a cor do texto. */
.ck-dialog .ck-dialog__acao:hover,
.ck-dialog .ck-dialog__acao:focus {
    background-color: var(--ck-accent-hover);
    color: var(--ck-brand-contrast);
}

.ck-dialog .ck-dialog__acao:active {
    scale: 0.96;
}

.ck-dialog .ck-dialog__acao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

.ck-dialog .ck-dialog__acao:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Seta de "seguir": o ícone vai depois do texto e anda 2px no hover. */
.ck-dialog .ck-dialog__acao svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke-width: 2;
    margin-inline-end: -2px;
    transition: translate 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-dialog .ck-dialog__acao:hover svg {
    translate: 2px 0;
}

/* Saída alternativa: fantasma, à esquerda, longe da ação principal — junto dela
   pareceria parte da confirmação. O mesmo desenho do "Fechar" dos diálogos do painel. */
.ck-dialog .ck-dialog__fantasma {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-inline-end: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    color: var(--ck-text-muted);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition-property: background-color, color, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-dialog .ck-dialog__fantasma:hover {
    background-color: var(--ck-surface-muted);
    color: var(--ck-text);
}

.ck-dialog .ck-dialog__fantasma:active {
    scale: 0.96;
}

.ck-dialog .ck-dialog__fantasma:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

/* O `display` das classes acima ganharia do `hidden` do passo que não está à vista. */
.ck-dialog [hidden] {
    display: none !important;
}

/*
| Identificação do visitante (.ck-auth)
*/

.ck-auth .ck-dialog__conteudo {
    padding-top: 16px;
}

.ck-auth__rotulo {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ck-text);
}

/* O campo do painel com o ícone dentro: 36px, raio 8, anel de 1px que vira 2px
   no foco. O ícone não recebe clique, então tocar nele ainda foca o campo. */
.ck-auth__campo {
    position: relative;
}

.ck-auth__campo svg {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    translate: 0 -50%;
    stroke-width: 1.75;
    color: var(--ck-text-muted);
    pointer-events: none;
}

.ck-auth__campo input {
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px 0 36px;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-surface);
    color: var(--ck-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 0 0 1px var(--ck-field-ring);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-auth__campo input::placeholder {
    color: var(--ck-placeholder);
    opacity: 1;
}

.ck-auth__campo input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ck-field-focus);
}

.ck-auth__campo input[aria-invalid="true"] {
    box-shadow: 0 0 0 1px var(--ck-danger);
}

.ck-auth__campo input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-danger) 50%, transparent);
}

.ck-auth__erro {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ck-danger);
}

.ck-auth__erro svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* Descrição do campo, como as do painel: texto de apoio, não um aviso em caixa. */
.ck-auth__dica {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

/* Resultado da consulta: o e-mail em destaque e o que fazer em seguida. */
.ck-auth__status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--ck-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--ck-border);
}

.ck-auth__status-icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--ck-surface-muted);
    color: var(--ck-text);
}

.ck-auth__status_conta .ck-auth__status-icone {
    background-color: var(--ck-success-soft);
    color: var(--ck-success);
}

.ck-auth__status-icone svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.ck-auth__status-texto {
    min-width: 0;
}

.ck-auth__status-texto p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-text-soft);
    text-wrap: pretty;
}

.ck-auth__status-texto .ck-auth__status-email {
    margin-top: 2px;
    font-weight: 500;
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

.ck-auth__seguro {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ck-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ck-text-muted);
}

.ck-auth__seguro svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke-width: 2;
    color: var(--ck-success);
}

/* No celular as ações ocupam a largura toda, a principal por cima: o polegar
   alcança e o rótulo nunca corta. */
@media (max-width: 575.98px) {
    .ck-auth .ck-dialog__rodape {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ck-auth .ck-dialog__acao,
    .ck-auth .ck-dialog__fantasma {
        justify-content: center;
        height: 40px;
        margin-inline-end: 0;
    }
}

/* Entrada do painel: sobe 8px com fade, sem escala. */
.ck-dialog.modal.fade .modal-dialog.ck-dialog__janela {
    transform: translateY(8px);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.ck-dialog.modal.show .modal-dialog.ck-dialog__janela {
    transform: none;
}

/* Fundo do diálogo do painel: preto a 80% com desfoque. O fundo do Bootstrap é
   irmão no <body>, então o :has() liga os dois sem JS. */
body:has(.ck-dialog.show) .modal-backdrop {
    background-color: #000;
    backdrop-filter: blur(5px);
}

body:has(.ck-dialog.show) .modal-backdrop.show {
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .ck-dialog.modal.fade .modal-dialog.ck-dialog__janela {
        transition: none;
    }
}

/*
| Oferta indisponível (venda encerrada, pausada, cancelada, cadastro pendente)
*/

/* Estado vazio do painel no lugar do status em vermelho gigante: ícone num
   círculo na cor do status, título de 18px e uma frase curta explicando. */
#checkout .ck-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0 4px;
    text-align: center;
}

#checkout .ck-status__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    border-radius: 50%;
    color: var(--ck-text-muted);
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

#checkout .ck-status__icone svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
}

#checkout .ck-status_danger .ck-status__icone {
    color: var(--ck-danger);
}

#checkout .ck-status_warning .ck-status__icone {
    color: var(--ck-warning);
}

#checkout .ck-status__titulo {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ck-text);
    text-wrap: balance;
}

#checkout .ck-status__texto {
    max-width: 36ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-text-muted);
    text-wrap: pretty;
}

/* Banner que não carregou: o onerror remove a imagem, e a linha vazia sai junto
   em vez de deixar a margem dela sobrando. */
#banner-main:not(:has(img)) {
    display: none;
}

/*
| Telas de resultado (aguardando pagamento, processando, obrigado, falha)
*/

/* Mesmo desenho do checkout: superfície com anel de 1px, raio 10, texto de 14px,
   títulos de 18px/600, botões de 36px sem caixa-alta. Escopo em .ck-result, a
   classe da <section> de cada uma dessas telas. Os `!important` só vencem as
   utilitárias que já são `!important` no HTML (.bold, .margint30...). */
.ck-result {
    width: 100%;
    padding: 32px 0 24px;
}

.ck-result .box-fields {
    width: 100%;
    max-width: 480px;
    margin-top: 24px !important;
    padding: 24px;
    border: 0;
    border-radius: 10px;
    background-color: var(--ck-surface);
    box-shadow: 0 0 0 1px var(--ck-border), 0 1px 2px rgba(16, 24, 40, 0.04);
    color: var(--ck-text);
    font-size: 14px;
    line-height: 1.5;
}

/* Logo claro no tema claro, o de fundo escuro no tema escuro. Com cores do
   lojista a tela fica sempre clara. */
.ck-result__logo {
    display: block;
    width: 140px;
    height: auto;
}

.ck-result__logo_escuro {
    display: none;
}

.ck-tema-escuro .ck-result__logo_claro {
    display: none;
}

.ck-tema-escuro .ck-result__logo_escuro {
    display: block;
}

/* Título da tela (no "aguardando" ele fica fora da caixa, com o nome do produto). */
.ck-result .col-lg-12 > p.t-h5 {
    margin: 0 !important;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--ck-text);
    text-wrap: balance;
}

.ck-result .box-fields p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-text-soft);
    text-wrap: pretty;
}

.ck-result .box-fields p.t-h5 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--ck-text);
    text-wrap: balance;
}

/* Valores destacados na frase (produto, código da transação, "Pix"). */
.ck-result .box-fields b {
    font-weight: 500;
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

.ck-result .box-fields .margint15 {
    margin-top: 8px !important;
}

.ck-result .box-fields .margint30 {
    margin-top: 16px !important;
}

.ck-result .box-fields .margint45 {
    margin-top: 20px !important;
}

.ck-result .box-fields hr,
.ck-result .box-fields hr.margint30 {
    height: 1px;
    margin: 20px 0 !important;
    border: 0;
    background-color: var(--ck-border);
    opacity: 1;
}

/* Linha do total: rótulo apagado, valor em destaque. */
.ck-result .box-fields > .row:last-child {
    align-items: baseline;
}

.ck-result .box-fields > .row:last-child .col-6:first-child p.t-h5 {
    font-size: 14px;
    font-weight: 500 !important;
    color: var(--ck-text-muted);
}

.ck-result .box-fields > .row:last-child .col-6:last-child p.t-h5 {
    font-size: 20px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* "Voltar ao painel do Trader" e "Já fiz o pagamento": o botão de contorno do
   painel, no lugar do link azul em caixa-alta. */
.ck-result .simple-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-surface);
    color: var(--ck-text);
    box-shadow: inset 0 0 0 1px var(--ck-field-ring);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.ck-result .simple-link:hover {
    background-color: var(--ck-surface-sunken);
    color: var(--ck-text);
}

.ck-result .simple-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--ck-border-strong), 0 0 0 3px var(--ck-focus-ring);
}

.ck-result .simple-link:active {
    transform: scale(0.97);
}

/* Aguardando pagamento: passos, prazo, QR code e o botão de copiar. */
.ck-result .box-fields ol {
    margin-bottom: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ck-text-soft);
}

.ck-result .box-fields ol li + li {
    margin-top: 4px;
}

.ck-result .box-fields ol li::marker {
    color: var(--ck-text-muted);
    font-variant-numeric: tabular-nums;
}

.ck-result .box-pagamento-pix {
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--ck-accent-soft);
    line-height: 1.6;
}

.ck-result .box-pagamento-pix [data-countdown] {
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    color: var(--ck-accent-strong);
}

/* QR code precisa de margem branca em volta para o app do banco ler, também no
   tema escuro. */
.ck-result img[alt="qr-code"] {
    padding: 8px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px var(--ck-border);
}

.ck-result a.btn.btn-copy-paste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background-color: var(--ck-accent-strong);
    color: var(--ck-accent-contrast);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
}

.ck-result a.btn.btn-copy-paste:hover,
.ck-result a.btn.btn-copy-paste:focus {
    background-color: var(--ck-accent-hover);
    color: var(--ck-accent-contrast);
}

.ck-result a.btn.btn-copy-paste:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

.ck-result a.btn.btn-copy-paste:active {
    transform: scale(0.97);
}

.ck-result a.btn.btn-copy-paste svg {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px;
}

.ck-result a.btn.btn-copy-paste strong {
    margin: 0 !important;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .ck-result {
        padding-top: 24px;
    }

    .ck-result .box-fields {
        padding: 20px 16px;
    }
}

/*
| Rodapé (vale para todas as telas do checkout)
*/

/* O respiro mora no parágrafo, não no <footer>: no celular o script da barra fixa
   do produto escreve padding-bottom no footer enquanto a página rola (0 ou 160px),
   e com 0 o texto encostava na borda de baixo. A área segura soma a barra de
   gestos do iPhone. `body` no seletor para ganhar do theme.css, carregado depois. */
body footer {
    padding-top: 0;
}

body footer .t-copy {
    margin: 0;
    padding: 8px 0 calc(32px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ck-text-muted);
    text-wrap: balance;
}

/* A marca em destaque discreto: 500 e o tom de texto secundário, não o negrito
   de 700 que pesava mais que a frase inteira. */
body footer .t-copy strong {
    font-weight: 500;
    color: var(--ck-text-soft);
}

/*
| Celular
*/

@media (max-width: 575.98px) {
    #checkout .box-fields {
        padding: 16px;
    }

    #checkout #sticky_bottom img {
        width: 56px;
        height: 56px;
    }

    #checkout .view_valor_produto #product_value,
    #checkout .view_valor_produto .precounico {
        font-size: 22px;
    }
}

/*
|--------------------------------------------------------------------------
| Responsivo
|--------------------------------------------------------------------------
|
| No fim do arquivo de propósito: parte destas regras precisa vir depois dos
| blocos antigos de celular deste mesmo arquivo, que usam !important.
|
*/

/* O bloco antigo de até 992px põe 82px no topo do body para uma navbar que o
   checkout não tem. No checkout o script do sticky já zerava isso ao carregar
   (ele escreve padding-top inline e continua mandando); nas telas de resultado
   o buraco ficava. */
@media (max-width: 992px) {
    body {
        padding-top: 0;
    }
}

/* Abas de pagamento: o bloco antigo de até 992px força padding de 10px 20px e o
   ícone do PIX em 24x16, ambos com !important, e isso quebrava o segmentado. */
#checkout .radiosPagamentos .radiomark {
    padding: 0 12px !important;
}

#checkout .radiosPagamentos .radiomark svg {
    width: 14px !important;
    height: 14px !important;
}

/* "Cartão de crédito" mais o ícone não cabe na metade da largura dos celulares
   comuns (360 a 414px): abaixo de 420px o ícone sai e o respiro diminui. */
@media (max-width: 419.98px) {
    #checkout .radiosPagamentos .radiomark {
        gap: 6px;
        padding: 0 8px !important;
    }

    #checkout .radiosPagamentos .radiomark i,
    #checkout .radiosPagamentos .radiomark svg {
        display: none;
    }
}

/* 320px: nem o texto sozinho cabe numa linha; ele quebra em vez de vazar. */
@media (max-width: 359.98px) {
    #checkout .radiosPagamentos .radiomark {
        height: auto;
        min-height: 32px;
        padding: 6px 8px !important;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
}

/* "De / Por" do desconto quebra em duas linhas quando os valores não cabem lado
   a lado (320px com preço alto). */
#checkout .view_valor_produto > .d-flex {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Coluna do comprador: era flex em linha, e o banner lateral ficava espremido ao
   lado do cartão em vez de embaixo dele. Seletor longo para ganhar do theme.css. */
#checkout > .container > .row > .col-lg-4.d-flex {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 16px;
}

#checkout > .container > .row > .col-lg-4.d-flex > .rounded img {
    display: block;
    width: 100%;
    height: auto;
}

/* "Aplicar" dentro do cupom mede 28px de altura: a área de toque cresce por um
   pseudo-elemento invisível, sem o botão engordar. */
#checkout .ck-coupon .btn-cupom::after {
    content: "";
    position: absolute;
    inset: -4px;
}

/* Telas de resultado: botões com 40px de altura no toque. */
@media (max-width: 575.98px) {
    .ck-result .simple-link {
        height: 40px;
    }
}