/* WooCommerce na linguagem visual do v6_3.
 *
 * Nenhuma cor literal: tudo sai dos tokens de tokens.css. A grade, o cartao e
 * o botao ja existem no site.css — aqui entra o que o WooCommerce desenha por
 * conta propria e o que a ficha de produto precisou.
 */

/* ---------- vitrine ---------- */

.vitrine-secao .sec-head { max-width: 640px; }
.vitrine-vazia { color: var(--text-muted); font-size: 14px; }

/* O cartao inteiro virou link: tira o sublinhado e devolve a cor do texto. */
a.prod-card { text-decoration: none; color: inherit; display: block; }
a.prod-card:hover .prod-name { color: var(--gold); }
.prod-name { transition: color var(--tr); }

/* O preco vem embrulhado pelo WooCommerce; o tamanho e do .prod-price do
   v6_3, aqui so a familia e o tratamento do preco promocional. */
.prod-price .woocommerce-Price-amount { font-family: var(--font-display); color: var(--gold); }
.prod-price del { opacity: .45; font-size: .7em; margin-right: 6px; }
.prod-price ins { text-decoration: none; }

/* Aviso que substitui o valor nos lustres. */
.prod-price-aviso {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: .06em;
}

/* Foco visivel: o cartao e navegavel por teclado. */
a.prod-card:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- paginacao ---------- */

.woocommerce nav.woocommerce-pagination { margin-top: 48px; }
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: 6px;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 8px 14px;
    transition: all var(--tr);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

/* ---------- ficha do produto ---------- */

.ficha { padding: 120px 5vw 96px; }

.ficha-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .ficha-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* O WooCommerce da 48% de largura a galeria, para o layout de duas colunas
   dele. Aqui a coluna ja e a metade da ficha, entao a galeria ocupa tudo. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images { width: 100%; float: none; margin: 0; }
.woocommerce div.product div.summary { width: 100%; float: none; margin: 0; }

.ficha-galeria img { border-radius: var(--r); width: 100%; }
.ficha-galeria .woocommerce-product-gallery__image { width: 100%; }

/* Miniaturas embaixo da foto principal, quando o produto tem mais de uma. */
.woocommerce div.product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce div.product .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--r); opacity: .55; transition: opacity var(--tr); }
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }

.ficha-titulo { margin: 8px 0 18px; font-size: clamp(28px, 4vw, 44px); }

.ficha-preco {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--gold);
    line-height: 1.2;
    margin-bottom: 20px;
}
.ficha-preco .woocommerce-Price-amount { font-family: var(--font-display); }
.ficha-preco del { opacity: .45; font-size: .6em; margin-right: 8px; }
.ficha-preco ins { text-decoration: none; }
.ficha-preco .price { margin: 0; }

/* .ficha-preco (acima) e a caixa de preco do v6_3 — grande, no topo, antes
 * da calculadora. O Woo tambem desenha o SEU preco de variacao, nativo,
 * escondido dentro do formulario (aparece so quando uma variacao bate,
 * entre a calculadora e "Adicionar ao carrinho"). Numa familia onde o
 * preco muda por variacao de verdade — as 6 de corrente/pedraria
 * mescladas em 16/09/2026, Cor x Acabamento — os dois ficavam visiveis ao
 * mesmo tempo, um dizendo a faixa (R$18,90–R$32,90) e outro o preco exato
 * (R$26,90), o que parece contradicao. tema.js copia o preco nativo pra
 * dentro de .ficha-preco quando uma variacao e escolhida (mesmo padrao de
 * ceno_swatches_cor: o nativo continua a fonte da verdade, so nao aparece
 * duas vezes) — o bloco nativo fica so escondido visualmente. */
.woocommerce-variation-price { display: none; }

.ficha-resumo-texto {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.85;
    margin-bottom: 24px;
}
.ficha-resumo-texto p { margin: 0 0 10px; }

/* .specs vem do v6_3; aqui so o espacamento dentro da ficha. */
.ficha-resumo .specs { margin-bottom: 28px; }

.ficha-detalhes { max-width: 1200px; margin: 80px auto 0; }

/* ---------- formulario de compra ---------- */

.ficha-compra { margin-bottom: 28px; }

.woocommerce div.product form.cart {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.woocommerce div.product form.cart .variations {
    margin: 0;
    border: none;
    width: 100%;
}
.woocommerce div.product form.cart .variations td { padding: 0 0 14px; display: block; }
.woocommerce div.product form.cart .variations label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}
.woocommerce div.product form.cart .reset_variations {
    font-size: 11px;
    color: var(--text-muted);
}

