/* Mobile first, ao contrário de live.css: a live é consumida majoritariamente
   em celular (spec "Live Checkout", seção 20), então aqui a base é mobile e
   @media (min-width) só adiciona refinamento pra telas maiores. */

/* Truque padrão pra detectar autofill do navegador via CSS: o Chrome/Safari
   aplicam o pseudo-seletor :-webkit-autofill no campo preenchido por
   autofill (mesmo quando não disparam input/change) — uma animação vazia
   nesse estado dispara o evento 'animationstart', que live-checkout.js
   escuta pra reavaliar se dá pra avançar de step (ver o listener
   correspondente em assets/js/live-checkout.js). Sem efeito visual
   nenhum, existe só pelo evento. */
@keyframes wplcAutofillDetect {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.wplc-checkout-step input:-webkit-autofill {
    animation-name: wplcAutofillDetect;
    animation-duration: 0.001s;
}

/* Offcanvas real: fixo sobre a tela toda, some do DOM via [hidden] e anima
   entrada/saída por transform+opacity (classe .wplc-offcanvas-open, alternada
   em dois frames pelo JS pra garantir que a transição dispare mesmo saindo
   de [hidden]). Cobre quase a tela inteira, tanto no mobile (bottom sheet)
   quanto no desktop (cartão quase cheio), conforme pedido.

   Dois offcanvas com o mesmo tratamento visual, empilháveis: o painel de
   produto (clique na imagem/nome do card fixado) e, por cima dele quando o
   cliente decide comprar, o painel de checkout — mesmo tamanho, só o
   z-index muda. As regras de forma/tamanho ficam nos seletores combinados
   abaixo; o que difere entre os dois (empilhamento) fica em regras
   próprias logo depois, uma por elemento. */
.wplc-checkout-backdrop,
.wplc-product-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.wplc-checkout-backdrop[hidden],
.wplc-product-backdrop[hidden] {
    display: none;
}

.wplc-checkout-backdrop.wplc-offcanvas-open,
.wplc-product-backdrop.wplc-offcanvas-open {
    opacity: 1;
}

.wplc-checkout-panel,
.wplc-product-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    padding: 16px;
    max-height: 94vh;
    /* dvh: no Safari do iPhone, vh é calculado pela altura CHEIA (toolbar
       recolhida) — com a toolbar visível reduzindo a área real, 94% da
       altura cheia pode passar do topo da área visível de verdade. Mesmo
       padrão já usado em live-immersive.css pra .wplc-live. */
    max-height: 94dvh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.28s ease;
}

.wplc-checkout-panel[hidden],
.wplc-product-panel[hidden] {
    display: none;
}

.wplc-checkout-panel.wplc-offcanvas-open,
.wplc-product-panel.wplc-offcanvas-open {
    transform: translateY(0);
}

/* Pilha: produto abre primeiro (mais embaixo), checkout abre por cima dele
   quando o cliente clica em "Comprar" dentro do painel de produto — o
   backdrop do checkout (1002) fica acima do painel de produto (1001) de
   propósito, pra escurecer/cobrir ele igual cobriria a live. */
.wplc-product-backdrop {
    z-index: 1000;
}

.wplc-product-panel {
    z-index: 1001;
}

.wplc-checkout-backdrop {
    z-index: 1002;
}

.wplc-checkout-panel {
    z-index: 1003;
}

/* Trava o scroll do fundo (vídeo/chat) enquanto algum offcanvas está aberto. */
body.wplc-checkout-locked {
    overflow: hidden;
}

/* Modal de login/cadastro (WPLC_Render::auth_modal_html(), assets/js/live-auth.js)
   — mesmo tratamento visual dos offcanvas de produto/checkout acima
   (backdrop + painel, classe .wplc-offcanvas-open), só que num par de
   elementos próprio: pode ser aberto em qualquer momento (gatilho é o
   link de login do chat, não depende de o painel de produto/checkout
   estar aberto), por isso z-index mais alto que os dois (1000-1003),
   pra sempre ficar por cima. */
.wplc-auth-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 1010;
}

.wplc-auth-backdrop[hidden] {
    display: none;
}

.wplc-auth-backdrop.wplc-offcanvas-open {
    opacity: 1;
}

.wplc-auth-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    padding: 20px 16px;
    max-height: 90vh;
    /* dvh: mesmo motivo do .wplc-checkout-panel acima (no Safari do
       iPhone, vh é calculado com a toolbar recolhida — com ela visível,
       90% da altura cheia pode passar do topo da área visível de
       verdade). */
    max-height: 90dvh;
    overflow-y: auto;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    z-index: 1011;
}

.wplc-auth-panel[hidden] {
    display: none;
}

.wplc-auth-panel.wplc-offcanvas-open {
    transform: translateY(0);
}

.wplc-auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #777;
    cursor: pointer;
}

.wplc-auth-tabs {
    display: flex;
    gap: 8px;
    margin: 4px 0 16px;
    border-bottom: 1px solid #eee;
}

