/*
Theme Name: Malune
Theme URI: https://luizdahmer1783988943199.0151615.meusitehostgator.com.br
Description: Tema filho do Twenty Twenty-Five para o Malune Ateliê. Assume o
 cabeçalho e o rodapé, que antes vinham injetados por hook do plugin de
 identidade visual. A partir da v3.0.0 as cores, raios e pontos de quebra vivem
 num arquivo de tokens só (assets/tokens.css), alimentado pelo theme.json.
Author: Malune Ateliê
Template: twentytwentyfive
Version: 3.8.2
Text Domain: malune-tema
*/

/*
  As cores da marca vivem no theme.json; raios, sombras, foco e pontos de
  quebra vivem em assets/tokens.css, que lê as cores de lá. Este arquivo fica
  para o que nenhum dos dois alcança: layout de bloco específico.

  Nenhuma cor em hexadecimal aqui — é `var(--cor-…)`, sempre. Critério §9.
*/

/* ---------------------------------------------------------------------------
   Hero da home

   As duas colunas precisam ter a MESMA altura: sem isto o painel carmim fica
   mais baixo que a foto e sobra um degrau de 400 px. O theme.json não alcança
   isto — é layout de um bloco específico, não token.

   A altura vem de `min-height` no desktop, não da foto: a foto é 3:4 e, numa
   coluna de 650 px, teria 866 px de altura — hero alto demais e o texto
   perdido no meio. Com min-height, o texto manda na altura e a foto preenche.

   O object-position é o do manifesto.csv do kit (01-hero-inicial: 50% 55%),
   não estimado.
--------------------------------------------------------------------------- */
.malune-hero-bloco { align-items: stretch; overflow: hidden; }

.malune-hero-bloco > .wp-block-column {
  /* !important porque o bloco escreve align-self: center inline quando a
     coluna tem alinhamento vertical próprio, e aí a coluna não estica. */
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.malune-hero-bloco .malune-hero-foto { flex: 1; margin: 0; }

.malune-hero-bloco .malune-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}

@media (min-width: 782px) {
  /* A foto sai do fluxo para NÃO ditar a altura. Sem isto ela impõe 866 px
     (3:4 numa coluna de 650), o texto some no meio e o hero engole a dobra.
     Assim quem manda é o texto, com um piso de 480 px. */
  .malune-hero-bloco { min-height: 480px; }
  .malune-hero-bloco > .wp-block-column:last-child { position: relative; min-height: 480px; }
  .malune-hero-bloco .malune-hero-foto { position: absolute; inset: 0; flex: none; }
}

/* Empilhado no celular: a foto vira 4:5, como o §7 pede. */
@media (max-width: 781px) {
  .malune-hero-bloco .malune-hero-foto img { aspect-ratio: 4 / 5; height: auto; }
}

/* Faixa de benefícios: os três alinhados pelo topo, senão títulos de uma e de
   duas linhas desencontram o texto de baixo. A classe existe para o seletor
   NÃO pegar as colunas do hero — foi o que aconteceu na primeira tentativa. */
.malune-beneficios .wp-block-column { align-self: flex-start; }

/* Título nunca parte palavra no meio. O WordPress traz `overflow-wrap:
   break-word` de fábrica, e num container estreito isso vira "memóri a". */
h1, h2, h3, .wp-block-heading { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* No celular a coluna de texto do hero usa padding menor: com o padding da
   raiz somado ao da coluna, sobravam 182 px de 390 para o título. */
@media (max-width: 781px) {
  .malune-hero-bloco > .wp-block-column:first-child { padding: 28px 22px !important; }
}

/* ===========================================================================
   CARROSSEL DO HERO

   O deslocamento é scroll-snap puro: sem JS o carrossel continua sendo uma
   faixa que se arrasta com o dedo, e cada slide para no lugar. O JS só
   acrescenta autoplay, setas e pontos. Se ele falhar, nada quebra.
   =========================================================================== */
.malune-carrossel { position: relative; }

.malune-carrossel-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* a navegação são os pontos e as setas */
  -ms-overflow-style: none;
  border-radius: 16px;
}
.malune-carrossel-trilho::-webkit-scrollbar { display: none; }