.woocommerce div.product form.cart select,
.woocommerce .quantity input.qty {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 13px;
    min-height: 44px;
}
.woocommerce div.product form.cart select { width: 100%; max-width: 340px; }
.woocommerce .quantity input.qty { width: 84px; text-align: center; }

/* Mesmo tratamento do #macQty (home, tema.css) pro campo de quantidade
 * NATIVO do Woo na ficha do macrame — nasce vazio de proposito (revisao de
 * 17/09/2026), entao precisa do mesmo aviso visual: borda dourada so de
 * estar vazio, anel mais forte quando a cliente ja tentou "Adicionar" sem
 * preencher. So dispara pra quem tem placeholder (so o macrame, ver
 * inc/calculadora-macrame.php) — outros produtos continuam com value="1" e
 * nunca caem em :placeholder-shown. */
.woocommerce .quantity input.qty:placeholder-shown { border-color: var(--gold); }
.woocommerce .quantity input.qty.qty-invalida {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
}

.woocommerce div.product form.cart .woocommerce-variation-price {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
}

/* Botao de compra: o mesmo peso do .btn-add do v6_3. */
.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    border: none;
    border-radius: var(--r);
    padding: 15px 30px;
    cursor: pointer;
    transition: all var(--tr);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--gold); color: var(--black); }
.woocommerce button.button:disabled,
.woocommerce button.button.disabled { opacity: .45; transform: none; }

.woocommerce div.product .product_meta {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: .04em;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ---------- abas e relacionados ---------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 20px;
    display: block;
    border-bottom: 2px solid transparent;
    transition: all var(--tr);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.woocommerce div.product .woocommerce-tabs .panel {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-muted);
}
.woocommerce div.product .woocommerce-tabs h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 26px;
    color: var(--text);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 30px;
    color: var(--text);
    margin-bottom: 28px;
}
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
}
.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after { display: none; }
.woocommerce .related ul.products li.product {
    width: auto;
    margin: 0;
    float: none;
}

/* ---------- avisos da loja ---------- */

/* O aviso precisa se destacar do fundo. Com --bg2 sobre --bg a diferenca era
   quase invisivel; o branco do --bg3 com a barra dourada le como um cartao. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    color: var(--text);
    font-size: 13px;
    border-radius: var(--r);
    box-shadow: 0 4px 16px rgba(43, 38, 34, .06);
    margin-bottom: 32px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold); }
.woocommerce-error { border-top-color: #A34A3A; }

/* ---------- telas menores ---------- */

@media (max-width: 760px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .woocommerce .related ul.products,
    .woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
    .ficha { padding: 100px 5vw 64px; }
}
@media (max-width: 460px) {
    .prod-grid { grid-template-columns: 1fr; }
    .woocommerce .related ul.products,
    .woocommerce .upsells ul.products { grid-template-columns: 1fr; }
}

/* SELETORES DA FICHA — cor em swatches, altura em chips.
 *
 * O CSS de .swatch e .hchip ja vem do site.css, herdado do v6_3. Aqui ficam
 * so os ajustes que o WooCommerce exige e o que o v6_3 nao previa: o chip como
 * link entre produtos, com preco. */

/* O <select> de cor so some quando o JS assumiu o comando. Sem JS, ele
 * reaparece e a ficha continua comprando — os swatches e que ficam de fora.
 *
 * A classe 'ceno-com-swatches' vai em .ficha-compra, nao no <form>: desde a
 * revisao visual de 14/09/2026 os swatches (.ceno-cor) nasceram fora do
 * <form>, mais cedo em .ficha-compra (ordem do v6_3) — um seletor
 * form.ceno-com-swatches nunca alcancaria .ceno-cor de novo, porque os dois
 * viraram irmaos, nao ancestral e descendente. .ficha-compra e o ancestral
 * comum aos dois. */
.ficha-compra.ceno-com-swatches .variations { display: none; }
.ficha-compra .ceno-cor { display: none; }
.ficha-compra.ceno-com-swatches .ceno-cor { display: block; margin-bottom: 6px; }

/* Mesmo tratamento pros chips de Acabamento (sem/com ponteira) — segundo
 * seletor das 6 familias de corrente/pedraria mescladas em 16/09/2026. */
.ficha-compra .ceno-acabamento { display: none; }
.ficha-compra.ceno-com-swatches .ceno-acabamento { display: block; margin-bottom: 6px; }

