/* Pro Beauty Gear — theme.css
   Carregado DEPOIS do CSS de cada site. Base: tokens.css (mesma pasta).
   Regras do guia: uma família (Montserrat), títulos em caixa alta, vermelho com intenção,
   quase tudo reto, sem sombra em card, sem animação de entrada, transições de 150ms. */

/* ---------- tipografia ---------- */
html, body { font-family: var(--font-sans); }
body { -webkit-font-smoothing: antialiased; }
body p { font-size: 15px; line-height: 24px; }
button, input, select, textarea, optgroup { font-family: inherit; }

h1, h2 { text-transform: uppercase; font-weight: 800; letter-spacing: -0.005em; font-family: var(--font-sans); }
h3, h4 { font-weight: 700; font-family: var(--font-sans); }
h1 em, h2 em, h1 i, h2 i { font-style: normal; color: var(--red); }

/* eyebrows: caixa alta, .28em, régua vermelha 24x2 antes do texto */
[class*="eyebrow"], [class*="kicker"], [class*="overline"], [class*="pretitle"], [class*="pre-title"],
[class*="section-label"], [class*="section-tag"], [class*="subtitle-tag"] {
  text-transform: uppercase;
  letter-spacing: .28em !important;
  font-weight: 500;
  background-image: linear-gradient(var(--red), var(--red)) !important;
  background-repeat: no-repeat !important;
  background-size: 24px 2px !important;
  background-position: left center !important;
  padding-left: 36px !important;
}
/* eyebrow centralizado: encolhe para o texto, assim a régua fica colada nele */
[class*="eyebrow"].center, [class*="eyebrow"][style*="justify-content: center"], [class*="eyebrow"][style*="justify-content:center"],
[class*="cta-final"] :is([class*="eyebrow"], [class*="section-label"], [class*="kicker"]),
:is(.center, .text-center, [class*="lamp-content"]) > :is([class*="eyebrow"], [class*="section-label"], [class*="kicker"]) {
  display: table !important; margin-left: auto !important; margin-right: auto !important;
}
/* a régua do guia substitui o enfeite antigo do eyebrow */
[class*="eyebrow"]::before, [class*="kicker"]::before, [class*="overline"]::before { display: none !important; }

/* botões: 600 / 16px */
button, .btn, [class*="btn-"], [class*="-btn"], [class^="btn"], [class*="button"], [class*="cta-btn"], [class*="nav-cta"] {
  font-weight: 600;
  font-family: var(--font-sans);
}
.btn, [class^="btn-"], [class*=" btn-"], [class*="button"]:not(div):not(section) { font-size: 16px; }

/* ---------- forma ---------- */
img, picture, video, iframe { border-radius: 0 !important; }

/* ---------- movimento: sem entrada, só 150ms ---------- */
.reveal, [class*="reveal"], .fade-in, .fade-up, .fade-in-up, .animate-on-scroll, .anim, .aos-init, [data-aos],
.slide-up, .slide-in, .will-animate, .in-view, .is-visible, .visible, [class*="fadeIn"], [class*="fade-"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  filter: none;
}
*, *::before, *::after { transition-duration: 150ms !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- foco de teclado ---------- */
:focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; }
header :focus-visible, nav :focus-visible, footer :focus-visible,
[class*="hero"] :focus-visible, [class*="stage"] :focus-visible, [class*="dark"] :focus-visible { box-shadow: var(--focus-ring-stage) !important; }

/* ---------- logo ---------- */
img.pbg-logo { height: 50px !important; width: auto !important; max-width: none !important; max-height: none !important; object-fit: contain; padding: 0 !important; filter: none !important; box-shadow: none !important; background: none !important; }
@media (max-width: 760px) { img.pbg-logo { height: 36px !important; } }

/* ---------- loja nova (pbg-config.js) ---------- */
a[data-shop]:not([href]) { display: none !important; }
/* alternativa sem loja: some quando o link da loja ao lado já estiver ativo */
a[data-shop][href] ~ .pbg-noshop { display: none !important; }

/* ---------- seleção ---------- */
::selection { background: var(--red); color: var(--on-red); }