/* v6.1 — a abertura virou faixa larga, 2,35:1, o mesmo formato do banner do
   site de referência. A foto passou a ser o fundo do slide e o texto foi para
   cima dela, centralizado. Antes era uma grade 42/58: texto no carmim à
   esquerda, foto à direita. Quem dita a altura agora é o aspect-ratio, não o
   texto — por isso o min-height de 480px saiu. */
.malune-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: block;
  aspect-ratio: 2.35 / 1;
  min-height: 0;
  background: var(--cor-primaria);
  overflow: hidden;
}

.malune-slide-texto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 28px clamp(20px, 7vw, 120px);
  color: var(--cor-texto-invertido);
  text-shadow: 0 2px 16px rgba(22, 15, 17, .45);
}
.malune-slide-texto p { max-width: 52ch; }

/* Slide de arte pronta: a imagem já traz título e apoio desenhados. Sem véu
   (escureceria de graça uma arte que já está equilibrada) e sem texto em cima
   — sobra o botão, encostado à direita, na altura em que a linha de apoio da
   arte termina. No celular o recorte é outro e o botão volta ao centro. */
.malune-slide--arte .malune-slide-foto::after { content: none; }
/* O botão é posicionado, não centralizado: com justify-content:center ele caía
   em 43% da altura, exatamente sobre a segunda linha de apoio da arte. O 62%
   resolve contra a altura do slide (o container tem inset:0), então a posição
   acompanha a faixa em qualquer largura. O 3,5% à direita alinha com a margem
   do texto desenhado, que termina a 3,3% da borda. */
.malune-slide--arte .malune-slide-texto { display: block; }
.malune-slide--arte .malune-slide-btn {
  position: absolute;
  top: 62%;
  right: 3.5%;
  box-shadow: 0 6px 24px rgba(22, 15, 17, .28);
}
@media (max-width: 781px) {
  /* No recorte 4:5 o texto da arte fica centralizado; o botão acompanha. */
  .malune-slide--arte .malune-slide-btn {
    top: 60%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Só para leitor de tela: sai da tela sem sair da árvore de acessibilidade.
   `display:none` tiraria o h1 do documento, que é justamente o contrário. */
.malune-so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.malune-slide-tag {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .9;
}
.malune-slide-texto h1,
.malune-slide-texto h2 {
  font-size: clamp(32px, 1.6rem + 1.5vw, 48px);
  line-height: 1.18; color: var(--cor-texto-invertido); margin: 0;
}
.malune-slide-texto p { margin: 0; }
.malune-slide-btn {
  align-self: center;
  background: var(--cor-texto-invertido); color: var(--cor-primaria);
  padding: 14px 22px; border-radius: 8px;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 500;
  text-decoration: none; transition: background .18s;
}
.malune-slide-btn:hover { background: var(--cor-borda-suave); color: var(--cor-primaria); }

/* A foto é o fundo do slide, atrás do texto. */
.malune-slide-foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.malune-slide-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Véu mais fechado no miolo, onde o texto entra, e mais aberto nas bordas,
   para a foto continuar aparecendo. Um véu chapado escureceria a foto inteira
   só para resolver o contraste de quatro linhas de texto. */
.malune-slide-foto::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 74% 112% at 50% 50%,
              rgba(22, 15, 17, .58) 0%, rgba(22, 15, 17, .30) 100%);
}

/* Controles */
.malune-carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--cor-texto);
  cursor: pointer; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.malune-carrossel-seta:hover { background: var(--cor-texto-invertido); }
