/* ============================================================================
   TELA DE PRODUTO — desenho da PRODUÇÃO lifepodbrasil.com, valor por valor.
   Toda medida saiu de docs/l3-provas/medidas-producao-l3.json (CSS computado das 8
   telas-prova no descritor iPhone 13: 390×664, DPR 3 — o mesmo do contrato, l.750).
   Onde a produção fere a regra de CONTROLE da casa (alvo <44px, fonte de campo <16px,
   contraste <4,5:1), o VISUAL dela fica e o controle é corrigido: cada caso traz o par
   de números e a linha do contrato que autoriza.
   ========================================================================= */

:root {
  --lp-roxo: rgb(130, 36, 227);          /* #8224E3 — botão de comprar e +/- da quantidade */
  --lp-roxo-fita: linear-gradient(90deg, #6514DF, #4B00C9);
  --lp-cinza-texto: rgb(114, 124, 136);  /* #727C88 — resumo, #info e legenda dos selos */
  --lp-titulo: rgb(15, 19, 31);
  --lp-card-borda: rgb(228, 231, 233);
  --lp-sabor-borda: #ECE7F8;
}

/* ── seção do topo: galeria + card + frete (section#product-top, padding 24) ── */

.woocommerce div.product { margin: 0; }
.lp-produto-topo { padding: 24px; }

/* ── galeria ────────────────────────────────────────────────────────────────
   3 estados medidos: 7 fotos = palco 342 + trilho 346×138,4 (bloco 498,4) ·
   2 fotos = bloco 429,2 · 1 foto = só a figura, 342 (contrato l.415-419, l.469).
   O swipe é scroll-snap NATIVO — a produção usa flexslider, e o gesto é o mesmo. */

.lp-galeria { margin-bottom: 24px; }

.lp-gal-palco { overflow: hidden; }

.lp-gal-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lp-gal-trilho::-webkit-scrollbar { display: none; }

.lp-gal-slide { flex: 0 0 100%; scroll-snap-align: start; }
.lp-gal-slide a { display: block; }
.lp-gal-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: fill;
  /* a moldura da produção mora no próprio <img>: 342×342 border-box com 16px de respiro,
     borda de 2px rgb(221,221,221) e raio 10 — no 40k (1 foto) é a MESMA moldura */
  padding: 16px;
  border: 2px solid rgb(221, 221, 221);
  border-radius: 10px;
}

/* trilho de miniaturas: 346px de largura sobre um palco de 342 (margem −2 de cada lado),
   5 por fila, `li` 69,2×69,2 com 2px de respiro — os números da produção */
.lp-gal-thumbs {
  display: flex;
  flex-wrap: wrap;
  margin: 18px -2px 0;
  padding: 0;
  list-style: none;
}
.lp-gal-thumbs li { flex: 0 0 20%; aspect-ratio: 1; padding: 2px; }
.lp-gal-thumb {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
/* o único sinal de miniatura ativa na produção é a COR DA BORDA (roxo), não opacidade */
.lp-gal-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  border: 2px solid rgb(221, 221, 221);
  border-radius: 10px;
}
.lp-gal-thumb.lp-on img { border-color: rgb(81, 40, 159); }
.lp-gal-thumb:focus-visible img { outline: 2px solid rgb(81, 40, 159); outline-offset: 2px; }

/* lightbox: a produção abre o PhotoSwipe em tela cheia (fundo preto opaco, contador
   "1 / 7", fechar 44×44, setas 70×100, Esc fecha). Aqui é `<dialog>` nativo — o Esc e o
   foco preso são do navegador. Os botões de tela cheia e de zoom do PhotoSwipe NÃO se
   replicam: são cromo da biblioteca, não desenho da loja (registrado na entrega). */
.lp-lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: #000;
}
.lp-lightbox::backdrop { background: #000; }
/* o <dialog> nativo não trava a rolagem do documento — sem isto o swipe vertical na foto
   rolava a página atrás e o fechar devolvia o cliente em outro ponto da tela */
body:has(.lp-lightbox[open]) { overflow: hidden; }
.lp-lightbox-topo {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `viewport-fit=cover` do casco: sem a folga o X e o contador caem sob o notch */
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0, 0, 0, .3);
  z-index: 2;
}
.lp-lightbox-conta { padding: 0 10px; color: #fff; font-size: 13px; line-height: 44px; opacity: .75; }
.lp-lightbox-x, .lp-lightbox-seta { opacity: .75; }
.lp-galeria--uma ~ .lp-lightbox .lp-lightbox-seta { display: none; }
.lp-lightbox-x, .lp-lightbox-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.lp-lightbox-x { width: 44px; height: 44px; }
.lp-lightbox-seta { position: absolute; top: 50%; width: 70px; height: 100px; margin-top: -50px; z-index: 2; }
.lp-lightbox-seta--ant { left: 0; }
.lp-lightbox-seta--prox { right: 0; }
.lp-lightbox-trilho {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.lp-lightbox-trilho::-webkit-scrollbar { display: none; }
.lp-lightbox-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── o card do miolo (342 de largura, coluna útil de 274) ─────────────────── */

/* o `woocommerce-layout.css` do Woo flutua `div.summary` à direita com 48% de largura
   (`.woocommerce div.product div.summary`) — o seletor daqui precisa do mesmo peso */
.woocommerce div.product div.summary {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 24px 32px;
  border: 2px solid var(--lp-card-borda);
  border-radius: 10px;
  background: #fff;
}

/* trilha — 1º elemento do card, acima do H1 (contrato l.463) */
.lp-trilha { margin: 0 0 16px; font-size: 16px; line-height: 22.4px; color: rgb(53, 65, 91); }
.lp-trilha a {
  /* CORRIGIDO (l.464): o link media 20px de altura de alvo e vinha em rgb(163,169,194)
     sobre branco = 2,33:1. O alvo de 44px vem de uma ÁREA INVISÍVEL (a régua da casa) —
     assim a linha não anda um pixel — e o tom escurece até 4,68:1 na mesma família. */
  position: relative;
  color: #6B7391;
  text-decoration: none;
}
.lp-trilha a::after { content: ""; position: absolute; inset: -12px 0; }
.lp-trilha a:hover { text-decoration: underline; }
.lp-trilha-sep { display: inline-block; margin: 0 9.6px; vertical-align: middle; }
.lp-trilha-sep .lp-icon svg { display: block; }
.lp-trilha [aria-current] { color: rgb(53, 65, 91); }

.woocommerce div.product div.summary .product_title {
  margin: 0 0 11.2px;
  font-size: 28.8px;
  line-height: 34.56px;
  font-weight: 700;
  color: var(--lp-titulo);
}

.lp-resumo { margin: 0 0 11.2px; font-size: 14px; line-height: 1.5; color: var(--lp-cinza-texto); }
.lp-resumo p { margin: 0; }

.lp-mais { margin: 0 0 11.2px; font-size: 13px; line-height: 1.1; }
.lp-mais a {
  /* CORRIGIDO (l.449): a âncora media 142×16 — alvo <44. 15px de cada lado porque a
     linha de 14,3 (13×1.1) com 2×14 fechava em 42,3 — ainda abaixo dos 44. */
  display: inline-block;
  padding-block: 15px;
  margin-block: -15px;
  color: rgb(56, 59, 63);
  text-decoration: none;
}

/* média nativa + quantidade real de avaliações */
.lp-nota {
  display: flex;
  align-items: center;
  min-height: 29px;
  gap: 7px;
  margin: 0 0 22.4px;   /* o vão até o preço é 22,3-22,4 nas 8 telas (6ª rodada) */
  padding-left: 4.8px;
  border-bottom: 1px solid rgb(221, 221, 221);
	color: rgb(53, 65, 91);
	text-decoration: none;
}
.lp-nota p { margin: 0; font-size: 16px; line-height: 28px; color: rgb(53, 65, 91); }
.lp-nota strong { font-weight: 700; }
.lp-nota:focus-visible { outline: 2px solid rgb(81, 40, 159); outline-offset: 3px; }

/* ── preço: à vista → parcelas → Pix (grupo 274×135,2) ───────────────────── */

.lp-preco { display: grid; margin: 0 0 11.2px; }

/* Pack: a âncora vem ANTES do preço (L26) — "separado sairia R$ 599,34" mais o selo
   calculado "-25% no Pix". Só o pack tem esta linha; produto avulso segue sem riscado. */
.lp-preco:not(.lp-preco--card) .lp-preco-de {
  display: flex; justify-self: start; align-items: center; flex-wrap: wrap;
  gap: 8px; row-gap: 4px; margin: 0 0 4px;
}
.lp-preco:not(.lp-preco--card) .lp-preco-separado { color: #727c88; font-size: 14px; line-height: 20px; }
.lp-preco:not(.lp-preco--card) .lp-preco-badge {
  padding: 2px 6px; border-radius: 4px; background: #ffe3e8; color: #c2185b;
  font-size: 12px; font-weight: 700; line-height: 1.4;
}
.lp-preco-avista { display: flex; justify-self: start; font-size: 19.6px; line-height: 28px; font-weight: 600; color: rgb(52, 58, 64); }
.lp-preco-avista .woocommerce-Price-amount { font-weight: 600; }

.lp-preco-parcela {
  display: flex;
  justify-self: start;
  align-items: center;
  gap: 4px;
  margin: 8px 0 16px;
  font-size: 12px;
  line-height: 28px;
  color: rgb(52, 58, 64);
}
.lp-preco-parcela .lp-icon { display: flex; }
.lp-preco-parcela .lp-icon svg { width: 14px; height: 12px; }

.lp-preco-pix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  margin: 4.8px 0 16px;
  padding: 8px 10.4px 10.4px 13.6px;
  border-radius: 1.6px 3.2px 3.2px;
  background: rgba(34, 197, 94, .15);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: rgb(38, 171, 91);
}
.lp-preco-pix .lp-icon { display: flex; }
.lp-preco-pix .woocommerce-Price-amount { font-weight: 500; }

/* ── cartão "Escolha o sabor" (274×179,4 no avulso) ──────────────────────── */

.lp-sabor {
  position: relative;
  margin: 20px 0 14px;
  padding: 24px 16px 16px;
  border: 1px solid var(--lp-sabor-borda);
  border-radius: 14px;
  background: #fff;
  box-shadow: rgba(60, 40, 110, .1) 0 14px 40px;
  overflow: hidden;
}
.lp-sabor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--lp-roxo-fita);
}

