/*
Theme Name: Nu3tion (Storefront Child)
Theme URI: https://nu3tion.com.br
Description: Tema filho do Storefront para o site/loja da Nu3tion (OraProtein), construido a partir do prototipo aprovado pelo cliente.
Author: Clara
Template: storefront
Version: 1.1.9
Text Domain: nu3tion
*/

/* ---------- Variaveis ---------- */
:root {
  --color-bg: #f9edcd;
  --color-surface: #ffffff;
  --color-tint: #f9e3b2;
  --color-ink: #14150f;
  --color-ink-soft: #4d5045;
  --color-ink-muted: #8b8d76;
  --color-border: #e9e0be;

  --color-primary: #45511f;
  --color-primary-dark: #2c3414;
  --color-primary-soft: #e7e9d8;

  --color-accent: #1c3e7e;
  --color-accent-dark: #142c5c;
  --color-accent-soft: #e2e8f4;

  --color-yellow: #a3a51c;
  --color-yellow-soft: #eef0da;

  --color-sky: #34a2db;
  --color-sky-soft: #e1f1fa;

  --font-display: "Fredoka", "Poppins", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 26px;

  --shadow-card: 0 1px 2px rgba(20, 21, 15, 0.05), 0 8px 24px rgba(20, 21, 15, 0.07);
  --shadow-pop: 0 12px 32px rgba(20, 21, 15, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset (escopado ao conteudo do nosso design, nao mexe no admin) ---------- */
.nu3tion * { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* O cabecalho e' fixo (sticky, 72px) — sem isso, ao clicar em "Comprar" no
   header, o topo da secao do produto fica escondido atras do cabecalho. */
#comprar { scroll-margin-top: 88px; }
body.nu3tion-page {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* So' margin-top/bottom aqui (nao o atalho "margin"): o atalho zera
   margin-left/right tambem, e por ter 2 classes (".nu3tion h2") ele tinha
   mais forca que regras como ".section-title" (so' 1 classe) que dependem
   de "margin-left/right: auto" pra centralizar — isso descentralizava todo
   H2/H3 que usa esse truque, e tambem apagava o "margin-top" que outros
   paragrafos com classe propria (ex: ".announce-bar p") definiam. */
.nu3tion h1, .nu3tion h2, .nu3tion h3 { font-family: var(--font-body); font-weight: 700; margin-top: 0; margin-bottom: 0.5em; color: var(--color-ink); }
.nu3tion p { margin-top: 0; margin-bottom: 1em; color: var(--color-ink-soft); }
.nu3tion a { color: inherit; text-decoration: none; }
.nu3tion img { max-width: 100%; display: block; }
.nu3tion button { font-family: inherit; cursor: pointer; }
.nu3tion ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }
.reveal[data-reveal-delay="5"] { transition-delay: 0.4s; }

/* ---------- Buttons ----------
   Prefixado com ".nu3tion" (o body inteiro tem essa classe) de proposito:
   o plugin Elementor injeta uma regra global ".elementor-kit-XXXX a" (uma
   classe + a tag "a") que, com apenas ".btn"/".btn-primary" etc (uma classe
   so), teria mais forca no CSS e vencia — e foi exatamente isso que deixou
   TODOS os botoes do site com fonte gigante (~45px) e texto preto herdado
   em vez da cor certa. Com ".nu3tion" na frente (duas classes), nossas
   regras sempre ganham dessa do Elementor, em qualquer botao do site. */
.nu3tion .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), background-position 0.35s var(--ease);
  white-space: nowrap;
}
.nu3tion .btn:active { transform: scale(0.97); }
.nu3tion .btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); background-size: 160% 160%; background-position: 0% 50%; color: #fff; box-shadow: 0 6px 16px rgba(28, 62, 126, 0.22); }
.nu3tion .btn-primary:hover { background-position: 100% 50%; box-shadow: 0 10px 24px rgba(28, 62, 126, 0.32); transform: translateY(-1px); }
.nu3tion .btn-secondary { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-border); }
.nu3tion .btn-secondary:hover { border-color: var(--color-ink-muted); }
.nu3tion .btn-sm { padding: 9px 18px; font-size: 14px; }
.nu3tion .btn-lg { padding: 15px 30px; font-size: 16px; }
.nu3tion .btn-block { width: 100%; }

/* ".nu3tion .icon-btn" (nao so' ".icon-btn"): o Storefront (tema pai) tem
   uma regra propria de estilo so' pra tag <button> (nao pra <a>), com
   especificidade suficiente pra vencer ".icon-btn" sozinho — provavelmente
   e' isso que estava deixando o icone do menu mobile (que e' um <button>)
   invisivel, com a cor do "stroke=currentColor" virando algo tipo branco
   em vez do var(--color-ink) escuro. O botao do carrinho (<a>) nao sofria
   porque essa regra do Storefront nao se aplica a links. */
