/* Malune Ateliê — identidade visual v6.0.0

   v6.0.0 (Fase 1): o bloco `:root` que ficava aqui MUDOU-SE para
   `assets/tokens.css`, que agora é o único arquivo do tema onde pode existir
   cor em hexadecimal. Este arquivo só consome `var(--…)`.

   O que a mudança corrigiu de verdade, além da arrumação:

     - `--primary-dark` era `#ed4763`, mais CLARO que o carmim apesar do nome.
       Sob texto branco dava contraste 3,70 e reprovava AA. Agora é `#a8182f`
       (7,40), que é o que o theme.json já usava nos botões de bloco — os dois
       botões, lado a lado na mesma página, tinham hover de cor diferente.
     - `--muted` era `#777777` (4,48 sobre branco). O Lighthouse reprovava a
       página de produto por causa dele. Agora é `#6b6b6b` (5,33).
     - `--radius-btn` era 10px aqui e 8px no theme.json. Agora é 8px nos dois.
     - `--m-carmim-esc` era `#a3172f`, um terceiro carmim escuro que não existia
       em lugar nenhum além desta linha.

   Os nomes antigos (`--primary`, `--muted`, `--m-*`) continuam funcionando:
   viraram apelidos no tokens.css. Nenhuma regra abaixo precisou ser reescrita.

   Fontes são enfileiradas pelo PHP (o @import daqui era ignorado pelo
   navegador por vir depois de outras regras). */

header.wp-block-template-part,
footer.wp-block-template-part { display: none !important; }

/* `hidden` tem que ganhar SEMPRE.
   O atributo vale `display: none`, mas qualquer regra que declare `display`
   num desses elementos o derrota por especificidade — e aí a busca, a gaveta
   de menu e a gaveta do carrinho, que nascem escondidas, apareceriam cobrindo
   a tela. É um bug clássico e caro; esta linha o previne de uma vez. */
[hidden] { display: none !important; }

html, body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
}
.wp-site-blocks, main, .wp-block-group, .entry-content,
.woocommerce, .woocommerce-page { background: transparent !important; }

h1, h2, h3, h4,
.wp-block-post-title, .woocommerce-loop-product__title,
.product_title, .entry-title {
  font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em; line-height: 1.25;
}

a { color: var(--primary); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--primary-dark); }

/* ============ TOPBAR DE AVISOS (§5.1) ============ */
.malune-topbar {
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
  font-size: 13px;
}
.malune-topbar-inner {
  max-width: 1160px; margin: 0 auto;
  min-height: 36px; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.malune-topbar-lista {
  flex: 1; margin: 0; padding: 0; list-style: none;
  text-align: center; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}
/* SEM JS: só o primeiro aviso aparece, parado. A faixa é conteúdo, não
   enfeite — precisa dizer alguma coisa mesmo sem script.
   COM JS: o script marca a lista com .com-js e passa a mandar quem aparece,
   via .ativo. É o `com-js` que desliga a regra do :first-child; sem ele, o
   primeiro aviso ficaria visível por baixo do aviso da vez. */
.malune-topbar-aviso { display: none; }
.malune-topbar-aviso:first-child { display: block; }
.malune-topbar-lista.com-js .malune-topbar-aviso { display: none; }
.malune-topbar-lista.com-js .malune-topbar-aviso.ativo { display: block; }
.malune-topbar a {
  color: var(--cor-texto-invertido) !important;
  text-decoration: underline; text-underline-offset: 2px;
}
.malune-topbar-fechar {
  background: none !important; border: none !important; padding: 6px !important;
  color: var(--cor-texto-invertido) !important;
  display: inline-flex; align-items: center; cursor: pointer;
  opacity: .8; transition: opacity var(--transicao);
  box-shadow: none !important;
}
.malune-topbar-fechar:hover { opacity: 1; }
.malune-topbar-fechar svg { width: 16px; height: 16px; }

/* ============ HEADER (§5.2) ============ */
.malune-header {
  background: rgba(250, 248, 247, .92);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 999;
  border-bottom: 1px solid var(--cor-borda);
}
.malune-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
}
.malune-header-logo { flex-shrink: 0; }
.malune-header-logo img { height: 42px; width: auto; display: block; }

/* O hambúrguer só existe no celular — ver a media query no fim desta seção. */
.malune-header-hamburguer {
  display: none;
  background: none !important; border: none !important;
  padding: 8px !important; color: var(--cor-texto) !important;
  box-shadow: none !important; cursor: pointer;
}
.malune-header-hamburguer svg { width: 24px; height: 24px; display: block; }

.malune-header-nav {
  display: flex; gap: 4px; margin-left: auto; align-items: center;
  background: var(--cor-card); padding: 5px;
  border-radius: var(--raio-pilula); border: 1px solid var(--cor-borda);
}
.malune-nav-item { position: relative; }
.malune-header-nav a {
  display: block;
  color: var(--cor-texto) !important;
  font-family: var(--fonte-titulo);
  font-weight: 500; font-size: 14.5px; padding: 9px 18px;
  border-radius: var(--raio-pilula);
  transition: background var(--transicao), color var(--transicao);
  white-space: nowrap;
}
.malune-header-nav a:hover {
  background: var(--cor-fundo) !important; color: var(--cor-primaria) !important;
}
.malune-header-nav a.malune-nav-ativo {
  background: var(--cor-primaria) !important; color: var(--cor-texto-invertido) !important;
}

/* Submenu de categorias. Só existe quando há categoria de verdade — hoje não
   há, e o PHP simplesmente não imprime o <ul>. */
.malune-nav-submenu {
  position: absolute; top: 100%; left: 0; z-index: 1000;
  min-width: 200px; margin: 6px 0 0; padding: 6px; list-style: none;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-padrao);
  box-shadow: var(--sombra-forte);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
/* Abre no hover E no foco do teclado: só hover deixaria o submenu inalcançável
   para quem navega por Tab. */
.malune-nav-item:hover .malune-nav-submenu,
.malune-nav-item:focus-within .malune-nav-submenu {
  opacity: 1; visibility: visible;
}
.malune-nav-submenu a { font-size: 14px; padding: 8px 14px; }