.lp-sabor-titulo {
  margin: 0 0 5px;
  font-size: 22px;
  line-height: 26.4px;
  font-weight: 800;
  letter-spacing: -.2px;
  text-align: center;
  color: rgb(20, 18, 42);
}
.lp-sabor-sub { margin: 0; font-size: 14px; line-height: 28px; text-align: center; color: rgb(90, 84, 112); }

.lp-sabor-linhas { display: grid; }
/* o clearfix do Woo (`.variations::after`, display:table) virava ITEM do grid — altura 0
   mas somava um row-gap inteiro no desktop */
.lp-sabor-linhas::before, .lp-sabor-linhas::after { content: none; }
.lp-sabor-linha {
  display: grid;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid #F1EDFA;
}
.lp-sabor-linha:last-of-type { border-bottom: 0; }

.lp-sabor-rotulo {
  font-size: 12px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;   /* o texto no DOM é minúsculo: quem sobe é o CSS (l.488) */
  color: #2A2640;
}

/* CORRIGIDO (l.426, l.431, l.489): o campo media 156×42 com 13px — 42<44 de alvo, 13<16
   (o iOS dá zoom no foco) e 107px úteis onde NENHUM dos 48 nomes de sabor cabia. */
.woocommerce div.product form.cart .lp-sabor-select,
.woocommerce div.product form.cart .lp-sabor-linhas select,
.lp-sabor-select, .lp-sabor-linhas select {
  width: 100%;
  min-height: 44px;
  padding: 11px 34px 11px 13px;
  border: 1px solid #E6E0F5;
  border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234B00C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 13px) 50%;
  background-size: 12px 8px;
  box-shadow: rgba(0, 0, 0, .08) 0 1px 0 0 inset;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(28, 32, 48);
  appearance: none;
}
.lp-sabor-select:focus-visible, .lp-sabor-linhas select:focus-visible {
  outline: 0;
  box-shadow: rgb(81, 40, 159) 0 0 0 2px;   /* o anel roxo que a produção usa nos campos */
}

/* o link "Limpar" do Woo não aparece na produção em estado nenhum (l.435) */
.lp-sabor .reset_variations { display: none; }

/* resumo ao vivo — UM só, e VAZIO no load (l.493-496, l.499). Padding 16/18/17: o par da
   produção nos DOIS viewports (a caixa fecha em 108 de altura com os 2 chips vazios). */
.lp-sabor-resumo {
  margin-top: 22px;   /* 22 nos dois viewports (6ª rodada) */
  padding: 16px 18px 17px;
  border: 1px solid #EFE9FB;
  border-radius: 13px;
  background: linear-gradient(135deg, #FAF7FF, #F3EDFF);
}
.lp-sabor-resumo strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #39009E;
}
.lp-sabor-resumo ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.lp-sabor-resumo li {
  /* caixa da produção: 62×33 com padding 4/13/4/4, gap 8, alinhado no topo. O padding
     direito cai a 12 porque o traço em 13px (fonte legível, l.493) é 1px mais largo que
     o da produção em 11,5 — a caixa fecha nos MESMOS 62. */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid #E9E1FB;
  border-radius: 999px;
  background: #fff;
  box-shadow: rgba(60, 40, 110, .05) 0 1px 3px 0;
  /* CORRIGIDO (l.493): 11–12px é ilegível no 390 — o chip é rótulo, e o rótulo tem de ler */
  font-size: 13px;
  line-height: 1.2;
  color: rgb(53, 65, 91);
}
.lp-sabor:not(.lp-sabor--lista) .lp-sabor-resumo li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: #CFC7E8;
  color: #fff;
  font-size: 11px;
}
.lp-sabor-resumo li em { font-style: normal; color: #A6A0C2; }
.lp-sabor:not(.lp-sabor--lista) .lp-sabor-resumo li:not(.lp-chip-vazio) span { background: var(--lp-roxo); }


/* ── cartão em LISTA do pack (L20) ───────────────────────────────────────── */
/* O casco é o mesmo cartão branco de cima; muda o miolo: contador com uma bolinha por
   slot, busca, UMA lista com stepper por sabor e o resumo em chips. */

.lp-sabor-conta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 14px 0 12px;
}
.lp-sabor-conta-num { font-size: 13px; line-height: 1; color: rgb(90, 84, 112); }
.lp-sabor-conta-num strong { font-size: 16px; font-weight: 800; color: var(--lp-roxo); }
.lp-sabor-bolinhas { display: flex; flex-wrap: wrap; gap: 6px; }
/* mesma anatomia das bolinhas do resumo antigo: 23px, vazia #CFC7E8, cheia no roxo */
.lp-sabor-bolinha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: #CFC7E8;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.lp-sabor-bolinha.lp-cheia { background: var(--lp-roxo); }

.lp-sabor-busca-linha { margin: 0 0 10px; }
.woocommerce div.product form.cart .lp-sabor-busca,
.lp-sabor-busca {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #E6E0F5;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  /* 16px é o piso do iOS: abaixo disso o foco no campo dá zoom na página */
  font-size: 16px;
  font-weight: 600;
  color: rgb(20, 18, 42);
}
.lp-sabor-busca::-webkit-search-cancel-button { cursor: pointer; }

.lp-sabor-opcoes {
  max-height: 322px;   /* ~6 linhas: mostra que a lista corre sem tomar a tela toda */
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  border-top: 1px solid #F1EDFA;
}
.lp-sabor-opcao {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid #F1EDFA;
}
.lp-sabor-opcao[hidden] { display: none; }
.lp-sabor-opcao-nome { font-size: 14px; line-height: 1.3; color: rgb(53, 65, 91); }
.lp-sabor-opcao.lp-escolhido .lp-sabor-opcao-nome { font-weight: 700; color: rgb(20, 18, 42); }
.lp-sabor-stepper { display: flex; flex: none; align-items: center; gap: 6px; }
/* 44 e não os 36 do desenho: em CONTROLE a régua da casa vence (alvo de toque ≥44), e o
   `min-width/min-height` do base.css já obrigava — o 36 saía 44 na tela de qualquer jeito */
