/* =============================================================================
   Carrinho (/carrinho/) e Checkout (/finalizar-compra/).
   Escopo total em body.woocommerce-cart / body.woocommerce-checkout (classes
   nativas do WooCommerce). Ambas as páginas passam pelo page.php
   (.content-card / .entry-content). Refino 100% visual: nenhuma marcação,
   campo, nonce, método de pagamento ou fluxo do WooCommerce é alterado.
   Mesmas famílias tipográficas, cantos retos, hairlines, hover desliza-p/-azul.
   ========================================================================== */

/* O carrinho/checkout precisam de mais largura que a coluna editorial (760px). */
.woocommerce-cart .content-card,
.woocommerce-checkout .content-card {
    max-width: clamp(760px, 94vw, 1120px);
}

/* Atmosfera da Home: glows radiais sutis SOMENTE no topo da página, esmaecendo
   antes do meio — nada decorativo perto do botão de finalizar pedido. */
body.woocommerce-cart,
body.woocommerce-checkout {
    background-image:
        radial-gradient(120% 90% at 8% -24%, var(--cz-glow-blue), transparent 55%),
        radial-gradient(90% 75% at 92% -18%, var(--cz-glow-lilac), transparent 52%);
    background-repeat: no-repeat;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
    color: var(--cz-ink);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Botões: assinatura desliza-p/-azul (igual ao painel) ---------- */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-checkout .woocommerce input.button,
.woocommerce-checkout #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    color: #fff;
    background-image: linear-gradient(110deg, var(--cz-forest) 0%, var(--cz-forest) 42%, #318dcf 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    border: 1px solid var(--cz-forest);
    border-radius: 0;
    font-family: var(--cz-font-body);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-position 360ms ease, border-color 240ms ease, color 180ms ease;
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .woocommerce input.button:hover,
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce input.button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .woocommerce .button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
    color: #fff;
    background-position: 100% 50%;
    border-color: #318dcf;
    outline: none;
}

/* Botão secundário "Atualizar carrinho" (contornado, não compete com Finalizar). */
.woocommerce-cart .woocommerce button[name="update_cart"],
.woocommerce-cart .woocommerce input[name="update_cart"] {
    color: var(--cz-forest);
    background: transparent;
    background-image: none;
    border: 1px solid var(--cz-border);
}

.woocommerce-cart .woocommerce button[name="update_cart"]:hover,
.woocommerce-cart .woocommerce input[name="update_cart"]:hover {
    color: var(--cz-forest);
    background: var(--cz-soft);
    border-color: var(--cz-forest);
}

/* ---------- Campos de formulário (igual à conta) ------------------------- */
.woocommerce-cart .woocommerce input[type="text"],
.woocommerce-cart .woocommerce input[type="email"],
.woocommerce-cart .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="password"],
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .woocommerce .select2-selection {
    box-sizing: border-box;
    padding: 12px 14px;
    background: #fff;
    color: var(--cz-ink);
    font-family: var(--cz-font-body);
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid var(--cz-border);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-cart .woocommerce input:focus,
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .woocommerce select:focus,
.woocommerce-checkout .woocommerce .select2-container--focus .select2-selection {
    outline: none;
    border-color: var(--cz-blue);
    box-shadow: 0 0 0 3px rgba(11, 120, 200, .12);
}

.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout .woocommerce .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce .woocommerce-shipping-fields label,
.woocommerce-checkout .woocommerce-additional-fields label {
    display: block;
    margin: 0 0 6px;
    color: var(--cz-muted);
    font-size: .86rem;
    font-weight: 500;
}

/* ---------- Avisos (notices) — editorial, sem cara de WooCommerce --------- */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 20px;
    padding: 15px 20px;
    color: var(--cz-ink);
    background: var(--cz-soft);
    border: 1px solid var(--cz-border);
    border-left: 3px solid var(--cz-forest);
    border-radius: 0;
    font-size: .96rem;
    line-height: 1.5;
    list-style: none;
}

.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before { content: none; }

.woocommerce-cart .woocommerce-info .button,
.woocommerce-checkout .woocommerce-info .button {
    margin-left: auto;
    padding: 9px 16px;
    font-size: .86rem;
}