.malune-header-acoes {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.malune-header-acao {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  /* 40px de alvo: a §9 pede navegação por teclado e o Lighthouse cobra
     24px mínimos de área tocável. */
  width: 40px; height: 40px;
  padding: 0 !important; border: none !important;
  background: none !important; box-shadow: none !important;
  border-radius: var(--raio-pilula);
  color: var(--cor-texto) !important;
  transition: background var(--transicao);
  cursor: pointer;
}
.malune-header-acao:hover { background: var(--cor-fundo) !important; }
.malune-header-acao svg { width: 22px; height: 22px; stroke: currentColor; }
.malune-header-carrinho .contagem {
  position: absolute; top: 2px; right: 2px;
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
  font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* No celular: hambúrguer à esquerda, logo, ações à direita.
   ERA AQUI O ESTOURO DE 360px MEDIDO NA FASE 0 — o menu ficava na barra e
   nem ele nem o logo encolhiam, somando 367px numa tela de 360. Com o menu
   dentro da gaveta, sobra espaço. */
@media (max-width: 781px) {
  .malune-header-hamburguer { display: inline-flex; }
  .malune-header-nav { display: none; }
  .malune-header-inner { gap: 8px; padding: 10px 12px; }
  .malune-header-logo { margin: 0 auto; }
  .malune-header-logo img { height: 36px; }
  .malune-header-acoes { margin-left: 0; }
  .malune-header-conta { display: none; } /* está dentro da gaveta */
}

/* ============ BUSCA EM OVERLAY (§5.2) ============ */
.malune-busca { position: fixed; inset: 0; z-index: 10000; }
.malune-busca-fundo {
  position: absolute; inset: 0;
  background: rgba(43, 39, 36, .45);
  opacity: 0; transition: opacity var(--transicao);
}
.malune-busca.aberto .malune-busca-fundo { opacity: 1; }
.malune-busca-painel {
  position: relative;
  background: var(--cor-card);
  border-bottom: 1px solid var(--cor-borda);
  padding: 28px 20px;
  display: flex; align-items: center; gap: 12px;
  transform: translateY(-100%);
  transition: transform .22s ease-out;
}
.malune-busca.aberto .malune-busca-painel { transform: translateY(0); }
.malune-busca-painel form {
  flex: 1; max-width: 720px; margin: 0 auto;
  display: flex; gap: 10px;
}
.malune-busca-campo {
  flex: 1; position: relative;
  display: flex; align-items: center;
}
.malune-busca-campo svg {
  position: absolute; left: 14px;
  width: 20px; height: 20px; color: var(--cor-texto-suave);
  pointer-events: none;
}
.malune-busca-campo input[type="search"] {
  width: 100%; padding-left: 44px !important;
}
.malune-busca-fechar {
  background: none !important; border: none !important;
  color: var(--cor-texto) !important; box-shadow: none !important;
  padding: 8px !important; cursor: pointer;
  display: inline-flex; align-items: center;
}
.malune-busca-fechar svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .malune-busca-painel { padding: 18px 14px; flex-wrap: wrap; }
  .malune-busca-painel form { flex-wrap: wrap; }
  .malune-busca-btn { width: 100%; }
}

/* ============ GAVETA DE MENU, NO CELULAR (§5.2) ============ */
.malune-drawer { position: fixed; inset: 0; z-index: 10000; }
.malune-drawer-fundo {
  position: absolute; inset: 0;
  background: rgba(43, 39, 36, .45);
  opacity: 0; transition: opacity var(--transicao);
}
.malune-drawer.aberto .malune-drawer-fundo { opacity: 1; }
.malune-drawer-painel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--cor-card);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease-out;
  box-shadow: var(--sombra-forte);
}
.malune-drawer.aberto .malune-drawer-painel { transform: translateX(0); }
.malune-drawer-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--cor-borda);
}
.malune-drawer-topo img { height: 36px; width: auto; display: block; }
.malune-drawer-fechar {
  background: none !important; border: none !important;
  color: var(--cor-texto) !important; box-shadow: none !important;
  padding: 8px !important; cursor: pointer;
  display: inline-flex; align-items: center;
}
.malune-drawer-fechar svg { width: 22px; height: 22px; }
.malune-drawer-links {
  flex: 1; overflow-y: auto;
  margin: 0; padding: 10px; list-style: none;
}
.malune-drawer-links > li > a {
  display: block; padding: 13px 14px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px;
  color: var(--cor-texto) !important; border-radius: var(--raio-campo);
}
.malune-drawer-links > li > a:hover,
.malune-drawer-links a.malune-drawer-ativo {
  background: var(--cor-fundo) !important; color: var(--cor-primaria) !important;
}
.malune-drawer-sublinks { margin: 0 0 6px; padding: 0 0 0 14px; list-style: none; }
.malune-drawer-sublinks a {
  display: block; padding: 10px 14px; font-size: 14.5px;
  color: var(--cor-texto-suave) !important; border-radius: var(--raio-campo);
}
.malune-drawer-sublinks a:hover { background: var(--cor-fundo) !important; }
.malune-drawer-pe {
  padding: 16px 18px; border-top: 1px solid var(--cor-borda);
}
.malune-drawer-pe a {
  display: block; text-align: center;
  background: var(--cor-primaria); color: var(--cor-texto-invertido) !important;
  padding: 13px; border-radius: var(--raio-botao);
  font-family: var(--fonte-titulo); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .malune-busca-painel, .malune-drawer-painel,
  .malune-busca-fundo, .malune-drawer-fundo { transition: none; }
}

/* ============ HERO EM DUAS COLUNAS ============ */
.malune-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1240px;
  margin: 28px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sombra);
  min-height: 480px;
}
.malune-hero-texto {
  background: var(--primary);
  color: var(--cor-texto-invertido);
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.malune-hero-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--primary);
  background: var(--cor-texto-invertido); padding: 7px 15px; border-radius: var(--radius-btn); margin-bottom: 20px;
}
.malune-hero-texto h1 {
  color: var(--cor-texto-invertido) !important;
  font-size: clamp(30px, 3.5vw, 46px);
  margin: 0 0 16px; font-weight: 700 !important;
}
.malune-hero-texto p {
  font-size: 18px; opacity: 0.95; margin: 0 0 28px; line-height: 1.55;
}
.malune-hero-btn {
  display: inline-block; align-self: flex-start;
  background: var(--cor-texto-invertido) !important; color: var(--primary) !important;
  font-family: 'Montserrat', sans-serif;
  padding: 0.85em 1.6em !important; border-radius: var(--radius-btn) !important;
  font-weight: 600; font-size: 16px;
  box-shadow: none !important;
  transition: background 0.18s, color 0.18s;
  transform: none !important;
}
.malune-hero-btn:hover { background: var(--bg) !important; transform: none !important; }
.malune-hero-foto {
  background-size: cover; background-position: center;
  min-height: 480px;
}
@media (max-width: 781px) {
  .malune-hero {
    grid-template-columns: 1fr;
    margin: 16px 16px 0;
    min-height: 0;
  }
  .malune-hero-foto { min-height: 340px; order: -1; }
  .malune-hero-texto { padding: 36px 28px; }
}

/* ============ BENEFÍCIOS (§5.4) ============
   São QUATRO desde a Fase 1 — o desconto no Pix entrou quando o Luiz definiu
   os 5%. Home e loja usam a mesma marcação, vinda de inc/beneficios.php. */
.malune-beneficios {
  background: var(--cor-card);
  margin: 40px auto 56px; max-width: 1050px;
  border-radius: var(--raio-padrao); box-shadow: var(--sombra);
  border: 1px solid var(--cor-borda);
}
.malune-beneficios-lista {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding: 24px 20px;
  margin: 0; list-style: none;
}
.malune-beneficio {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; padding: 6px 12px;
}
.malune-beneficio + .malune-beneficio { border-left: 1px solid var(--cor-borda); }
.malune-beneficio svg {
  width: 30px; height: 30px; color: var(--cor-primaria); flex-shrink: 0;
}
.malune-beneficio strong {
  display: block; font-size: 14.5px;
  font-family: var(--fonte-titulo); font-weight: 600;
  color: var(--cor-texto); margin-bottom: 1px;
}
.malune-beneficio span { font-size: 13px; color: var(--cor-texto-suave); }

/* No celular a faixa vira carrossel horizontal com encaixe, como pede a §5.4.
   Empilhar os quatro em coluna empurraria a vitrine 300px para baixo — quem
   abre no celular veria benefício, não produto. */