.wplc-auth-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.wplc-auth-tab--active {
    color: #157916;
    border-bottom-color: #157916;
}

.wplc-auth-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: #777;
}

.wplc-auth-label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.wplc-auth-label input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Campo de senha com o botão de "mostrar" dentro dele, à direita — em vez
   do ícone nativo que alguns navegadores (Edge) já injetam sozinhos em
   input[type=password], que fica mal posicionado (canto errado, some
   por baixo de outros elementos). Escondemos o nativo do Edge abaixo e
   usamos só o nosso, consistente em qualquer navegador. */
.wplc-auth-password-wrap {
    position: relative;
    display: block;
    margin-top: 4px;
}

.wplc-auth-password-wrap input {
    margin-top: 0;
    padding-right: 40px;
}

.wplc-auth-password-wrap input[type="password"]::-ms-reveal,
.wplc-auth-password-wrap input[type="password"]::-ms-clear {
    display: none;
}

/* O tema já injeta um botão de "mostrar senha" próprio em TODO
   input[type=password] da página (passwordInputsForToggle() em
   themes/life-option-theme/assets/js/app.js, sem opção de pular campos) —
   inclusive no nosso, duplicando com o .wplc-auth-password-toggle acima.
   Escondido só aqui dentro (não em app.js, que continua servindo
   checkout/conta normalmente) — sem isso ele também ficava em fluxo
   normal, inflando a altura do wrap e desalinhando verticalmente o
   botão nosso (que se centraliza em relação à altura do wrap). */
.wplc-auth-password-wrap .btnShowPassword {
    display: none;
}

.wplc-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.wplc-auth-password-toggle:hover {
    color: #444;
}

.wplc-auth-error {
    margin: 0 0 12px;
    color: #d63638;
    font-size: 12px;
}

.wplc-auth-error:empty {
    display: none;
}

.wplc-auth-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #159615;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.wplc-auth-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.wplc-auth-submit:hover:not(:disabled) {
    background: #128a12;
}

@media (min-width: 783px) {
    .wplc-auth-panel {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0;
        width: 90%;
        max-width: 380px;
        border-radius: 16px;
        transition: transform 0.28s ease, opacity 0.28s ease;
        margin: auto;
    }

    .wplc-auth-panel.wplc-offcanvas-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .wplc-product-detail-slide img {

        max-width: 24vw;
    }
}

.wplc-checkout-header {
    margin-bottom: 8px;
}

.wplc-checkout-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Cabeçalho (com o botão de fechar/voltar) sempre alcançável, não importa
   a variação de viewport do navegador — sem isto ele rolava junto com o
   conteúdo (.wplc-checkout-panel/.wplc-product-panel têm overflow-y:auto
   nelas mesmas, não num wrapper de conteúdo à parte), e no Safari do
   iPhone com a toolbar visível ele podia renderizar acima da área
   realmente visível, inacessível (o body fica com scroll travado
   enquanto o painel está aberto, então não dá pra "puxar a página" pra
   revelar). Margem negativa + padding pra cobrir o padding:16px do
   painel, já que o cabeçalho preso precisa ir de borda a borda. */
.wplc-checkout-header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -16px -16px 8px;
    padding: 16px 16px 8px;
    background: #fff;
}

.wplc-checkout-step th {
    padding: 1vw !important;
    align-items: center;
    text-align: center;
}

.wplc-checkout-step td {
    padding: 1vw !important;
    text-align: center;
    align-items: start;
}

.wplc-checkout-back {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--opt-color-green-dark, #159615);
    cursor: pointer;
}

.wplc-checkout-back:hover {
    text-decoration: underline;
}

.wplc-checkout-summary {
    margin-bottom: 12px;
}

.wplc-checkout-summary .wplc-product-card-inner {
    box-shadow: none;
    background: #f7f7f7;
    padding: 10px;
}

/* O resumo do checkout reaproveita o MESMO fragmento HTML do card fixado
   sobre o vídeo (ver assets/js/live-checkout.js, openPanel() — "mesmo
   fragment já usado no card sobreposto, reaproveitado aqui, não
   reconstruído"), então ganha de brinde a faixa "Promoção Relâmpago",
   o selo de frete grátis e o próprio botão "Comprar" (add_to_cart_button/
   ajax_add_to_cart de verdade) — nenhum dos três faz sentido aqui: o
   cliente já está finalizando a compra, não precisa de gancho de
   marketing nem de um segundo botão de adicionar ao carrinho competindo
   com o formulário de pagamento abaixo. Escondidos só neste contexto —
   o mesmo card no overlay do vídeo continua com os três normalmente. */
.wplc-checkout-summary .wplc-product-ribbon,
.wplc-checkout-summary .wplc-product-shipping-tag,
.wplc-checkout-summary .wplc-product-mini-buy {
    display: none;
}

.wplc-checkout-form .wplc-checkout-step {
    padding: 12px 0;
}