/* O aro interno nao e enfeite: Branco (#F5F5F5) sobre o fundo bege da ficha
 * ficava invisivel, e a cor mais vendida do macrame aparecia como um buraco na
 * grade. A borda de .swatch e transparente, reservada para o estado ativo. */
.swatch {
    padding: 0;
    appearance: none;
    box-shadow: inset 0 0 0 1px rgba(43, 38, 34, 0.16);
}
.swatch.indisponivel { opacity: 0.3; cursor: not-allowed; }
.swatch.indisponivel:hover { transform: none; }

/* Chip de altura: no v6_3 era <div> e trocava a altura sem sair da pagina.
 * Aqui cada altura e um produto proprio, entao o chip virou link — e leva o
 * preco junto, senao a cliente so o descobre depois de navegar. */
.heights .hchip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-decoration: none;
    line-height: 1.25;
}
.heights .hchip small {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.75;
}
.heights .hchip .woocommerce-Price-amount { font-size: 10px; }
.heights a.hchip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.altura-nota {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: -14px 0 24px;
}

/* Secao de macrame da home: os chips viram botao (a troca acontece na propria
 * pagina, sem navegar) e o link para a ficha fica discreto ao lado do botao. */
.heights button.hchip { font-family: var(--font-body); }
#macComprar { margin-top: 4px; display: inline-block; }
.mac-ver-ficha {
    display: inline-block;
    margin-left: 18px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.mac-ver-ficha:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Abas do catalogo: o .tab do v6_3 e estilo de <div>, sem reset de <button>. */
.tabs button.tab {
    font-family: var(--font-body);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.tabs button.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#outros { padding: 96px 5vw; }

/* O quadrado do cartao, que o WooCommerce desfazia.
 *
 * .prod-img tem aspect-ratio:1 desde o v6_3, mas o Woo emite <img width="300"
 * height="300">, e o atributo height vale como altura declarada. Com altura
 * declarada o aspect-ratio nao governa: num monitor largo o cartao ia a 546px e
 * a foto ficava presa em 300, cortada pelo object-fit. O v6_3 nao tinha esses
 * atributos, e por isso o quadrado acontecia sozinho la. */
.prod-img { height: auto; }

/* Trilha da ficha. Discreta: e orientacao, nao chamada. */
.woocommerce-breadcrumb {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 28px;
}

.woocommerce-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--tr);
}

.woocommerce-breadcrumb a:hover { color: var(--gold); }

/* ---------- fluxo de compra: carrinho, checkout e conta ----------
 *
 * As paginas /cart/, /checkout/ e /my-account/ usam os shortcodes classicos
 * ([woocommerce_cart] etc.), nao os blocos: o bloco traz runtime proprio e
 * variaveis --wc-*, e a Fase 3 pendura as calculadoras nos hooks e templates
 * classicos. O que vem abaixo veste esse markup com os tokens do v6_3 — a
 * grade e os botoes ja vem do site.css e da secao de botao acima.
 */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
    padding: 120px 5vw 96px;
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    max-width: 1120px;
    margin: 0 auto;
}

/* Tabelas do fluxo: o carrinho, o resumo do pedido e o historico da conta. */
.woocommerce table.shop_table {
    border: 1px solid var(--border);
    border-radius: var(--r);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.woocommerce table.shop_table th {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 18px;
}
.woocommerce table.shop_table td { padding: 16px 18px; }
.woocommerce table.shop_table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--border);
}

/* --- carrinho --- */
.woocommerce .cart-collaterals { margin-top: 40px; }
.woocommerce .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 26px;
    color: var(--text);
    margin-bottom: 16px;
}
.woocommerce .cart_totals .order-total .amount { color: var(--gold); }

/* Cupom e acoes ficam na mesma linha, e quebram juntos no celular. */
.woocommerce .cart .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}
.woocommerce .cart .actions .coupon { display: flex; gap: 8px; }
.woocommerce #coupon_code.input-text { width: 180px; }
.woocommerce .wc-proceed-to-checkout { padding-top: 24px; }

/* --- checkout --- */
/* Uma coluna. O WooCommerce classico divide em .col-1/.col-2 (cobranca e
 * entrega) e ainda flutua #customer_details contra #order_review; empilhar
 * tudo tira a briga de floats e deixa o formulario com um caminho unico,
 * de cima para baixo. O arranjo em duas colunas fica para a Tarefa 9. */
.woocommerce-checkout form.checkout { display: block; }
.woocommerce .col2-set,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    width: 100%;
    float: none;
    margin: 0;
}
.woocommerce .col2-set .col-2:empty { display: none; }
.woocommerce-checkout #order_review_heading { margin-top: 40px; }