@media (max-width: 781px) {
  .malune-beneficios {
    margin: 28px 16px 40px;
    border-radius: var(--raio-padrao);
  }
  .malune-beneficios-lista {
    display: flex; overflow-x: auto; padding: 18px 16px; gap: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .malune-beneficios-lista::-webkit-scrollbar { display: none; }
  .malune-beneficio {
    flex: 0 0 78%; scroll-snap-align: center;
    justify-content: flex-start;
  }
}

/* ============ SELOS DO CARD (§5.7) ============ */
/* display:block porque a moldura é um <span> — ver a explicação em
   inc/card-produto.php: <div> aqui fazia o wpautop fechar o <a> do produto. */
.malune-card-midia { position: relative; display: block; }
.malune-selo {
  position: absolute; top: 10px; z-index: 2;
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 11px; letter-spacing: .02em;
  padding: 5px 10px; border-radius: var(--raio-pilula);
  line-height: 1.2; pointer-events: none;
}
/* Desconto à esquerda, disponibilidade à direita: são duas informações
   diferentes e nunca disputam o mesmo canto. */
.malune-selo--oferta {
  left: 10px;
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
}
.malune-selo--pronta {
  right: 10px;
  background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-tinta);
}
.malune-selo--encomenda {
  right: 10px;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-hover);
}
.malune-card-esgotado {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72);
  border-radius: var(--raio-imagem);
}
.malune-card-esgotado span {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13px;
  color: var(--cor-texto);
  background: var(--cor-card); padding: 7px 16px;
  border-radius: var(--raio-pilula); border: 1px solid var(--cor-borda);
}

/* ============ PIX E PARCELAMENTO (§5.7) ============
   Vêm de malune_html_preco_extra(), a mesma função no card e na página de
   produto. Se os dois lugares mostrarem números diferentes, o bug é no PHP. */
.malune-preco-extra {
  display: flex; flex-direction: column; gap: 1px;
  margin: 4px 0 2px; line-height: 1.45;
}
.malune-preco-pix, .malune-preco-parcela { display: block; }
.malune-preco-pix {
  font-size: 13.5px; color: var(--cor-sucesso-tinta);
}
.malune-preco-pix strong { font-weight: 700; }
/* Sem opacity.
   Medido no site publicado: `opacity: .85` sobre o verde escuro é computado
   pelo navegador como #5c8165, que dá contraste 4,39 — abaixo dos 4,5 do AA, e
   o Lighthouse reprovava a home por isso (peso 7). Opacidade não é desconto
   inocente de cor: ela desfaz o contraste que o token garantia. */
.malune-preco-off { font-weight: 400; }
.malune-preco-parcela {
  font-size: 12.5px; color: var(--cor-texto-suave);
}
.malune-preco-extra--produto {
  margin: 10px 0 16px;
}
.malune-preco-extra--produto .malune-preco-pix { font-size: 16px; }
.malune-preco-extra--produto .malune-preco-parcela { font-size: 14px; }

/* ============ TÍTULO E BOTÃO DO CARD (§5.7) ============ */
/* Duas linhas com reticências: sem isso, um produto de nome longo empurra o
   preço para baixo e os cards da mesma fileira deixam de alinhar. */
ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.malune-card-btn--personalizar,
.malune-card-btn--esgotado { display: inline-block; text-align: center; }
/* Esgotado não é oferta: o botão sai do carmim e vira secundário, para não
   competir com os produtos que dá para comprar. */
.malune-card-btn--esgotado {
  background: var(--cor-card) !important;
  color: var(--cor-texto-suave) !important;
  border: 1px solid var(--cor-borda) !important;
}

.woocommerce-products-header__title, h1.woocommerce-loop-heading { display: none !important; }

/* ============ BOTÕES ============ */
/* sólido, sem sombra, sem transform — igual à produção.
   A exceção citava .malune-editor-btn, classe que não existe: os botões do
   personalizador usam .malune-ed-btn / .malune-ed-efeito. Por isso o carmim
   sólido vazava por cima deles e os botões secundários do editor apareciam
   preenchidos. Corrigido para os nomes reais. */
.button,
button:not(.malune-ed-btn):not(.malune-ed-efeito):not(.malune-hero-btn):not(.malune-carrossel-seta):not(.malune-ponto):not(.malune-gaveta-fechar):not(.malune-gaveta-btn-fantasma):not(.malune-filtro):not(.malune-header-acao):not(.malune-header-hamburguer):not(.malune-topbar-fechar):not(.malune-busca-fechar):not(.malune-drawer-fechar),
input[type="submit"],
.single_add_to_cart_button, .checkout-button,
#place_order, .wc-block-components-checkout-place-order-button, .added_to_cart {
  background: var(--primary) !important; color: var(--cor-texto-invertido) !important;
  border: none !important; border-radius: var(--radius-btn) !important;
  font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  padding: 0.85em 1.6em !important;
  box-shadow: none !important;
  transition: background 0.18s, opacity 0.18s;
  transform: none !important;
}
.button:hover,
button:not(.malune-ed-btn):not(.malune-ed-efeito):not(.malune-hero-btn):not(.malune-carrossel-seta):not(.malune-ponto):not(.malune-gaveta-fechar):not(.malune-gaveta-btn-fantasma):not(.malune-filtro):not(.malune-header-acao):not(.malune-header-hamburguer):not(.malune-topbar-fechar):not(.malune-busca-fechar):not(.malune-drawer-fechar):hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover {
  background: var(--primary-dark) !important;
  transform: none !important; box-shadow: none !important;
}
.button:focus, button:focus, input[type="submit"]:focus,
.checkout-button:focus, #place_order:focus { outline: none; box-shadow: none !important; }
.button:disabled, button:disabled, input[type="submit"]:disabled { opacity: 0.55; }

.checkout-button, .wc-block-components-checkout-place-order-button {
  width: 100%; border-radius: 14px !important; padding: 16px !important;
}

/* ============ CAMPOS DE FORMULÁRIO ============ */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select,
.wc-block-components-text-input input {
  height: 48px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-campo) !important;
  background: var(--card);
  padding: 0 16px;
  color: var(--text);
  font-family: 'Open Sans', sans-serif;
  box-shadow: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
textarea { min-height: 120px; padding: 14px; height: auto; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: var(--foco);
}
.quantity .qty { width: 74px !important; text-align: center; }

/* ============ MENSAGENS DE SISTEMA ============ */
.woocommerce-info, .woocommerce-message, .woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--primary) !important;
  color: var(--text) !important;
  border-radius: var(--radius-msg);
  box-shadow: none;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--primary) !important; }
.woocommerce-message { border-left-color: var(--success) !important; }
.woocommerce-message::before { color: var(--success) !important; }
.woocommerce-error { border-left-color: var(--danger) !important; color: var(--danger) !important; }
.woocommerce-error::before { color: var(--danger) !important; }
.woocommerce-error li { color: var(--danger) !important; }

/* ============ PREÇO E CARDS DE PRODUTO ============ */
.woocommerce-Price-amount, .price, .wc-block-components-product-price {
  color: var(--primary) !important; font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif;
}
/* o tema é de blocos (Twenty Twenty-Five + Product Collection): o card é
   li.wc-block-product. Os seletores clássicos ficam para o caso de a loja
   voltar a usar o loop antigo — até a v5.3 só existiam eles, e por isso os
   cards nunca receberam fundo, borda nem raio. */