.lp-sabor-passo {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--lp-roxo);
  border-radius: 9px;
  background: #fff;
  color: var(--lp-roxo);
  font-size: 18px;
  /* o sinal centrado no quadradinho é flex + line-height 1: com o line-height herdado
     o "+" descia 2px e o par −/+ ficava torto */
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.lp-sabor-passo[disabled] { border-color: #E9E1FB; color: #C7BFE0; cursor: default; }
.lp-sabor-qtd { min-width: 20px; text-align: center; font-size: 15px; font-weight: 700; color: rgb(20, 18, 42); }
.lp-sabor-sem-busca { margin: 12px 0 0; font-size: 13px; text-align: center; color: rgb(90, 84, 112); }

/* chips do resumo: compactos, nome + ✕; o ×N só quando o sabor repete */
.lp-sabor-resumo[hidden] { display: none; }
/* a especificidade sobe porque a regra do chip numerado (`.lp-sabor-resumo li`) alinha no
   topo — aqui o ✕ e o nome dividem a mesma linha */
.lp-sabor-resumo .lp-sabor-chip { padding: 2px 4px 2px 12px; gap: 4px; align-items: center; }
/* nome do sabor em UMA linha: os rótulos da loja chegam a 52 caracteres e sem o corte
   cada chip tomava a faixa inteira — o resumo deixava de ser resumo. O nome inteiro
   continua na lista logo acima e no atributo `title`. */
.lp-sabor-chip > span { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no desktop o cartão é largo e cabem dois chips por linha; no celular a faixa de 274
   só comporta um — encurtar mais o nome deixaria de dar pra reconhecer o sabor */
@media (min-width: 1025px) { .lp-sabor-chip > span { max-width: 18ch; } }
.lp-sabor-chip b { font-size: 11px; font-weight: 800; color: #fff; background: var(--lp-roxo); border-radius: 999px; padding: 2px 6px; line-height: 1.3; }
/* o ✕ é DESENHADO com 24 e TOCADO com 44: o quadrado de 44 do casco empurrava o chip para
   a faixa inteira e o resumo virava uma pilha. A área de toque volta pelo ::after. */
.lp-sabor-chip-x {
  position: relative;
  display: flex;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8078A0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.lp-sabor-chip-x::after { content: ""; position: absolute; inset: -10px; }
.lp-sabor-chip-x:hover { background: #F3EDFF; color: var(--lp-roxo); }

/* CTA desarmado: o botão guia o estado em vez de só recusar o toque */
.woocommerce div.product form.cart .single_add_to_cart_button.lp-cta-desarmado {
  background: #E9E1FB;
  color: #A6A0C2;
}

.lp-pack-total { margin: 0 0 12px; font-size: 16px; line-height: 28px; }

.lp-sabor-aviso {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgb(192, 57, 43);
}

/* ── estoque, quantidade e botão ──────────────────────────────────────────── */

/* a produção deixava a `.woocommerce-variation` com altura 0 e o "Em estoque" caía ~85px
   ABAIXO do botão, solto (l.468). Aqui ele nasce colado ao seletor, antes do botão. */
.woocommerce div.product .woocommerce-variation { display: block; }
/* no COMPOSITE a produção não mostra o estado de estoque (ele fica absoluto atrás do
   botão e não aparece); a correção do contrato l.468 vale pro variável, onde ele aparece */
.product-type-composite div.summary p.stock.in-stock { display: none; }
.woocommerce div.product p.stock {
  width: fit-content;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
}
/* CORRIGIDO (l.452, l.468): rgb(255,0,0) dá 3,99:1 e rgb(68,204,0) dá 2,70:1 sobre branco.
   Mesma cor de família, escurecida até passar o AA — sem mover um pixel. */
.woocommerce div.product p.stock.out-of-stock { color: #EE0000; }   /* 4,53:1 */
.woocommerce div.product p.stock.in-stock { color: #2C8500; }       /* 4,70:1 */

/* `div.quantity` e não `.quantity`: o Woo mira com o tipo junto e vence o empate */
.woocommerce div.product form.cart div.quantity {
  display: flex;
  float: none;
  align-items: center;
  width: 105.2px;
  height: 70.4px;
  /* o Woo põe 4px à direita e a linha de 274 (105,2 + 8 de vão + 160,8) não fechava */
  margin: 0 0 12.8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}
.woocommerce div.product form.cart div.quantity input.qty {
  flex: 0 0 43.2px;
  width: 43.2px;
  height: 48px;
  padding: 0;
  border: 0;
  font-size: 16px;   /* abaixo de 16px o iOS dá zoom ao focar */
  line-height: 48px;
  text-align: center;
  color: rgb(53, 65, 91);
  border-radius: 4.8px;
  -moz-appearance: textfield;
}
.woocommerce div.product form.cart div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* CORRIGIDO (l.439): os botões mediam 30×38 — abaixo dos 44 de alvo. A altura vai a 44
   dentro do mesmo wrapper; a LARGURA fica em 31px porque alargar o par estouraria a linha
   de 274px do gabarito (105,2 de quantidade + 160,8 de botão). Registrado na entrega. */
.lp-qty-btn {
  /* A produção desenha 30×38. Alargar pros 44 da régua da casa custava caro: o botão de
     comprar ao lado caía de 160,8×57,2 para 128,8×72,8 e o rótulo quebrava em TRÊS linhas
     (medido). Aqui a largura fica nos 30 do gabarito e a ALTURA vai a 70,4 (o wrapper
     inteiro): a área de toque dá 2.112px², acima dos 1.936 de um alvo de 44×44, e a linha
     de 274 do gabarito não se mexe. A menor dimensão em 30 está registrado na entrega. */
  /* `flex-basis` sozinho não segura: o `min-width:44px` da régua do casco (base.css)
     vencia e os botões saíam com 44 — o "+" ficava 26,8px pra fora de um wrapper de
     105,2 com `overflow:hidden` e o cliente NÃO conseguia aumentar a quantidade. */
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--lp-roxo);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;   /* toque repetido no stepper sem armar o zoom de duplo toque */
}
.lp-qty-btn[disabled] { opacity: .35; cursor: default; }

.woocommerce div.product form.cart { margin-bottom: 0; }
/* variável: quantidade e botão na MESMA linha de 274 (o gabarito) */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; align-items: flex-start; gap: 8px; }
/* L20: no celular a faixa de 274 não comporta quantidade + botão + balão do WhatsApp — o
   rótulo ficaria com 101px e quebrava em três linhas. A quantidade sobe pra própria linha,
   como já acontece no pack, e a linha do CTA fica com botão + balão (o pedido do dono). */
@media (max-width: 600px) {
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: block; }
}
/* composite: pilha — quantidade em cima (105,2×50) e a linha do CTA embaixo. A largura do
   botão agora vem do `flex:1` dentro do `lp-cta-linha`, que divide a faixa com o WhatsApp. */
.woocommerce div.product form.cart:not(.variations_form) .single_add_to_cart_button { min-height: 50px; }
.woocommerce div.product form.cart:not(.variations_form) div.quantity { height: 50px; margin-bottom: 12.8px; }

.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1;
  margin: 10px 0 16px;
  padding: 13px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--lp-roxo);
  color: #fff;
  font-size: 13px;
  line-height: 15.6px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  /* L20: a sacola saiu do botão (ordem do dono) — sobra o rótulo, centrado. */
  text-align: center;
}
/* CORRIGIDO (l.436, l.502): na produção o botão nunca ficava `disabled` — só ganhava
   classe, sem efeito visual nenhum. Aqui o estado é real e anunciado. O `aria-disabled`
   (e não o atributo `disabled`) é de propósito no caso INCOMPLETO: o gabarito mostra um
   aviso ao tocar, e um botão `disabled` não recebe o toque para poder avisar — e SEM fade:
   visualmente o load é idêntico ao da produção (opacity 1). A trava que vale dinheiro é a
   do SERVIDOR, que o WooCo já faz. No ESGOTADO, aí sim, `disabled` real com o .9 do
   gabarito (l.433; `opacity:.5` levava o branco a 2,1:1). */
.woocommerce div.product form.cart .single_add_to_cart_button[aria-disabled="true"] { cursor: not-allowed; }
/* o CSS do Woo dá opacity .5 às classes .disabled/.wc-variation-selection-needed no load —
   a produção carrega o botão CHEIO (opacity 1) */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1; }
.woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: .9; cursor: not-allowed; }