.wplc-checkout-form .wplc-checkout-step:last-child {
    border-bottom: none;
}

.wplc-checkout-step .form-row,
.wplc-checkout-step #billing_state_field {
    margin: 0 0 10px;
}

/* billing_first_name/billing_last_name continuam existindo (validação
   nativa do WooCommerce), só escondidos de vez — o cliente só vê e só
   navega (tab/leitor de tela) pelo campo único "Nome completo" acima deles
   (ver class-checkout-render.php); display:none de propósito, não o padrão
   "visualmente escondido, mas lido por leitor de tela" — os dois campos
   nativos são um clone programático, não faz sentido leitor de tela parar
   neles também. */
.wplc-checkout-hidden-fields {
    display: none;
}

.wplc-checkout-step label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--opt-color-gray-dark, #363636);
}

.wplc-checkout-step label abbr.required {
    color: var(--opt-color-orange-dark, #FF9200);
    text-decoration: none;
    margin-left: 2px;
}

.wplc-checkout-step input.input-text,
.wplc-checkout-step select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    /* evita zoom automático no iOS */
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wplc-checkout-step input.input-text:hover,
.wplc-checkout-step select:hover {
    border-color: #bbb;
}

.wplc-checkout-step input.input-text:focus,
.wplc-checkout-step select:focus {
    background: #fff;
    border-color: var(--opt-color-green-medium, #159615);
    box-shadow: 0 0 0 3px rgba(21, 150, 21, 0.15);
    outline: none;
}

/* Mensagem ao sair (blur) de um campo com formato incompleto/inválido —
   ver FIELD_BLUR_VALIDATORS em live-checkout.js. Mesma cor de erro já
   usada em .wplc-auth-error, pra manter um único vocabulário de "erro" na
   live inteira. */
.wplc-field-invalid input.input-text,
.wplc-field-invalid select {
    border-color: #d63638;
}

.wplc-field-error-msg {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #d63638;
}

/* Link de "clique aqui pra entrar" (ver emailAccountBlurMessage() em
   live-checkout.js) — sem isto o <a> herdava a mesma cor vermelha do
   texto ao redor e não parecia clicável. */
.wplc-field-error-msg a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Step em preenchimento: destaque sutil pra deixar claro onde o olho deve
   ir a seguir, sem depender só do cursor — bleed até a borda do painel
   (margin negativo == padding do painel, 16px, ver .wplc-checkout-panel). */
.wplc-checkout-step.wplc-step-current {
    border-radius: 10px;
    margin: 0 -16px;
    padding: 14px 16px;
}

html body ul#shipping_method>li>label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: normal;
    padding: 1vw;
}

.added_to_cart {
    display: none !important;
}

/* Step concluído: recolhe visualmente num cartão compacto sem esconder o
   valor (spec §7) — antes era só um checkmark solto na frente do label,
   quase idêntico ao estado normal; agora o selo vira um badge redondo e o
   grupo inteiro ganha fundo/borda pra ficar claro, de relance, que aquilo
   já foi preenchido e não precisa de atenção. */
.wplc-checkout-step.wplc-step-done {
    padding: 0 !important;
    border-radius: 10px;
}

.wplc-checkout-step.wplc-step-done label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--opt-color-green-dark, #159615);
}

.wplc-checkout-step.wplc-step-done label::before {
    content: '\2713';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--opt-color-green-medium, #159615);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

.wplc-checkout-step.wplc-step-done input.input-text,
.wplc-checkout-step.wplc-step-done select {
    background: #fff;
    border-color: #d9e8d9;
    color: #555;
    padding: 7px 10px;
}

.wplc-checkout-account {
    margin-top: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 3px solid var(--opt-color-green-medium, #159615);
    border-radius: 8px;
}

.wplc-checkout-account-msg {
    margin: 0 0 8px;
    font-size: 13px;
}

/* Erro de validação/pagamento no envio do pedido (wc-checkout.js insere
   isso sozinho — ver WC_Checkout::process_checkout(), sem nada nosso
   envolvido — antes de #wplc-checkout-form, e já rola o painel de volta
   até o topo pra garantir que apareça, mesmo vindo de "pagamento" lá
   embaixo; confirmado com teste real). Só o visual (cor de marca em vez
   do vermelho/rosa padrão do WooCommerce) precisa de ajuste aqui — a
   lógica de mostrar/rolar já vem pronta do próprio core. */
.wplc-checkout-panel .woocommerce-NoticeGroup-checkout {
    margin: 0 0 14px;
}

.wplc-checkout-panel .woocommerce-error {
    margin: 0;
    padding: 12px 14px;
    list-style: none;
    background: #fdecea;
    border: 1px solid #f3b7b0;
    border-radius: 8px;
    color: #c62828;
    font-size: 14px;
    line-height: 1.5;
}

.wplc-checkout-panel .woocommerce-error li {
    margin: 0;
}

.wplc-checkout-panel .woocommerce-error li+li {
    margin-top: 6px;
}

.wplc-checkout-panel .woocommerce-error a {
    color: inherit;
    text-decoration: underline;
}

.wplc-checkout-step-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--opt-color-green-medium, #159615);
    color: var(--opt-color-gray-dark, #363636);
}

/* Spinner por cima da tabela durante QUALQUER recálculo (frete, CEP,
   quantidade — update_checkout/updated_checkout, ver live-checkout.js).
   min-height garante área visível mesmo no 1º carregamento, com a
   tabela ainda vazia (antes do 1º update_checkout automático). */
.wplc-checkout-review-wrap {
    position: relative;
    min-height: 40px;
}

.wplc-checkout-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Opacidade máxima (sólido, não translúcido) — pedido explícito: o
       cliente não pode ver o recálculo acontecendo por baixo (preço/
       quantidade mudando durante o request) enquanto isso está em
       andamento, só o spinner. Cobre também o overlay nativo do
       WooCommerce (jquery.blockUI, chamado com opacity:0.6 pelo próprio
       wc-checkout.js) por baixo, que já era parcialmente transparente. */
    background: #fff;
}

.wplc-checkout-loading[hidden] {
    display: none;
}

.wplc-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--opt-color-green-medium, #159615);
    border-radius: 50%;
    animation: wplc-checkout-spin 0.7s linear infinite;
}