/* sites "bundler": a faixa de erro de depuração (ex.: chat tawk.to bloqueado por CORS) não aparece para o visitante */
#__bundler_err { display: none !important; }

/* único brilho permitido é --glow-red (em CTA): títulos sem brilho/sombra */
h1, h2, h1 *, h2 * { text-shadow: none !important; }

/* ===== ajustes manuais deste site (_ferramentas/overrides/vgr-trimmers.css) ===== */
/* vgr-clippers / vgr-trimmers (mesmo styles.css, com páginas de produto)
   Palco: header, hero, CTA final, rodapé. Conteúdo (catálogo, sobre, FAQ, ficha do produto): branco com ink. */
:root {
  --vgr-green: #fb222b; --vgr-green-bright: #fb222b; --vgr-green-deep: #d9141d;
  --vgr-green-soft: rgba(251, 34, 43, 0.10); --vgr-green-line: rgba(251, 34, 43, 0.40);
  --vgr-success: #ffffff; --vgr-fg-3: #b0b0b0;
}

/* seções de conteúdo claras: as variáveis do site mudam só dentro delas */
#products, #faq, .product-top, .section-alt, .related {
  --vgr-ink: #ffffff; --vgr-surface: #ffffff; --vgr-surface-2: #f2f2f2; --vgr-surface-3: #ececec;
  --vgr-fg: #0a0a0a; --vgr-fg-2: #56606e; --vgr-fg-3: #56606e; --vgr-success: #0a0a0a;
  --vgr-line: #ececec; --vgr-line-strong: #d9d8d9;
  --vgr-chrome-soft: rgba(0, 0, 0, 0.6); --vgr-chrome-line: rgba(255, 255, 255, 0.3);
  background: var(--surface); color: var(--ink);
}
.section-alt { background: var(--surface-sunken); }
#products .eyebrow, #faq .eyebrow, .product-top .eyebrow, .section-alt .eyebrow { color: var(--ink-muted); }
.gallery-main, .card-ph, .pcard-media { background: var(--surface-sunken); }

/* título do hero bicolor */
.hero h1 span { color: var(--red); }
.hero-stat { border-left-color: var(--red); }
.hero-stat span { color: var(--on-stage-muted); }

/* botões */
.btn { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; border-radius: 6px; }
.btn:hover { transform: none; }
.btn-primary { background: var(--red); color: var(--on-red); box-shadow: none; }
.btn-primary:hover { background: var(--red-hover); }
.btn-outline { border-color: var(--stage-outline); color: var(--on-stage); }
.btn-outline:hover { border-color: var(--on-stage); color: var(--on-stage); }

/* cards: sem elevação/sombra, contorno 1px */
.pcard, .card { box-shadow: none; }
.pcard:hover, .card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.pcard::before { display: none; }
.pcard:hover .pcard-media img { transform: scale(1.03); }

/* "Shop Now" (vai para a ficha interna): botão escuro, só o glow-red permitido */
.shop-btn { filter: none; }
.shop-btn:hover, .shop-btn:focus-visible { filter: none; }
.shop-btn-glow { display: none; }
.shop-btn-face { background: var(--ink-fill); border-color: var(--ink-fill); box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; }
.shop-btn:hover .shop-btn-face, .shop-btn:focus-visible .shop-btn-face { background: var(--ink-fill); border-color: var(--red); box-shadow: none; opacity: .85; }

/* CTA final no palco */
.cta-final { background: var(--stage); border-top-color: var(--stage-line); }
.logo img.pbg-logo { padding: 0 !important; }

/* header sólido (sobre conteúdo branco ficava cinza) e botão contornado em fundo claro */
header { background: var(--stage); border-bottom-color: var(--stage-line); }
.product-top .btn-outline, .section-alt .btn-outline, #products .btn-outline { border-color: var(--ink); color: var(--ink); }
.product-top .btn-outline:hover { background: var(--ink-fill); color: var(--on-ink-fill); }
.tag { border-radius: 4px; }

/* ===== contraste medido (_ferramentas/overrides/vgr-trimmers.auto.css) ===== */
/* gerado por pbg-contrast.mjs: cor do texto ajustada para contraste >= 4,5:1 (3:1 em texto grande) */