/*
Carrinho, NÃO criamos um woocommerce/cart/cart.php próprio (decisão
deliberada): o template padrão do WooCommerce já é testado e seguro, e
reescrever essa lógica na mão (nonce, hooks de cupom/quantidade) só pra
mudar a aparência seria risco desnecessário numa página transacional. Aqui
só re-estilizamos os elementos e classes que o próprio WooCommerce gera.
*/

.woocommerce-cart-form table.cart{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--espaco-xl);
}
.woocommerce-cart-form table.cart th{
    text-align: left;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-cacau-70);
    padding-bottom: var(--espaco-sm);
    border-bottom: 1px solid var(--cor-linho-2);
}
.woocommerce-cart-form table.cart td{
    padding: var(--espaco-md) var(--espaco-sm);
    border-bottom: 1px solid var(--cor-linho-2);
    vertical-align: middle;
}
.woocommerce-cart-form table.cart td.product-thumbnail img{
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: var(--cor-linho-2);
    border-radius: var(--raio-sm);
    padding: var(--espaco-xs);
}
.woocommerce-cart-form table.cart td.product-name a{
    font-family: var(--fonte-display);
    color: var(--cor-cacau);
}
/* Item 4 (mapeamento Fase 2): botão remover era só o tamanho do "x" (20-22px
   medido ao vivo), ação destrutiva com alvo de toque apertado em mobile.
   O WooCommerce core define width/height explícitos (~1em, ~20px) com
   box-sizing:border-box no próprio a.remove; testado ao vivo que só
   adicionar padding NÃO aumenta a área clicável nesse caso (border-box com
   width fixo faz o padding comprimir o conteúdo em vez de crescer a caixa).
   Por isso sobrescrevemos width/height explícitos pra 44px, mantendo o
   glifo "x" centralizado via flex, sem alterar o tamanho visual do ícone. */
.woocommerce-cart-form table.cart td.product-remove a{
    color: var(--cor-terracota);
    font-size: var(--texto-lg);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
}
.woocommerce-cart-form table.cart td.product-quantity .quantity input.qty{
    width: 60px;
    text-align: center;
}
.woocommerce-cart-form table.cart td.actions{
    padding-top: var(--espaco-lg);
}
/* Item 5: "Atualizar carrinho" media 31-33px de altura em todos os
   breakpoints testados ao vivo (não só mobile/tablet), abaixo do mínimo de
   44px recomendado pra alvo de toque. */
.woocommerce-cart-form table.cart td.actions button[name="update_cart"]{
    min-height: 44px;
}
.woocommerce-cart-form table.cart .coupon{
    display: flex;
    gap: var(--espaco-sm);
    align-items: center;
    flex-wrap: wrap;
}
/* Item 6: o campo só tinha max-width:220px, mas o próprio WooCommerce core
   (woocommerce.css) fixa width:80px nesse mesmo input, e width e max-width
   são propriedades independentes (max-width só limita um width MAIOR, não
   substitui um width MENOR já definido) - por isso o max-width nunca teve
   efeito de verdade. Confirmado ao vivo: box media 80px de largura,
   cortando o placeholder "Código do cupom" pra "Código d...". Definir width
   explícito resolve. */
.woocommerce-cart-form table.cart .coupon input#coupon_code{
    width: 220px;
    max-width: 100%;
}

/* Item 3: stepper +/- no campo de quantidade da tabela clássica, no mesmo
   padrão visual do mini-carrinho ("- 1 +"). O <input type="number"> puro
   não tinha nenhum controle +/- visível (mobile esconde a seta nativa do
   navegador). Os botões em si (criação do DOM + clique) são gerados por JS
   no bloco novo de functions.php (wp_footer, condicional a is_cart()),
   aqui só o visual da caixa ".eqms-qty-stepper" que o JS monta ao redor do
   input existente, sem duplicar markup nem mexer no template do carrinho. */
.eqms-qty-stepper{
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cor-linho-2);
    border-radius: var(--raio-sm);
    overflow: hidden;
    width: fit-content;
}
.eqms-qty-stepper input.qty{
    width: 44px !important;
    text-align: center;
    border: none !important;
    border-left: 1px solid var(--cor-linho-2) !important;
    border-right: 1px solid var(--cor-linho-2) !important;
    border-radius: 0 !important;
    -moz-appearance: textfield;
}
.eqms-qty-stepper input.qty::-webkit-inner-spin-button,
.eqms-qty-stepper input.qty::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.eqms-qty-btn{
    width: 44px;
    min-width: 44px;
    background: var(--cor-linho-2);
    border: none;
    font-size: var(--texto-lg);
    line-height: 1;
    cursor: pointer;
    color: var(--cor-cacau);
}
.eqms-qty-btn:hover{
    background: var(--cor-linho);
}

/* Borda sutil (Auditoria de Design Visual, item "Paineis de resumo",
   EQMS-AUDITORIA-DESIGN-VISUAL.md, 24/07/2026): só o token de borda do
   sistema de vidro (00-tokens.css, SO LEITURA), sem blur nem mudança de
   fundo, pra não arriscar legibilidade de número/preço em área
   transacional. Dá coesão com o resto do sistema visual sem introduzir
   vidro de verdade aqui. */
.cart-collaterals .cart_totals{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    border: 1px solid var(--vidro-borda-escura);
    padding: var(--espaco-xl);
    max-width: 420px;
    margin-left: auto;
}
.cart_totals h2{
    font-size: var(--texto-lg);
    margin-bottom: var(--espaco-md);
}
.cart_totals table{
    width: 100%;
}
.cart_totals table th, .cart_totals table td{
    padding: var(--espaco-sm) 0;
    border-bottom: 1px solid rgba(51,41,31,0.12);
    text-align: left;
}
.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td{
    border-bottom: none;
    font-weight: 700;
    color: var(--cor-mata);
    font-size: var(--texto-lg);
}
.wc-proceed-to-checkout{
    margin-top: var(--espaco-lg);
}
.wc-proceed-to-checkout .checkout-button{
    display: block;
    text-align: center;
    width: 100%;
}

/* Calculadora de frete (shipping-calculator do Woo) */
.shipping-calculator-form{
    margin-top: var(--espaco-sm);
}
.shipping-calculator-form p{
    margin-bottom: var(--espaco-sm);
}
/* Achado real (auditoria de responsividade, 01/08/2026): o link "Calcular
   entrega" (.shipping-calculator-button) media 23-24px de altura clicavel
   real em todos os breakpoints, abaixo do minimo de 44px. */
.shipping-calculator-button{
    display: flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 767px){
    .woocommerce-cart-form table.cart thead{
        display: none;
    }
    .woocommerce-cart-form table.cart td{
        display: block;
        border-bottom: none;
        padding: var(--espaco-2xs) 0;
    }
    .woocommerce-cart-form table.cart tr{
        display: block;
        padding: var(--espaco-md) 0;
        border-bottom: 1px solid var(--cor-linho-2);
    }
    .cart_totals{
        max-width: 100%;
    }
}