ul.products li.product, .wc-block-grid__product, li.wc-block-product {
  background: var(--card) !important; border-radius: var(--radius);
  padding: 14px !important; box-shadow: var(--sombra); overflow: hidden;
  border: 1px solid var(--border);
  transform: none;
}
li.wc-block-product { display: flex; flex-direction: column; gap: 6px; }
ul.products li.product img,
.wc-block-grid__product-image img,
li.wc-block-product .wc-block-components-product-image img {
  border-radius: var(--radius-btn); margin-bottom: 12px;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
}
ul.products li.product:hover img,
li.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.08) rotate(-0.8deg);
}
li.wc-block-product .wc-block-components-product-image__inner-container { overflow: hidden; border-radius: var(--radius-btn); }
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product .wp-block-post-title { font-size: 18px; padding: 0 4px; }
li.wc-block-product .wc-block-components-product-button { margin-top: auto; padding-top: 6px; }

/* ============ CARRINHO E CHECKOUT ============ */
.woocommerce-MyAccount-content, .cart_totals, .shop_table,
.woocommerce-MyAccount-navigation ul, .woocommerce-checkout-review-order-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; }
.woocommerce-MyAccount-navigation li + li { margin-top: 6px; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 14px 18px; border-radius: var(--radius-campo);
  color: var(--text); font-weight: 500;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--bg); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--primary); color: var(--cor-texto-invertido); }
.woocommerce-MyAccount-content, .cart_totals { padding: 30px; }
.shop_table { border-collapse: separate; border-spacing: 0; }
.shop_table th { background: var(--bg); font-weight: 600; color: var(--text); }
.shop_table th, .shop_table td { padding: 18px; border-color: var(--border) !important; }
.product-thumbnail { width: 90px; }
.product-thumbnail img {
  width: 68px !important; height: 68px !important; object-fit: cover;
  display: block; border-radius: var(--radius-campo); border: 1px solid var(--border);
}
.woocommerce a.remove { color: var(--danger) !important; font-size: 24px; line-height: 1; background: none !important; }
.woocommerce a.remove:hover { background: none !important; color: var(--cor-perigo-hover) !important; }
.coupon { display: flex; gap: 12px; flex-wrap: wrap; }
.coupon .input-text { min-width: 230px; }
.cart_totals h2 { margin-bottom: 22px; font-size: 28px; font-weight: 700; }
@media (max-width: 781px) {
  .coupon { display: block; }
  .coupon .input-text { width: 100% !important; margin-bottom: 10px; }
}

/* ============ SEÇÃO HISTÓRIA ============ */
.malune-historia {
  background: var(--primary);
  padding: 66px 24px; margin-top: 64px; text-align: center; color: var(--cor-texto-invertido);
}
.malune-historia-inner { max-width: 720px; margin: 0 auto; }
.malune-historia h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 16px; color: var(--cor-texto-invertido) !important; }
.malune-historia p { font-size: 18px; color: rgba(255,255,255,0.92); line-height: 1.7; margin: 0; }
.malune-historia .assinatura {
  display: inline-block; margin-top: 24px;
  font-family: 'Montserrat', sans-serif; font-weight: 500;
  font-style: italic; font-size: 20px; color: var(--cor-texto-invertido); opacity: 0.9;
}

/* ============ RODAPÉ (§5.13) ============
   Quatro colunas desde a Fase 2, com a identificação legal que o Decreto
   7.962/2013 exige na barra inferior — visível em todas as páginas. */
.malune-rodape {
  background: var(--cor-texto); color: var(--cor-texto-claro);
  padding: 56px 24px 28px;
}
.malune-rodape-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 40px;
}
.malune-rodape img.logo { height: 46px; width: auto; margin-bottom: 14px; }
.malune-rodape p { margin: 5px 0; font-size: 14px; opacity: .85; line-height: 1.6; }

/* Era <h4>, saltando de <h2> — o Lighthouse reprovava por heading-order em
   todas as páginas. Como o rodapé é um landmark <footer>, <h2> é o nível
   certo; o tamanho continua o mesmo. */
.malune-rodape h2 {
  color: var(--cor-texto-invertido) !important;
  font-family: var(--fonte-titulo);
  font-size: 17px; margin: 0 0 14px; font-weight: 600;
}
.malune-rodape a { color: var(--cor-texto-claro) !important; opacity: .85; }
.malune-rodape a:hover { opacity: 1; color: var(--cor-texto-invertido) !important; }

.malune-rodape-links { margin: 0; padding: 0; list-style: none; }
.malune-rodape-links li { margin: 0 0 9px; }
.malune-rodape-links a { font-size: 14px; }

.malune-rodape-redes { margin-top: 14px; }
.malune-rodape-redes a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
}
.malune-rodape-redes svg { width: 20px; height: 20px; }

.malune-pagamentos {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px;
}
.malune-pagamentos img {
  height: 28px; width: auto;
  background: var(--cor-texto-invertido);
  border-radius: 6px; padding: 3px 7px;
}
.malune-rodape-seguro {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px !important; font-size: 13px;
}
.malune-rodape-seguro svg { width: 18px; height: 18px; flex-shrink: 0; }

.malune-rodape-base {
  max-width: 1160px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(242, 239, 237, .18);
  font-size: 13px; text-align: center;
}
/* A linha legal fica um pouco mais legível que o resto da barra: é informação
   obrigatória, não rodapé decorativo. */
.malune-rodape-legal { opacity: .9 !important; margin-bottom: 10px !important; }
.malune-rodape-base p:last-child { opacity: .65; margin: 0; }

@media (max-width: 781px) {
  .malune-rodape { padding: 40px 20px 24px; }
  .malune-rodape-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .malune-rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .malune-rodape-inner { grid-template-columns: 1fr; }
}

/* ============ WHATSAPP ============ */
.malune-whats {
  position: fixed; right: 20px; bottom: 20px; z-index: 998;
  width: 56px; height: 56px; border-radius: 50%; background: var(--cor-whatsapp);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: opacity 0.18s;
}
.malune-whats:hover { opacity: 0.9; }
.malune-whats svg { width: 29px; height: 29px; fill: var(--cor-texto-invertido); }

/* ============ títulos crus do tema na loja ============ */
.wp-block-query-title,
.woocommerce-result-count,
.woocommerce-products-header {
  display: none !important;
}

/* ===========================================================================
   FASE 3 — AS SEÇÕES DA HOME (§5.5 a §5.12)
   =========================================================================== */

.malune-secao {
  max-width: 1160px; margin: 56px auto; padding: 0 16px;
}
.malune-secao-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.malune-secao-topo h2 { margin: 0; }
.malune-secao-sub {
  margin: 4px 0 0; color: var(--cor-texto-suave); font-size: 15px;
}
.malune-secao-todos {
  flex-shrink: 0; font-family: var(--fonte-titulo); font-weight: 500;
  font-size: 14.5px; white-space: nowrap;
}
.malune-secao-todos::after { content: ' →'; }

/* ---- §5.5 Grid de categorias ---- */
/* Cinco colunas no desktop, duas no celular, como pede a §5.5. */
.malune-cat-grade {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.malune-cat-card a {
  display: block; position: relative;
  border-radius: var(--raio-padrao); overflow: hidden;
  /* aspect-ratio fixo: a foto entra sem empurrar o layout, e o CLS fica em
     zero mesmo antes de ela carregar. */
  aspect-ratio: 3 / 4;
}
.malune-cat-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity var(--transicao);
}
.malune-cat-card a:hover img { opacity: .92; }
.malune-cat-nome {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 14px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px;
  color: var(--cor-texto-invertido);
  /* Degradê em vez de faixa sólida: o nome fica legível sobre qualquer foto
     sem tapar a imagem inteira. */
  background: linear-gradient(to top, rgba(43, 39, 36, .78), transparent);
}
@media (max-width: 781px) {
  .malune-cat-grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---- §5.7 Troca de foto no hover ---- */
/* Só onde existe hover de verdade: no toque, `:hover` fica grudado depois do
   primeiro toque e a foto trocaria e não voltaria mais. */
@media (hover: hover) {
  .malune-card-foto-2 {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--raio-imagem);
    opacity: 0; transition: opacity var(--transicao);
    pointer-events: none;
  }
  li.product:hover .malune-card-foto-2 { opacity: 1; }
}