@keyframes wplc-checkout-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Reskin do fragment nativo de frete/totais (.woocommerce-checkout-review-order-table),
   injetado pelo wc-checkout.js — reaproveitado, não reconstruído.
   ===========================================================================
   ABANDONA o layout nativo de <table> (table/table-row/table-cell) de
   propósito — depois de 3 tentativas diferentes (table-layout:fixed,
   max-width na célula, cada uma resolvendo um sintoma e abrindo outro:
   frete espremido, depois scroll lateral, depois frete espremido nas
   larguras erradas de novo) ficou claro que o algoritmo de largura
   automática do navegador pra <table> é imprevisível demais aqui — a
   linha de frete só tem 2 células (th+td) igual as linhas de produto,
   mas o CONTEÚDO é completamente diferente (um rótulo curto + uma lista
   de opções que precisa da largura toda, não uma coluna de valor
   estreita), então "a mesma largura de coluna pras duas" nunca foi a
   regra certa pra começo de conversa — e o TEMA ainda tem uma regra
   própria (table.woocommerce-checkout-review-order-table .product-name
   em app.css, sem prefixo wplc-, vale pra QUALQUER checkout do
   WooCommerce do site) com display:flex + width:100% !important na
   célula, que também mexe nesse cálculo por baixo dos panos.
   Redefine <table>/<tr>/<td>/<th> como flex/block via display (a
   estrutura HTML/semântica continua intacta, só a RENDERIZAÇÃO muda) —
   cada TIPO de linha (produto/cabeçalho, subtotal/total, frete) declara
   sua própria regra de largura, sem depender do algoritmo de coluna do
   navegador decidir por conta própria. */
.wplc-checkout-form .woocommerce-checkout-review-order-table,
.wplc-checkout-form .woocommerce-checkout-review-order-table thead,
.wplc-checkout-form .woocommerce-checkout-review-order-table tbody,
.wplc-checkout-form .woocommerce-checkout-review-order-table tfoot {
    display: block !important;
    width: 100%;
    font-size: 14px;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 0;
}

/* .wplc-checkout-step th/td (padding:1vw/3vw !important — ver ~linha 339
   e ~linha 1473) é regra genérica de ANTES desse redesenho, pensada pra
   um <table> nativo com células centralizadas — nunca foi removida, e
   como tem !important, sobrescrevia o padding:0 daqui e empurrava a
   linha de frete (que já usa width:100%) pra além da largura da tabela,
   causando o scroll horizontal que cortava a borda esquerda de tudo.
   padding aqui também precisa de !important pra vencer por especificidade
   (este seletor é mais específico que .wplc-checkout-step sozinho, então
   ganha o empate de importância). */
.wplc-checkout-form .woocommerce-checkout-review-order-table th,
.wplc-checkout-form .woocommerce-checkout-review-order-table td {
    display: block !important;
    padding: 0 !important;
    text-align: left;
}

/* Coluna da esquerda (nome do produto/rótulo): flexível, encolhe/trunca
   à vontade — min-width:0 é o que permite isso dentro de flex (ver
   mesmo truque em .wplc-checkout-item-info mais abaixo). Coluna da
   direita (valor): tamanho fixo pelo próprio conteúdo, nunca encolhe,
   alinhada à direita. */
.wplc-checkout-form .woocommerce-checkout-review-order-table th:first-child,
.wplc-checkout-form .woocommerce-checkout-review-order-table .product-name {
    flex: 1;
    min-width: 0;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table th:last-child,
.wplc-checkout-form .woocommerce-checkout-review-order-table .product-total {
    flex-shrink: 0;
    text-align: right;
}

/* Linha de frete: única exceção ao padrão "rótulo | valor" acima — as
   opções de frete precisam da largura INTEIRA da linha, não de uma
   fração dividida com o rótulo "Shipment"/"Frete" (que também não faz
   sentido mostrar aqui, o rótulo de cada opção já é auto-explicativo).
   Vira um bloco vertical só, span cheio. */
.wplc-checkout-form .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    display: block !important;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    display: none !important;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    width: 100%;
}