/* ---------- Estado VAZIO (bloco woocommerce/empty-cart-block) -------------
   Redesign editorial/premium (restrição Aesop/Apple): muito respiro, motivo
   botânico em linha no lugar do emoji triste, título Fraunces, divisor de
   acento sóbrio no lugar dos "...", e sugestões alinhadas. CSS no carrinho. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    max-width: 760px;
    margin: clamp(26px, 6vw, 76px) auto 0;
    padding: 0;
    text-align: center;
}

/* Emoji triste -> motivo botânico em linha (image.svg), verde-floresta suave. */
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    content: "";
    display: block;
    width: clamp(116px, 15vw, 164px);
    height: clamp(116px, 15vw, 164px);
    margin: 0 auto clamp(18px, 3vw, 30px);
    background-color: var(--cz-forest);
    background-image: none;
    opacity: .4;
    filter: none;
    -webkit-mask: url("../../images/image.svg") center / contain no-repeat;
            mask: url("../../images/image.svg") center / contain no-repeat;
}

.woocommerce-cart .wc-block-cart__empty-cart__title {
    margin: 0 auto;
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.7rem, 3.4vw, 2.35rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* O divisor "..." (is-style-dots) vira uma marca de acento curta e elegante. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator {
    width: clamp(46px, 7vw, 72px);
    max-width: 72px;
    height: 2px;
    margin: clamp(18px, 3vw, 26px) auto clamp(30px, 5vw, 48px);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cz-accent-line);
    opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
    content: none;
}

/* "Novo na loja" — heading editorial com respiro. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.with-empty-cart-icon) {
    margin: 0 auto clamp(22px, 3vw, 34px);
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 500;
}

/* ---------- Tabela do carrinho ------------------------------------------- */
.woocommerce-cart .woocommerce table.shop_table {
    margin: 0 0 28px;
    border: 1px solid var(--cz-border);
    border-radius: 0;
    border-collapse: collapse;
    background: var(--cz-card);
}

.woocommerce-cart .woocommerce table.shop_table thead th {
    padding: 14px 16px;
    color: var(--cz-muted);
    font-family: var(--cz-font-body);
    font-size: .74rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--cz-border);
}

.woocommerce-cart .woocommerce table.shop_table td {
    padding: 16px;
    color: var(--cz-ink);
    border-top: 1px solid var(--cz-border);
    vertical-align: middle;
}

.woocommerce-cart .woocommerce table.shop_table .product-thumbnail img {
    width: 64px;
    height: auto;
    border: 1px solid var(--cz-border);
    border-radius: 2px;
}

.woocommerce-cart .woocommerce table.shop_table td.product-name a {
    color: var(--cz-deep);
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-cart .woocommerce table.shop_table td.product-name a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-cart .woocommerce table.shop_table td.product-subtotal {
    color: var(--cz-forest);
    font-weight: 600;
}

/* Botão "remover" (x) como ícone discreto, não o glifo padrão. */
.woocommerce-cart .woocommerce a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cz-muted) !important;
    background: transparent !important;
    border: 1px solid var(--cz-border);
    border-radius: 0;
    font-size: 16px;
    line-height: 1;
}

.woocommerce-cart .woocommerce a.remove:hover {
    color: #fff !important;
    background: #b04a3a !important;
    border-color: #b04a3a;
}

/* Seletor de quantidade. */
.woocommerce-cart .woocommerce .quantity input.qty {
    width: 64px;
    padding: 10px 8px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--cz-border);
    border-radius: 0;
}

/* Cupom. */
.woocommerce-cart .woocommerce .cart .coupon {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.woocommerce-cart .woocommerce .cart .coupon input#coupon_code {
    min-width: 0;
    flex: 1 1 180px;
}

.woocommerce-cart .woocommerce .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

/* ---------- Totais do carrinho ------------------------------------------- */
.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
    margin: 0 0 .6em;
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 560;
}

.woocommerce-cart .cart_totals table.shop_table {
    margin: 0 0 18px;
}

.woocommerce-cart .cart_totals .order-total .amount {
    color: var(--cz-forest);
    font-size: 1.2rem;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
}

/* ---------- "Novo na loja" — bloco woocommerce/product-new (wc-block-grid) --
   É um bloco do Gutenberg (classes wc-block-grid__*), não o loop clássico.
   Tiramos a cara padrão: grade fluida, imagem proporcional, título/preço do
   tema e o botão (que era o "bloco escuro") vira contornado e leve. */