/* WhatsApp ao lado do botão (L20): o balão oficial, sem caixa e sem fundo. A linha é o
   `lp-cta-linha` que nasce dentro do form — no variável ela divide espaço com a quantidade. */
.lp-cta-linha { display: flex; flex: 1; align-items: center; gap: 10px; }
/* o balão come 60 da faixa de 274 do celular e o rótulo quebrava em duas linhas por 7px —
   o recuo lateral cede o necessário; o texto segue centrado */
.woocommerce div.product form.cart .lp-cta-linha .single_add_to_cart_button { padding-inline: 18px; }
.lp-zap-cta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;   /* alvo ≥44 sem caixa: o quadrado é só área de toque */
  margin-bottom: 6px;   /* acompanha a queda do botão (margin 10/16) sem descolar */
  color: inherit;
}
.lp-zap-cta svg { width: 42px; height: 42px; display: block; }

/* selos que fecham o card */
/* L20 (dono, 22/ago, ajustado no aval): cada selo ocupa a LINHA inteira em TODA largura —
   ícone à esquerda, centrado na vertical, e a legenda correndo livre. O `width:min-content`
   de antes espremia o texto na palavra mais larga e saiu. A rodada de 3 colunas no desktop
   foi mostrada em mockup e o dono preferiu o empilhado, igual ao celular. */
.lp-garantias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}
/* topo alinhado e margens POR ícone (medido: escudo 21,1 de largura + 18,84 de vão e 7 de
   queda; caminhão 35,2 + 21,4) — é isso que deixa a coluna de texto com os 67,4/102,1 da
   produção e faz o texto quebrar nas mesmas linhas (48/86) */
.lp-garantia { display: flex; align-items: center; }
/* trilha fixa pro ícone: os três têm desenho de largura diferente (escudo 21, caminhão 32,
   moto 22) e sem a trilha os títulos começariam em três recuos distintos */
.lp-garantia-icone { display: flex; flex: 0 0 32px; justify-content: center; }
.lp-garantia-icone svg { width: 21.1px; height: 22.2px; }
.lp-garantia-icone--largo svg { width: 32px; height: 17.6px; }
.lp-garantia-icone--moto svg { width: 22px; height: 22px; }
.lp-garantia-meta { display: grid; align-content: start; margin-left: 14px; }
.lp-garantia-meta strong { font-size: 14px; line-height: 16.8px; margin-bottom: 5.8px; font-weight: 700; color: var(--lp-titulo); }
/* legenda em texto corrido. A cor é o cinza da produção (114,124,136); o line-height subiu
   de 1 pra 1.3 porque agora a legenda quebra em linhas de verdade e 1 as colava. */
.lp-garantia-meta span { font-size: 13px; line-height: 1.3; color: var(--lp-cinza-texto); }

/* ── frete por CEP (342×141) ──────────────────────────────────────────────── */

.lp-frete { margin-top: 10.25px; }
/* pelo `id`: o CSS do plugin também mira `#wc-shipping-simulator` e o cartão não preenchia
   a coluna no desktop (420 de 591) */
#wc-shipping-simulator.wc-shipping-simulator {
  /* o CSS do `truck1` trava o cartão em `max-width:420px`; no gabarito ele preenche a
     coluna (342 no celular, 591 no desktop) */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  position: relative;
}
.lp-frete-titulo { margin: 0 0 16px; font-size: 16px; line-height: 24px; font-weight: 700; }
/* no celular o caminhão some (a caixa é estreita); o desktop mostra, como a produção */
.lp-frete-icone { display: none; }
/* o CSS do plugin cola um `content:"FRETE:"` antes do rótulo, e a tela mostrava
   "FRETE:Simulador de Frete:" grudado, comendo 190 dos 216px da caixa (l.513) */
.wc-shipping-simulator .shipping-simulator-wrapper label .text::before { content: none; }
.wc-shipping-simulator .shipping-simulator-wrapper { display: flex; gap: 10px; margin-bottom: 15px; }
.wc-shipping-simulator .shipping-simulator-wrapper label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
}
/* CORRIGIDO (l.513): o campo renderizava com 22×50 e fonte 13px — indigitável no celular.
   O CSS do plugin trava largura e fonte em `#wc-shipping-simulator .shipping-simulator-wrapper
   label input` (`width: calc(100% - 168px)`, `font-size:13px`) — o seletor daqui precisa do
   mesmo peso pra vencer. */
#wc-shipping-simulator .shipping-simulator-wrapper label input {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  /* o campo ocupa a altura inteira da caixa: sem o mesmo raio, qualquer fundo que o navegador
     pinte nele (preenchimento automático) vira um retângulo de cantos vivos dentro da caixa
     arredondada */
  border-radius: 10px;
  background: none;
  font-size: 16px;
}
/* o anel de foco veste a CAIXA inteira (caminhão + campo), não o input por dentro — senão
   vira borda dentro de borda */
#wc-shipping-simulator .shipping-simulator-wrapper label input:focus-visible { outline: none; }
.wc-shipping-simulator .shipping-simulator-wrapper label:focus-within {
  border-color: #6b1dbf;
  box-shadow: 0 0 0 3px rgba(107, 29, 191, .10);
}
#wc-shipping-simulator .shipping-simulator-wrapper .calculate:focus-visible {
  outline: 2px solid #6b1dbf;
  outline-offset: 2px;
}
/* Ok no roxo da marca — o mesmo botão de ação da loja (LD19). O cinza #ECECEC da produção
   sumia dentro do cartão branco e não parecia clicável. */