/* ---- §5.8 Banners de coleção ---- */
.malune-banners {
  max-width: 1160px; margin: 56px auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  list-style: none;
}
.malune-banner > a, .malune-banner {
  position: relative; display: block;
  border-radius: var(--raio-padrao); overflow: hidden;
}
.malune-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3;
}
/* O texto é HTML por cima da foto, nunca embutido no arquivo de imagem —
   texto dentro do JPEG não é lido por buscador nem por leitor de tela. */
.malune-banner-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 18px 18px;
  background: linear-gradient(to top, rgba(43, 39, 36, .8), transparent);
  color: var(--cor-texto-invertido);
  display: flex; flex-direction: column; gap: 2px;
}
.malune-banner-texto strong {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 18px;
}
/* Sem `opacity` aqui. Foi exatamente isto que derrubou o contraste do
   "(-5%)" para 4,39 na v3.2.2: opacity vira cor computada, e o AA passa a ser
   medido nela. O tom mais suave se faz com a COR, não com transparência. */
.malune-banner-texto span { font-size: 14px; color: rgba(255, 255, 255, .93); }
@media (max-width: 781px) {
  .malune-banners { grid-template-columns: 1fr; }
}

/* ---- §5.10 Sobre a marca ---- */
.malune-sobre {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-padrao);
  padding: 40px; max-width: 1160px;
}
.malune-sobre--sem-foto { grid-template-columns: 1fr; text-align: center; }
.malune-sobre-texto h2 { margin: 0 0 14px; }
.malune-sobre-texto p { margin: 0 0 14px; line-height: 1.7; }
.malune-sobre-assinatura {
  font-family: var(--fonte-titulo); font-style: italic;
  color: var(--cor-texto-suave);
}
.malune-sobre-btn {
  display: inline-block; margin-top: 8px;
  background: var(--cor-primaria); color: var(--cor-texto-invertido) !important;
  padding: 13px 24px; border-radius: var(--raio-botao);
  font-family: var(--fonte-titulo); font-weight: 500;
  transition: background var(--transicao);
}
.malune-sobre-btn:hover { background: var(--cor-primaria-hover); }
.malune-sobre-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio-padrao); aspect-ratio: 4 / 3; object-fit: cover;
}
@media (max-width: 781px) {
  .malune-sobre { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
}

/* ---- §5.9 Depoimentos ---- */
/* Faixa que se arrasta no celular e vira três colunas no desktop. Sem JS:
   scroll-snap dá o encaixe, e não há autoplay para pausar. */
.malune-dep-trilho {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.malune-dep blockquote {
  margin: 0; height: 100%;
  background: var(--cor-card); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.malune-dep p { margin: 0; line-height: 1.7; }
.malune-dep p::before { content: '“'; color: var(--cor-primaria); font-size: 22px; }
.malune-dep p::after { content: '”'; color: var(--cor-primaria); font-size: 22px; }
.malune-dep-quem {
  margin-top: auto;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 14.5px;
  color: var(--cor-texto);
}
.malune-dep-quem span {
  display: block; font-weight: 400; font-size: 13px;
  color: var(--cor-texto-suave);
}
@media (max-width: 781px) {
  .malune-dep-trilho {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .malune-dep-trilho::-webkit-scrollbar { display: none; }
  .malune-dep { flex: 0 0 85%; scroll-snap-align: center; }
}

/* ---- §5.11 Instagram ---- */
.malune-insta-grade {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.malune-insta-grade a {
  display: block; border-radius: var(--raio-imagem); overflow: hidden;
  aspect-ratio: 1 / 1;
}
.malune-insta-grade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity var(--transicao);
}
.malune-insta-grade a:hover img { opacity: .88; }
@media (max-width: 781px) {
  .malune-insta-grade { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---- §5.12 Captação ---- */
.malune-captacao {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-padrao);
  padding: 40px 24px; text-align: center;
}
.malune-captacao h2 { margin: 0 0 8px; }
.malune-captacao > p { margin: 0 auto 20px; max-width: 520px; color: var(--cor-texto-suave); }
.malune-captacao-form {
  display: flex; gap: 10px; justify-content: center;
  max-width: 520px; margin: 0 auto; flex-wrap: wrap;
}
.malune-captacao-campo { flex: 1; min-width: 220px; }
.malune-captacao-campo input { width: 100%; }
.malune-captacao-btn {
  background: var(--cor-primaria); color: var(--cor-texto-invertido) !important;
  border: none; padding: 0 26px; height: 48px;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 15px;
  cursor: pointer; display: inline-flex; align-items: center;
  transition: background var(--transicao);
}
.malune-captacao-btn:hover { background: var(--cor-primaria-hover); }
.malune-captacao-legal {
  margin: 16px auto 0; max-width: 520px;
  font-size: 12.5px; color: var(--cor-texto-suave);
}
.malune-captacao-aviso {
  max-width: 520px; margin: 0 auto 16px; padding: 12px 16px;
  border-radius: var(--raio-campo); font-size: 14.5px;
}
.malune-captacao-aviso--sucesso {
  background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-tinta);
}
.malune-captacao-aviso--erro {
  background: var(--cor-card); color: var(--cor-perigo);
  border: 1px solid var(--cor-perigo);
}

/* O honeypot fica fora da tela, não com display:none — alguns robôs ignoram
   campo com display:none justamente por saberem que é armadilha. */
.malune-hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ===========================================================================
   GALERIA DO PRODUTO — conter o que vaza (Fase 6)

   Medido depois de a galeria do ID 20 ganhar a segunda foto: o
   `.woocommerce-product-gallery__wrapper` passou a somar a largura das duas
   imagens (1328px numa tela de 360) e a página de produto ganhou scroll
   horizontal que não tinha.

   O FlexSlider do WooCommerce reposiciona isso por JS depois que carrega, mas
   até lá — e se o JS falhar — a largura fica somada. `overflow: hidden` no
   container resolve nos dois casos, sem impedir o slider de funcionar.

   O `.zoomImg` é a cópia ampliada que o zoom do Woo injeta: ela é MAIOR que a
   moldura de propósito, e só precisa ficar recortada por ela.
   =========================================================================== */
.woocommerce-product-gallery {
  max-width: 100%;
  overflow: hidden;
}
.woocommerce-product-gallery__wrapper {
  max-width: 100%;
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
  max-width: 100%;
  height: auto;
}
.woocommerce-product-gallery .zoomImg {
  max-width: none; /* o zoom PRECISA ser maior; quem recorta é o overflow acima */
}

/* ===========================================================================
   FASE 4 — LOJA E ARQUIVO (§5.14)

   Grade, filtros, chips, paginação e o estado vazio. Nenhum hex aqui: tudo sai
   de assets/tokens.css, que é o único arquivo do tema autorizado a ter cor
   literal (§9, "nenhuma cor hex fora do arquivo de tokens").
   =========================================================================== */

/* ---- Trilha de navegação ---- */
.malune-trilha {
  max-width: 1160px; margin: 18px auto 0; padding: 0 16px;
  font-size: 14px; color: var(--cor-texto-suave);
}
.malune-trilha a { color: var(--cor-texto-suave); }
.malune-trilha a:hover { color: var(--cor-primaria); }
.malune-trilha-sep { margin: 0 8px; opacity: .5; }

/* ---- Grade de produtos --------------------------------------------------
   O WooCommerce monta a vitrine com float (22.05% por card em columns-4), e
   float não iguala altura: card com nome de duas linhas empurrava o vizinho.
   Grid resolve por construção, e o `columns-N` do Woo vira só um rótulo.
   A §5.14 pede 4 colunas no desktop e 2 no celular; os 3 do meio existem para
   a faixa do tablet, onde 4 espremeria o card abaixo do legível.
   ------------------------------------------------------------------------- */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 34px !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex; flex-direction: column;
}
/* O botão desce para a base, para os CTAs alinharem entre cards de nome curto
   e nome longo. `margin-top: auto` só funciona com o card em flex — daí o
   display acima. */
ul.products li.product .malune-card-btn,
ul.products li.product .button { margin-top: auto; }

@media (max-width: 1024px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .woocommerce ul.products, ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ---- Painel de filtros --------------------------------------------------
   Barra horizontal acima da grade, não coluna lateral: o formulário é emitido
   em `woocommerce_before_shop_loop`, que vem ANTES de `ul.products` no HTML.
   Uma coluna lateral exigiria envolver os dois num container — isto é, um
   template do Woo sobrescrito, que a §7.4 manda evitar. A barra dá o mesmo
   resultado sem nenhuma dívida.
   ------------------------------------------------------------------------- */
.malune-filtros {
  max-width: 1160px; margin: 26px auto 0; padding: 0 16px;
}
.malune-filtros-corpo {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: 18px 20px;
  box-shadow: var(--sombra);
}
.malune-faceta { border: 0; margin: 0; padding: 0; min-width: 0; }
.malune-faceta legend {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); margin-bottom: 8px; padding: 0;
}
.malune-faceta-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer; font-size: 15px; color: var(--cor-texto);
}
.malune-faceta-item input { accent-color: var(--cor-primaria); flex-shrink: 0; margin: 0; }
.malune-faceta-item em {
  font-style: normal; font-size: 12.5px; color: var(--cor-texto-suave);
  background: var(--cor-fundo); border-radius: var(--raio-pilula);
  padding: 1px 7px;
}
.malune-faceta-item:hover span { color: var(--cor-primaria); }

.malune-faceta-preco { display: flex; align-items: center; gap: 8px; }
.malune-faceta-preco input {
  width: 92px; padding: 8px 10px; font-size: 15px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-campo);
  background: var(--cor-fundo); color: var(--cor-texto);
}
.malune-faceta-preco span { color: var(--cor-texto-suave); font-size: 14px; }

.malune-filtros-acoes {
  display: flex; align-items: center; gap: 14px;
  margin-left: auto; align-self: center;
}
.malune-filtros-btn {
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
  border: 0; border-radius: var(--raio-botao);
  padding: 11px 22px; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 15px; cursor: pointer; transition: var(--transicao);
}
.malune-filtros-btn:hover { background: var(--cor-primaria-hover); }
.malune-filtros-limpar { font-size: 14.5px; color: var(--cor-texto-suave); text-decoration: underline; }
.malune-filtros-limpar:hover { color: var(--cor-primaria); }

/* O botão que abre o painel: escondido no desktop pelo JS, e também aqui —
   sem JS ele nunca deve aparecer, porque o painel nasce aberto. */
.malune-filtros-abrir { display: none; }
@media (max-width: 781px) {
  .malune-filtros-abrir[aria-expanded] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cor-card); color: var(--cor-texto);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-botao);
    padding: 11px 18px; font-family: var(--fonte-titulo); font-weight: 600;
    font-size: 15px; cursor: pointer; width: 100%; justify-content: center;
  }
  .malune-filtros-abrir svg { width: 18px; height: 18px; }
  .malune-filtros-corpo { flex-direction: column; gap: 20px; margin-top: 12px; }
  .malune-filtros-acoes { margin-left: 0; width: 100%; }
  .malune-filtros-btn { flex: 1; }
}