.woocommerce-cart .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-cart .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;            /* iguala a altura dos cards na linha do grid */
    margin: 0;
    padding: 0;
    text-align: center;
}

.woocommerce-cart .wc-block-grid__product-image {
    width: 100%;
    margin: 0 0 12px;
}

.woocommerce-cart .wc-block-grid__product-image img {
    width: 100%;
    aspect-ratio: 1 / 1.08;
    height: auto;
    object-fit: cover;
    border: 1px solid rgba(14, 69, 61, .08);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(238, 246, 240, .78)), #f4f6ef;
}

.woocommerce-cart .wc-block-grid__product-title {
    margin: 0 0 4px;
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: 1.02rem;
    font-weight: 560;
    line-height: 1.24;
}

.woocommerce-cart .wc-block-grid__product-price,
.woocommerce-cart .wc-block-grid__product-price .amount {
    color: var(--cz-muted);
    font-size: .9rem;
}

/* Wrapper do botão do bloco: largura livre, centralizado (evita esmagar o texto). */
.woocommerce-cart .wc-block-grid__product-add-to-cart,
.woocommerce-cart .wc-block-grid__product .wp-block-button {
    width: auto;
    max-width: 100%;
    margin: auto auto 0;     /* empurra o botão p/ a base -> alinhados na linha */
}

/* O "bloco escuro" era o botão do bloco. Contornado/leve; preenche no hover.
   !important cobre o estilo de cor embutido do bloco/preset. */
.woocommerce-cart .wc-block-grid__product .wp-block-button__link,
.woocommerce-cart .wc-block-grid__product-add-to-cart a.button {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 16px;
    white-space: nowrap;
    text-align: center;
    color: var(--cz-forest) !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--cz-forest) !important;
    border-radius: var(--cz-btn-radius, 2px) !important;
    font-family: var(--cz-font-body);
    font-size: .85rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

/* Hover quase imperceptível (sem preenchimento deslizante), como nos demais botões. */
.woocommerce-cart .wc-block-grid__product .wp-block-button__link:hover,
.woocommerce-cart .wc-block-grid__product .wp-block-button__link:focus-visible,
.woocommerce-cart .wc-block-grid__product-add-to-cart a.button:hover {
    color: var(--cz-forest) !important;
    background: rgba(20, 60, 53, .06) !important;
    border-color: var(--cz-forest) !important;
}

/* Título da seção (heading do bloco). */
.woocommerce-cart .entry-content .wp-block-heading {
    margin: 8px 0 18px;
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 560;
}

/* =============================================================================
   Checkout
   ========================================================================== */

/* Login/cupom toggles no topo do checkout. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin: 0 0 18px;
}

.woocommerce-checkout #customer_details {
    margin: 0 0 8px;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    padding: 0;
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 .7em;
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 560;
    line-height: 1.2;
}

/* Coluna de revisão do pedido = painel papel elevado (foco do checkout). */
.woocommerce-checkout #order_review {
    padding: clamp(18px, 2.4vw, 28px);
    background: var(--cz-paper);
    border: 1px solid var(--cz-border);
    box-shadow: 0 1px 2px rgba(20, 60, 53, .04), 0 28px 54px -34px rgba(20, 60, 53, .24);
}

.woocommerce-checkout #order_review table.shop_table {
    margin: 0 0 18px;
    border: 0;
    background: transparent;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    padding: 12px 0;
    border-top: 1px solid var(--cz-border);
}

.woocommerce-checkout #order_review .order-total .amount {
    color: var(--cz-forest);
    font-size: 1.2rem;
}

/* Caixa de pagamento sem o amarelo/cinza padrão do WooCommerce. */
.woocommerce-checkout #payment {
    background: var(--cz-soft);
    border: 1px solid var(--cz-border);
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--cz-border);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--cz-card);
    border: 1px solid var(--cz-border);
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--cz-card);
}

.woocommerce-checkout #place_order {
    width: 100%;
    margin-top: 8px;
}

/* ---------- Responsivo ---------------------------------------------------- */
@media (min-width: 781px) {
    /* Carrinho: totais ao lado da tabela (layout nativo já usa float; reforço). */
    .woocommerce-cart .cart-collaterals .cart_totals {
        float: right;
        width: 42%;
    }

    /* Checkout: duas colunas (dados | revisão). */
    .woocommerce-checkout form.checkout.woocommerce-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: clamp(24px, 4vw, 48px);
        align-items: start;
    }

    .woocommerce-checkout form.checkout #customer_details {
        grid-column: 1;
    }

    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 2;
    }

    .woocommerce-checkout form.checkout #order_review_heading {
        align-self: end;
    }
}