.malune-carrossel-seta:focus-visible { outline: 3px solid var(--cor-texto-invertido); outline-offset: 2px; }
.malune-carrossel-seta[data-anterior] { left: 12px; }
.malune-carrossel-seta[data-proximo]  { right: 12px; }

.malune-carrossel-pontos {
  display: flex; gap: 0; justify-content: center;
  margin-top: 14px;
}
/* O ponto MEDE 24×24, mas só 9px aparecem.

   Antes o botão tinha 9×9 de verdade, e o Lighthouse reprovava por target-size
   (peso 7): o mínimo tocável é 24×24. Quem tenta trocar de slide com o polegar
   num alvo de 9px erra, e erra de novo.

   Agora o botão é uma área transparente de 24×24 e o círculo visível é um
   ::before de 9px no meio dela. O desenho não mudou; a área de toque
   quase triplicou. */
.malune-ponto {
  width: 24px; height: 24px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%;
}
.malune-ponto::before {
  content: ''; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--cor-primaria);
  background: transparent;
  transition: background var(--transicao);
}
.malune-ponto[aria-current="true"]::before { background: var(--cor-primaria); }
.malune-ponto:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 0; }

@media (max-width: 781px) {
  /* No celular a faixa de 2,35:1 viraria uma tira de 160px de altura. A foto
     em pé volta a mandar: 4:5, que é o recorte que o <picture> troca aqui. */
  .malune-slide { aspect-ratio: 4 / 5; }
  .malune-slide-texto { padding: 26px 22px; gap: 10px; }
  .malune-carrossel-seta { display: none; }   /* no toque, arrasta-se */
}

/* ===========================================================================
   "QUAL É A SUA LETRA?"

   O §7 chama isto de "o único ponto ousado" da página, e o monograma é o
   produto mais fotografado do álbum. Cada letra abre a caneca de inicial já
   com a letra carregada.
   =========================================================================== */
.malune-letras { margin: 40px 0; text-align: center; }
.malune-letras h2 { margin: 0 0 4px; }
.malune-letras p { color: var(--cor-texto-suave); margin: 0 0 18px; }

.malune-letras-grade {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.malune-letra {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--cor-primaria);
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 10px; text-decoration: none;
  transition: background .18s, color .18s;
}
.malune-letra:hover, .malune-letra:focus-visible {
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
}
.malune-letra:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* Cards de produto com a mesma altura — a imperfeição que sobrou da Fase 1.
   Vale para as duas marcações: a do shortcode [products] (.products .product)
   e a dos blocos do WooCommerce, caso voltem a ser usados em outra tela. */
ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
ul.products::before, ul.products::after { content: none; }   /* mata o clearfix do tema */
ul.products li.product {
  display: flex; flex-direction: column; height: 100%;
  width: auto !important; margin: 0 !important; float: none !important;
}
ul.products li.product .button { margin-top: auto; }
.wc-block-grid__products { align-items: stretch; }
.wc-block-grid__product { display: flex; flex-direction: column; height: 100%; }

/* ---------------------------------------------------------------------------
   Correções sobre o estilo.css herdado

   O estilo.css nasceu para brigar com o Twenty Twenty-Five e por isso usa
   !important em quase tudo — inclusive num `h1, h2, h3, h4 { color: var(--text)
   !important }` que pinta de cinza o título do slide, que é branco sobre
   carmim. Este arquivo carrega DEPOIS dele, então basta a mesma força.

   Não vale "tirar o !important de lá": ele ainda protege o resto do site das
   folhas do WooCommerce. O certo é o caso específico vencer o caso geral.
--------------------------------------------------------------------------- */
.malune-slide-texto h1,
.malune-slide-texto h2 { color: var(--cor-texto-invertido) !important; }
.malune-slide-texto p  { color: var(--cor-texto-invertido); }

/* A faixa de letras ocupa a largura "wide", não a de leitura: está dentro de
   um layout constrained, que limita todo filho a contentSize. */