.nu3tion .icon-btn {
  background: none;
  border: none;
  color: var(--color-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.2s var(--ease);
}
.nu3tion .icon-btn:hover { background: var(--color-primary-soft); }

/* ---------- Announce bar ---------- */
.announce-bar { background: var(--color-primary); color: #fff; margin-bottom: 0; }
.announce-bar p { margin: 0; text-align: center; font-size: 13px; padding: 8px 16px; color: rgba(255,255,255,0.92); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* 55 (nao mais 40): o "backdrop-filter" logo abaixo cria um contexto de
     empilhamento proprio pro header, entao QUALQUER z-index dado a algo
     DENTRO dele (como o botao do menu mobile) so' compete com outras
     coisas dentro do header — nunca com elementos de fora, tipo o
     indicador de conta/avatar de outro plugin. So' subir o z-index do
     proprio header tem efeito real contra esse elemento externo. Mantido
     abaixo de 60 de proposito, pra continuar atras dos nossos proprios
     modais/pop-ups (.modal-backdrop, .cart-drawer, .toast-region etc). */
  z-index: 55;
  background: rgba(251, 247, 238, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled { border-color: var(--color-border); box-shadow: 0 4px 20px rgba(20,21,15,0.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nu3tion .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; }
.header-inner .logo { text-transform: none; }
.logo-img { height: 46px; width: auto; }
.site-footer .logo-img { height: 40px; }
.logo-dot { color: var(--color-accent); }
.main-nav { display: flex; gap: 28px; }
.main-nav a { font-size: 14.5px; font-weight: 500; color: var(--color-ink-soft); transition: color 0.2s; }
.main-nav a:hover { color: var(--color-primary); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--color-accent); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease);
}
.cart-count.pulse { animation: pulse-count 0.4s var(--ease); }
@keyframes pulse-count { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } }
.mobile-menu-btn { display: none; }
/* Precisa ser ".nu3tion .mobile-cta-float" (nao so' ".mobile-cta-float")
   porque esse elemento tambem tem a classe ".btn", e ".nu3tion .btn" (mais
   acima) define "display: inline-flex" com a MESMA especificidade de duas
   classes — sem o prefixo aqui, aquela regra vencia por vir depois no
   arquivo e o popup ficava visivel o tempo todo, inclusive no desktop. */
.nu3tion .mobile-cta-float { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 25px 0 96px; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.5; z-index: 0; animation: float 10s ease-in-out infinite; }
.hero-blob--1 { width: 420px; height: 420px; background: var(--color-primary-soft); top: -140px; right: -120px; }
.hero-blob--2 { width: 280px; height: 280px; background: var(--color-yellow-soft); bottom: -100px; left: -80px; animation-delay: -4s; }
.hero-blob--3 { width: 220px; height: 220px; background: var(--color-accent-soft); top: 40%; left: 38%; animation-delay: -7s; opacity: 0.4; }

.brand-leaf { position: absolute; z-index: 0; pointer-events: none; transform-origin: bottom center; display: block; }
.brand-leaf path, .brand-leaf ellipse { fill: currentColor; }
.brand-leaf-vein, .brand-leaf-stem { fill: none; stroke: rgba(0, 0, 0, 0.16); }
.brand-leaf--1 { top: 4%; left: -3%; width: 130px; height: 182px; color: var(--color-primary); opacity: 0.16; animation: leaf-sway-1 7s ease-in-out infinite; }
.brand-leaf--2 { top: 58%; right: 1%; width: 100px; height: 160px; color: var(--color-yellow); opacity: 0.22; animation: leaf-sway-2 6s ease-in-out infinite; }
.brand-leaf--3 { bottom: -6%; left: 32%; width: 76px; height: 106px; color: var(--color-primary); opacity: 0.14; animation: leaf-sway-3 8s ease-in-out infinite; }
@keyframes leaf-sway-1 { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-3deg); } }
@keyframes leaf-sway-2 { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(18deg); } }
@keyframes leaf-sway-3 { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(9deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.04); } }

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { animation: hero-in 0.7s var(--ease) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-accent); background: var(--color-accent-soft);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: 44px; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 20px; }
.hero-sub { font-size: 17px; max-width: 460px; margin-bottom: 28px; }
.hero-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-price { display: flex; flex-direction: column; }
.price-now { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-primary); }
.price-old { font-size: 14px; color: var(--color-ink-muted); text-decoration: line-through; }
.hero-trust { display: flex; column-gap: 20px; row-gap: 10px; flex-wrap: wrap; }
.hero-trust li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--color-primary); }
.hero-trust-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }

.hero-media { position: relative; width: 100%; animation: hero-in 0.7s var(--ease) both 0.12s; }
.hero-media-frame {
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, var(--color-primary-soft), var(--color-surface));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  animation: frame-glow 5s ease-in-out infinite;
}
@keyframes frame-glow { 0%, 100% { box-shadow: var(--shadow-card); } 50% { box-shadow: 0 14px 40px rgba(20, 21, 15, 0.16); } }
.hero-media-img, .product-media-img { width: 100%; height: 100%; object-fit: cover; }

.floating-card {
  position: absolute; background: var(--color-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  animation: drift 5s ease-in-out infinite;
}
.floating-card--rating { top: 8%; left: -6%; }
.floating-card--flavor { bottom: 10%; right: -6%; animation-delay: -2.5s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.flavor-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); display: inline-block; }
.stars { color: var(--color-yellow); letter-spacing: 1px; }
.stars--sm { font-size: 13px; }

/* ---------- Trust strip ---------- */
.trust-strip { background: linear-gradient(100deg, var(--color-primary), var(--color-primary-dark)); overflow: hidden; }
.trust-marquee { width: 100%; }
.trust-marquee-track { display: flex; align-items: center; gap: 48px; width: max-content; padding: 20px 0; animation: marquee 26s linear infinite; }
.trust-strip:hover .trust-marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.trust-item svg { color: var(--color-yellow); flex-shrink: 0; }