/* ---- Chips do que está filtrado ---- */
.malune-chips {
  max-width: 1160px; margin: 14px auto 0; padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.malune-chips-rotulo { font-size: 14px; color: var(--cor-texto-suave); }
.malune-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cor-primaria-suave); color: var(--cor-primaria);
  border-radius: var(--raio-pilula); padding: 5px 12px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: var(--transicao);
}
.malune-chip:hover { background: var(--cor-primaria); color: var(--cor-texto-invertido); }
.malune-chip-x { font-size: 17px; line-height: 1; }

/* ---- Barra de resultados (contagem + ordenação) ---- */
.malune-barra-loja {
  max-width: 1160px; margin: 20px auto 18px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.malune-barra-contagem { margin: 0; font-size: 15px; color: var(--cor-texto-suave); }
.malune-barra-contagem strong { color: var(--cor-texto); }
/* A ordenação do Woo sai dentro da nossa barra: aqui ela perde a flutuação e
   a margem que o CSS do plugin dá, senão escapa da linha. */
.malune-barra-loja .woocommerce-ordering { margin: 0 !important; float: none !important; }
.malune-barra-loja .woocommerce-ordering select {
  padding: 9px 12px; font-size: 15px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-campo);
  background: var(--cor-card); color: var(--cor-texto); cursor: pointer;
}
@media (max-width: 781px) {
  .malune-barra-loja { gap: 10px; }
  .malune-barra-loja .woocommerce-ordering,
  .malune-barra-loja .woocommerce-ordering select { width: 100%; }
}

/* ---- Paginação ---- */
.woocommerce-pagination {
  max-width: 1160px; margin: 0 auto 56px; padding: 0 16px; text-align: center;
}
.woocommerce-pagination ul.page-numbers {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  border: 0 !important; margin: 0; padding: 0; list-style: none;
}
.woocommerce-pagination ul.page-numbers li { border: 0 !important; margin: 0; }
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-campo);
  background: var(--cor-card); color: var(--cor-texto);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px;
  text-decoration: none; transition: var(--transicao);
}
.woocommerce-pagination .page-numbers:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.woocommerce-pagination .page-numbers.current {
  background: var(--cor-primaria); border-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}