.malune-letras {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* A abertura sangra de ponta a ponta. Quem tira as margens é a classe
   .alignfull do próprio WordPress — o tema declara
   useRootPaddingAwareAlignments, então o alignfull desconta exatamente o
   padding lateral da raiz. É por isso que não há truque de 100vw aqui: o vw
   inclui a barra de rolagem e sobraria uma barra horizontal, e escondê-la no
   html quebraria o position:sticky do cabeçalho. */
.malune-carrossel { max-width: none; }
.malune-carrossel-trilho { border-radius: 0; }

/* A vitrine e o título dela usam a largura "wide", como o carrossel — na
   coluna de leitura (760px) sobrava metade da tela vazia ao lado dos cards. */
.malune-vitrine { max-width: var(--wp--style--global--wide-size); width: 100%; margin: 0 auto; }

/* ===========================================================================
   GAVETA DO CARRINHO — §8.5
   =========================================================================== */
.malune-gaveta { position: fixed; inset: 0; z-index: 9999; }
.malune-gaveta[hidden] { display: none !important; }

.malune-gaveta-fundo {
  position: absolute; inset: 0;
  background: rgba(43,39,36,.45);
  opacity: 0; transition: opacity .22s;
}
.malune-gaveta.aberta .malune-gaveta-fundo { opacity: 1; }

.malune-gaveta-painel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  background: var(--cor-card);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease-out;
  box-shadow: -8px 0 28px rgba(43,39,36,.12);
}
.malune-gaveta.aberta .malune-gaveta-painel { transform: translateX(0); }

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

.malune-gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--cor-borda);
}
.malune-gaveta-topo strong { font-family: Montserrat, 'Segoe UI', sans-serif; font-size: 16px; }

.malune-gaveta-fechar {
  background: none !important; border: none !important; padding: 0 !important;
  font-size: 30px; line-height: 1; cursor: pointer;
  color: var(--cor-texto) !important;
  width: 32px; height: 32px;
}

/* Barra do frete grátis */
.malune-gaveta-frete { padding: 14px 20px 4px; font-size: 13px; color: var(--cor-texto-suave); }
.malune-gaveta-trilho {
  height: 6px; border-radius: 3px; margin-top: 8px;
  background: var(--cor-borda); overflow: hidden;
}
.malune-gaveta-trilho span {
  display: block; height: 100%; width: 0;
  background: var(--cor-sucesso); transition: width .3s;
}

.malune-gaveta-corpo { flex: 1; overflow-y: auto; padding: 12px 20px; }
.malune-gaveta-corpo ul.cart_list li { padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.malune-gaveta-corpo img { width: 56px !important; height: auto; border-radius: 6px; float: left; margin-right: 12px; }
.malune-gaveta-vazia { color: var(--cor-texto-suave); padding: 20px 0; }

.malune-gaveta-pe {
  padding: 16px 20px; border-top: 1px solid var(--cor-borda);
  display: flex; flex-direction: column; gap: 10px;
}
.malune-gaveta-btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--cor-primaria); color: var(--cor-texto-invertido);
  padding: 14px 20px; border-radius: 8px;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 500;
}
.malune-gaveta-btn:hover { background: var(--cor-primaria-hover); color: var(--cor-texto-invertido); }
.malune-gaveta-btn-fantasma {
  background: none !important; border: 1px solid var(--cor-borda) !important;
  color: var(--cor-texto) !important;
  padding: 13px 20px !important; border-radius: 8px !important;
  font-family: Montserrat, 'Segoe UI', sans-serif !important; font-weight: 500 !important;
  cursor: pointer;
}

/* Dentro da gaveta, o mini-carrinho do WooCommerce traz os PRÓPRIOS botões
   "Ver carrinho" e "Finalização de compra". Com os nossos no rodapé fixo,
   viram quatro botões sobrepostos. Os dele saem. */
.malune-gaveta-corpo .woocommerce-mini-cart__buttons,
.malune-gaveta-corpo .buttons { display: none !important; }