/* ---------- Sections ---------- */
.nu3tion .section { padding: 96px 0; }
.section--tinted { background: var(--color-tint); }
.section-eyebrow { text-align: center; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; }
.section-title { text-align: center; font-size: 32px; max-width: 620px; margin-left: auto; margin-right: auto; }
.section-sub { text-align: center; max-width: 520px; margin: 0 auto 48px; font-size: 16px; }
.section-title + .section-sub { margin-top: 12px; }
.mid-cta { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- Persona grid ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.persona-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.persona-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.persona-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.persona-icon--a { background: var(--color-accent-soft); color: var(--color-accent); }
.persona-icon--b { background: var(--color-yellow-soft); color: var(--color-primary); }
.persona-icon--c { background: var(--color-primary-soft); color: var(--color-primary); }
.persona-icon--d { background: var(--color-accent-soft); color: var(--color-accent); }
.persona-card h3 { font-size: 17px; margin-bottom: 8px; }
.persona-card p { font-size: 14px; margin: 0; }

/* ---------- Benefits ---------- */
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.benefit-card { background: var(--color-surface); border-radius: var(--radius); padding: 26px 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.benefit-card svg { color: var(--color-primary); margin-bottom: 14px; }
.benefit-card h3 { font-size: 16px; margin-bottom: 8px; }
.benefit-card p { font-size: 13.5px; margin: 0; }

.stats-bar {
  margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark) 70%);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.stat-item { text-align: center; padding: 30px 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.stat-item:last-child { border-right: none; }
.stat-value { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: #fff; }
.stat-label { display: block; font-size: 12.5px; color: rgba(255,255,255,0.75); margin-top: 6px; }

/* ---------- Steps ---------- */
.steps-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 48px; }
.step-item { flex: 1; text-align: center; }
.step-visual {
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; animation: bob 4s ease-in-out infinite;
}
.step-item:nth-child(3) .step-visual { animation-delay: -1.3s; }
.step-item:nth-child(5) .step-visual { animation-delay: -2.6s; }
.step-visual--a { background: var(--color-primary-soft); color: var(--color-primary); }
.step-visual--b { background: var(--color-accent-soft); color: var(--color-accent); }
.step-visual--c { background: var(--color-yellow-soft); color: var(--color-primary); }
.step-number {
  position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  box-shadow: 0 3px 8px rgba(20, 21, 15, 0.18);
}
.step-item h3 { font-size: 16px; margin-bottom: 6px; }
.step-item p { font-size: 13.5px; margin: 0; }
.step-connector { flex: 0 0 60px; height: 2px; background: var(--color-border); margin-top: 67px; }
.steps-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 36px auto 0;
  padding: 12px 26px;
  background: var(--color-sky-soft);
  border: 1.5px solid var(--color-sky);
  border-radius: 999px;
  color: var(--color-primary-dark);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(52, 162, 219, 0.18);
  animation: tip-pulse 2.6s ease-in-out infinite;
}
.steps-tip svg { color: var(--color-sky); flex-shrink: 0; }
.steps-tip strong { color: var(--color-accent); }
@keyframes tip-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.steps-video { position: relative; max-width: 480px; margin: 24px auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.steps-video-player { display: block; width: 100%; }
.steps-video-mute {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 21, 15, 0.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.steps-video-mute:hover { background: rgba(20, 21, 15, 0.75); }
.steps-video + .mid-cta { margin-top: 24px; }

/* ---------- Storytelling founders ---------- */
.story-founders { display: flex; justify-content: center; flex-wrap: wrap; gap: 36px; margin-top: 48px; }
.story-founder-card { display: flex; flex-direction: column; align-items: center; }
.story-founder-photo {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--color-primary-soft), var(--color-surface));
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: var(--color-primary);
}
.story-founder-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-founder-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
.story-founder-name { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--color-ink-soft); }
@media (min-width: 961px) {
  .story-founder-photo { width: 180px; height: 180px; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Product panel (integrado ao WooCommerce) ---------- */
.product-panel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.product-visual { width: 100%; }
.product-visual-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, var(--color-surface), var(--color-primary-soft));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); overflow: hidden;
}
/* Posicionamento absoluto ignora qualquer comportamento de flexbox/tamanho
   intrinseco do <img> e forca o preenchimento exato do quadro quadrado. */
.product-visual-frame .product-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.product-badges span { background: var(--color-primary-soft); color: var(--color-primary); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }

.product-flavor { font-size: 13.5px; font-weight: 600; color: var(--color-accent); margin-bottom: 6px; }
.product-title { font-size: 34px; margin-bottom: 12px; }
.product-rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-ink-soft); margin-bottom: 20px; }
.product-price-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.product-price-block .price-now,
.product-price-block .amount { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--color-primary); }
.product-price-block del .amount { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-ink-muted); }
.price-detail { margin: 8px 0 0; font-size: 13.5px; }
.price-detail strong { color: var(--color-primary); }

/* Formulario nativo de compra do WooCommerce, estilizado para bater com o design */
.product-panel form.cart { margin: 0; }
/* Esconde a quantidade em estoque ("394 em estoque") que o WooCommerce
   exibe por padrao junto do formulario de compra. */