.woocommerce-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---- Nenhum resultado com os filtros ativos ---- */
.malune-vazio {
  max-width: 640px; margin: 40px auto 64px; padding: 36px 24px;
  text-align: center; background: var(--cor-card);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-padrao);
}
.malune-vazio h2 { margin: 0 0 10px; font-size: 24px; }
.malune-vazio p { margin: 0 0 18px; color: var(--cor-texto-suave); }
.malune-vazio-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.malune-vazio-whats {
  display: inline-flex; align-items: center;
  padding: 11px 22px; border-radius: var(--raio-botao);
  border: 1px solid var(--cor-borda); color: var(--cor-texto);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.malune-vazio-whats:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* ===========================================================================
   FASE 5 — PÁGINA DE PRODUTO (§5.15)
   =========================================================================== */

/* ---- Conter o editor de personalização ----------------------------------
   ISTO NÃO TOCA NO PLUGIN. A §7.5 proíbe mexer na lógica do
   malune-personalizador, e aqui não se mexe: nem o canvas nem o editor mudam
   de tamanho, de escala ou de comportamento. O que muda é a caixa em volta.

   O QUE A MEDIÇÃO MOSTROU (Playwright, viewport 360px, editor já montado):

     tela 360px | scrollWidth 520px
       <div#malune-editor-personalizacao>  504px
         <div.malune-ed-painel>            504px
           <div.malune-ed-palco>           470px
             <canvas#malune-ed-canvas>     450px

   Na Fase 6 eu disse que o culpado era o canvas de 450px e que só daria para
   resolver mexendo no editor.js. Errado nas duas partes. O canvas cabe em 450;
   quem estoura é a COLUNA, a 504px, e ela estoura porque item de flex nasce com
   `min-width: auto` e se recusa a encolher abaixo do conteúdo. Esse é o motivo
   clássico de overflow em flexbox, e a correção é `min-width: 0` no item.

   Com a coluna podendo encolher, o editor ganha `overflow-x: auto` e o canvas
   rola DENTRO da própria caixa. Nada é escalado, então o clique continua caindo
   no mesmo pixel do desenho — que era exatamente o risco que me fez parar antes.
   ------------------------------------------------------------------------- */
/*
   ONDE A PRIMEIRA TENTATIVA ERROU, para não errar de novo: pus `min-width: 0`
   nos ANCESTRAIS (.summary, form.cart) e `max-width: 100%` no editor, e o
   estouro continuou igual, 520px. A cadeia medida depois mostrou por quê —

     504px  div#malune-editor-personalizacao   min-w:auto  max-w:100%  ovf-x:auto
     328px  form.cart                          display:grid
     328px  div.wp-block-add-to-cart-form
     360px  body

   — o `form.cart` já estava certo, com 328px. Quem não encolhia era o próprio
   editor, e `max-width` não segura um item de grid: o `min-width: auto` dele
   vence, porque min-width tem precedência sobre max-width na resolução de
   largura. O alvo do `min-width: 0` tinha de ser O ITEM, não o container.
*/
/*
   A CAUSA REAL, na terceira medição (as duas primeiras hipóteses estavam
   erradas e estão registradas acima para não voltarem):

     form.cart  →  display: grid
                   grid-template-columns: min-content auto auto
                   trilhas computadas: 348.656px + 155.344px + 0px = 504px
                   border-box do form: 328px

   O WooCommerce põe esse grid por CSS inline (`.wp-block-woocommerce-add-to-
   cart-form form.cart`) para alinhar quantidade e botão numa linha. O plugin
   do editor injeta o `<div>` dele dentro do mesmo form, então o editor virou
   item de grid e caiu na trilha 1 — a `min-content`, cujo min-content é o
   canvas de 450px mais o padding.

   Por isso `min-width: 0` no item não resolveu: o item já obedecia. Quem não
   encolhia era a TRILHA. `minmax(0, ...)` é o que autoriza uma trilha a ficar
   menor que o conteúdo — é o equivalente, em grid, do `min-width: 0` do flex.

   As colunas 2 e 3 continuam `auto`: quantidade e botão seguem lado a lado.
*/
.woocommerce div.product form.cart {
  grid-template-columns: minmax(0, min-content) minmax(0, auto) minmax(0, auto);
}

/* O editor e o campo do cartão ocupam a linha inteira — são blocos de largura
   total, nunca uma coluna ao lado do botão. */
.woocommerce div.product form.cart > #malune-editor-personalizacao,
.woocommerce div.product form.cart > .malune-cartao {
  grid-column: 1 / -1;
}

#malune-editor-personalizacao,
.malune-cartao {
  min-width: 0;   /* necessário, ainda que não suficiente sozinho */
  max-width: 100%;
  box-sizing: border-box;
}
#malune-editor-personalizacao {
  overflow-x: auto;
  overscroll-behavior-x: contain; /* rolar o editor não arrasta a página junto */
}
/* Os ancestrais continuam com min-width: 0 — não era o bastante sozinho, mas
   é necessário para o item poder encolher dentro deles. */
.woocommerce div.product .summary,
.woocommerce div.product form.cart,
.wp-block-add-to-cart-form,
.wc-block-add-to-cart-form {
  min-width: 0;
}
.malune-cartao-campo { max-width: 100%; box-sizing: border-box; }

/* ---- Acordeões ---- */
.malune-acordeao {
  max-width: 1160px; margin: 44px auto; padding: 0 16px;
}
.malune-painel {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  background: var(--cor-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.malune-painel-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px;
  color: var(--cor-texto);
  list-style: none; /* tira o triângulo padrão do <summary> */
}
.malune-painel-topo::-webkit-details-marker { display: none; }
.malune-painel-topo:hover { color: var(--cor-primaria); }
.malune-painel-topo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.malune-painel-seta {
  width: 20px; height: 20px; flex-shrink: 0;
  transition: transform .22s ease; color: var(--cor-texto-suave);
}
.malune-painel[open] .malune-painel-seta { transform: rotate(180deg); }
.malune-painel-corpo {
  padding: 0 22px 22px; color: var(--cor-texto); line-height: 1.7;
}
.malune-painel-corpo > *:first-child { margin-top: 0; }
.malune-painel-corpo > *:last-child { margin-bottom: 0; }
.malune-painel-link { color: var(--cor-primaria); font-weight: 600; }
.malune-painel-link::after { content: ' →'; }

.malune-specs { width: 100%; border-collapse: collapse; }
.malune-specs th, .malune-specs td {
  text-align: left; padding: 11px 0; font-size: 15.5px;
  border-bottom: 1px solid var(--cor-borda-suave);
}
.malune-specs th { font-weight: 600; color: var(--cor-texto-suave); width: 40%; }
.malune-specs tr:last-child th, .malune-specs tr:last-child td { border-bottom: 0; }

/* ---- Selos de confiança ---- */
.malune-selos {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--cor-borda-suave);
  display: grid; gap: 13px;
}
.malune-selos li { display: flex; align-items: center; gap: 12px; }
.malune-selos svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--cor-primaria); }
.malune-selos span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.malune-selos strong { font-size: 15px; font-weight: 600; color: var(--cor-texto); }
/* `em` sem itálico de propósito: é texto de apoio, não ênfase tipográfica.
   Sem cor própria ele herdaria a do corpo e ficaria igual ao título acima. */
.malune-selos em { font-style: normal; font-size: 13.5px; color: var(--cor-texto-suave); }

/* ---- Cross-sell "Combina com" ---- */
.malune-combina { margin-top: 52px; }
.malune-combina .malune-secao-topo { margin-bottom: 18px; }

/* ===========================================================================
   FASE 5 — CARRINHO E CHECKOUT (§5.16)

   As duas telas são os BLOCOS do WooCommerce (React, Store API), não os
   templates clássicos. Por isso aqui só há folha de estilo: o que dá para
   fazer sem um passo de build é vestir o que os blocos desenham, e é o que
   se faz. A barra de frete grátis é o único nó novo, e quem o insere é
   assets/carrinho.js, ao lado da árvore do React — nunca dentro dela.
   =========================================================================== */

.malune-frete-barra {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: 15px 18px;
  margin-bottom: 16px;
}
.malune-frete-texto {
  margin: 0 0 9px; font-size: 14.5px; color: var(--cor-texto);
}
.malune-frete-texto strong { color: var(--cor-primaria); font-weight: 700; }
.malune-frete-trilho {
  height: 7px; border-radius: var(--raio-pilula);
  background: var(--cor-fundo); overflow: hidden;
}
.malune-frete-trilho span {
  display: block; height: 100%; border-radius: var(--raio-pilula);
  background: var(--cor-primaria); transition: width .35s ease;
}
.malune-frete-ok .malune-frete-texto strong { color: var(--cor-sucesso); }
.malune-frete-ok .malune-frete-trilho span { background: var(--cor-sucesso); }