/* O ITEM DA GAVETA.
   Grade não serve aqui: no mini-carrinho do WooCommerce a miniatura mora
   DENTRO do <a> do nome, não ao lado dele. Tratar o <a> como célula de 56px
   espremia o título numa coluna de 56px e jogava o resto pro canto — foi
   exatamente o que apareceu na tela. Então a foto sai do fluxo (absoluta) e o
   <li> só reserva o espaço dela na margem esquerda. */
.malune-gaveta-corpo ul.cart_list li,
.malune-gaveta-corpo ul.product_list_widget li {
  display: block;
  position: relative;
  min-height: 72px;
  padding: 16px 26px 16px 68px;  /* 56 da foto + 12 de respiro | 26 pro × */
  margin: 0;
}
.malune-gaveta-corpo ul li img {
  position: absolute; left: 0; top: 16px;
  float: none !important; margin: 0 !important;
  width: 56px !important; height: 72px; object-fit: cover; border-radius: 6px;
}
.malune-gaveta-corpo a.remove {
  position: absolute; right: 0; top: 16px;
  width: 20px; height: 20px; line-height: 19px; text-align: center;
  font-size: 17px; border-radius: 50%;
  color: var(--cor-texto-suave) !important;
  background: var(--cor-fundo);
}
.malune-gaveta-corpo a.remove:hover {
  background: var(--cor-primaria); color: var(--cor-texto-invertido) !important;
}
.malune-gaveta-corpo .woocommerce-mini-cart-item a:not(.remove) {
  display: block;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 600;
  font-size: 14px; line-height: 1.35;
  color: var(--cor-texto); text-decoration: none;
}
/* "2 × R$ 30,00" — é o preço, merece peso próprio e linha só dele. */
.malune-gaveta-corpo .quantity {
  display: block; margin-top: 6px;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-size: 14px;
}
.malune-gaveta-corpo .quantity .amount { font-weight: 600; }

/* A personalização aprovada traz uma miniatura inline que, na largura da
   gaveta, aparece quebrada. Some — a foto do produto já está ao lado. */
.malune-gaveta-corpo .variation img,
.malune-gaveta-corpo dd img { display: none !important; }

/* O <dl> do WooCommerce ("Seu design: aprovado ✓", "Mensagem no cartão: …").
   Vem com padding-left de 13px, dt/dd em block e o valor embrulhado num <p>,
   o que jogava cada rótulo e cada valor em linhas separadas e indentadas —
   medido: dt em 83px, dd em 159px, título em 68px. Os !important são para
   ganhar das folhas do WooCommerce, que são mais específicas que estas. */
.malune-gaveta-corpo dl.variation {
  padding: 0 !important; margin: 5px 0 0 !important;
  border: none !important;  /* o Woo põe uma barra cinza de 2px à esquerda */
  font-size: 13px; line-height: 1.45;
  color: var(--cor-texto-suave);
}
.malune-gaveta-corpo dl.variation dt,
.malune-gaveta-corpo dl.variation dd,
.malune-gaveta-corpo dl.variation dd p {
  display: inline !important;
  margin: 0 !important; padding: 0 !important;
  font-weight: 400; font-size: 13px;
}
/* o respiro entre "Seu design:" e "aprovado ✓": os dt/dd são float no
   WooCommerce, e float engole o espaço em branco que existe no HTML */
.malune-gaveta-corpo dl.variation dt { font-weight: 600; margin-right: 4px !important; }
/* um par rótulo+valor por linha, sem virar bloco (que traria o recuo de volta) */
.malune-gaveta-corpo dl.variation dd::after { content: ''; display: block; }

.malune-gaveta-corpo .woocommerce-mini-cart__total {
  border-top: 1px solid var(--cor-borda);
  padding-top: 12px; margin-top: 8px;
  font-family: Montserrat, 'Segoe UI', sans-serif;
}