.woocommerce-checkout h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 22px;
    color: var(--text);
    margin-bottom: 14px;
}

.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: var(--bg3);
    width: 100%;
    min-height: 46px;
    line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.woocommerce-checkout #order_review {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg2);
    padding: 24px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { background: var(--bg3); }
.woocommerce-checkout #payment { background: transparent; border: none; }
.woocommerce-checkout #payment ul.payment_methods {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg3);
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--bg2);
    font-size: 13px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg2); }
.woocommerce-checkout #payment .place-order { padding-top: 8px; }
.woocommerce #place_order { width: 100%; }

/* --- minha conta --- */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
}
/* Deslogado nao ha menu lateral, so o formulario de acesso: sem grade, e
 * estreito. O WordPress marca o logado com .logged-in no body, e a mesma tag
 * <body> ja carrega .woocommerce-account — por isso as classes se colam, sem
 * espaco. A ausencia de .logged-in e o deslogado (nao ha classe .logged-out). */
body:not(.logged-in).woocommerce-account .woocommerce {
    display: block;
    max-width: 460px;
}
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { width: auto; float: none; margin: 0; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--tr);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--gold); }
.woocommerce-MyAccount-content { font-size: 14px; line-height: 1.85; }

.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 28px;
}

/* --- telas menores --- */
@media (max-width: 860px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 28px; }
    .woocommerce .cart-collaterals .cart_totals { max-width: none; }
}

@media (max-width: 768px) {
    /* No celular o WooCommerce empilha so as <td> (shop_table_responsive) e
     * deixa <table>, <tbody> e <tr> em modo tabela — que entao dimensiona pelo
     * conteudo, nao pelo container, e estoura a viewport por ~30px. Bloco nos
     * quatro niveis prende a largura no pai. */
    .woocommerce table.shop_table_responsive,
    .woocommerce table.shop_table_responsive tbody,
    .woocommerce table.shop_table_responsive tr,
    .woocommerce table.shop_table_responsive td {
        display: block;
        width: 100%;
    }
    .woocommerce table.shop_table_responsive td { padding: 12px 14px; }
    .woocommerce .cart .actions .coupon,
    .woocommerce #coupon_code.input-text { width: 100%; }
}

/* As tres abas do Catalogo Completo (#outros) nao cabem lado a lado em 320px:
 * o padding do v6_3 (11px 22px) soma 132px so de respiro, e a fila de tres
 * estoura a tela. Deixa quebrar em duas linhas e aperta o respiro. */
@media (max-width: 480px) {
    .tabs { flex-wrap: wrap; }
    .tabs .tab { padding: 10px 13px; }
}

/* ---------- calculadoras (Fase 3) ---------- */

.ceno-calc-corrente,
.ceno-calc-macrame {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.calc-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 14px;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.calc-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.calc-field select,
.calc-field input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text);
    background: var(--bg4);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 9px 11px;
}

.calc-field input[readonly] {
    opacity: 0.5;
    cursor: default;
}

/* Grid da medida/largura-fixa da calculadora de macrame (v6_3: campo, "÷",
   campo — nao o wrap generico de N campos que .calc-grid usa por padrao). */
.calc-grid-medida {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

/* Grid da calculadora de correntes/pedraria (v6_3: 2 colunas fixas, nao o
   auto-fit generico de .calc-grid — numa tela larga ele encaixava os 3
   campos numa linha so). Altura e Tipo lado a lado, Medida ocupa a linha
   inteira abaixo. */
.calc-grid-corrente {
    grid-template-columns: repeat(2, 1fr);
}
.calc-field-full {
    grid-column: 1 / -1;
}

.calc-eq {
    color: var(--text-muted);
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    padding-bottom: 9px;
}

.calc-field-tipo {
    margin-bottom: 14px;
}

.calc-ponteira-chips { display: flex; gap: 8px; margin-bottom: 14px; }

.calc-resultado:empty { display: none; }

.calc-num {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--gold);
    line-height: 1;
}