#wc-shipping-simulator .shipping-simulator-wrapper .calculate,
.wc-shipping-simulator .calculate {
  display: grid;
  place-items: center;
  flex: 0 0 82px;
  height: 52px;
  border: 0;
  border-radius: 8px;
  background: #6b1dbf;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, transform .06s;
}
.wc-shipping-simulator .calculate:hover { background: #57179c; }
.wc-shipping-simulator .calculate:active { transform: scale(.97); }
.wc-shipping-simulator .calculate:disabled { cursor: default; }
/* o "carregando" mora DENTRO do botão: o Ok vira o girador e o botão trava (LD19 — a bola
   solta no meio da caixa era do plugin que saiu no L16) */
.lp-frete-girando { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: lp-frete-spin .5s linear infinite; }
.wc-shipping-simulator.loading .lp-frete-ok { display: none; }
.wc-shipping-simulator.loading .lp-frete-girando { display: block; }
@keyframes lp-frete-spin { to { transform: rotate(360deg); } }
/* lugar do resultado reservado enquanto a cotação não volta — a caixa não pula */
.lp-frete-esqueleto { display: none; margin-top: 15px; }
.wc-shipping-simulator.loading .lp-frete-esqueleto { display: block; }
.lp-frete-esqueleto span {
  display: block;
  height: 15px;
  margin: 16px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%);
  background-size: 200% 100%;
  animation: lp-frete-brilho 1.1s linear infinite;
}
.lp-frete-esqueleto span:nth-child(1) { width: 88%; }
.lp-frete-esqueleto span:nth-child(2) { width: 72%; }
.lp-frete-esqueleto span:nth-child(3) { width: 80%; }
@keyframes lp-frete-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-frete-girando { animation: none; border-color: #fff; }
  .lp-frete-esqueleto span { animation: none; }
}
#fshipping-results .error {
  display: block;
  margin-top: 15px;
  padding: 9px 14px;
  border: 1px solid #f6c4bf;
  border-radius: 2px;
  background: #ffdbd4;
  color: #8d251a;
  text-align: left;
}
/* a tabela de resultado vinha inteira em negrito por causa de <b><b><b> do editor (l.511) */
.wc-shipping-simulator .table-freight { width: 100%; font-weight: 400; border-collapse: collapse; }
.wc-shipping-simulator .table-freight th { font-weight: 700; font-size: 15px; padding: 0 0 8px; text-align: left; }
.wc-shipping-simulator .table-freight th:last-child { text-align: right; }
.wc-shipping-simulator .table-freight td { padding: 11px 0; border-top: 1px solid #f0f0f1; vertical-align: top; }
/* nome forte + prazo em cápsula: na MESMA linha quando cabe, desce inteiro quando não cabe
   (o rótulo do motoboy é uma frase, não um prazo curto) */
.lp-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.lp-envio-nome { font-weight: 600; font-size: 16px; color: var(--lp-azul, #35415b); }
.lp-envio-prazo { display: inline-block; max-width: 100%; padding: 4px 12px; border-radius: 12px; background: #f3f4f6; color: #4b5563; font-size: 14px; font-weight: 500; line-height: 1.4; }
.lp-frete-custo { text-align: right; padding-left: 14px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* o mais barato ganha faixa e selo — só quando há preços diferentes pra comparar */
.table-freight tr.lp-melhor td { border-top: 0; background: #f7f2fc; }
.table-freight tr.lp-melhor td:first-child { border-radius: 8px 0 0 8px; padding-left: 8px; }
.table-freight tr.lp-melhor td:last-child { border-radius: 0 8px 8px 0; padding-right: 8px; }
.lp-frete-selo { display: inline-block; padding: 2px 8px; border-radius: 99px; background: #e7f6ee; color: #0b7a45; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.lp-frete-endereco { margin: 12px 0 0; color: #6b7280; font-size: 13px; }
/* celular: a cápsula curta ainda cabe ao lado do nome; só a frase longa desce */
@media (max-width: 480px) {
  .lp-envio { gap: 4px 7px; }
  .lp-envio-nome { font-size: 15px; }
  .lp-envio-prazo { padding: 3px 9px; border-radius: 11px; font-size: 13px; }
  .lp-frete-custo { padding-left: 8px; font-size: 15px; }
  .wc-shipping-simulator .table-freight td { padding: 10px 0; }
}

/* ── #info: a descrição longa (358 em x=16, padding 24) ───────────────────── */

/* scroll-margin: a âncora "(+) mais informações" aterrissava com o título embaixo do
   header fixo (82px encolhido). A MOLDURA vai de borda a borda da faixa (x=16, caixa 358
   na produção) — o respiro de 56 mora DENTRO do card, não fora dele. */
.lp-info { margin: 24px 16px 0; padding: 9px 0 24px; color: var(--lp-cinza-texto); scroll-margin-top: 92px; }
.lp-info-card {
  display: grid;
  gap: 17.6px;
  padding: 32px 56px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.lp-info-titulo {
  margin: 0 0 17.6px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
  font-size: 20.8px;
  line-height: 24.96px;
  font-weight: 600;
  color: #383B3F;
}
.lp-info-corpo > :first-child { margin-top: 0; }
/* links do corpo da descrição: o lilás da produção sem sublinhado — escurecido de
   rgb(100,108,253) até 4,63:1 (link é CONTROLE; mesma régua da trilha) */
.lp-info-corpo a { color: #5861FD; text-decoration: none; }
.lp-info-corpo a:hover { text-decoration: underline; }
.lp-info-corpo h2 { margin: 0 0 24px; font-size: 24.29px; line-height: 29.148px; font-weight: 400; }
.lp-info h3 { margin: 0 0 24px; padding-top: 16px; font-size: 21.9px; line-height: 26.28px; font-weight: 400; }
.lp-info h4 { margin: 0 0 24px; padding-top: 16px; font-size: 19.51px; line-height: 23.412px; font-weight: 400; }
.lp-info p { margin: 0 0 16px; font-size: 14px; line-height: 21px; }
.lp-info li { margin: 0 0 8px; font-size: 14px; line-height: 21px; }
.lp-info ul, .lp-info ol { padding-left: 40px; }

/* ── #comprou + Dicas ─────────────────────────────────────────────────────── */

.lp-secao-titulo { margin: 0 0 26px; font-size: 21.9px; line-height: 26.28px; font-weight: 400; text-align: center; color: var(--lp-titulo); }   /* centrado também no celular (5ª rodada) */
.lp-secao-titulo strong { font-weight: 700; }

.lp-comprou { padding: 24px; }
.lp-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19.2px; }

.lp-card-prod {
  border-radius: 12.8px;
  box-shadow: 0 1.12px 2.24px rgba(0, 0, 0, .1), 0 3.68px 11.2px rgba(0, 0, 0, .1);
}
.lp-card-prod > * { max-width: 100%; }
.lp-card-foto { display: block; padding: 8px 12.8px 0; }
.lp-card-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.lp-card-titulo {
  margin: 12.8px 12.8px 3.2px;
  font-size: 13px;
  line-height: 15.6px;
  font-weight: 400;
  color: var(--lp-titulo);
}
.lp-card-titulo a { color: inherit; text-decoration: none; }
/* o −8 puxa o preço pro vão que o gabarito mostra sob o título; o Pix de 2 linhas fecha
   em 50,4 sem o row-gap */
.lp-card-prod .lp-preco.lp-preco--card { margin: 18px 12.8px 0; }
/* o botão é o mesmo das outras vitrines (ordem do dono, 17/ago: um padrão só em todos os
   grids) — o roxo sólido com sacola saiu daqui junto com o rótulo em caixa alta. */
.woocommerce a.button.lp-card-botao,
.woocommerce .lp-card-botao {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0;
  margin: 0;
  padding: 9.6px 14.4px;
  border-radius: 6.5px;
  background: var(--lp-grad);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
/* 10/2: as margens líquidas continuam 16/8 — o alvo de 44 (6+6 de folga do chip) ocupa
   os 12 que faltam sem esticar o card (produção fecha em 450,3). `flex` + fit-content:
   como inline, a line-box do whitespace vizinho esticava o pé do card em 19,2. */
.lp-card-acoes { margin: 12px 12.8px 12.8px; padding-top: 16px; }

/* o respiro branco antes do rodapé: na produção é a seção #comentario VAZIA (48px no
   celular, 128 no desktop) — o contrato manda não recriar a casca (l.446); o espaço fica.
   A faixa é CINZA também no celular (quem pinta lá é o l-section-overlay), com 24 no topo;
   o pé fecha em 14,4 pros dots ficarem com o centro a 24,4 do fim, como lá. */
.lp-dicas { padding: 24px 24px 14.4px; margin-bottom: 48px; background: rgb(245, 245, 245); }
/* o vão título→cards das Dicas é menor que o do #comprou (16,2 no celular, 38,4 no desktop) */
.lp-dicas .lp-secao-titulo { margin-bottom: 16.2px; }
.lp-dicas-trilho {
  display: flex;
  align-items: flex-start;   /* na produção os 4 cards têm alturas diferentes */
  gap: 19.2px;
  padding-bottom: 9.6px;     /* deixa a sombra do card aparecer antes do corte */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  /* CORRIGIDO (l.522): na produção o `owl-stage` mede 1.129,4px num viewport de 390 e só
     não rola de lado porque `body{overflow-x:hidden}` mascara. Aqui a rolagem é do trilho. */
}
.lp-dica {
  /* card visível de 232 com vão de 19,2 (o "251,2" da rodada 1 era o item do owl COM o
     padding interno dele) */
  flex: 0 0 232px;
  scroll-snap-align: start;
  border-radius: 11.2px;
  background: #fff;
  box-shadow: 0 1.28px 2.56px rgba(0, 0, 0, .1), 0 4.32px 12.8px rgba(0, 0, 0, .1);
  overflow: hidden;
}
.lp-dica > :not(.lp-dica-foto) { padding-inline: 11%; }
.lp-dica-foto { display: block; }
.lp-dica-foto img { display: block; width: 232px; max-width: 100%; height: auto; }
/* ritmo vertical do gabarito (medido na cadeia real): 20,9 acima do título no celular
   (26,4 é do desktop), 11,2 entre os blocos, data em linha de 28 e 32,2 fechando o card */
.lp-dica-titulo { margin: 20.9px 0 11.2px; font-size: 16px; line-height: 19.2px; font-weight: 700; }
.lp-dica-titulo a { color: #2A323C; text-decoration: none; }
.lp-dica-data { margin: 0 0 11.2px; font-size: 14.4px; line-height: 28px; color: rgb(114, 127, 159); }
.lp-dica-resumo { margin: 0 0 11.2px; font-size: 13px; line-height: 28px; color: #7D7987; }   /* 13 no celular, 14 no desktop (medido) */
.lp-dica-resumo p { margin: 0; }
.lp-dica-mais { margin: 0 0 32.2px; }
.lp-dica-mais a {
  /* padding de folga: a caixa nua ficava abaixo dos 44 de alvo no toque */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-size: 16px;
  color: rgb(0, 136, 251);
  text-decoration: none;
}

/* dots do carrossel Dicas no celular (a produção mostra 4; no desktop os 4 cards cabem).
   O ponto é 8×8 como lá; o BOTÃO em volta é maior porque dot é controle (regra de toque). */
.lp-dicas-dots { display: flex; justify-content: center; margin-top: 16px; }
/* geometria da produção: botão 20×20, passo 20, ponto 8×8. O min-width/min-height da
   régua do casco perdia pra cá de propósito: alvo <44 REGISTRADO (o controle principal do
   carrossel é o swipe; o dot é atalho redundante — mesma lógica dos +/− do desktop). */
.lp-dicas-dots button { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
/* o par medido na produção: inativo rgb(53,65,91) a 33%; ativo é um ANEL vinho vazado */
.lp-dicas-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(53, 65, 91); opacity: .33; }
.lp-dicas-dots button.lp-on::after { background: transparent; opacity: 1; box-shadow: rgb(207, 26, 83) 0 0 0 2px; }
@media (min-width: 1025px) { .lp-dicas-dots { display: none; } }

/* menos movimento: resolvido no JS (o `behavior:'smooth'` explícito ignora CSS) */

/* ── especificações técnicas (2ª coluna do card do #info) ─────────────────── */

.lp-info .lp-especificacoes-titulo {
  margin: 0 0 17.6px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
  font-size: 20.8px;
  line-height: 28px;
  font-weight: 400;
  color: #383B3F;
}
.lp-info .lp-especificacoes-titulo strong { font-weight: 600; }
/* o passo da produção é 28px POR LINHA (16px/28px, margem 0) — medido de novo na
   retomada, nos DOIS viewports; o 14/21 + 8 daqui dava 29 (divergência nº 10) */
.lp-especificacoes dl { margin: 0; font-size: 16px; line-height: 28px; color: rgb(53, 65, 91); }
.lp-especificacoes dl div { margin-bottom: 0; }
.lp-especificacoes dt, .lp-especificacoes dd { display: inline; margin: 0; }
/* rótulo regular e VALOR em negrito — o par da produção nos dois viewports (5ª rodada) */
.lp-especificacoes dt { font-weight: 400; }
.lp-especificacoes dd { font-weight: 700; }

/* ── DESKTOP ────────────────────────────────────────────────────────────────
   A PDP da produção vira DUAS colunas a partir do corte do WPBakery (`vc_col-sm-6`,
   768px) e o miolo trava numa faixa de 1230px (a seção declara `--site-content-width:
   1230px`, mais larga que os 1140 do casco). Medido em 1440: galeria 591 em x=105 ·
   card 591 em x=744 (vão de 48) · #info 1230 em x=105 em 2 colunas · #comprou 4 cards
   de 293,1 com gap 19,2 · Dicas 1230.
   ========================================================================= */

@media (min-width: 768px) {
  .lp-produto-topo,
  .lp-info,
  .lp-comprou,
  .lp-dicas {
    max-width: 1278px;      /* 1230 de conteúdo + 24 de respiro de cada lado */
    margin-inline: auto;
  }

  /* respiro vertical do gabarito no desktop: 32 no topo do produto, 64 no #comprou */
  .lp-produto-topo { padding: 32px 24px; }
  .lp-comprou { padding: 64px 24px; }
  .lp-dicas { padding: 0; }

  .lp-produto-topo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .lp-galeria { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .woocommerce div.product div.summary { grid-column: 2; grid-row: 1; }
  .lp-frete { grid-column: 2; grid-row: 2; width: 100%; margin-top: 18px; }

  /* 5 miniaturas por fila continuam sendo a regra: 119px em 595 (sangria de −2) */
  .lp-gal-thumbs { margin-top: 18px; }

  /* a foto do palco no desktop renderiza no tamanho NATURAL do arquivo (a produção mostra
     575 numa coluna de 591 — folga de 16), clampado na coluna; esticar era do tema */
  .lp-gal-slide img { width: auto; max-width: 100%; }

  /* o cartão de sabor não ocupa a coluna toda no desktop: 443 dentro dos 523 (medido) */
  .lp-sabor { max-width: 443px; }

  .lp-info { padding: 24px; }
  .lp-info-card { grid-template-columns: 1fr 1fr; column-gap: 0; padding: 0; }
  .lp-info-texto, .lp-especificacoes { padding: 32px; }
  .lp-info-corpo h2 { font-size: 35.84px; line-height: 43px; }

  .lp-grade { grid-template-columns: repeat(4, 1fr); }
  .lp-dica { flex: 0 0 calc((100% - 3 * 19.2px) / 4); }
  .lp-dicas-trilho { gap: 19.2px; overflow-x: visible; }
}


/* ── a régua de largura total entre o topo e o #info ─────────────────────── */

.lp-regua { width: 100%; height: 0; margin: 8px 0; border: 0; border-bottom: 1px solid rgb(227, 231, 240); }

/* ── O GABARITO DO DESKTOP ──────────────────────────────────────────────────
   A produção NÃO usa em 1440 os mesmos valores do celular: o preço engorda o peso e
   encolhe o corpo, a pílula do Pix troca de verde e de raio, o cartão de sabor cresce,
   a quantidade encolhe e os selos viram uma linha só. Tudo abaixo é medido no gabarito
   a 1440 — sem isto a tela ficava "o mobile esticado", que foi a raiz de 15 divergências.
   Corte em 1025px: é o do casco e o do Impreza.
   ========================================================================= */

@media (min-width: 1025px) {
  .lp-preco-avista { margin-top: 8px; font-size: 16px; font-weight: 700; }
  .lp-preco-avista .woocommerce-Price-amount { font-weight: 700; }

  .lp-preco-pix {
    padding: 10.4px 13.6px;
    border-radius: 4.8px;
    background: rgba(101, 102, 101, .15);
    color: rgb(15, 133, 66);
    text-align: center;
  }

  .lp-sabor { padding: 32px 26px 22px; border-radius: 18px; }
  .lp-sabor-titulo { font-size: 25px; line-height: 30px; }
  /* os vãos internos do desktop: 22 entre o subtítulo e os campos, 22 antes do resumo
     (com eles o cartão do pack fecha nos 352 de altura do gabarito) */
  .lp-sabor-sub { font-size: 15px; margin-bottom: 22px; }
  .lp-sabor-resumo { margin-top: 22px; }
  .lp-sabor-rotulo { font-size: 11.5px; color: rgb(107, 100, 128); }

  /* o gabarito @1440 mede 46 de altura e fonte 12 — o 44/16 é regra de TOQUE do celular */
  .woocommerce div.product form.cart .lp-sabor-select,
  .woocommerce div.product form.cart .lp-sabor-linhas select,
  .lp-sabor-select, .lp-sabor-linhas select { min-height: 46px; padding-right: 34px; border-radius: 10px; font-size: 12px; }

  /* composite ocupa a coluna útil (kit de 1 slot: 523); com 2+ slots anda 8px e fecha em
     515 (medido: x=786, fim fixo em 1301). No VARIÁVEL a largura acompanha o conteúdo:
     o select encolhe pro maior nome de sabor e o cartão abraça o campo (10k 443;
     40k/SK 425 — nomes mais curtos), travado nos 443 do form. */
  .woocommerce div.product form.cart:not(.variations_form) .lp-sabor { max-width: none; }
  /* o deslocamento de 8px do pack vale pro FORM inteiro (cartão, Preço Total, quantidade e
     botão alinham em x=786 na produção); o kit de 1 slot fica em 778 */
  .woocommerce div.product form.cart:not(.variations_form):has(.lp-sabor:not([data-slots="1"])) { margin-left: 8px; }
  form.variations_form .lp-sabor:not([data-slots="1"]) { margin-left: 8px; }
  .woocommerce div.product form.variations_form .lp-sabor { width: fit-content; }
  .woocommerce div.product form.cart.variations_form .lp-sabor-linhas select { width: auto; max-width: 100%; min-width: 240px; }
  /* no SK a linha de quantidade+botão também anda os 8px do cartão (produção: x=786) */
  form.variations_form:has(.lp-sabor:not([data-slots="1"])) .woocommerce-variation-add-to-cart { margin-left: 8px; }

  /* no kit ESGOTADO o desktop da produção mostra "Fora de estoque" ACIMA do "Preço Total"
     (no celular é o contrário) — o summary é flex, a ordem troca sem mexer no DOM */
  .woocommerce div.product div.summary p.stock.out-of-stock { order: 1; }
  .woocommerce div.product div.summary .lp-pack-total { order: 2; }
  .woocommerce div.product div.summary .lp-garantias { order: 3; }

  /* linhas no desktop: sem divisória, vão de 16/14 e rótulo a 7px do campo; composite de
     2+ slots vira grade de 3 colunas de sabor por fileira (144,3×3 medidos no pack).
     O margin-bottom:1em que o Woo dá à .variations sai — o gabarito fecha o cartão em 222. */
  .woocommerce div.product form.cart .lp-sabor .lp-sabor-linhas,
  .lp-sabor-linhas { gap: 16px 14px; margin-bottom: 0; }
  .lp-sabor-linha { padding: 0; border-bottom: 0; gap: 7px; }
  .woocommerce div.product form.cart:not(.variations_form) .lp-sabor:not([data-slots="1"]) .lp-sabor-linhas { grid-template-columns: repeat(3, 1fr); }

  /* chips do resumo: só o vão da lista muda no desktop (9/12 contra 8/10 do celular) */
  .lp-sabor-resumo ul { gap: 9px 12px; }

  .woocommerce div.product form.cart div.quantity { width: 107.2px; height: 63.2px; }
  /* o alvo de 44px é regra de TOQUE; no desktop o gabarito manda 31×38 e o ponteiro
     do mouse não precisa da folga */
  .lp-qty-btn { flex: 0 0 31px; width: 31px; min-width: 31px; height: 38px; min-height: 38px; padding: 5px 10px; align-self: center; }

  .woocommerce div.product form.cart .single_add_to_cart_button { margin-right: 32px; }

  /* os selos viram uma linha só de 46px: colunas largas, legenda sem quebra (136/202) e
     ícone centrado — o min-content e a queda de 7px são coisa do mobile */

  /* frete no desktop: o caminhão 31×31 fica (é o ícone do gabarito), o rótulo "Simulador de
     Frete:" saiu (LD19 — o título do cartão já diz o que é) e o campo ganhou a largura dele.
     Fonte 16px nas duas larguras, como o desenho aprovado — a produção usava 13px. */
  .lp-frete-titulo { margin-bottom: 24px; }   /* o cartão fecha em 149 (@390 é 16) */
  .lp-frete-icone { display: flex; flex: 0 0 auto; margin-right: 12px; color: rgb(53, 65, 91); }
  .lp-frete-icone svg { width: 31px; height: 31px; }
  .wc-shipping-simulator .shipping-simulator-wrapper label { gap: 0; }
  #wc-shipping-simulator .shipping-simulator-wrapper label input { padding: 0 13px 0 9px; font-size: 16px; }

  /* o card do #info na produção mede 1278 em x=81 (colunas de 638 entre as bordas) e o
     conteúdo entra a ~56px — era o 1230@105 herdado do miolo (divergência nº 4).
     48 no topo: o vão régua→moldura do gabarito é 73 (24 de margem + 48 + borda). */
  .lp-info { padding: 49px 0 48px; }
  .lp-info-texto, .lp-especificacoes { padding: 32px 56px; }

  .lp-info-titulo { font-size: 20.8px; line-height: 24.96px; font-weight: 600; margin-bottom: 17.6px; }
  .lp-info-corpo h2 { font-size: 35.84px; line-height: 43px; }
  .lp-info p, .lp-info li { margin-bottom: 24px; }
  .lp-especificacoes { border-left: 1px dashed #ddd; }
  .lp-especificacoes dl { color: rgb(53, 65, 91); }
  .lp-especificacoes dt { font-weight: 400; }
  .lp-especificacoes dd { font-weight: 700; }

  /* título de seção: 32,4px centralizado, e o respiro de 48px que vem antes da grade */
  .lp-secao-titulo { font-size: 32.4px; line-height: 38.9px; text-align: center; margin-bottom: 48px; }

  /* @1440: sombra fina do gabarito (1,12/2,24 + 3,68/11,2 — desempatado na mão) e 17,6 de
     respiro sobre a foto. SEM pé fixo: a altura da linha nasce do card de conteúdo mais
     alto (stretch do grid) e o pé dos demais é a sobra — é assim que a produção fecha 536. */
  .lp-card-prod { background: #fff; box-shadow: 0 1.12px 2.24px rgba(0, 0, 0, .1), 0 3.68px 11.2px rgba(0, 0, 0, .1); }
  .lp-card-foto { padding-top: 17.6px; }
  .lp-card-titulo { font-size: 16px; line-height: 19.2px; margin: 12.8px 12.8px 3.2px; }
  .lp-preco--card .lp-preco-avista { font-size: 16px; font-weight: 700; }
  /* botão do card no desktop: 1 linha de 18 com 10,8 de folga = os 39,6 do gabarito
     (o min-height:44 da régua do casco é regra de TOQUE — aqui ela soltava 44) */
  .woocommerce a.button.lp-card-botao,
  .woocommerce .lp-card-botao { padding: 10.8px 14.4px; min-height: 0; }

  /* Dicas: a faixa cinza de largura total e o card de altura igual (64 de respiro no topo) */
  .lp-dicas { position: relative; max-width: none; padding: 64px 0 48px; margin-bottom: 128px; background: rgb(245, 245, 245); }
  .lp-dicas .lp-secao-titulo { margin-bottom: 38.4px; }
  .lp-dicas > * { max-width: 1278px; margin-inline: auto; padding-inline: 24px; }
  .lp-dicas-trilho { align-items: stretch; }
  .lp-dica { display: flex; flex-direction: column; }
  .lp-dica-foto { margin-inline: 0; }
  .lp-dica-foto img { width: 100%; }
  /* o "Leia mais" fica logo após o texto (11 de vão); o espaço que iguala as alturas
     sobra DEPOIS dele — sem esticar o resumo */
  .lp-dica-resumo { font-size: 14px; }
  .lp-dica-titulo { margin-top: 26.4px; }
  /* no desktop a caixa volta aos 28,8 do gabarito (4,8 de folga; 44 é regra de toque) */
  .lp-dica-mais a { padding-block: 4.8px; margin-block: 0; font-size: 16px; line-height: 19.2px; color: rgb(0, 136, 251); text-decoration: none; }
}

@media (min-width: 1025px) {
  /* o `#info` do gabarito engorda os subtítulos no desktop (o mobile fica como está) */
  .lp-info-corpo h3 { font-size: 32.4px; line-height: 38.88px; padding-top: 24px; }
  .lp-info-corpo h4 { font-size: 28.96px; line-height: 34.752px; padding-top: 24px; }
  .lp-info li { margin-bottom: 8px; }
  .lp-info p { margin-bottom: 24px; }

  /* o preço tem outro ritmo: o grupo mede 113,6 e não 137,6 */
  .lp-preco-parcela { margin: -8px 0 0; }
  .lp-preco-pix { margin-top: 4.8px; }

  /* a linha de compra encolhe à largura do cartão de sabor (443), não à coluna inteira */
  .woocommerce div.product form.variations_form { max-width: 443px; }
  .woocommerce div.product form.cart .single_add_to_cart_button { min-height: 50px; }

  /* o chip volta aos 32 do desenho: os 44 são regra de TOQUE */
  .lp-card-acoes { margin: 12px 12.8px 12.8px; padding-top: 16px; }
}

/* ── L14: avaliações nativas do Woo, vestidas pelo tema ───────────────── */

.lpav {
  margin: 24px 16px 0;
  color: var(--lp-texto, rgb(53, 65, 91));
  scroll-margin-top: 92px;
}
.lpav * { box-sizing: border-box; }
.lpav-card { padding: 24px 16px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
.lpav-card + .lpav-card { margin-top: 16px; }
.lpav h2 { margin: 0 0 4px; font-size: 24.29px; line-height: 29.148px; font-weight: 400; }
.lpav-sub { margin: 0 0 20px; color: #69738a; font-size: 13px; }

.lpav-resumo { display: grid; gap: 20px; }
.lpav-media { display: flex; align-items: center; gap: 14px; }
.lpav-media-num { font-size: 44px; line-height: 1; font-weight: 700; }
.lpav-media-num small { color: #69738a; font-size: 16px; font-weight: 400; }
.lpav-media-info { display: block; margin-top: 6px; color: #69738a; font-size: 13px; }
.lpav-barras { display: grid; gap: 8px; align-content: center; }
.lpav-barra { display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 10px; font-size: 13px; }
.lpav-barra-trilho { height: 8px; overflow: hidden; border-radius: 4px; background: rgb(242, 244, 247); }
.lpav-barra-cheia { display: block; height: 100%; border-radius: 4px; background: #ffc700; }
.lpav-barra small { color: #69738a; text-align: right; }

.lpav-estrelas { position: relative; display: inline-flex; flex: 0 0 auto; width: calc(var(--lpav-star-size) * 5); height: var(--lpav-star-size); line-height: 0; }
.lpav-vazias,
.lpav-cheias { display: flex; flex: 0 0 auto; width: max-content; }
.lpav-vazias { color: #7b8498; }
.lpav-cheias { position: absolute; inset: 0 auto 0 0; width: var(--lpav-fill); overflow: hidden; color: #ffc700; }
.lpav-estrelas svg { display: block; flex: 0 0 auto; width: var(--lpav-star-size); height: var(--lpav-star-size); fill: currentColor; }

.lpav-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 4px; scrollbar-width: none; }
.lpav-filtros::-webkit-scrollbar { display: none; }
.lpav-chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid #aeb5c3; border-radius: 22px; background: #fff; color: var(--lp-texto, rgb(53, 65, 91));
  font: inherit; font-size: 14px; text-decoration: none; touch-action: manipulation;
}
.lpav-chip[aria-current="page"] { border-color: #000; background: #000; color: #fff; }
.lpav-item { padding: 20px 0; border-top: 1px solid #eee; }
.lpav-item:first-child { padding-top: 8px; border-top: 0; }
.lpav-quem { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 2px; }
.lpav-nome { font-size: 14px; font-weight: 700; }
.lpav-selo { display: inline-flex; align-items: center; gap: 4px; color: #14783e; font-size: 12px; font-weight: 600; }
.lpav-selo svg { flex: 0 0 auto; }
.lpav-meta { margin: 4px 0 8px; color: #69738a; font-size: 12px; }
.lpav-texto { font-size: 14px; line-height: 21px; }
.lpav-texto p { margin: 0; }
.lpav-texto p + p { margin-top: 8px; }
.lpav-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lpav-fotos a {
  display: block; width: 72px; height: 72px; overflow: hidden; border: 1px solid #aeb5c3;
  border-radius: 6px; background: rgb(242, 244, 247);
}
.lpav-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lpav-resposta { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: rgb(242, 244, 247); font-size: 13px; line-height: 20px; }
.lpav-resposta strong { display: block; margin-bottom: 2px; font-size: 13px; }
.lpav-resposta p { margin: 0; }
.lpav-vazio { margin: 20px 0 4px; font-size: 14px; }
.lpav-mais {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px;
  border: 1px solid #aeb5c3; border-radius: 6px; background: #fff; color: var(--lp-texto, rgb(53, 65, 91));
  font: inherit; font-size: 15px; text-decoration: none; touch-action: manipulation;
}
/* troca por fetch (produto.js): a lista escurece enquanto o filtro carrega, sem mover a tela */
.lpav-lista[aria-busy="true"] { opacity: .55; pointer-events: none; }

.lpav-form h2 { margin-bottom: 16px; }
.lpav-form form { margin: 0; }
.lpav-rotulo { display: block; margin: 16px 0 8px; font-size: 14px; font-weight: 700; }
.lpav-notas-caixa { min-width: 0; margin: 0; padding: 0; border: 0; }
.lpav-notas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.lpav-nota-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: #7b8498; cursor: pointer; touch-action: manipulation;
}
.lpav-nota-btn input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lpav-nota-btn svg { display: block; fill: currentColor; }
.lpav-nota-btn:hover,
.lpav-nota-btn:hover ~ .lpav-nota-btn,
.lpav-nota-btn:has(input:checked),
.lpav-nota-btn:has(input:checked) ~ .lpav-nota-btn { color: #b58d00; }
.lpav-nota-btn:has(input:focus-visible) { border-radius: 4px; outline: 2px solid rgb(81, 40, 159); outline-offset: 1px; }
.lpav-form textarea,
.lpav-form input[type="text"],
.lpav-form input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 4.8px;
  background: rgb(242, 244, 247); color: var(--lp-texto, rgb(53, 65, 91)); font: inherit; font-size: 16px;
}
.lpav-form textarea { min-height: 96px; resize: vertical; }
.lpav-upload {
  display: flex; position: relative; align-items: center; justify-content: center; gap: 8px; min-height: 72px;
  border: 1.5px dashed #7b8498; border-radius: 8px; background: #fff; color: #5f697f;
  font-size: 14px; cursor: pointer; touch-action: manipulation;
}
.lpav-dupla { display: grid; gap: 12px; }
.lpav-enviar {
  display: block; width: 100%; min-height: 48px; margin-top: 20px; border: 0; border-radius: 6px;
  background: var(--lp-preto, #000); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; cursor: pointer; touch-action: manipulation;
}
.lpav-enviar:disabled { cursor: wait; opacity: .65; }
.lpav-status { min-height: 18px; margin: 6px 0 0; color: #5f697f; font-size: 13px; }
.lpav-status:empty { min-height: 0; margin: 0; }
.lpav-status--ok { margin: 0 0 16px; padding: 12px 14px; border-radius: 6px; background: #e8f7ee; color: #126b38; }
.lpav-login { margin: 0; font-size: 16px; }
.lpav-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.lpav-chip:focus-visible,
.lpav-fotos a:focus-visible,
.lpav-mais:focus-visible,
.lpav-upload:focus-within,
.lpav-form textarea:focus-visible,
.lpav-form input[type="text"]:focus-visible,
.lpav-form input[type="email"]:focus-visible,
.lpav-enviar:focus-visible,
.lpav-login a:focus-visible { outline: 2px solid rgb(81, 40, 159); outline-offset: 2px; }

.lp-card-avaliacao { display: flex; align-items: center; gap: 5px; margin: 0 12.8px 7px; color: #5f697f; font-size: 12px; line-height: 13px; }
.lp-card-avaliacao .lpav-estrelas { flex: 0 0 auto; }

@media (min-width: 901px) {
  .lpav { margin: 24px 0 0; }
  .lpav-card { padding: 32px; }
  .lpav-resumo { grid-template-columns: 260px 1fr; gap: 40px; }
  .lpav-barras { max-width: 520px; }
  .lpav-fotos a { width: 88px; height: 88px; }
  .lpav-mais { width: fit-content; padding: 0 32px; }
  .lpav-dupla { grid-template-columns: 1fr 1fr; }
  .lpav-enviar { width: fit-content; padding: 0 40px; }
}