/**
 * TKG - Camada leve do carrinho (lean.css) - VERSAO 2, SO CSS.
 *
 * PARA QUE SERVE
 *   Muda so a APARENCIA do carrinho nativo do WooCommerce para ficar igual ao carrinho antigo da loja.
 *   Nao cria botoes nem calcula nada (o unico JavaScript e o lean.js, do cartao de CEP). Carregado so em quem esta no modo teste
 *   (a classe "tkg-lean" no <body> vem do arquivo mu-plugins/tkg-lean-layer-test.php).
 *
 * SE O WOOCOMMERCE MUDAR UM NOME DE CLASSE NUMA ATUALIZACAO
 *   O pior que acontece e este visual deixar de ser aplicado naquele ponto (volta o visual nativo).
 *   O carrinho continua funcionando e as vendas nao sao bloqueadas.
 *
 * COMO LER
 *   Cada bloco abaixo tem um comentario dizendo O QUE faz e POR QUE. O visual base (cartoes, tipografia,
 *   barra de estagios) ja existe no cart-flow.css do tema; aqui so corrigimos o que depende de JavaScript
 *   que foi retirado, e usamos "!important" apenas onde o CSS antigo do tema ja usa "!important".
 *   O prefixo "body.tkg-lean.woocommerce-cart" deixa estas regras mais fortes que as antigas.
 */

/* ==================================================================
   1. LAYOUT DO CARRINHO (so telas largas, a partir de 981px)
   O que o JS antigo fazia: colocava a classe "tkg-cart-reference-grid" no bloco do carrinho.
   Aqui o CSS mira direto no bloco nativo do WooCommerce (.wc-block-cart), sem precisar de classe extra.
   ================================================================== */
@media (min-width: 981px) {
    /* Itens em cima (linha inteira) e resumo do pedido na metade direita, abaixo. */
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .wc-block-cart {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 16px !important;
    }
    /* Resumo na coluna da direita, 2a linha. O cartao "Frete" (criado pelo lean.js) fica na coluna da esquerda, mesma linha. */
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .wc-block-cart__sidebar {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .tkg-cart-shipping-card {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    /* Titulo "Seu carrinho" dentro do cartao dos itens.
       O JS antigo movia o titulo para dentro do cartao; aqui escondemos o titulo original e desenhamos
       o mesmo texto com ::before no proprio cartao. */
    body.tkg-lean.woocommerce-cart .tkg-cart-intro {
        display: none !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-cart__main::before {
        content: "Seu carrinho";
        display: block;
        width: max-content;
        margin: 0 0 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e8ebee;
        color: #111318;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
    }
}

/* ==================================================================
   1A. PLANO B SE O JAVASCRIPT FALHAR: cartao "Frete" reserva (so CSS)
   O cartao "Frete" (CEP + opcoes) e desenhado pelo lean.js. Se o script nao carregar ou falhar, a coluna da esquerda
   ficaria vazia e o visual quebraria. Enquanto o cartao real nao existir (:not(:has(.tkg-cart-shipping-card))),
   desenhamos no mesmo lugar uma caixa igual, so com o aviso de que o frete e calculado no proximo passo.
   Quando o lean.js funciona, o cartao real aparece e esta caixa deixa de existir sozinha.
   As posicoes dos botoes nao dependem dele: "Escolher mais produtos" e "Finalizar compra" continuam alinhados.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .wc-block-cart:not(:has(.tkg-cart-shipping-card))::before {
        content: "Frete\A O valor e as opções de frete são calculados no próximo passo, com o seu endereço de entrega.";
        white-space: pre-line;
        grid-column: 1;
        grid-row: 2;
        box-sizing: border-box;
        min-height: 172px;
        margin-bottom: 77px;      /* mesma reserva do cartao real: o botao "Escolher mais produtos" fica embaixo */
        padding: 18px 20px;
        border: 1px solid #e8ebee;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 7px 18px rgba(17, 19, 24, .04);
        color: #626b75;
        font-size: 13px;
        line-height: 1.5;
    }
}

/* ==================================================================
   1B. "OLA, NOME" DO CLIENTE LOGADO - POSICAO NO CABECALHO LARANJA (so desktop)
   O QUE ERA: o cart-flow.js antigo media o cabecalho e posicionava o "Ola, nome" dentro da faixa laranja, a
   40px da borda direita, centralizado na vertical. Sem esse JS, sobrava so a regra antiga do tema
   (cart-flow.css, "padding-right:190px"; "top:-90px"), que deixava o nome deslocado para a esquerda e fora do centro.
   COMO FICOU (so CSS):
     - padding-right: 40px  -> o nome termina a 40px da borda direita do cabecalho (igual ao carrinho original);
     - top: -62px + translateY(-50%) -> o centro do nome fica no centro do cabecalho (que tem ~125px de altura e
       termina exatamente onde o carrinho comeca), qualquer que seja a altura do nome/foto.
   Vale so para cliente logado (body.logged-in); visitante continua com a linha propria acima do carrinho.
   Se a altura do cabecalho mudar, ajuste o 62px (metade da altura do cabecalho).
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.logged-in .tkg-account-status {
        top: -62px !important;
        padding-right: 40px !important;
        transform: translateY(-50%) !important;
        justify-content: flex-end !important;
    }
}

/* ==================================================================
   2. FAIXA VERDE "REVISE SEU CARRINHO" (HTML gerado pelo PHP)
   ================================================================== */
@media (min-width: 981px) {
    .tkg-cart-secure-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin: 0 auto 18px;
        max-width: 1180px;
        padding: 7px 18px;
        border-radius: 12px;
        box-sizing: border-box;
        background: #eafaf0;
        border: 1px solid #b7e4c7;
        color: #146c43;
    }
    .tkg-cart-secure-banner__text {
        font-size: 13.5px;
        font-weight: 700;
    }
    .tkg-cart-secure-banner .tkg-cart-secure {
        flex: 0 0 auto;
        margin: 0;
    }
}