/* ===========================================================================
   PÁGINA DE PRODUTO — §8.4
   =========================================================================== */

/* Prazo, logo abaixo do preço. */
.malune-prazo {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 18px; padding: 12px 14px;
  border: 1px solid var(--cor-borda); border-radius: 8px;
  background: var(--cor-card);
  font-size: 14px; line-height: 1.4;
  color: var(--cor-texto);
}
.malune-prazo svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--cor-primaria); }
.malune-prazo-pronta {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
}
.malune-prazo-pronta svg { color: var(--cor-sucesso-tinta); }

/* Piscada do editor quando a barra fixa manda o cliente aprovar o design. */
.malune-editor-piscar {
  animation: malune-piscar 1.4s ease-out;
  border-radius: 10px;
}
@keyframes malune-piscar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,31,59,0); }
  30%      { box-shadow: 0 0 0 4px rgba(199,31,59,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .malune-editor-piscar { animation: none; outline: 2px solid var(--cor-primaria); }
}

/* ---------------------------------------------------------------------------
   BARRA FIXA DE COMPRA — só no mobile.
   No desktop o botão fica visível o tempo todo na coluna do resumo; a barra
   seria ruído sobre um botão que já está lá.
   --------------------------------------------------------------------------- */
.malune-barra-compra { display: none; }

@media (max-width: 781px) {
  .malune-barra-compra {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900;               /* abaixo da gaveta (9999): ela cobre a barra */
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--cor-card);
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -4px 16px rgba(43,39,36,.10);
    transform: translateY(100%); transition: transform .22s ease-out;
  }
  .malune-barra-compra.visivel { transform: translateY(0); }
  .malune-barra-compra[hidden] { display: none !important; }

  .malune-barra-compra-preco {
    flex: 0 1 auto; min-width: 0;
    font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 600; font-size: 16px;
    line-height: 1.2; color: var(--cor-texto);
  }
  .malune-barra-compra-preco del { display: none; }  /* na barra cabe um preço só */
  .malune-barra-compra-preco .amount { white-space: nowrap; }

  /* Cor, raio, fonte e espaçamento vêm da regra geral de botão do
     estilo.css (carmim sólido, Montserrat 600) — ela é mais específica e
     usa !important, então repetir aqui só criaria linha morta. Fica o que
     é desta barra: ocupar o espaço que sobra ao lado do preço. */
  .malune-barra-compra-btn { flex: 1 1 auto; font-size: 15px; cursor: pointer; }

  /* O botão do WhatsApp é fixo no canto e ficaria por baixo da barra. */
  .malune-barra-compra.visivel ~ .malune-whats { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .malune-barra-compra { transition: none; }
}

/* ---------------------------------------------------------------------------
   MENSAGEM NO CARTÃO
   O campo vem do plugin malune-personalizador (é regra de negócio: precisa
   chegar ao pedido). Aqui só a aparência, que é assunto do tema.
   --------------------------------------------------------------------------- */
.malune-cartao { margin: 20px 0; }
.malune-cartao-rotulo {
  display: block;
  font-family: Montserrat, 'Segoe UI', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--cor-texto);
}
.malune-cartao-rotulo span { font-weight: 400; color: var(--cor-texto-suave); }
.malune-cartao-ajuda {
  margin: 2px 0 8px; font-size: 13px; color: var(--cor-texto-suave);
}
.malune-cartao-campo {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-card);
  font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--cor-texto);
  resize: vertical;
}
.malune-cartao-campo:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(199,31,59,.12);
}
.malune-cartao-contador {
  display: block; text-align: right; margin-top: 4px;
  font-size: 12px; color: var(--cor-texto-suave);
}
.malune-cartao-contador.no-limite { color: var(--cor-primaria); }

/* No carrinho e na gaveta o recado é texto longo — precisa poder quebrar. */
.malune-gaveta-corpo .variation dd { overflow-wrap: anywhere; }