.product-panel .stock { display: none; }
.product-panel .quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 16px; background: var(--color-surface); margin-bottom: 20px; }
.product-panel .quantity .qty {
  border: none;
  width: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Remove a setinha de incremento nativa do input number (Chrome/Safari) —
   ja temos os botoes "-"/"+" proprios, ela so' duplicava a funcao e deixava
   o numero com aparencia de caixinha cinza. */
.product-panel .quantity .qty::-webkit-outer-spin-button,
.product-panel .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Botoes "-"/"+" que o site.js injeta (setupProductQuantityStepper) dentro
   do pill de quantidade — nunca tinham regra propria, entao apareciam com a
   aparencia crua do navegador (fundo cinza, borda). */
.product-panel .qty-control-pill { display: inline-flex; align-items: center; gap: 10px; }
.product-panel .qty-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-ink-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.product-panel .qty-stepper-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.product-panel button[type="submit"].single_add_to_cart_button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff; font-family: inherit; font-weight: 600; font-size: 16px;
  padding: 15px 30px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(28, 62, 126, 0.22);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.product-panel button[type="submit"].single_add_to_cart_button:hover { box-shadow: 0 10px 24px rgba(28, 62, 126, 0.32); transform: translateY(-1px); }
.product-panel button[type="submit"].single_add_to_cart_button.is-loading { opacity: 0.75; cursor: default; pointer-events: none; }
.product-panel button[type="submit"].single_add_to_cart_button.is-loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .product-panel button[type="submit"].single_add_to_cart_button.is-loading::after { animation-duration: 1.4s; }
}

/* ".nu3tion .coupon-note" (nao so' ".coupon-note") porque esse aviso e' um
   <p>, e ".nu3tion p" (mais acima, mesma especificidade de 2 classes) sempre
   zerava esse margin-top por vir antes no arquivo — sem o prefixo aqui, o
   espacinho entre o botao "Adicionar ao carrinho" e este aviso sumia. */
.nu3tion .coupon-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 16px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 13.5px;
  font-weight: 600;
}
.coupon-note svg { flex-shrink: 0; }
.product-guarantees { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.product-guarantees li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-ink-soft); }
.product-guarantees svg { color: var(--color-primary); flex-shrink: 0; }

/* ---------- Entenda nosso produto ---------- */
.explain-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; margin-top: 48px; }
.explain-list { display: flex; flex-direction: column; gap: 28px; }
.explain-item { display: flex; gap: 16px; align-items: flex-start; }
.explain-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.explain-item h3 { font-size: 17px; margin-bottom: 6px; }
.explain-item p { font-size: 14px; margin: 0; }
.explain-media-frame {
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--color-primary-soft), var(--color-surface));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.explain-media-img { width: 100%; height: 100%; object-fit: cover; }

.ingredient-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.ingredient-card {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ingredient-more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--color-accent); }
.ingredient-card:hover .ingredient-more { text-decoration: underline; }
.ingredient-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.ingredient-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.ingredient-card h3 { font-size: 15px; margin-bottom: 6px; }
.ingredient-card p { font-size: 13px; margin: 0; }

/* ---------- Nutrition tabs ---------- */
.nutrition-tabs { margin: 40px auto 0; max-width: 640px; }
.nutrition-tab-buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.nutrition-tab-btn {
  padding: 11px 22px; border-radius: 999px; border: 1.5px solid var(--color-border);
  background: var(--color-surface); font-family: inherit; font-weight: 600; font-size: 13.5px;
  color: var(--color-ink-soft);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nutrition-tab-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nutrition-tab-panel { display: none; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }
.nutrition-tab-panel.is-active { display: block; animation: step-in 0.35s var(--ease); }
.nutrition-table-img { width: 100%; max-width: 420px; display: block; margin: 0 auto; border-radius: var(--radius-sm); }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Testimonials carousel ---------- */
.carousel { margin-top: 48px; }
.carousel-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 calc(33.333% - 14px); scroll-snap-align: start;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.testimonial-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-primary-soft); }
.testimonial-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.testimonial-card:hover .testimonial-photo img { transform: scale(1.06); }
.testimonial-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.testimonial-name { font-size: 15px; font-weight: 600; margin: 0; color: var(--color-ink); }
.testimonial-role { font-size: 12.5px; margin: 0 0 12px; color: var(--color-accent); font-weight: 600; }
.testimonial-text { font-size: 14px; margin-bottom: 12px; flex: 1; }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.carousel-controls button { background: var(--color-surface); border: 1px solid var(--color-border); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.carousel-controls button:hover { background: var(--color-primary-soft); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.carousel-dots span.is-active { background: var(--color-accent); transform: scale(1.2); }

/* ---------- FAQ accordion ---------- */
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 20px 4px;
  font-size: 15.5px; font-weight: 600; color: var(--color-ink); text-align: left;
}
.accordion-trigger svg { transition: transform 0.3s var(--ease); flex-shrink: 0; color: var(--color-ink-muted); }
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.accordion-panel p { padding: 0 4px 20px; font-size: 14.5px; margin: 0; }

/* ---------- Guarantee band ---------- */
.guarantee-band { padding: 64px 0; }
.guarantee-inner {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(135deg, var(--color-surface), var(--color-primary-soft));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 44px;
  box-shadow: var(--shadow-card);
}
.guarantee-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(69, 81, 31, 0.18);
}
.guarantee-inner h3 { margin-bottom: 6px; font-size: 20px; }
.guarantee-inner p { margin: 0; font-size: 14.5px; }