/* Barra de estagios, faixa verde e linha de conta so existem no desktop (como no carrinho antigo). */
@media (max-width: 980px) {
    body.tkg-lean .tkg-cart-progress,
    body.tkg-lean .tkg-cart-secure-banner,
    body.tkg-lean .tkg-account-status {
        display: none !important;
    }
}

/* ==================================================================
   3. BOTAO "CONTINUAR" = O BOTAO NATIVO "FINALIZAR COMPRA" DO WOOCOMMERCE
   O CSS antigo do tema escondia o botao nativo (porque o JS criava outro). Como nao ha mais JS,
   mostramos o nativo e damos a ele o visual verde de antes.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__submit {
        display: block !important;
        margin: 12px 0 0 !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__submit-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 42px !important; /* mesma altura do botao "Escolher mais produtos" */
        min-height: 42px !important;
        max-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 8px !important;
        background: #00bc26 !important;
        border: 1px solid #00bc26 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        box-shadow: 0 5px 12px rgba(0, 188, 38, .22) !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__submit-button:hover {
        background: #05a821 !important;
    }

    /* "Escolher mais produtos": fica SEMPRE na mesma linha do botao "Finalizar compra" (coluna da esquerda).
       O botao nativo fica dentro do resumo (coluna da direita), no fim do cartao; este botao vem logo depois
       do bloco do carrinho. Como o fim do resumo e sempre o fim do bloco, basta "puxar" este botao para cima:
         61px = 42px (altura dos dois botoes) + 19px (folga do Finalizar ate a borda de baixo do cartao).
       Os dois botoes tem a mesma altura (42px), entao ficam alinhados em cima e embaixo.
       Se mudar a altura dos botoes ou a folga do cartao, ajuste estes numeros (42 e 61). */
    /* AJUSTE ANTI-ENCOSTO: o botao "Escolher mais produtos" ocupa a faixa de baixo da coluna da esquerda
       (de 61px a 19px antes do fim do bloco). Para o cartao "Frete" nunca invadir essa faixa, mesmo quando ele
       cresce (endereco encontrado, mensagens), ele reserva 77px embaixo (61px do botao + 16px de respiro).
       Se o cartao "Frete" ficar mais alto que o resumo, o resumo estica junto e o "Finalizar compra" continua
       no fim do cartao (margin-top:auto), ou seja, na mesma linha do "Escolher mais produtos". */
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .tkg-cart-shipping-card {
        margin-bottom: 77px !important;
    }
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .wc-block-cart__sidebar {
        align-self: stretch !important;   /* resumo acompanha a altura da linha */
        display: flex !important;
        flex-direction: column !important;
    }
    body.tkg-lean.woocommerce-cart .tkg-cart-shell .wc-block-cart__sidebar .wc-block-cart__submit {
        margin-top: auto !important;      /* empurra o "Finalizar compra" para o fim do cartao */
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .tkg-cart-actions--bottom {
        width: calc(50% - 8px) !important;
        margin: -61px 0 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .tkg-cart-actions--bottom .tkg-button--secondary {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }
}

/* ==================================================================
   3B. LINHA DO PRODUTO: "Valor unitario" acima do preco, e preco sem encostar no "x" de remover (so desktop)
   O CSS do tema deixa a coluna da quantidade com 130px, mas a caixinha (107px) + o botao "x" de remover (10px + 30px,
   fora do fluxo) somam 147px: o "x" entrava na coluna do preco e o preco ficava por cima dele. Aqui a coluna da quantidade
   passa a 160px e o preco fica alinhado a direita. O texto "Valor unitario" e desenhado com ::before (mesmo estilo do
   rotulo "Quantidade") na mesma altura dele, e o preco desce junto, alinhado com a caixinha de quantidade.
   So CSS: nao mexe no preco que o WooCommerce calcula.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart-item__wrap {
        grid-template-columns: minmax(0, 1fr) 160px 110px !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart-item__prices {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        margin-top: 7px !important;   /* mesma altura do rotulo "Quantidade" */
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart-item__prices::before {
        content: "Valor unitário";
        display: block;
        margin-bottom: 2px;
        font-size: 12px;
        font-weight: 700;
        color: var(--tkg-ink);
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart-item__prices .wc-block-components-product-price {
        justify-content: flex-end;
        text-align: right;
    }
}

/* ==================================================================
   4. RESUMO DO PEDIDO
   ================================================================== */
@media (min-width: 981px) {
    /* Valor do frete: o CSS antigo escondia o valor nativo porque um script (retirado) o mostrava de outro jeito. */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__value:not(.tkg-summary-shipping-value) {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: auto !important;
        color: #111318 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
    /* Nome da transportadora ("Olist Envios J&T Express") e, havendo varias opcoes, a escolha nativa do frete. */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-shipping__via {
        display: block !important;
        margin: 2px 0 0 !important;
        color: #626b75 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-shipping-rates-control,
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-radio-control {
        display: block !important;
    }

    /* Trocas de rotulo so por CSS (esconde o texto nativo e desenha o novo com ::before),
       para nao mexer no texto que o WooCommerce controla. */
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label {
        font-size: 0 !important; /* "Subtotal" fica invisivel... */
    }
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label::before {
        content: "Valor do produto"; /* ...e aparece "Valor do produto". */
        font-size: 13px;
    }
    body.tkg-lean.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
        font-size: 0 !important; /* "Total estimado" fica invisivel... */
    }
    body.tkg-lean.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before {
        content: "Total do pedido"; /* ...e aparece "Total do pedido". */
        font-size: 16px;
        font-weight: 700;
    }

    /* Formas de pagamento no resumo: os 3 quadros (cartao, Pix, boleto) sao escritos pelo lean.js, com a
       aparencia que o CSS do tema ja tem (.tkg-payment-summary...).
       RESERVA: se o lean.js falhar e os quadros nao existirem, mostramos so este aviso curto (sem valores). */
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block:not(:has(.tkg-payment-summary))::after {
        content: "Formas de pagamento disponíveis no checkout";
        display: block;
        margin-top: 10px;
        padding: 9px 12px;
        border: 1px solid #cfe9db;
        border-radius: 8px;
        background: #f2fbf6;
        color: #117342;
        font-size: 12px;
        font-weight: 700;
    }
}

/* ==================================================================
   5. ABA LATERAL "CUPOM DE DESCONTO" - o proprio botao nativo "Adicionar cupons" vira a aba
   O WooCommerce ja abre e fecha o painel de cupom sozinho ao clicar nesse botao. Aqui so o desenhamos como
   uma aba verde vertical presa a direita da tela; o painel aberto aparece como caixa escura ao lado dela.
   Antes isso dependia de JS que criava a aba e clicava no botao; agora o clique e o do proprio WooCommerce.
   ================================================================== */
@media (min-width: 981px) {
    /* Recipiente do cupom: preso na tela, a direita. row-reverse = aba (botao) na ponta, painel ao lado. */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon {
        position: fixed !important;
        top: 300px !important;
        right: 0 !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        height: 260px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 10000 !important;
    }

    /* A aba: o botao nativo, em verde, texto na vertical (de baixo para cima). */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button {
        display: flex !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 80px !important;
        width: 80px !important;
        height: 260px !important;
        margin: 0 !important;
        padding: 22px 26px !important;
        box-sizing: border-box !important;
        background: #00bc26 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 0 10px 10px 0 !important;
        box-shadow: -3px 3px 10px rgba(0, 0, 0, .2) !important;
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        cursor: pointer !important;
        overflow: hidden !important;
        font-size: 0 !important; /* esconde o texto nativo "Adicionar cupons"... */
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
        background: #05a821 !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button svg {
        display: none !important; /* seta nativa do botao */
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button::after {
        content: "CUPOM DE DESCONTO"; /* ...e desenha o texto da aba. */
        font-family: 'Poppins', Inter, Arial, sans-serif;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: .01em;
    }
    /* Brilho que passa pela aba de tempos em tempos (so enfeite, igual ao carrinho antigo). */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 45%;
        height: 100%;
        background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
        transform: skewX(-20deg);
        animation: tkg-lean-coupon-shine 3.6s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes tkg-lean-coupon-shine {
        0% { left: -60%; }
        28% { left: 130%; }
        100% { left: 130%; }
    }

    /* O painel aberto (o WooCommerce so o desenha depois do clique): caixa escura ao lado da aba. */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__content {
        display: flex !important;
        flex-direction: column !important;
        width: 320px !important;
        height: 260px !important;
        box-sizing: border-box !important;
        padding: 18px 16px !important;
        overflow-y: auto !important;
        background: #2e2e2e !important;
        box-shadow: -2px 2px 18px rgba(0, 0, 0, .25) !important;
    }
    /* Titulo (laranja) e instrucao (cinza claro) no topo da caixa. */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__content::before {
        content: "Cupom de desconto";
        order: -2;
        margin-bottom: 8px;
        color: #f7941d;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__content::after {
        content: "Como usar? Digite o código abaixo e clique em Aplicar.";
        order: -1;
        margin-bottom: 12px;
        color: #d8d8d8;
        font-size: 11px;
        line-height: 1.5;
    }
    /* O rotulo flutuante "Digite o codigo" ficava por cima do texto digitado: some da tela (continua para leitores de tela). */
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-components-totals-coupon__input label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ==================================================================
   6. CARRINHO VAZIO (inclusive depois de remover o ultimo item, sem recarregar)
   So CSS, usando :has(): o proprio WooCommerce troca o bloco do carrinho cheio pelo bloco "empty-cart"
   e o CSS reage a essa troca. Visual igual ao carrinho vazio antigo: caixa tracejada + botao "Escolher mais produtos".
   ================================================================== */
body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-cart-progress,
body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-cart-secure-banner,
body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-account-status {
    display: none !important;
}
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-cart-shell {
        display: block !important;
        max-width: 1060px !important;
        margin: 0 auto !important;
        padding: 28px 15px 0 !important;
    }
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wp-block-woocommerce-cart.alignwide,
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wp-block-woocommerce-empty-cart-block {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Esconde a vitrine "Novo na loja" e o icone triste; mostra so uma caixa com texto curto. */
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wp-block-woocommerce-empty-cart-block > * {
        display: none !important;
    }
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wc-block-cart__empty-cart__title {
        display: grid !important;
        place-items: center !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 28px !important;
        border: 1px dashed #d6dce2 !important;
        border-radius: 10px !important;
        background: #fafbfc !important;
        font-size: 0 !important;
        text-align: center !important;
    }
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wc-block-cart__empty-cart__title::before {
        content: none !important;
        display: none !important;
    }
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wc-block-cart__empty-cart__title::after {
        content: "Seu carrinho está vazio.";
        font-size: 14px;
        font-weight: 500;
        color: #626b75;
    }
    /* Botao "Escolher mais produtos" sozinho, abaixo da caixa. */
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-cart-actions--bottom {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    body.tkg-lean.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .tkg-cart-actions--bottom .tkg-button--secondary {
        width: 360px !important;
        max-width: 100% !important;
        background: #111318 !important;
        color: #fff !important;
    }
}

/* ============================================================
   CARRINHO SO CALCULA O FRETE: o campo "Numero" saiu do carrinho (e pedido no checkout, passo "Endereco").
   O quadro do endereco encontrado fica com uma coluna so (antes tinha uma segunda coluna para o numero). Desktop, so modo teste.
   ============================================================ */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .tkg-cart-address {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Titulo de cada remessa (so aparece quando o carrinho tem mais de um envio): "Envio de: <produtos>". */
body.tkg-lean .tkg-cart-shipping-options__group { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: #3f4650; line-height: 1.35; }

/* Selo "Compra segura" no topo do carrinho (no lugar da antiga mensagem de visitante): alinhado a direita, sobre a barra de etapas. */
body.tkg-lean .tkg-lean-topseal { display: flex; justify-content: flex-end; margin: 0 0 10px; }
body.tkg-lean .tkg-lean-topseal:empty { display: none; } /* selo ja foi movido para o cabecalho */

/* LARGURA IGUAL A DA TELA DE LOGIN: la o logo, o selo "Compra segura" (cabecalho) e a caixa de etapas ocupam a mesma largura (ate 1180px,
   16px de margem). O carrinho usava 1080px e o topo ficava desalinhado. Carrinho VAZIO nao muda (tem regra propria). So computador. */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart:not(.tkg-cart-is-empty):not(:has(.wp-block-woocommerce-empty-cart-block)) .tkg-cart-shell {
        width: min(1180px, calc(100% - 32px)) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==================================================================
   BOTAO "LIMPAR CARRINHO" (criado pelo lean.js, setupClear)
   Aparencia igual a do carrinho antigo: link discreto cinza, vermelho ao passar o mouse; posicionado no lado DIREITO, abaixo da lista de produtos. As regras ficam aqui (e nao so no
   cart-flow.css do tema) para continuarem valendo quando o cart-flow.css deixar de ser carregado (Fase 4). So computador.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .tkg-cart-clear {
        display: flex; width: max-content; align-items: center; gap: 6px; margin: 10px 0 0 auto; padding: 0; border: 0; background: none; /* margin-left:auto = fica no lado DIREITO */
        color: #5f6b7a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    }
    body.tkg-lean.woocommerce-cart .tkg-cart-clear:hover { color: #e53935; }
    body.tkg-lean.woocommerce-cart .tkg-cart-clear:disabled { opacity: .6; cursor: default; }
}

/* ==================================================================
   "FINALIZAR COMPRA" BLOQUEADO ATE O CEP (marca data-tkg-needs-cep posta pelo lean.js, setupProceed)
   Enquanto nao ha CEP, o botao nativo fica cinza (so aparencia + clique interceptado pelo JS). Com CEP, a marca some e o botao volta
   ao verde. A regra e mais especifica que a do botao verde (secao 3) para valer tambem com o mouse em cima. So computador.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-cart__submit[data-tkg-needs-cep] .wc-block-cart__submit-button {
        background: #d9dce1 !important; border-color: #d9dce1 !important; color: #7b838f !important; box-shadow: none !important; cursor: not-allowed !important;
    }
}

/* ==================================================================
   "ESCOLHER MAIS PRODUTOS" LOGO ABAIXO DO CARTAO "FRETE" (so quando o lean.js moveu o botao para dentro da grade)
   Grade do carrinho: linha 1 = produtos; linha 2 = cartao "Frete" (esquerda) | resumo (direita); linha 3 = "Escolher mais produtos" (esquerda).
   O resumo ocupa as linhas 2 e 3 (continua no fim do cartao, com o "Finalizar compra"). A linha 3 e a "sobra" (1fr) e o botao fica no
   INICIO dela, isto e, colado embaixo do cartao "Frete", que cresce sozinho quando as transportadoras aparecem. O espaco reservado
   de 77px e a margem negativa antigos so valem com o botao FORA da grade (plano B se o JS falhar) e aqui sao desligados.
   Carrinho vazio: nao vale (o visual do carrinho vazio tem regras proprias).
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart:not(:has(.wp-block-woocommerce-empty-cart-block)) .tkg-cart-shell .wc-block-cart:has(> .tkg-cart-actions--bottom) {
        grid-template-rows: auto auto 1fr !important;
    }
    body.tkg-lean.woocommerce-cart:not(:has(.wp-block-woocommerce-empty-cart-block)) .tkg-cart-shell .wc-block-cart:has(> .tkg-cart-actions--bottom) .wc-block-cart__sidebar {
        grid-row: 2 / span 2 !important;
    }
    body.tkg-lean.woocommerce-cart:not(:has(.wp-block-woocommerce-empty-cart-block)) .tkg-cart-shell .wc-block-cart:has(> .tkg-cart-actions--bottom) .tkg-cart-shipping-card {
        margin-bottom: 0 !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page:not(:has(.wp-block-woocommerce-empty-cart-block)) .tkg-cart-shell .wc-block-cart > .tkg-cart-actions--bottom {
        grid-column: 1 !important; grid-row: 3 !important; align-self: start !important;
        width: 100% !important; margin: 0 !important;
    }
}

/* ==================================================================
   LINHA "DESCONTO" DO RESUMO: A ETIQUETA DO CUPOM NA MESMA LINHA DO TEXTO (so CSS, so computador, so carrinho)
   O bloco nativo desenha: [Desconto ........ -R$ x] e, numa linha de baixo, a etiqueta do cupom (ex.: "compre+tkgengates x").
   Aqui a linha vira uma grade de 3 colunas e as tres pecas (que sao os elementos nativos de sempre, nao criamos nenhum) ficam lado a
   lado: [Desconto] [etiqueta do cupom] [valor a direita]. O "x" da etiqueta continua removendo o cupom (acao nativa).
   Se uma atualizacao do WooCommerce mudar estes nomes de classe, volta o desenho nativo (etiqueta embaixo): nada quebra.
   Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-discount {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 10px !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__label { grid-column: 1 !important; grid-row: 1 !important; }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__description { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; min-width: 0; }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value { grid-column: 3 !important; grid-row: 1 !important; text-align: right; }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0; }
}

/* ==================================================================
   LINHA "DESCONTO" EM CARTAO VERDE CLARO (so CSS, so computador, so carrinho)
   Continua sendo a linha nativa do WooCommerce (nada movido, nada criado): so mudamos a aparencia para combinar com a aba verde
   "CUPOM DE DESCONTO": fundo verde bem claro com borda, texto "Desconto" em verde escuro, etiqueta do cupom branca com borda verde
   (o "x" continua removendo o cupom, acao nativa) e o valor "-R$ x" em verde e negrito. A linha "Valor do produto" so ganha um
   espacamento maior e valor em negrito para separar do cartao. Se os nomes de classe mudarem numa atualizacao do WooCommerce, a regra
   deixa de casar e volta o desenho nativo. Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-discount {
        background: #effaf1 !important;
        border: 1px solid #bfe8c9 !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__label {
        color: #05781b !important;
        font-weight: 700 !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value {
        color: #05781b !important;
        font-weight: 800 !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-chip {
        background: #fff !important;
        border: 1px solid #00bc26 !important;
        color: #05781b !important;
        font-weight: 600 !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove,
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-chip button {
        background: #dff5e4 !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-subtotal .wc-block-components-totals-item__value {
        font-weight: 800 !important;
    }
}

/* ==================================================================
   LINHA "VALOR DO PRODUTO" EM CARTAO + PLURAL AUTOMATICO (so CSS, so computador, so carrinho)
   1) Mesmo cartao verde claro da linha "Desconto" (fundo #eef3fb, borda #c9d8ef); texto e valor em verde escuro e negrito.
   2) Plural: quando o carrinho tem 2 ou mais PRODUTOS (2 ou mais linhas na lista do carrinho), o rotulo vira "Valor dos produtos".
      Quem decide e o proprio CSS com :has() olhando as linhas nativas (.wc-block-cart-items__row), sem JavaScript. Tambem vira plural quando
      ha 1 produto com quantidade 2 ou mais: o lean.js (setupPlural) soma as quantidades lidas do WooCommerce e marca o body com
      data-tkg-plural="1". Se o JS ou o :has() falharem, fica "Valor do produto" (singular), sem nenhum prejuizo.
   Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item {
        background: #eef3fb !important;
        border: 1px solid #c9d8ef !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label {
        color: #1f3a63 !important;
        font-weight: 700 !important;
    }
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label::before {
        font-size: 14px !important; /* um pouco maior que antes (13px) para ler bem dentro do cartao */
    }
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__value {
        color: #1f3a63 !important;
        font-weight: 800 !important;
    }
    /* Plural: 2 ou mais linhas de produto no carrinho. */
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart:has(.wc-block-cart-items__row ~ .wc-block-cart-items__row) .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label::before,
    body.tkg-lean.woocommerce-cart[data-tkg-plural="1"] .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label::before {
        content: "Valor dos produtos";
    }
}

/* ==================================================================
   NOTA "Valores atualizados conforme a modalidade de frete selecionada." EM UMA LINHA SO (so CSS, so computador, so carrinho)
   CAUSA DA QUEBRA: os quadros de pagamento ficam numa grade de 2 colunas (regra do tema) e a nota, sendo o 4o item, caia dentro da
   1a coluna (metade da largura) e quebrava em duas linhas. Aqui ela passa a ocupar a LARGURA TOTAL da grade (grid-column: 1 / -1), onde o
   texto inteiro cabe, sem abreviar e sem mexer no tamanho da fonte do tema. Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .tkg-payment-summary__note {
        grid-column: 1 / -1 !important;
    }
}

/* ==================================================================
   CARTAO "TOTAL DO PEDIDO" COMBINANDO COM "VALOR DOS PRODUTOS" E "DESCONTO" (so CSS, so computador, so carrinho)
   PROBLEMA: o tema desenhava o total como uma caixa verde colada embaixo (so cantos de baixo arredondados, sem borda em cima, sem
   espaco), diferente dos dois cartoes de cima. Aqui ele vira o MESMO tipo de cartao: cantos arredondados de 10px, borda inteira,
   mesmo espaco entre cartoes e mesmo recuo interno; so o fundo e a borda ficam num verde um pouco mais forte, para destacar o total.
   Tambem escondemos o "descricao" vazio do cartao de subtotal, que deixava uma folga em branco embaixo de "Valor dos produtos".
   Sao os mesmos elementos nativos do WooCommerce, so mudamos a aparencia. Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-components-totals-footer-item {
        background: #e3f6e8 !important;
        border: 1px solid #9ad8ac !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
        color: #05781b !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
        color: #05781b !important;
    }
    /* Folga em branco dentro do cartao "Valor dos produtos": o bloco nativo reserva uma linha de descricao mesmo vazia. */
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__description:empty {
        display: none !important;
    }
    body.tkg-lean.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item {
        min-height: 0 !important;
        align-items: center !important;
    }
}

/* ==================================================================
   AVISOS DO WOOCOMMERCE NO CARRINHO (ex.: "Corrija o seguinte erro antes de continuar") COM O MESMO ACABAMENTO DA FAIXA VERDE / DO CHECKOUT
   O aviso e o NATIVO do WooCommerce (.wc-block-components-notice-banner, com o icone e o botao de fechar dele); nao criamos nem movemos nada,
   so mudamos a aparencia para combinar com a faixa verde "COMPRA SEGURA" e com os avisos do checkout (checkout.css, secao 7): mesma
   largura (1180px, centralizado), cantos de 12px, borda fina, sombra leve, tamanho compacto igual ao da faixa verde (padding 7px 16px, texto 13px, titulo 13.5px).
     - erro: fundo rosado, borda fina + faixa vermelha na esquerda (mesmas cores do aviso do checkout);
     - sucesso / informacao: verde claro, mesmas cores da faixa verde (#eafaf0 / #b7e4c7 / #146c43).
   Nao vale para os avisos "snackbar" (os balaozinhos que o tema ja trata a parte). Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart .wc-block-components-notice-banner:not(.wc-block-components-notices__snackbar *) {
        box-sizing: border-box !important;
        max-width: 1180px !important;
        width: 100% !important;
        margin: 0 auto 14px !important;
        padding: 7px 16px !important;
        border: 1px solid #f0c4bf !important;
        border-left: 5px solid #b42318 !important;
        border-radius: 12px !important;
        background: #fff5f4 !important;
        color: #8a1c13 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        box-shadow: 0 6px 16px rgba(17, 19, 24, 0.05) !important;
        align-items: center !important;
    }
    /* Titulo do aviso (ex.: "Corrija o seguinte erro antes de continuar"). */
    body.tkg-lean.woocommerce-cart .wc-block-components-notice-banner:not(.wc-block-components-notices__snackbar *) .wc-block-components-notice-banner__title {
        margin: 0 !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: inherit !important;
    }
    body.tkg-lean.woocommerce-cart .wc-block-components-notice-banner:not(.wc-block-components-notices__snackbar *) > svg {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 10px 0 0 !important;
    }
    /* Sucesso / informacao: verde da faixa "COMPRA SEGURA". */
    body.tkg-lean.woocommerce-cart .wc-block-components-notice-banner.is-success:not(.wc-block-components-notices__snackbar *),
    body.tkg-lean.woocommerce-cart .wc-block-components-notice-banner.is-info:not(.wc-block-components-notices__snackbar *) {
        border-color: #b7e4c7 !important;
        border-left-color: #1f8a4c !important;
        background: #eafaf0 !important;
        color: #146c43 !important;
    }
}

/* ==================================================================
   LINHA "FRETE / ENVIO" (Olist) COMBINANDO COM OS OUTROS CARTOES DO RESUMO (so CSS, so computador, so carrinho)
   PROBLEMA: o tema desenhava Frete + Total como UMA caixa verde dividida em duas metades (Frete = metade de cima, com os cantos de baixo
   retos e sem borda embaixo). Como o "Total do pedido" virou um cartao proprio, a linha do frete ficou solta, "cortada" embaixo.
   AGORA: o frete e um cartao inteiro (cantos de 10px, borda completa, margem de 8px, recuo de 14px), igual aos cartoes "Valor dos
   produtos" (mesmo azul claro: fundo #eef3fb, borda #c9d8ef, texto #1f3a63) e "Desconto". Sao os mesmos elementos nativos do
   WooCommerce (o texto da transportadora, ex.: "Olist Envios", continua vindo dele). Para desfazer: apague este bloco.
   ================================================================== */
@media (min-width: 981px) {
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item {
        background: #eef3fb !important;
        border: 1px solid #c9d8ef !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__label {
        color: #1f3a63 !important;
        font-weight: 700 !important;
    }
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__value:not(.tkg-summary-shipping-value),
    body.tkg-lean.woocommerce-cart.tkg-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .tkg-summary-shipping-value {
        color: #1f3a63 !important;
        font-weight: 800 !important;
    }
}