@media (max-width: 600px) {
    /* Tabela do carrinho vira cartões por linha (usa os data-title nativos). */
    .woocommerce-cart .woocommerce table.shop_table thead {
        display: none;
    }

    .woocommerce-cart .woocommerce table.shop_table tr {
        display: block;
        margin: 0 0 12px;
        border: 1px solid var(--cz-border);
    }

    .woocommerce-cart .woocommerce table.shop_table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 14px;
        text-align: right;
        border-top: 1px solid var(--cz-border);
    }

    .woocommerce-cart .woocommerce table.shop_table td::before {
        content: attr(data-title);
        color: var(--cz-muted);
        font-size: .74rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .woocommerce-cart .woocommerce .cart .coupon,
    .woocommerce-cart .woocommerce .actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =============================================================================
   Skin de-Woo dos BLOCOS Cart/Checkout (wc-block-components-*)
   As páginas /carrinho/ e /finalizar-compra/ usam os blocos woocommerce/cart e
   woocommerce/checkout (editáveis no Gutenberg). Esta seção remove a aparência
   padrão WooCommerce dos componentes: tipografia da casa, hairlines no lugar de
   caixas, botões na receita unificada (contornado, hover sutil). Nada de
   comportamento é alterado — só apresentação.
   ========================================================================== */

/* Tipografia base dos blocos */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    font-family: var(--cz-font-body);
    color: var(--cz-ink, #1c312c);
}

/* Títulos internos (Carrinho, Total no carrinho, passos do checkout) */
.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wc-block-components-checkout-step__title {
    color: var(--cz-deep);
    font-family: var(--cz-font-display);
    font-optical-sizing: auto;
    font-weight: 560;
    letter-spacing: 0;
}

.wc-block-components-checkout-step__description {
    color: var(--cz-muted);
    font-size: .9rem;
}

/* Botões principais dos blocos — mesma receita unificada do tema */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    color: var(--cz-forest) !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--cz-forest) !important;
    border-radius: var(--cz-btn-radius, 2px) !important;
    box-shadow: none !important;
    font-family: var(--cz-font-body);
    font-size: .9rem;
    font-weight: 600;
    text-transform: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible {
    color: var(--cz-forest) !important;
    background: rgba(20, 60, 53, .06) !important;
    border-color: var(--cz-forest) !important;
    opacity: 1;
}

.wc-block-components-button:not(.is-link):focus-visible {
    outline: 2px solid rgba(11, 120, 200, .55);
    outline-offset: 3px;
}