/* ---------- Closing band ---------- */
.closing-band {
  position: relative;
  padding: 110px 0;
  text-align: center;
  background: radial-gradient(120% 150% at 50% -10%, var(--color-primary) 0%, var(--color-primary-dark) 60%, #10140a 100%);
  overflow: hidden;
}
.closing-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(52, 162, 219, 0.22), transparent 70%);
  pointer-events: none;
}
.closing-leaf { position: absolute; color: rgba(255, 255, 255, 0.09); animation: none; }
.closing-leaf--1 { top: -10%; left: 4%; width: 220px; height: 308px; transform: rotate(-18deg); }
.closing-leaf--2 { bottom: -14%; right: 4%; width: 180px; height: 252px; transform: rotate(158deg); }
.closing-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.closing-text { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto 40px; }
.closing-line { color: rgba(255, 255, 255, 0.88); font-size: 19px; line-height: 1.6; font-weight: 400; }
.closing-line--accent { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--color-sky); margin: 8px 0; }
.closing-line--soft { margin-top: 18px; font-size: 17px; font-style: italic; color: rgba(255, 255, 255, 0.7); }
.closing-band .btn-primary svg { transition: transform 0.2s var(--ease); }
.closing-band .btn-primary:hover svg { transform: translateX(3px); }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 30, 24, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
  z-index: 60;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.btn.is-disabled { background: var(--color-ink-muted); border-color: var(--color-ink-muted); cursor: not-allowed; }
.btn.is-disabled:hover { transform: none; }

.stock-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: 400px; max-width: 90vw;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 36px 32px;
  z-index: 71;
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.stock-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.stock-modal-close { position: absolute; top: 14px; right: 14px; }
.stock-modal-icon { color: var(--color-accent); display: flex; justify-content: center; margin-bottom: 12px; }
.stock-modal h3 { margin-bottom: 10px; }
.stock-modal p { margin-bottom: 22px; }

/* ---------- Toast (pop-up de carrinho) ---------- */
.toast-region {
  position: fixed; bottom: 20px; right: 20px; z-index: 80;
  display: flex; flex-direction: column; gap: 10px;
  width: 360px; max-width: calc(100vw - 40px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 16px 16px 16px 18px;
  border-left: 4px solid var(--color-primary);
  animation: toast-in 0.3s var(--ease);
}
.toast--error { border-left-color: var(--color-accent); }
.toast-icon { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.toast--error .toast-icon { color: var(--color-accent); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.toast-detail { margin: 2px 0 0; font-size: 12.5px; color: var(--color-ink-muted); }
.toast-actions { display: flex; gap: 10px; margin-top: 10px; }
.toast-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 7px 14px; cursor: pointer; border: none;
  text-decoration: none; display: inline-block;
}
.toast-btn--primary { background: var(--color-primary); color: #fff; }
.toast-btn--ghost { background: none; color: var(--color-ink-soft); border: 1px solid var(--color-border); }
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--color-ink-muted); font-size: 18px; line-height: 1; padding: 2px;
}
.toast-close:hover { color: var(--color-ink); }
.toast.is-leaving { animation: toast-out 0.25s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-leaving { animation: none; opacity: 0; }
}
@media (max-width: 480px) {
  .toast-region { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------- Cart drawer (painel lateral do carrinho) ----------
   Nunca teve CSS proprio (o markup em footer.php e a logica em site.js
   sempre existiram, mas sem estilo o <aside id="cartDrawer"> so' aparecia
   como bloco normal no fim da pagina, empurrado pra depois do rodape, em
   vez de um painel fixo escondido fora da tela ate' ser aberto). */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 24, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  z-index: 70;
}
.cart-backdrop.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: 90vw;
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
  z-index: 75;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cart-drawer-head h3 { margin: 0; font-size: 18px; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.cart-drawer-body ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-drawer-body .woocommerce-mini-cart-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer-body .woocommerce-mini-cart-item img {
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cart-drawer-body .woocommerce-mini-cart-item a:not(.remove) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;
  max-width: 96px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}
.cart-drawer-body .woocommerce-mini-cart-item .quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-ink-muted);
}
.cart-drawer-body .woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-ink-muted);
  font-size: 16px;
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-drawer-body .woocommerce-mini-cart-item a.remove:hover { background: var(--color-primary-soft); color: var(--color-accent); }

.cart-qty-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; }
.cart-qty-btn { border: none; background: none; padding: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--color-ink-soft); cursor: pointer; }
.cart-qty-btn:hover { color: var(--color-primary); }
.cart-qty-value { min-width: 12px; text-align: center; font-weight: 600; }
.cart-qty-price { color: var(--color-ink-muted); }

.cart-drawer-body .woocommerce-mini-cart__empty-message {
  text-align: center;
  color: var(--color-ink-muted);
  padding: 40px 0;
}

.cart-drawer-body p.woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

.cart-drawer-body p.woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
}
/* "Ver carrinho" e' redundante aqui: clicar no icone do carrinho ja abre
   este mesmo painel, entao esconde so esse botao e deixa "Finalizar compra". */
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  display: none;
}
.cart-drawer-body .woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border);
}
.cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(28, 62, 126, 0.22);
}

.cart-drawer-coupon { display: flex; gap: 8px; margin-top: 4px; }
.cart-drawer-coupon-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-ink);
  background: var(--color-surface);
}
.cart-drawer-coupon-input:focus { outline: none; border-color: var(--color-accent); }

.cart-drawer-notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .cart-drawer { width: 100%; max-width: 100%; }
}