/* ---- Vestir os blocos do carrinho e do checkout ---- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--cor-primaria) !important;
  color: var(--cor-texto-invertido) !important;
  border-radius: var(--raio-botao) !important;
  font-family: var(--fonte-titulo) !important;
  font-weight: 600 !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--cor-primaria-hover) !important;
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
  border-radius: var(--raio-campo) !important;
  border-color: var(--cor-borda) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus {
  color: var(--cor-primaria);
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
  font-family: var(--fonte-titulo);
  color: var(--cor-texto);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--cor-primaria); font-weight: 700;
}
.wc-block-cart-items__header,
.wc-block-components-sidebar .wc-block-components-panel {
  border-color: var(--cor-borda) !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
  background: var(--cor-fundo) !important;
}

/* ---- Acessibilidade do editor de personalização -------------------------
   O plugin define os tokens dele dentro de #malune-editor-personalizacao, para
   funcionar mesmo carregado sozinho numa página. Um deles é `--muted: #777777`
   — o MESMO valor que a Fase 1 reprovou no tema (4,48 sobre branco, abaixo do
   AA de 4,5) e trocou por #6b6b6b (5,33). O editor só não tinha recebido a
   correção, e o Lighthouse reprovava `p.malune-ed-sub` com 4,47.

   Redefinir a variável é a correção mais leve possível: não toca no plugin,
   não usa !important, e some sozinha se o plugin um dia arrumar o valor dele.
   O hex fica em tokens.css como todo o resto; aqui só se aponta para ele.
   ------------------------------------------------------------------------- */
#malune-editor-personalizacao {
  --muted: var(--cor-texto-suave);
  --primary: var(--cor-primaria);
  --primary-dark: var(--cor-primaria-hover);
}

.malune-titulo-personalizar {
  font-size: 21px; margin: 26px 0 4px;
}
.malune-sub-personalizar {
  margin: 0 0 4px; color: var(--cor-texto-suave); font-size: 15px;
}

/* ---- A vitrine da home tinha metade da largura do resto ------------------
   Medido no print do desktop: os banners e o "sobre" ocupavam 1160px, e a
   vitrine "Nossas canecas" saía com os dois cards espremidos no meio, num
   bloco visivelmente mais estreito.

   A causa é do tema de blocos, não do WooCommerce: o grupo da vitrine em
   `templates/front-page.html` é `is-layout-constrained`, e o Twenty
   Twenty-Five limita todo filho desse grupo ao `contentSize` do theme.json —
   a largura de um parágrafo de texto, não a de uma grade de quatro produtos.

   Alinhar a vitrine aos 1160px das outras seções resolve. O valor é o mesmo
   literal que `.malune-secao` usa; um dia vale virar token.
   ------------------------------------------------------------------------- */
.malune-vitrine.is-layout-constrained > * {
  max-width: 1160px;
}

/* NÃO adianta `justify-content: center` aqui, e vale registrar para ninguém
   tentar de novo: com `grid-template-columns: repeat(4, minmax(0,1fr))` as
   trilhas já consomem a largura inteira, então não há folga para distribuir e
   a propriedade é inerte. Com dois produtos, os cards ficam nas colunas 1 e 2
   e a metade direita fica vazia — o que é o catálogo pequeno aparecendo, não
   um defeito de layout. Enche sozinho quando houver mais produto. */

/* ============ VARIAÇÕES (produto variável) ============
   O WooCommerce monta a <table class="variations"> sozinho; aqui só o layout:
   rótulo em cima, select em largura total, um por linha — na cerâmica são
   três (capacidade, acabamento, cor), e lado a lado não cabem no celular. */
.variations_form table.variations { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.variations_form table.variations tr { display: block; margin-bottom: 14px; }
.variations_form table.variations th.label,
.variations_form table.variations td.value { display: block; padding: 0; text-align: left; border: 0; }
.variations_form table.variations th.label { padding-bottom: 6px; font: 500 14px 'Montserrat', sans-serif; color: var(--cor-texto); }
.variations_form table.variations td.value select { width: 100%; max-width: 420px; }
.variations_form .reset_variations { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--cor-texto-suave); }
.variations_form .woocommerce-variation-price { margin: 6px 0 10px; }
.variations_form .woocommerce-variation-description p { margin: 0 0 8px; color: var(--cor-texto-suave); font-size: 14px; }
.variations_form .woocommerce-variation-availability { display: none; }
/* "a partir de" antes do Pix nos produtos com faixa de preço (precos.php). */
.malune-preco-apartir { font-weight: 400; font-size: .9em; color: var(--cor-texto-suave); }
/* Tabela de preço por lote dos kits corporativos (descrição do produto). */
.malune-tabela-lote { width: 100%; max-width: 480px; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.malune-tabela-lote th, .malune-tabela-lote td { padding: 8px 10px; border-bottom: 1px solid var(--cor-borda); text-align: left; }
.malune-tabela-lote th { font: 600 13px 'Montserrat', sans-serif; color: var(--cor-texto); }

/* ============ GALERIA "NOSSAS ENTREGAS" (functions.php) ============
   Portfólio do que já saiu do ateliê. A grade é a mesma linguagem das outras
   seções: card com raio, foto quadrada, legenda embaixo. */
.malune-entregas-filtros {
  max-width: 1160px; margin: 0 auto 22px; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.malune-filtro {
  border: 1px solid var(--cor-borda); background: var(--cor-card);
  color: var(--cor-texto); border-radius: var(--raio-pilula);
  padding: 8px 16px; font: 500 14px 'Montserrat', sans-serif;
  cursor: pointer; transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.malune-filtro:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.malune-filtro--ativo,
.malune-filtro--ativo:hover {
  background: var(--cor-primaria); border-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}
.malune-entregas-grade {
  max-width: 1160px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none;
}
.malune-entrega {
  background: var(--cor-card); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao); overflow: hidden;
  display: flex; flex-direction: column;
}
.malune-entrega-foto {
  /* height:auto anula o atributo height="768" que o WordPress grava no <img>:
     com largura e altura definidas o navegador ignora o aspect-ratio e o card
     estica. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
}
.malune-entrega:hover .malune-entrega-foto { transform: scale(1.06); }
.malune-entrega-legenda {
  padding: 12px 14px 14px; font-size: 13px; line-height: 1.45;
  color: var(--cor-texto-suave);
}
/* Esconder é classe, não display inline: o JS só alterna isto. */
.malune-entrega--oculta { display: none; }

/* A faixa de entregas dentro da loja (categoria de produto).
   Aqui a seção mora no container do WooCommerce, que já dá o respiro lateral:
   o padding próprio da seção mais o da grade somavam 16px de cada lado e
   deixavam a faixa desencontrada da grade de produtos logo acima — medido em
   1280px: produtos em 40px, entregas em 56px. */
.malune-entregas--categoria,
.malune-entregas--categoria .malune-entregas-grade {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .malune-entregas-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .malune-entregas-grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .malune-entrega-legenda { padding: 10px 11px 12px; font-size: 12px; }
  .malune-entregas-filtros { gap: 6px; }
  .malune-filtro { padding: 7px 13px; font-size: 13px; }
}