/* Inputs/selects/textarea dos blocos — flat, foco discreto */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-form .wc-block-components-text-input input {
    border: 1px solid var(--cz-border) !important;
    border-radius: 2px;
    background: rgba(255, 255, 255, .82);
    color: var(--cz-ink, #1c312c);
    font-family: var(--cz-font-body);
    box-shadow: none;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus {
    border-color: var(--cz-blue, #0b78c8) !important;
    box-shadow: 0 0 0 1px var(--cz-blue, #0b78c8) !important;
    outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label {
    color: var(--cz-muted);
    font-family: var(--cz-font-body);
}

/* Linhas de item do carrinho — hairlines, sem caixas */
.wc-block-cart-items th {
    color: var(--cz-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cz-border);
}

.wc-block-cart-items td {
    border-bottom: 1px solid rgba(20, 60, 53, .1);
    background: transparent;
}

.wc-block-cart-item__image img {
    border: 1px solid rgba(14, 69, 61, .08);
    border-radius: 3px;
}

.wc-block-components-product-name {
    color: var(--cz-deep) !important;
    font-weight: 600;
    text-decoration: none;
}

.wc-block-components-product-name:hover {
    color: var(--cz-blue, #0b78c8) !important;
}

.wc-block-cart-item__prices,
.wc-block-components-product-price {
    color: var(--cz-muted);
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
    color: var(--cz-muted);
    font-size: .82rem;
}

/* Seletor de quantidade — pill mínima */
.wc-block-components-quantity-selector {
    border: 1px solid var(--cz-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, .82);
    box-shadow: none;
}

.wc-block-components-quantity-selector::after {
    border: 0;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    color: var(--cz-deep);
    font-family: var(--cz-font-body);
    background: transparent;
}

.wc-block-cart-item__remove-link {
    color: var(--cz-muted);
    font-size: .8rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(20, 60, 53, .25);
}

.wc-block-cart-item__remove-link:hover {
    color: var(--cz-blue, #0b78c8);
    border-bottom-color: currentColor;
}

/* Sidebar de totais — sem cartão, só hairlines */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
    border-color: rgba(20, 60, 53, .1);
}

.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
    color: var(--cz-ink, #1c312c);
    font-family: var(--cz-font-body);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--cz-deep);
    font-weight: 650;
}

.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
    color: var(--cz-blue, #0b78c8);
    font-family: var(--cz-font-body);
    font-weight: 500;
}

/* Opções de envio/pagamento — sem caixas pesadas, lista com hairlines */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    background: transparent;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
    border-color: rgba(20, 60, 53, .12);
}

.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label,
.wc-block-components-radio-control__label {
    color: var(--cz-ink, #1c312c);
    font-family: var(--cz-font-body);
}

.wc-block-components-radio-control__input:checked {
    border-color: var(--cz-forest);
    background: var(--cz-forest);
}

/* Passos do checkout — numeração/separadores discretos */
.wc-block-components-checkout-step {
    border-color: rgba(20, 60, 53, .1);
}

.wc-block-checkout__sidebar .wc-block-components-order-summary {
    border-color: rgba(20, 60, 53, .1);
}

/* Avisos dos blocos — banner flat com acento, sem ícone colorido berrante */
.wc-block-components-notice-banner {
    border-radius: 2px;
    border-width: 1px;
    box-shadow: none;
    font-family: var(--cz-font-body);
}

.wc-block-components-notice-banner.is-info {
    background: var(--cz-soft, #eef4f0);
    border-color: rgba(20, 60, 53, .18);
    color: var(--cz-ink, #1c312c);
}

/* Link "voltar à loja"/secundários dentro dos blocos */
.wp-block-woocommerce-cart a:not(.wc-block-components-button),
.wp-block-woocommerce-checkout a:not(.wc-block-components-button) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* =============================================================================
   Hierarquia primária dos blocos (refino seguindo a Home).
   Nada é ocultado, movido ou alterado em comportamento: o CTA principal de
   cada página (Finalizar compra no carrinho, Finalizar pedido no checkout)
   volta à receita primária da casa — desliza-p/-azul, como o #place_order
   clássico no topo deste arquivo — e o resumo do pedido ganha superfície de
   papel translúcida com hairline. Botões secundários seguem contornados.
   ========================================================================== */

/* Resumo do pedido (sidebar do checkout): painel papel translúcido + hairline. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    padding: 6px 18px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 253, 247, .34));
    border: 1px solid var(--cz-border);
    border-radius: 3px;
}

/* CTA primário dos blocos — especificidade e ordem vencem a regra contornada
   geral acima; !important espelha aquela regra para valer nos mesmos campos. */
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
    color: #fff !important;
    background-color: var(--cz-forest) !important;
    background-image: linear-gradient(110deg, var(--cz-forest) 0%, var(--cz-forest) 42%, #318dcf 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 50% !important;
    background-repeat: no-repeat !important;
    border-color: var(--cz-forest) !important;
    font-weight: 700;
    transition: background-position 360ms ease, border-color 240ms ease;
}

.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:focus-visible,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible {
    color: #fff !important;
    background-image: linear-gradient(110deg, var(--cz-forest) 0%, var(--cz-forest) 42%, #318dcf 100%) !important;
    background-size: 220% 100% !important;
    background-position: 100% 50% !important;
    border-color: #318dcf !important;
}

/* Estado desabilitado/carregando continua visivelmente inativo. */
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:disabled,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =============================================================================
   Ordem visual dos campos de endereço do checkout (referência BR do dono):
   CEP -> Rua -> Número -> Complemento -> Bairro -> Cidade -> Estado.
   O servidor já ordena por index (inc/woocommerce/checkout.php), mas o
   componente de endereço dos blocos SEMPRE cola o Complemento (address_2)
   logo após a Rua no DOM — Número(45) cai depois do par. Como o formulário é
   flex-wrap (CSS do WooCommerce em @container >= 700px), `order` corrige só a
   APRESENTAÇÃO; DOM, ids, validação e submissão ficam intactos. Custo aceito:
   o tab percorre Complemento antes do Número (documentado no HANDOFF).
   Campos ausentes (ex.: CPF do Pagar.me desativado) não afetam os demais.
   ========================================================================== */
@container (min-width: 700px) {

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__country { order: 1; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__first_name { order: 2; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__last_name { order: 3; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address-document { order: 4; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__postcode { order: 5; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1 { order: 6; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__shipping-number { order: 7; }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2,
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle {
        order: 8;
        /* Meio-a-meio (receita de largura do próprio WooCommerce) p/ formar a
           linha [Número | Complemento] na leitura esquerda->direita. */
        flex: 1 0 calc(50% - 12px);
    }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__shipping-neighborhood { order: 9; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__city { order: 10; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__state { order: 11; }

    /* Alinha o Estado com o vizinho de linha: o wrapper do select não tem o
       margin-top:12px dos text-inputs (fica no select interno), então pares
       com o Estado sairiam em escadinha — quirk que já existia no par
       [Cidade | Estado] antes da reordenação. (O Telefone saiu dos blocos de
       endereço — vive no passo de contato, regra do dono.) */
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__state.wc-block-components-state-input {
        margin-top: 12px;
    }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__state.wc-block-components-state-input .wc-blocks-components-select {
        margin-top: 0;
    }
}

/* Container estreito (mobile): o CSS do WooCommerce volta ao fluxo de bloco,
   onde `order` não vale. Vira coluna flex com as MESMAS ordens — campos
   continuam largura cheia, um por linha, agora na sequência da referência. */
@container (max-width: 699px) {

    .wp-block-woocommerce-checkout .wc-block-components-address-form {
        display: flex;
        flex-direction: column;
    }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__country { order: 1; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__first_name { order: 2; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__last_name { order: 3; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address-document { order: 4; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__postcode { order: 5; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1 { order: 6; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__shipping-number { order: 7; }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2,
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle { order: 8; }

    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__shipping-neighborhood { order: 9; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__city { order: 10; }
    .wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-address-form__state { order: 11; }
}

/* =============================================================================
   Informações de contato — ordem: e-mail -> Telefone -> CPF/CNPJ (regra do
   dono). O Telefone é campo do tema (coguazul/telefone) registrado em
   woocommerce_init, DEPOIS dos campos de plugins (que usam
   woocommerce_blocks_loaded, inacessível ao tema), então no DOM ele vem por
   último — a ordem visual é deste flex. Orders NEGATIVOS: um campo de
   contato futuro (order 0) entra depois do CPF, nunca antes do e-mail.
   ========================================================================== */
#contact-fields .wc-block-components-address-form {
    display: flex;
    flex-direction: column;
}

#contact-fields .wc-block-components-address-form .wc-block-components-address-form__email { order: -3; }
#contact-fields .wc-block-components-address-form .wc-block-components-address-form__coguazul-telefone { order: -2; }
#contact-fields .wc-block-components-address-form .wc-block-components-address-form__superfrete-document { order: -1; }

/* =============================================================================
   País fixo (loja só-Brasil, regra do dono): quando o select de país do
   checkout em blocos tem UMA única opção (woocommerce_allowed_countries já é
   "specific: BR" nas configurações), trava a interação e esconde o chevron —
   vira um valor exibido, não um seletor. O :has() faz a regra se desativar
   sozinha se a loja voltar a vender p/ mais países. Nada muda no dado
   enviado; o formulário clássico do perfil já vira texto+hidden nativamente
   com um único país permitido.
   ========================================================================== */
/* "Uma opção real" = uma única <option> habilitada (o select dos blocos traz
   também um placeholder disabled "Selecione um país", que não conta).
   Nota de sintaxe: :has() não pode aninhar outro :has(); por isso o teste é
   ":has(select):not(:has(option habilitada ~ option habilitada))". */
.wp-block-woocommerce-checkout .wc-block-components-address-form__country:has(select):not(:has(option:not([disabled]) ~ option:not([disabled]))) {
    pointer-events: none;
}

.wp-block-woocommerce-checkout .wc-block-components-address-form__country .wc-blocks-components-select__container:has(select):not(:has(option:not([disabled]) ~ option:not([disabled]))) > svg {
    display: none;
}