/* ---------- Checkout do WooCommerce (assistente em 3 passos) ----------
   O checkout usa um assistente de 3 passos que ja existe via JS
   (setupWooCheckoutSteps, em site.js): Dados de entrega -> Forma de
   pagamento -> Revisar e confirmar, dentro de um cartao centralizado
   (.wc-checkout-card). O JS ja monta toda a logica (mostrar/esconder cada
   passo, navegacao, validacao, resumo do pedido) — so faltava o CSS, que
   nunca tinha sido escrito. Sem ele, "checkout-step-hidden" nao escondia
   nada de verdade (so trocava a classe) e tudo aparecia junto, sem estilo,
   herdando a tipografia gigante do kit global do Elementor.
   Escopado com "body.woocommerce-page"/"body.woocommerce-checkout" (classes
   que o proprio WooCommerce ja adiciona ao body, funciona independente do
   template por baixo) e ".wc-checkout-card" (o cartao do assistente). */
body.woocommerce-page #secondary,
body.woocommerce-page .widget-area {
  display: none;
}
body.woocommerce-page #primary,
body.woocommerce-page #main,
body.woocommerce-page .content-area {
  width: 100% !important;
  float: none !important;
}
body.woocommerce-checkout .content-area,
body.woocommerce-checkout #primary {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
body.woocommerce-checkout .entry-title {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 24px;
  color: var(--color-ink);
  text-align: center;
}

/* Aviso "Tem um cupom?" */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 24px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.woocommerce-checkout .showcoupon {
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}
.woocommerce-checkout .woocommerce-form-coupon {
  max-width: 560px;
  margin: 0 auto 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.woocommerce-checkout .woocommerce-form-coupon p { margin: 0; flex: 1 1 220px; font-size: 14px; }
.woocommerce-checkout .woocommerce-form-coupon .input-text {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
}
.woocommerce-checkout .woocommerce-form-coupon button {
  border: none;
  border-radius: 999px;
  padding: 11px 24px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* Indicador de passos (bolinhas) */
.checkout-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 28px;
}
.checkout-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.checkout-dot.is-active { background: var(--color-accent); transform: scale(1.25); }

/* Cartao do assistente */
.wc-checkout-card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  overflow: hidden;
}
/* O WooCommerce/Storefront colocam "Detalhes de cobranca" e "Resumo do
   pedido" lado a lado (float) por padrao -- isso so' e' corrigido depois
   que o JS esconde o resumo (posicionando ele fora do fluxo), causando um
   "flash" da pagina larga assim que carrega e, no mobile, um scroll lateral
   que fica preso mesmo depois do layout se corrigir. Desliga o float aqui
   direto, valendo desde o primeiro carregamento, sem depender do JS. */
.wc-checkout-card #customer_details,
.wc-checkout-card #order_review,
.wc-checkout-card #order_review_heading {
  float: none !important;
  width: 100% !important;
}
/* Titulo nativo "Seu pedido" do WooCommerce -- os titulos de cada passo
   (Dados de entrega / Forma de pagamento / Revisar e confirmar) ja cobrem
   essa funcao, e esse aqui nao era escondido pelo assistente de passos
   (so ficava sobrando, solto). */
.wc-checkout-card #order_review_heading { display: none; }
.wc-checkout-card .checkout-step h3:not(:first-child) {
  font-size: 15px;
  color: var(--color-ink-soft);
  margin-top: 22px;
  margin-bottom: 14px;
}
.wc-checkout-card .checkout-step > h3:first-child {
  font-size: 22px;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: 20px;
}
.checkout-step-heading-2,
.checkout-step-heading-3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: 20px;
}

.wc-checkout-card .col2-set { display: block !important; }
.wc-checkout-card .col2-set .col-1,
.wc-checkout-card .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.wc-checkout-card .form-row { margin-bottom: 16px; }
.wc-checkout-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
}
.wc-checkout-card label .required { color: var(--color-accent); text-decoration: none; }
.wc-checkout-card .input-text,
.wc-checkout-card select,
.wc-checkout-card textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-surface);
}
.wc-checkout-card .input-text:focus,
.wc-checkout-card select:focus,
.wc-checkout-card textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.wc-checkout-card .select2-container .select2-selection--single {
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.wc-checkout-card .form-row.has-error .input-text,
.wc-checkout-card .form-row.has-error select,
.wc-checkout-card .form-row.has-error textarea {
  border-color: #c0392b;
}

/* A tabela nativa do pedido fica escondida -- so serve de fonte de dados
   pro resumo bonito (.checkout-summary) que o JS monta no passo 3. */
.wc-checkout-card table.shop_table { display: none; }

/* Formas de pagamento (passo 2) */
.wc-checkout-card ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc-checkout-card ul.wc_payment_methods li.wc_payment_method {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.wc-checkout-card ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.wc-checkout-card ul.wc_payment_methods input[type="radio"] {
  margin-right: 10px;
  accent-color: var(--color-accent);
}
.wc-checkout-card ul.wc_payment_methods label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-ink);
  margin-bottom: 0;
  cursor: pointer;
}
.wc-checkout-card ul.wc_payment_methods label img { height: 20px; margin-left: 8px; }
.wc-checkout-card .payment_box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--color-tint);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-ink-soft);
}
.wc-checkout-card .payment_box p { margin: 0 0 8px; }
.wc-checkout-card .payment_box p:last-child { margin-bottom: 0; }