/* O tema esconde a tabela crua (thead/tbody/subtotal/total) por padrão
   porque tem o próprio resumo chique pra mostrar isso (#lifeoption-order-
   review, escondido logo abaixo) — como aquele resumo não faz sentido
   aqui (carrega cupom + "leve também" juntos, ver comentário mais abaixo),
   revelamos a tabela crua de volta: é o único lugar que sobra pra mostrar
   item × quantidade, subtotal e total depois de calcular o frete. */
.wplc-checkout-form .woocommerce-checkout-review-order-table thead.d-none,
.wplc-checkout-form .woocommerce-checkout-review-order-table tbody.d-none {
    display: block !important;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr.d-none {
    display: flex !important;
}

/* Linha do item (WPLC_Checkout_Render::editable_cart_item_quantity()) —
   mesmo padrão visual do resumo chique do tema (lifeoption_order_review()
   em functions.php): imagem à esquerda, nome em cima, quantidade LOGO
   ABAIXO dele (não do lado — era isso que fazia o "+" quebrar pra linha
   própria toda vez que o nome era comprido o bastante: a largura da
   coluna nunca é um problema pro nome truncar, já que ele e a quantidade
   dividem a mesma coluna estreita empilhados, cada um na sua própria
   linha, em vez de disputar espaço horizontal um com o outro). */
.wplc-checkout-form .woocommerce-checkout-review-order-table .wplc-checkout-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .wplc-checkout-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

/* min-width:0 é o pulo do gato aqui — sem isso um filho de flex nunca
   encolhe além do tamanho do próprio conteúdo (comportamento padrão do
   flexbox), e o overflow:hidden do nome logo abaixo nunca teria efeito
   nenhum, por mais estreita que a coluna ficasse. */
.wplc-checkout-form .woocommerce-checkout-review-order-table .wplc-checkout-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .wplc-checkout-product-name {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Editor de quantidade (WPLC_Checkout_Render::editable_cart_item_quantity())
   — reaproveita o widget .opt-quantity do tema, mas o CSS que dá forma a
   ele (ver lifeoption.css) depende do .input-group do Bootstrap, que essa
   página não carrega (checkout minimalista, sem o bundle inteiro do tema)
   — sem isso os 3 inputs empilhavam um embaixo do outro, cada um ocupando
   a largura toda. Reconstrói só o essencial aqui: caixa com borda fina e
   divisores entre -/número/+ (pedido explícito, no lugar da pílula cinza
   sólida de antes), spinner nativo do number escondido. */
.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity {
    display: inline-flex;
    width: 60%;
    /* Espaçamento já vem do gap do .wplc-checkout-item-info (flex column,
       ver acima) — sem margin própria aqui, senão soma com o gap. */
    margin: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity .input-group {
    display: flex;
    align-items: center;
    color: #363636;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-btn-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #555;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-btn-quantity:hover {
    color: var(--opt-color-green-medium, #159615);
    background: #f7f7f7;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity input.qty {
    width: 2vw;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    appearance: textfield;
    -moz-appearance: textfield;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity input.qty:focus {
    outline: none;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity input.qty::-webkit-outer-spin-button,
.wplc-checkout-form .woocommerce-checkout-review-order-table .opt-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr.order-total .amount {
    font-weight: 700;
}

/* O tema injeta o próprio widget de resumo/cupom/cross-sell
   (#lifeoption-order-review, hookado em algum lugar do fluxo de campos de
   billing) e uma segunda cópia do resumo dentro do fragment de pagamento
   (.summary-order/.summary-mobile-order, com um botão "Finalizar compra"
   que É FALSO — só funciona junto do próprio wizard de steps do tema, que
   não roda aqui, então clicar nele não faz nada). Nenhum dos dois cabe no
   checkout minimalista da live: cupom manual não deve existir aqui (só o
   desconto que a própria live aplicar), "leve também" polui um fluxo que
   já é sobre UM produto, e o resumo já aparece (mais simples) na tabela
   acima + no card do topo do painel. Esconder os três de uma vez também
   resolve o botão de finalizar falso (fica escondido junto). */
.wplc-checkout-panel #lifeoption-order-review,
.wplc-checkout-panel .summary-order,
.wplc-checkout-panel .summary-mobile-order {
    display: none !important;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wplc-checkout-form .woocommerce-checkout-review-order-table ul#shipping_method li {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* :has() é suporte progressivo: sem ele, a lista continua 100% funcional,
   só sem o destaque visual do método escolhido. */
.wplc-checkout-form .woocommerce-checkout-review-order-table ul#shipping_method li:has(input:checked) {
    border-color: var(--opt-color-green-medium, #159615);
    background: #f6faf6;
}

/* Reskin do fragment nativo de pagamento (#payment / .woocommerce-checkout-payment),
   injetado pelo wc-checkout.js — mesma lógica do frete acima. */
.wplc-checkout-form .woocommerce-checkout-payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wplc-checkout-form .woocommerce-checkout-payment ul.payment_methods li {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wplc-checkout-form .woocommerce-checkout-payment ul.payment_methods li:has(input:checked) {
    border-color: var(--opt-color-green-medium, #159615);
    background: #f6faf6;
}

/* O tema embrulha vários pedaços do #payment num sistema próprio de
   "steps" (classes step-1/step-2/.../step-4), que começam com
   display:none e só saem disso quando o wizard de avançar/voltar da
   página de checkout NORMAL da loja roda — wizard que a gente nunca
   carrega aqui. Sem isso, tanto o botão de finalizar quanto a própria
   lista de métodos de pagamento ficam escondidos pra sempre.
   ">" (filho direto) no wrapper do botão garante que só ELE — o que
   realmente contém #place_order — seja revelado, não o outro "step-4"
   homônimo (com um botão FALSO "Finalizar compra") que mora dentro de
   .summary-mobile-order, já escondido acima de qualquer forma; a lista
   de métodos (.wc_payment_methods) só ganha essa classe quando tem mais
   de uma opção disponível (com só um gateway configurado, o tema mostra
   direto, sem d-none) — por isso só apareceu depois de um segundo método
   de pagamento ser habilitado no ambiente de teste. */
.wplc-checkout-panel .woocommerce-checkout-payment>.form-row.place-order.d-none {
    display: flex !important;
    flex-direction: column;
}

.wplc-checkout-panel .woocommerce-checkout-payment .wc_payment_methods.d-none {
    display: block !important;
}

/* Link "Voltar" que vem junto do wrapper acima também é do wizard do
   tema (não faz nada aqui, sem o JS dele) — só o botão de fato funcional
   (#place_order, revelado acima) deve sobrar visível. */
.wplc-checkout-panel .woocommerce-checkout-payment .btn-checkout-step {
    display: none !important;
}

.wplc-checkout-form .woocommerce-checkout-payment #place_order {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    margin-top: 12px;
    background: var(--opt-color-green-medium, #159615);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(21, 150, 21, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
}

.wplc-checkout-form .woocommerce-checkout-payment #place_order:hover {
    background: var(--opt-color-green-dark, #0f6b0f);
}

.wplc-checkout-form .woocommerce-checkout-payment #place_order:active {
    transform: scale(0.99);
}

@media (min-width: 783px) {

    /* Desktop: mesmo offcanvas do mobile (pedido explícito — nada de modal
       centralizado), só que entrando pelo lado DIREITO da tela em vez de
       subir do fundo — altura cheia. Largura/max-width mantidos iguais ao
       modal antigo (90%/900px) de propósito: o layout de 2 colunas logo
       abaixo ("DESKTOP: layout 2 colunas limpo em row") foi desenhado pra
       essa largura — encolher o painel exigiria reescrever aquele bloco
       inteiro pra 1 coluna também. Troca só a direção/forma (right/top/
       bottom + translateX em vez de left/right/bottom + translateY);
       [hidden], z-index, backdrop e toda a lógica de abrir/fechar (classe
       .wplc-offcanvas-open, JS) são os mesmos de sempre, nada disso muda
       entre mobile e desktop. */
    .wplc-checkout-panel,
    .wplc-product-panel {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        width: 90%;
        max-width: 32%;
        max-height: 100vh;
        height: 100%;
        border-radius: 16px 0 0 16px;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        margin: 0;
    }

    .wplc-checkout-panel.wplc-offcanvas-open,
    .wplc-product-panel.wplc-offcanvas-open {
        transform: translateX(0);
    }

    .wplc-product-detail-slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
}

@media (min-width: 1024px) {
    .wplc-checkout-step-title {
        font-size: 1.25vw;
        margin: 1vw 0 !important;
        padding-left: 10px;
        /*border-left: 3px solid var(--opt-color-green-medium, #159615) !important;*/
        color: var(--opt-color-green-dark) !important;
        font-weight: bold;
    }
}

/* --- Painel de detalhe do produto (#wplc-product-panel) ---
    Paleta/tokens reaproveitados da loja (assets/css/lifeoption.css do tema:
    --opt-color-green-e --opt-color-orange-, respectivamente), com fallback
    fixo pro caso raro de a página carregar sem o CSS do tema (ex.: shortcode
    solto num contexto que não enfileira lifeoption.css) — var(--x, fallback)
    cobre os dois. */

/* Base: mobile-first, card compacto estilo prateleira */
.wplc-product-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px;
    max-width: 100%;
    overflow: hidden;
}

.wplc-product-detail-gallery {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: transparent !important;
}

.wplc-product-detail-gallery-main {
    display: flex;
    gap: 8px;
}

/* Miniaturas: escondidas no mobile (a galeria principal já arrasta/swipa
   com scroll-snap + os pontinhos indicadores — ver .wplc-product-detail-
   slide::after no desktop), viram uma coluna clicável só a partir do
   breakpoint de desktop, ver @media (min-width: 783px) mais abaixo. */
.wplc-product-detail-thumbs {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.wplc-product-detail-thumb {
    width: 56px;
    height: 56px;
    padding: 2px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.wplc-product-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.wplc-product-detail-thumb:hover {
    border-color: #ccc;
}

.wplc-product-detail-thumb--active {
    border-color: var(--opt-color-green-medium, #159615);
}

/* Carrossel nativo por scroll-snap */
.wplc-product-detail-track {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wplc-product-detail-track::-webkit-scrollbar {
    display: none;
}

.wplc-product-detail-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.wplc-product-detail-slide img {
    width: 100%;
    aspect-ratio: 1 / 0.82;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    height: 100%;
}

.wplc-product-detail-discount {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: var(--opt-color-orange-dark, #d9480f);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Grupo de badges de urgência no topo do offcanvas de detalhe — faixa
   "🔥 Promoção Relâmpago!!!" + selo "🚚 Frete Grátis" + cronômetro, um do
   lado do outro (mesmo padrão .wplc-product-top-badges do card da
   sacola/fixado, ver live.css — reaproveitado aqui, não reinventado).
   Pedido explícito: os três são "badges" de urgência, ficam juntos em
   vez de cada um solto num canto diferente do painel. */
.wplc-product-detail-info .wplc-product-top-badges {
    /* .wplc-product-top-badges (live.css) tem flex:0 0 100% pensado pro
       CARD (display:flex EM LINHA — flex-basis:100% ali força quebra de
       linha antes da imagem). .wplc-product-detail-info é flex-COLUNA —
       nessa direção flex-basis afeta ALTURA, não largura; sem redefinir
       aqui, o grupo herdava uma base de altura estranha em vez de só
       crescer naturalmente com o conteúdo. A largura cheia já vem de
       graça (align-items:stretch, padrão do container coluna). */
    flex: initial;
    margin-bottom: 12px;
}

/* Cronômetro dentro do grupo: margin-left:auto com !important de
   propósito — existe uma regra .wplc-promo-countdown (sem nenhum escopo)
   em live-immersive.css, bloco desktop (min-width:901px), com
   margin:0 0 0 auto!important — carrega DEPOIS deste arquivo
   (live-immersive.css é enfileirado por último no template da página
   /live) e, sem reforço aqui, empurra o cronômetro pra fora do grupo em
   vez de ficar ao lado da faixa/selo de frete (bug real, visto em
   captura de tela). */
.wplc-product-detail-info .wplc-product-top-badges .wplc-promo-countdown {
    margin: 0 !important;
}

.wplc-product-detail--promo .wplc-product-detail-gallery {
    order: -1;
}

/* Badge Pix em modo live */
.wplc-product-detail-pix-badge--live {
    background: rgba(199, 167, 65, 0.38);
    color: #7E5D00;
}

/* Label "Valor Limitado a essa live!!!" */
.wplc-product-detail-pix-limited {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(199, 167, 65, 0.38);
    color: #7E5D00;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    width: fit-content;
}

/* Textos de cartão em modo live */
.wplc-product-detail-installment-card--live {
    color: #7E5D00;
}

.wplc-product-detail-price-card .wplc-product-detail-installment-card--live {
    color: #7E5D00;
}

/* ===== MOBILE: ordem correta dos elementos ===== */
.wplc-product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wplc-product-detail-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--opt-color-gray-dark, #363636);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.wplc-product-detail-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--opt-color-green-dark, #159615);
    line-height: 1.4;
}

.wplc-product-detail-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}

.wplc-star {
    color: #D99A00;
    font-size: 16px;
    line-height: 1;
}

.wplc-star.empty {
    color: #ddd;
}

.wplc-rating-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--opt-color-gray-dark, #363636);
}

.wplc-product-detail-price-old {
    font-size: 14px;
    color: #888;
    margin-bottom: 2px;
}

.wplc-product-detail-price-old del {
    color: #888;
}

.wplc-product-detail-pix-badge {
    display: inline-flex;
    align-items: center;
    background: #E2F0E2;
    color: #15851C;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    width: fit-content;
}

.wplc-product-detail-price-pix {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.wplc-product-detail-pix-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--opt-color-green-dark, #159615);
    line-height: 1.1;
}

/* O número vem do wc_price(), embrulhado num <bdi> — a regra de cor
   padrão dos preços da live (html body .wplc-live-page-wrap span.
   woocommerce-Price-amount.amount>bdi, em live.css, !important) tem
   mais especificidade que a de cima e apaga o verde. Mesmo truque das
   duas exceções que já existem em live.css (.wplc-product-daily/
   .wplc-product-price-pix): repete a mesma cadeia + a classe daqui. */
html body .wplc-live-page-wrap .wplc-product-detail-pix-amount span.woocommerce-Price-amount.amount>bdi {
    color: var(--opt-color-green-dark, #159615) !important;
}

.wplc-product-detail-pix-label {
    font-size: 13px;
    color: var(--opt-color-green-dark, #159615);
    font-weight: 500;
}

.wplc-product-detail-per-day {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 9px;
    background: #E2F0E2;
    color: var(--opt-color-green-dark, #159615);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    width: fit-content;
}

/* Base (mobile): selo simples em linha, sem sobrepor nada — a versão
   "flutuando" por cima da caixa de preço só faz sentido no grid de
   desktop, ver @media (min-width: 783px) mais abaixo. */
.wplc-product-detail-shipping-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: 6px;
    background: #FFE900;
    color: var(--opt-color-gray-dark, #363636);
    border-radius: 8px;
    text-align: center;
    width: fit-content;
}

.wplc-product-detail-shipping-badge strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.wplc-product-detail-shipping-badge span {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.wplc-product-detail-price-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.wplc-product-detail-installment-count {
    font-size: 17px;
    font-weight: 600;
    color: var(--opt-color-gray-dark, #363636);
}

.wplc-product-detail-installment-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--opt-color-gray-dark, #363636);
}

.wplc-product-detail-installment-info {
    font-size: 14px;
    color: #555;
    font-weight: 400;
}

/* Mobile: price-block fluido, sem caixa cinza */
.wplc-product-detail-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.wplc-product-detail-price {
    font-size: 21px;
    font-weight: 700;
    color: var(--opt-color-green-dark, #159615);
}

.wplc-product-detail-price del {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    margin-right: 6px;
}

.wplc-product-detail-description {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.wplc-product-detail-description p {
    margin: 0 0 8px;
}

.wplc-product-detail-description p:last-child {
    margin-bottom: 0;
}

.wplc-product-detail-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    color: var(--opt-color-gray-dark, #363636);
    font-size: 14px;
    font-weight: 600;
}

.wplc-product-detail-divider::before,
.wplc-product-detail-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

/* Fixo no rodapé do painel */
.wplc-product-detail-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #eee;
}

.wplc-product-detail-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    background: var(--opt-color-green-medium, #159615);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(21, 150, 21, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}

.wplc-product-detail-buy:hover {
    background: var(--opt-color-green-dark, #0f6b0f);
    color: #fff;
}

.wplc-product-detail-buy:active {
    transform: scale(0.99);
}

html body.page-template-wplc-live-page-php #wplc-checkout-panel .form-row {
    width: 100% !important;
}

html body.page-template-wplc-live-page-php #wplc-checkout-panel .form-row span {
  border: 0 !important;
}

html body.page-template-wplc-live-page-php #wplc-checkout-panel .form-row input {
  border: 1px solid #b7b7b7 !important;
  box-shadow: unset;
  outline: 0;
}

/* Selo ANVISA — UMA posição só agora (logo depois da imagem/galeria,
   antes do nome), tanto no mobile quanto no desktop (painel virou
   offcanvas empilhado nos dois, pedido explícito — sem mais o layout
   largo em 2 colunas que precisava de uma versão maior dentro da galeria
   e outra menor dentro do bloco de preço). Badge verde "ANVISA" escondido
   (mesma escolha que já existia só no mobile antes) — imagem + texto já
   bastam, o selinho verde é redundante ao lado do logo de verdade. */
.wplc-product-detail-anvisa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 10px;
}

.wplc-product-detail-anvisa-badge {
    display: none;
}

.wplc-product-detail-anvisa-text {
    font-size: 14px;
    color: var(--opt-color-gray-dark, #363636);
    font-weight: 500;
    line-height: 1.4;
}

.wplc-product-detail-anvisa-image {
    width: auto;
    max-width: 80px;
    height: auto;
    display: block;
    margin-bottom: 0;
    flex-shrink: 0;
}

html body .wplc-checkout-form .woocommerce-checkout-review-order-table .shipping > th {
	display: none !important;
}

@media (max-width: 782px) {

    .wplc-checkout-step th {
        padding: 3vw !important;
        align-items: center;
        text-align: center;
    }

    .wplc-product-ribbon {
        font-size: 3.75vw;
    }

    .wplc-checkout-step td {
        padding: 3vw !important;
        text-align: center;
        align-items: start;
    }

    .wplc-product-detail-price-old {
        order: -1;
    }

    .wplc-product-detail-pix-badge {
        order: 0;
    }

    .wplc-product-detail-price-pix {
        order: 1;
    }

    .wplc-product-detail-price-divider {
        order: 2;
    }

    .wplc-product-detail-price-card {
        order: 3;
    }
}

.wplc-checkout-form .woocommerce-checkout-review-order-table tr.cart-discount {
    border-radius: 0 !important;
}