.calc-unit { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.calc-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.calc-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Bloco "sob consulta" (altura fora de 1-4m, Tarefa 8): mesmo espacamento,
   borda e raio que .ceno-calc-corrente/.ceno-calc-macrame acima, para nao
   inventar um desenho novo so porque o bloco troca de lugar dentro da ficha. */
.calc-sob-consulta {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.calc-sob-consulta-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.calc-sob-consulta-acoes .btn-wpp,
.calc-sob-consulta-acoes .btn-outline {
    width: auto;
    flex: 1 1 160px;
}

/* Aviso de desconto por volume no Arco de Cristal — Tarefa 9 da Fase 3. */
.aviso-volume {
    background: var(--gold-dim, var(--bg2));
    border: 1px solid var(--gold);
    border-radius: var(--r);
    padding: 18px 20px;
    margin-top: 20px;
}

.aviso-volume-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.aviso-volume-nota { font-size: 11px; color: var(--text-muted); margin: 8px 0 14px; }

/* Acompanhe seu pedido — pagina do pedido do cliente (inc/pedido-status.php).
 * Linha do tempo das 5 etapas: feitas em dourado, a atual em destaque. */
.ceno-acomp {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 26px 28px;
    margin: 0 0 32px;
}
.ceno-acomp-eye {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.ceno-acomp-atual {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text);
    margin: 6px 0 22px;
}
.ceno-acomp-etapas {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ceno-acomp-etapas li {
    flex: 1;
    position: relative;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}
/* Trilho entre os pontos: liga cada etapa a anterior. */
.ceno-acomp-etapas li + li::before {
    content: '';
    position: absolute;
    top: 7px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border);
}
.ceno-acomp-etapas li.feita::before,
.ceno-acomp-etapas li.atual::before { background: var(--gold); }
.ceno-acomp-ponto {
    position: relative;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--bg3);
    border: 2px solid var(--border);
}
.ceno-acomp-etapas li.feita .ceno-acomp-ponto { background: var(--gold); border-color: var(--gold); }
.ceno-acomp-etapas li.atual .ceno-acomp-ponto {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 5px var(--gold-dim);
}
.ceno-acomp-etapas li.feita,
.ceno-acomp-etapas li.atual { color: var(--text); }
.ceno-acomp-etapas li.atual .ceno-acomp-nome { font-weight: 700; }
.ceno-acomp-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 24px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.ceno-acomp-dados dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ceno-acomp-dados dd { margin: 2px 0 0; font-size: 15px; }
.ceno-acomp-dados a { color: var(--gold); text-decoration: underline; }

/* "Nota fiscal emitida por" no resumo do checkout (cobranca, 20/10/2026). */
.ceno-nf-emitente td {
    font-size: 13px;
    color: var(--text-muted);
    text-align: left;
    padding-top: 12px;
}
.ceno-nf-erro td { color: var(--danger, #b3261e); font-weight: 600; }
/* Pedido pendente: link de pagamento (cobranca, 20/10/2026). */
.ceno-pagar {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--gold);
    background: var(--gold-dim);
}
.ceno-pagar p { margin: 0 0 12px; }

/* Celular: etapas em coluna, trilho vertical. */
@media (max-width: 600px) {
    .ceno-acomp { padding: 20px 18px; }
    .ceno-acomp-etapas { flex-direction: column; gap: 14px; }
    .ceno-acomp-etapas li { display: flex; align-items: center; gap: 12px; text-align: left; }
    .ceno-acomp-ponto { margin: 0; flex: none; }
    .ceno-acomp-etapas li + li::before { top: auto; bottom: 50%; right: auto; left: 7px; width: 2px; height: calc(100% + 14px); }
}


/* Produto sem saldo — Avise-me / Quero encomendar (Tarefa 11 da Fase 6). */
.ceno-interesse {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.ceno-interesse[hidden],
.ceno-interesse__form[hidden] { display: none; }
.ceno-interesse__aviso { margin: 0 0 12px; font-size: 13px; color: var(--text2, var(--text)); }
.ceno-interesse__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ceno-interesse__acoes .btn-gold,
.ceno-interesse__acoes .btn-wpp { flex: 1 1 180px; width: auto; margin: 0; padding: 14px 18px; text-align: center; cursor: pointer; }
.ceno-interesse__form { display: grid; gap: 10px; margin-top: 14px; }
.ceno-interesse__form input {
    width: 100%;
    padding: 12px;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-sizing: border-box;
}
.ceno-interesse__qtd { display: grid; gap: 4px; font-size: 12px; margin: 0 0 12px; }
.ceno-interesse__qtd input { width: 100%; padding: 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); box-sizing: border-box; }
.ceno-interesse__rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Isca anti-robo: fora da tela, sem ocupar lugar. */
.ceno-interesse__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.ceno-interesse__form .btn-gold { width: 100%; cursor: pointer; }
.ceno-interesse__msg { margin: 0; min-height: 1em; font-size: 13px; }

/* Macramê da home: .sem-saldo nas cores/alturas fica SEM efeito visual (o Leo
   preferiu as cores normais, 19/10/2026); a caixa Avise-me e quem avisa. */