/* Resumo do pedido (passo 3) */
.checkout-summary { margin-bottom: 20px; }
.checkout-summary p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  margin: 0;
}
.checkout-summary p:last-child {
  border-bottom: none;
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Navegacao entre passos */
.wc-checkout-card .checkout-nav {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.wc-checkout-card .checkout-nav .btn { flex: 1; }
.wc-checkout-card .place-order {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.wc-checkout-card #place_order {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 30px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(28, 62, 126, 0.22);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wc-checkout-card #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(28, 62, 126, 0.32);
}
.wc-checkout-card .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--color-ink-muted);
}
.wc-checkout-card .woocommerce-privacy-policy-text a {
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-accent);
  text-decoration: underline;
}

/* Passos escondidos: fora do fluxo e invisiveis, mas continuam "presentes"
   no DOM (position+visibility, nunca display:none) -- necessario pro script
   do Mercado Pago (cartao/boleto) conseguir se conectar aos campos de
   pagamento antes do cliente chegar no passo 2 (ver comentario no site.js,
   funcao toggleStepVisibility). */
.checkout-step-hidden {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
/* "visibility: hidden" deveria bastar pra esconder tudo dentro, mas algum
   CSS (WooCommerce ou Elementor) forca "visibility: visible !important" nos
   asteriscos de campo obrigatorio (".required") por acessibilidade — isso
   "vaza" atraves do passo escondido e sobra um "*" solto na tela. Reforca
   escondendo especificamente esses asteriscos tambem. */
.checkout-step-hidden .required {
  visibility: hidden !important;
}

/* Avisos e erros */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
  list-style: none;
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}
.woocommerce-checkout .woocommerce-error { border-left-color: #c0392b; }

/* ---------- Detalhes do pedido (pagina de agradecimento / pagamento pendente) ----------
   Mesma causa das outras paginas do WooCommerce: nunca recebeu CSS do tema,
   entao os botoes "Pagar"/"Cancelar" (classes nativas do WooCommerce, usadas
   tambem em "Meus pedidos") herdavam a fonte gigante do kit global do
   Elementor. */
.woocommerce-order-details,
.woocommerce-order {
  max-width: 640px;
  margin: 0 auto;
}
.woocommerce-order-details h2,
.woocommerce-order-details h3,
.woocommerce-order > h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 32px 0 16px;
  color: var(--color-ink);
}
table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
table.woocommerce-table--order-details tfoot th,
table.woocommerce-table--order-details tfoot td { border-bottom: none; }
table.woocommerce-table--order-details a {
  font-size: inherit;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: underline;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding: 11px 22px !important;
  margin: 4px 8px 4px 0;
  cursor: pointer;
  text-decoration: none !important;
  background: var(--color-primary);
  color: #fff !important;
}
.woocommerce a.button.cancel {
  background: transparent;
  color: var(--color-ink) !important;
  border: 1.5px solid var(--color-border);
}
.woocommerce a.button.pay {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}

@media (max-width: 640px) {
  .wc-checkout-card,
  .checkout-progress,
  .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
  .woocommerce-checkout .woocommerce-form-coupon {
    max-width: 100%;
  }
  .wc-checkout-card { padding: 24px 18px; }
  body.woocommerce-checkout .content-area,
  body.woocommerce-checkout #primary {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); padding-top: 64px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.site-footer .logo { color: #fff; }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: 14px; max-width: 260px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-icons span { border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12.5px; }
.footer-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 32px;
  padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.75); }
.footer-trust-item svg { flex-shrink: 0; color: var(--color-sky); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 20px 24px; }
.footer-bottom p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.55); }
.footer-bottom a { color: rgba(255,255,255,0.75); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero h1 { font-size: 34px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 380px; margin: 0 auto; }
  .persona-grid, .benefits-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .product-panel { grid-template-columns: 1fr; }
  .explain-panel { grid-template-columns: 1fr; }
  .explain-media { order: -1; max-width: 380px; margin: 0 auto; }
  .testimonial-card { flex: 0 0 calc(50% - 10px); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .main-nav { display: none; }
  /* "position: absolute" (nao "fixed") de proposito: ".main-nav" fica
     dentro do <header>, que tem "backdrop-filter" — isso cria um novo
     containing block pra qualquer "position: fixed" dentro dele (mesmo
     problema documentado no header.php sobre o botao flutuante), fazendo
     o menu renderizar preso/errado em vez de solido sobre a pagina. Como
     ".site-header" ja tem "position: sticky" (containing block valido pra
     "absolute"), usar absolute + "top: 100%" resolve isso e ainda se
     adapta sozinho a qualquer altura futura do header. */
  .main-nav.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-surface); padding: 16px 24px 20px;
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-card);
    z-index: 39;
  }
  .main-nav.is-open a { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
  .main-nav.is-open a:last-child { border-bottom: none; }
  .mobile-menu-btn { display: inline-flex; }
  /* Achamos a causa real via "getComputedStyle" no Console: o SVG estava
     com "width: 0px" (altura normal, largura zero — por isso invisivel).
     Classico problema de SVG dentro de flexbox: sem "flex-shrink: 0", o
     navegador pode encolher o icone ate' zero de largura no eixo principal
     do flex, mesmo com "width" explicito. O "!important" sozinho nao
     resolvia porque o problema nunca foi uma regra de largura concorrente
     — era o encolhimento do flex. Selector por ID (nao so' classe) mantido
     por seguranca extra de especificidade. */
  #mobileMenuBtn svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    stroke: var(--color-ink) !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  #cartToggle { width: 46px; height: 46px; }
  #cartToggle svg { width: 26px; height: 26px; }

  /* No mobile, esconde a copia do "Compre Agora" de dentro do header (ela
     continua existindo pro desktop, sem nenhuma mudanca) e mostra o botao
     flutuante como um FAB circular com icone de carrinho, centralizado na
     lateral direita da tela (top:50%). Antes ficava colado no topo
     (top:80px) e colidia com o indicador de conta/avatar que outro plugin
     do site ja mostra ali; centralizado na vertical ele fica longe tanto
     desse indicador (que so' ocupa o topo) quanto do toast de "produto
     adicionado ao carrinho" (que so' ocupa o rodape, bottom:20px). */
  .nu3tion .header-cta { display: none; }
  .nu3tion .mobile-cta-float {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff;
    box-shadow: var(--shadow-pop);
    z-index: 45;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .nu3tion .mobile-cta-float:active { transform: translateY(-50%) scale(0.92); }

  /* Reserva espaco no canto direito da faixa de aviso pro indicador de
     conta (login/avatar) de outro plugin do site, que nao faz parte deste
     tema — sem isso o texto quebra em cima dele no mobile. */
  .announce-bar p { padding-left: 68px; padding-right: 68px; font-size: 12px; }
}

/* ---------- Blog ---------- */
.blog-hero { padding-bottom: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.blog-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.blog-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-primary-soft); }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card-img--placeholder { object-fit: contain; padding: 40px; }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.blog-card-title { font-size: 18px; margin-bottom: 10px; }
.blog-card-title a { color: var(--color-ink); }
.blog-card-title a:hover { color: var(--color-accent); }
.blog-card-excerpt { font-size: 14px; flex: 1; margin-bottom: 16px; }
.blog-card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--color-accent); }
.blog-card-link svg { transition: transform 0.2s var(--ease); }
.blog-card:hover .blog-card-link svg { transform: translateX(3px); }
.blog-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; flex-wrap: wrap; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600; color: var(--color-ink-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.blog-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-pagination a.page-numbers:hover { background: var(--color-primary-soft); }
.blog-empty { text-align: center; color: var(--color-ink-muted); padding: 40px 0; }

.blog-post { padding: 72px 0 96px; }
.blog-post-title { font-size: 36px; margin-bottom: 12px; }
.blog-post-meta { color: var(--color-ink-muted); font-size: 14px; margin-bottom: 32px; }
.blog-post-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 40px; }
.blog-post-img { width: 100%; height: auto; }
.blog-post-content { font-size: 16.5px; line-height: 1.75; color: var(--color-ink-soft); }
.blog-post-content h2 { font-size: 26px; margin-top: 1.6em; }
.blog-post-content h3 { font-size: 20px; margin-top: 1.4em; }
.blog-post-content p { margin-bottom: 1.2em; }
.blog-post-content img { border-radius: var(--radius); margin: 1.5em 0; }
.blog-post-content a { color: var(--color-accent); text-decoration: underline; }
.blog-post-content ul, .blog-post-content ol { margin: 0 0 1.2em; padding-left: 1.4em; list-style: revert; }
.blog-back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; font-weight: 600; color: var(--color-primary); }

@media (max-width: 640px) {
  .floating-card--rating { left: 2%; }
  .floating-card--flavor { right: 2%; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 10px; }
  .hero-trust li.hero-trust-break { display: none; }
  .persona-grid, .benefits-grid, .blog-grid { grid-template-columns: 1fr; }
  .ingredient-grid { gap: 10px; }
  .ingredient-card { padding: 12px 8px; }
  .ingredient-icon { width: 36px; height: 36px; margin-bottom: 8px; }
  .ingredient-icon svg { width: 20px; height: 20px; }
  .ingredient-card h3 { font-size: 13px; margin-bottom: 4px; }
  .ingredient-card p { font-size: 11.5px; }
  .blog-post-title { font-size: 28px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .steps-row { flex-direction: column; align-items: stretch; gap: 0; margin-top: 36px; }
  .step-connector { display: none; }
  .step-item { position: relative; display: flex; align-items: flex-start; text-align: left; gap: 16px; padding-bottom: 30px; }
  .step-item:last-child { padding-bottom: 0; }
  .step-item:not(:last-child)::before {
    content: ''; position: absolute; top: 56px; left: 27px; width: 2px;
    height: calc(100% - 56px + 28px); background: var(--color-border);
  }
  .step-visual { width: 56px; height: 56px; margin: 0; flex-shrink: 0; }
  .step-visual svg { width: 26px; height: 26px; }
  .step-number { width: 22px; height: 22px; font-size: 11px; top: -2px; right: -2px; }
  .step-text { padding-top: 4px; }
  .step-item h3 { margin-bottom: 4px; }
  .step-item p { max-width: 280px; }
  .testimonial-card { flex: 0 0 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .guarantee-inner { flex-direction: column; text-align: center; }
  .closing-band { padding: 72px 0; }
  .closing-text { margin-bottom: 32px; }
  .closing-line { font-size: 16px; line-height: 1.7; }
  .closing-line--accent { font-size: 25px; margin: 10px 0; }
  .closing-line--soft { margin-top: 20px; font-size: 15px; }
}