/* ==========================================================================
   OláBebê · v2.css · camada visual "Pista" (Direção A-final aprovada pelo conselho 22/09/2026)
   Carrega DEPOIS de main.css. main.css continua dono de: drawer, sidecart, formulários,
   carrinho, conta, checkout, avisos do Woo. Aqui: tokens, header/footer, home, categoria, produto.
   Lei: 1 hero assinatura + 1 narrativa de scroll + 2-3 microinterações. Só transform/opacity.
   ========================================================================== */

/* 1. Tokens v2 (px, como no mockup) ---------------------------------------- */
:root {
	--ob-border: rgba(42, 35, 64, .09);
	--ob-border-2: rgba(42, 35, 64, .35); /* bordas de controle >= 3:1 sobre off-white */
	--ob-shadow-v2: 0 18px 44px -18px rgba(94, 68, 160, .32);
	--ob-header-h: 84px;
	--v2-h1: clamp(64px, 9vw, 132px);
	--v2-h2: clamp(48px, 5.4vw, 78px);
	--v2-h2-s: clamp(40px, 4.4vw, 60px);
	--v2-h3: clamp(32px, 3.4vw, 46px);
	/* 24/09/2026 (tela-cheia): variantes com teto também em svh — em telas
	   baixas (ex. 1366×657) o título deixa de crescer só por vw e passa a
	   ceder altura pro resto do bloco caber em 1 tela. Em telas normais/altas
	   o min() não muda nada (o vw já satura antes do svh entrar). */
	--v2-h2-fit: clamp(40px, min(5.4vw, 9svh), 78px);
	--v2-h2-s-fit: clamp(34px, min(4.4vw, 7.4svh), 60px);
}
body.ob { font-size: 17px; }
html { scroll-padding-top: calc(var(--ob-header-h) + 16px); }
body.ob :focus-visible { outline: 3px solid var(--ob-azul-ink); outline-offset: 3px; }
body.ob .screen-reader-text:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; white-space: normal; z-index: 100; background: var(--ob-ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 800; }
[inert] { pointer-events: none; }
body.ob h1, body.ob h2, body.ob h3 { font-weight: 900; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
body.ob a:hover { text-decoration: none; }
body.ob .ob-container { width: min(1320px, calc(100% - 96px)); }
@media (max-width: 768px) { body.ob .ob-container { width: calc(100% - 40px); } }
.v2-num { font-family: var(--ob-font-alt); font-weight: 500; font-variant-numeric: tabular-nums; }
.v2-lbl { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-roxo-escuro); }

/* Botões v2: pill 56px com ícone em ilha, hover desloca o ícone (microinteração 3) */
.v2-btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 26px; border-radius: 999px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; text-decoration: none !important; transition: transform 160ms var(--ob-ease), background-color 200ms var(--ob-ease), border-color 200ms var(--ob-ease); }
.v2-btn .ob-btn__ic, .v2-btn .v2-ic { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; margin: 0; background: rgba(255, 255, 255, .18); transition: transform 220ms var(--ob-ease); }
.v2-btn:hover .ob-btn__ic, .v2-btn:hover .v2-ic { transform: translateX(3px); }
.v2-btn:active { transform: scale(.97); }
.v2-btn--p { background: var(--ob-roxo-cta); color: #fff; }
.v2-btn--p:hover { background: var(--ob-roxo-escuro); color: #fff; }
.v2-btn--ink { background: var(--ob-ink); color: #fff; }
.v2-btn--ink:hover { background: #3a3155; color: #fff; }
.v2-btn--g { border: 1.5px solid rgba(42, 35, 64, .18); color: var(--ob-ink); padding-right: 26px; }
.v2-btn--g:hover { border-color: var(--ob-ink); }
.v2-btn--sm { height: 44px; padding: 0 6px 0 18px; font-size: 14px; }
.v2-btn--sm .ob-btn__ic, .v2-btn--sm .v2-ic { width: 32px; height: 32px; }
.v2-btn.is-loading { opacity: .6; pointer-events: none; }

/* Preço v2: número Fredoka grande, "de" pequeno riscado (dado do Woo) */
.v2-price { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.v2-price .de { font-size: 14px; color: var(--ob-ink-2); text-decoration: line-through; text-decoration-color: rgba(42, 35, 64, .45); font-weight: 600; }
.v2-price .por { font-family: var(--ob-font-alt); font-weight: 500; font-size: 38px; line-height: 1; letter-spacing: -.01em; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.v2-price .por small { font-size: .55em; vertical-align: top; margin-right: 2px; }
.v2-price--md .por { font-size: 30px; }
.v2-price--sm .por { font-size: 22px; }

/* 2. Header v2 ------------------------------------------------------------ */
body.ob .ob-header { height: 84px; background: rgba(255, 253, 251, 0); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
body.ob .ob-header.is-scrolled { background: rgba(255, 253, 251, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--ob-border); box-shadow: none; }
body.ob .ob-header__in { gap: 40px; }
body.ob .ob-nav { gap: 28px; margin-right: 0; }
body.ob .ob-nav a { padding: 0; border-radius: 0; font-weight: 700; font-size: 15px; background: none; position: relative; white-space: nowrap; }
body.ob .ob-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--ob-roxo); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ob-ease); }
body.ob .ob-nav a:hover::after, body.ob .ob-nav a.is-active::after { transform: scaleX(1); }
body.ob .ob-nav a:hover, body.ob .ob-nav a.is-active { background: none; color: var(--ob-ink); }
body.ob .ob-search { flex: 0 1 220px; margin-left: auto; }
body.ob .ob-search input { height: 40px; border-color: transparent; background: rgba(42, 35, 64, .05); font-size: 14px; }
body.ob .ob-search input:focus { background: #fff; border-color: var(--ob-roxo); }
body.ob .ob-search button { top: 4px; right: 4px; }
body.ob .ob-actions { gap: 2px; }
body.ob .ob-actions .v2-btn { margin-left: 10px; }
@media (max-width: 1199px) { body.ob .ob-search { display: none; } body.ob .ob-nav { margin-right: auto; } }
/* 24/09/2026: corte subiu de 1023 para 1063 junto com main.css (mesmo motivo:
   nav completa + botão "Ver modelos" não cabiam mais em ~1024-1059px — o botão
   (.ob-actions .v2-btn) era o elemento que de fato estourava o container, não
   dava pra corrigir só escondendo a nav em main.css sem esconder o botão aqui
   também). Medido com puppeteer: 0px de rolagem horizontal em 1024-1180px
   depois da mudança. */
@media (max-width: 1063px) {
	body.ob .ob-header__in { justify-content: space-between; width: 100%; }
	body.ob .ob-logo { margin-right: auto; }
	body.ob .ob-actions { margin-left: auto; }
	body.ob .ob-actions .v2-btn { display: none; }
}
@media (max-width: 768px) {
	/* 23/09/2026: header mobile limpo e proporcional — logo a esquerda, acoes a direita,
	   alvo de toque 44px preservado (nao reduzir: e o minimo de acessibilidade do tema). */
	body.ob .ob-header { height: 68px; padding: 0 16px; }
	body.ob .ob-header__in { justify-content: space-between; align-items: center; gap: 8px; width: 100%; max-width: 100%; padding: 0; }
	body.ob .ob-logo { margin-right: auto; flex: none; display: flex; align-items: center; }
	body.ob .ob-logo img { height: 36px; width: auto; }
	body.ob .ob-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
	body.ob .ob-actions .v2-btn { display: none !important; }
	body.ob .ob-action { width: 44px; height: 44px; }
}
:root { --ob-header-h: 84px; }
@media (max-width: 768px) { :root { --ob-header-h: 68px; } }

/* 3. HERO assinatura --------------------------------------------------------- */
/* Tela cheia em QUALQUER matriz largura x altura (decisao 23/09/2026): svh no
   lugar de vh (nao recalcula com a barra do navegador mobile) e o padding
   vertical + o tamanho do h1 passam a reagir tambem a altura (svh), nao so a
   largura (vw). Sem isso, em notebook de tela baixa (1366x657: precisava de
   ~752px e so tinha 657) o hero passava do teto da tela e exigia rolagem —
   com svh puro isolado (sem o clamp de padding/h1) o texto ainda estourava
   pra fora do min-height. Em tela alta o clamp() satura no valor de sempre
   (168/120/9vw), entao nada muda ali. */
/* 24/09/2026 (tela-cheia): a faixa .v2-facts (fatos "3 a 8 anos" etc.) vem logo
   depois do hero e ocupa ~25px fixos (borda+linha, com padding zerado pelo
   reset ul[class] de main.css:104, especificidade maior — não mexido aqui,
   fora de escopo). Sem descontar isso o hero+facts passava 25px do viewport
   em QUALQUER altura testada (657 a 1440, sempre +25). Hero agora reserva
   exatamente esse espaço para que hero+facts = 1 tela cheia. */
.v2-hero { position: relative; min-height: calc(100svh - 25px); overflow: hidden; margin-top: calc(-1 * var(--ob-header-h)); }
.v2-hero .ob-container { position: relative; padding-top: clamp(96px, 12svh + 60px, 168px); min-height: calc(100svh - 25px); padding-bottom: clamp(60px, 10svh, 120px); }
.v2-hero h1 { font-size: clamp(64px, min(9vw, 14svh), 132px); letter-spacing: -.035em; line-height: .9; max-width: 8ch; position: relative; z-index: 3; margin: 0; }
.v2-hero h1 em { font-style: normal; color: var(--ob-roxo); }
.v2-hero__sub { margin: 30px 0 0; font-size: 20px; max-width: 32ch; color: var(--ob-ink-2); position: relative; z-index: 3; }
.v2-hero__ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; position: relative; z-index: 3; }
.v2-hero__media { position: absolute; right: 0; top: 84px; bottom: 0; width: 58vw; border-radius: 56px 0 0 0; overflow: hidden; z-index: 1; background: var(--ob-lilas-100); margin: 0; }
.v2-hero__media picture, .v2-hero__media img { width: 100%; height: 100%; }
/* Foto nova (22/09/2026): o carrinho é o protagonista e ocupa o terço central-direito
   do quadro; o terço esquerdo é fundo desfocado de propósito. A janela de recorte do
   painel direito é estreita, então o foco vai para 86% para não cortar o produto. */
.v2-hero__media img { object-fit: cover; object-position: 86% 58%; }
.v2-hero__media figcaption { position: absolute; left: 28px; bottom: 24px; color: #fff; font-family: var(--ob-font-alt); font-weight: 500; font-size: 14px; letter-spacing: .02em; background: rgba(42, 35, 64, .58); padding: 8px 14px; border-radius: 999px; }
.v2-trilha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.v2-trilha path { fill: none; stroke: var(--ob-roxo); stroke-width: 7; stroke-linecap: round; }
.v2-trilha .dash { stroke: #fff; stroke-width: 2; stroke-dasharray: 14 18; }
/* entrada (só desktop, com JS e motion permitido; mobile é estático por decisão do conselho) */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
	html.js .v2-hero h1, html.js .v2-hero__sub, html.js .v2-hero__ctas { opacity: 0; transform: translateY(22px); transition: opacity 620ms var(--ob-ease), transform 620ms var(--ob-ease); }
	html.js .v2-hero__sub { transition-delay: 90ms; }
	html.js .v2-hero__ctas { transition-delay: 170ms; }
	/* 23/09/2026 (achado P1 #7, LCP): a foto (.v2-hero__media img) É o elemento LCP da Home.
	   Animar clip-path/transform NELA mesma zera os pixels visíveis até a transição avançar —
	   Lighthouse media elementRenderDelay de 1,1-1,2s. A foto agora pinta cheia no 1º frame;
	   a animação de entrada fica só em h1/sub/ctas/trilha (não são o LCP). */
	html.js .v2-trilha path { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 1500ms var(--ob-ease) 500ms; }
	html.js .v2-trilha .dash { stroke-dasharray: 14 18; stroke-dashoffset: 0; opacity: 0; transition: opacity 400ms 1500ms; }
	html.js body.v2-in .v2-hero h1, html.js body.v2-in .v2-hero__sub, html.js body.v2-in .v2-hero__ctas { opacity: 1; transform: none; }
	html.js body.v2-in .v2-trilha path { stroke-dashoffset: 0; }
	html.js body.v2-in .v2-trilha .dash { opacity: 1; }
}
.v2-facts { position: relative; z-index: 2; display: flex; gap: 44px; padding: 22px 0; border-top: 1px solid var(--ob-border); border-bottom: 1px solid var(--ob-border); font-weight: 700; font-size: 15px; color: var(--ob-ink-2); list-style: none; margin: 0; }
.v2-facts b { color: var(--ob-ink); font-weight: 900; }
.v2-facts__l { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-roxo-escuro); }
@media (max-width: 768px) {
	.v2-hero { min-height: auto; }
	.v2-hero .ob-container { padding-top: 104px; min-height: auto; padding-bottom: 0; }
	.v2-hero h1 { font-size: 56px; max-width: none; }
	.v2-hero__sub { font-size: 16px; margin-top: 16px; max-width: none; }
	.v2-hero__ctas { margin-top: 20px; align-items: center; gap: 6px 18px; }
	.v2-hero__ctas .v2-btn--g { border: 0; padding: 10px 0; min-height: 44px; height: auto; font-weight: 800; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: var(--ob-roxo); }
	.v2-hero__media, html.js .v2-hero__media { position: relative; top: auto; right: auto; bottom: auto; width: calc(100% + 40px); margin-left: -20px; margin-top: 28px; aspect-ratio: 9 / 8; border-radius: 0; clip-path: none; transition: none; }
	.v2-hero__media img, html.js .v2-hero__media img { object-position: 50% 62%; transform: none; }
	.v2-hero__media figcaption { left: 20px; bottom: 16px; font-size: 13px; }
	.v2-trilha { display: none; }
	.v2-facts { gap: 16px 26px; flex-wrap: wrap; font-size: 14px; padding: 18px 0; }
}

/* 4. NARRATIVA DE SCROLL: painel fixo + cards que empilham + trilha vertical --- */
.v2-story { padding: 150px 0 120px; position: relative; }
.v2-story__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.v2-story__pin { position: sticky; top: 110px; }
.v2-story h2 { font-size: var(--v2-h2); letter-spacing: -.03em; line-height: .95; margin: 0; }
.v2-story h2 span { color: var(--ob-roxo); }
.v2-tabs { display: flex; gap: 6px; margin-top: 36px; padding: 6px; background: var(--ob-lilas-100); border-radius: 999px; width: max-content; max-width: 100%; }
.v2-tabs button { height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--ob-ink-2); white-space: nowrap; transition: color 200ms, background-color 200ms, box-shadow 200ms; }
.v2-tabs button.on { background: #fff; color: var(--ob-ink); box-shadow: 0 6px 18px -8px rgba(94, 68, 160, .35); }
.v2-panel { position: relative; margin-top: 26px; min-height: 300px; }
.v2-panel__p { position: absolute; inset: 0; opacity: 0; filter: blur(3px); transform: translateY(6px); transition: opacity 260ms var(--ob-ease), filter 260ms var(--ob-ease), transform 260ms var(--ob-ease); pointer-events: none; }
.v2-panel__p.on { opacity: 1; filter: none; transform: none; pointer-events: auto; position: relative; }
.v2-panel__desc { font-size: 18px; color: var(--ob-ink-2); max-width: 40ch; margin: 0; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.v2-chips span { font-family: var(--ob-font-alt); font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--ob-lilas-50); color: var(--ob-roxo-escuro); }
.v2-colors { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ob-ink-2); font-weight: 700; }
.v2-colors .sw { display: flex; gap: 6px; }
.v2-colors i, .v2-sw { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(42, 35, 64, .14); display: inline-block; flex: none; }
.v2-colors b { color: var(--ob-ink); font-weight: 800; }
.v2-colors .names { flex-basis: 100%; margin-top: -2px; }
.v2-buyrow { display: flex; align-items: center; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.v2-stackwrap { position: relative; padding-left: 44px; }
.v2-trail { position: absolute; left: 12px; top: 0; bottom: 0; width: 3px; background: var(--ob-lilas-100); border-radius: 999px; }
.v2-trail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ob-roxo); border-radius: 999px; transform-origin: top; transform: scaleY(var(--p, 0)); }
.v2-trail b { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 3px solid var(--ob-roxo); transform: translate(-50%, -50%); transition: top 80ms linear; }
.v2-stack { display: grid; gap: 28px; }
.v2-card { position: sticky; top: 110px; border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(42, 35, 64, .06), var(--ob-shadow-v2); transform-origin: top center; transition: transform 200ms var(--ob-ease), opacity 200ms var(--ob-ease); display: block; color: inherit; text-decoration: none !important; }
.v2-card:nth-child(2) { top: 134px; }
.v2-card:nth-child(3) { top: 158px; }
.v2-card img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.v2-card__cap { display: flex; justify-content: space-between; align-items: center; padding: 18px 26px; font-weight: 800; font-size: 17px; gap: 16px; flex-wrap: wrap; }
.v2-card__cap small { font-weight: 700; color: var(--ob-ink-2); font-size: 14px; white-space: nowrap; }
.v2-card__cap .v2-num { font-size: 20px; color: var(--ob-ink); }
.v2-selo { position: absolute; right: 22px; top: 22px; width: 74px; height: 74px; border-radius: 999px; background: var(--ob-amarelo); color: var(--ob-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--ob-font-alt); font-weight: 500; font-size: 15px; line-height: 1; text-align: center; transform: rotate(-8deg); box-shadow: 0 10px 24px -10px rgba(42, 35, 64, .35); }
.v2-selo small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .04em; margin-top: 2px; }
.v2-stack__spacer { height: 12vh; }
@media (max-width: 768px) {
	.v2-story { padding: 88px 0 64px; }
	.v2-story__grid { grid-template-columns: 1fr; gap: 32px; }
	.v2-story__pin { position: static; }
	.v2-tabs { width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
	.v2-tabs button { flex: 1 0 auto; padding: 0 14px; font-size: 14px; }
	.v2-panel { min-height: 0; }
	.v2-stackwrap { padding-left: 0; }
	.v2-trail { display: none; }
	.v2-card { position: static; transform: none !important; opacity: 1 !important; }
	.v2-stack__spacer { display: none; }
	.v2-selo { width: 62px; height: 62px; font-size: 13px; right: 14px; top: 14px; }
	.v2-card__cap { padding: 14px 18px; font-size: 15px; gap: 6px 12px; }
	.v2-card__cap small { font-size: 13px; }
}

/* 5. FRASE + FOTO FULL-BLEED -------------------------------------------------- */
/* 5b. TURN — "o giro" (refeita 22/09/2026; substitui .v2-claim + .v2-bleed, que eram
   um full-bleed escuro com a legenda solta no canto). Composição: painel de imagem
   + coluna editorial com hierarquia kicker → h2 → fatos → link. */
.v2-turn { padding: 120px 0 110px; }
.v2-turn__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.v2-turn__media { position: relative; margin: 0; border-radius: 40px; overflow: hidden; background: var(--ob-lilas-100); aspect-ratio: 5 / 4; }
.v2-turn__media picture { display: block; width: 100%; height: 100%; }
.v2-turn__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Legenda: faixa legível de verdade (não texto solto com sombra), ancorada na base do painel. */
.v2-turn__media figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 56px 28px 24px; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.25; background: linear-gradient(to top, rgba(26, 20, 44, .82) 0%, rgba(26, 20, 44, .55) 46%, rgba(26, 20, 44, 0) 100%); }
.v2-turn__badge { flex: none; display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 999px; background: var(--ob-white); color: var(--ob-roxo-ink); font-family: var(--ob-font-alt); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.v2-kicker { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-roxo-escuro); margin: 0 0 18px; }
.v2-turn__txt h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; line-height: .98; margin: 0; max-width: 14ch; text-wrap: balance; }
.v2-turn__txt h2 .dim { color: #8E82A8; }
.v2-turn__facts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.v2-turn__facts li { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 0 14px; padding: 18px 0; border-top: 1px solid var(--ob-border); }
.v2-turn__facts li:last-child { border-bottom: 1px solid var(--ob-border); }
.v2-turn__ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ob-lilas-50); color: var(--ob-roxo-escuro); }
.v2-turn__facts b { font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.v2-turn__facts small { font-size: 14px; color: var(--ob-ink-2); line-height: 1.35; }
.v2-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 800; font-size: 16px; color: var(--ob-roxo-ink); text-decoration: none !important; }
.v2-link .v2-ic { display: inline-flex; transition: transform var(--ob-t, 220ms) ease; }
.v2-link:hover { color: var(--ob-roxo-cta); }
.v2-link:hover .v2-ic { transform: translateX(4px); }
@media (max-width: 899px) {
	.v2-turn { padding: 72px 0 64px; }
	.v2-turn__grid { grid-template-columns: 1fr; gap: 32px; }
	.v2-turn__media { aspect-ratio: 4 / 3; border-radius: 28px; }
	.v2-turn__media figcaption { padding: 48px 18px 18px; font-size: 15px; gap: 12px; }
	.v2-turn__badge { min-width: 48px; height: 48px; font-size: 16px; }
	.v2-turn__txt h2 { max-width: 18ch; }
	.v2-turn__facts { margin-top: 28px; }
}

/* 6. SPECS: foto real + linhas abertas --------------------------------------- */
.v2-specs { padding: 150px 0 110px; overflow: hidden; }
.v2-specs__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.v2-specs h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; max-width: 12ch; margin: 0; }
.v2-lead { margin: 14px 0 0; color: var(--ob-ink-2); font-size: 18px; max-width: 40ch; }
.v2-speclist { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.v2-spec { padding: 22px 0; border-top: 1px solid var(--ob-border); }
.v2-spec .v2-num { font-size: 40px; letter-spacing: -.02em; line-height: 1; color: var(--ob-roxo); display: block; }
.v2-spec .v2-num small { font-size: .5em; }
.v2-spec b { display: block; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; margin-top: 8px; }
.v2-spec p { font-size: 15px; color: var(--ob-ink-2); margin: 4px 0 0; max-width: 26ch; }
.v2-macro { position: relative; aspect-ratio: 4 / 5; border-radius: 40px; overflow: hidden; background: var(--ob-lilas-100); margin: 0; }
.v2-macro picture, .v2-macro img { width: 100%; height: 100%; }
.v2-macro img { object-fit: cover; object-position: 50% 60%; }
.v2-tag-img { position: absolute; left: 22px; bottom: 20px; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .04em; color: #fff; background: rgba(42, 35, 64, .58); padding: 8px 14px; border-radius: 999px; }
@media (max-width: 768px) {
	.v2-specs { padding: 80px 0 60px; }
	.v2-specs__grid { grid-template-columns: 1fr; gap: 28px; }
	.v2-speclist { grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 28px; }
	.v2-spec .v2-num { font-size: 32px; }
	.v2-spec b { font-size: 16px; }
	.v2-spec p { font-size: 14px; }
	.v2-macro { order: -1; aspect-ratio: 1; border-radius: 28px; }
	.v2-tag-img { left: 16px; bottom: 14px; font-size: 12px; }
}

/* 7. SEÇÃO DO SELETOR na home (a régua só-idade saiu em 22/09/2026; o componente
   vive em template-parts/chooser.php e no bloco 14 deste arquivo) ---------------- */
.v2-ruler { padding: 120px 0 140px; background: var(--ob-lilas-50); }
.v2-others { margin: 22px 0 0; font-weight: 600; color: var(--ob-ink-2); font-size: 15px; }
.v2-others a { font-weight: 800; color: var(--ob-roxo-escuro); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) { .v2-ruler { padding: 80px 0; } }

/* 8. OFERTA ------------------------------------------------------------------- */
.v2-offer { padding: 150px 0; }
.v2-offer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.v2-offer h2 { font-size: clamp(44px, 5vw, 72px); letter-spacing: -.03em; line-height: .95; margin: 0; }
.v2-offer .row { display: flex; align-items: center; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.v2-why { margin: 28px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ob-ink-2); font-weight: 600; list-style: none; }
.v2-why li { padding-left: 20px; position: relative; }
.v2-why li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 999px; background: var(--ob-verde); }
.v2-offer figure { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ob-lilas-100); margin: 0; }
.v2-offer figure picture, .v2-offer figure img { width: 100%; height: 100%; }
.v2-offer figure img { object-fit: cover; }
@media (max-width: 768px) { .v2-offer { padding: 72px 0; } .v2-offer__grid { grid-template-columns: 1fr; gap: 32px; } .v2-offer figure { aspect-ratio: 1; order: -1; } }

/* 9. FAQ (home, categoria, produto) ----------------------------------------- */
.v2-faq { padding: 0 0 150px; }
.v2-faq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.v2-faq h2 { font-size: clamp(36px, 3.8vw, 52px); letter-spacing: -.03em; max-width: 14ch; margin: 0; }
.v2-faq__lina { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ob-lilas-100); }
.v2-faq__lina picture, .v2-faq__lina img { width: 100%; height: 100%; }
.v2-faq__lina img { object-fit: cover; object-position: 50% 0; }
.v2-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.v2-faq details { border-top: 1px solid var(--ob-border); padding: 22px 0; }
.v2-faq summary { font-weight: 800; font-size: 18px; list-style: none; display: flex; justify-content: space-between; cursor: pointer; gap: 16px; }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: "+"; font-family: var(--ob-font-alt); color: var(--ob-roxo); font-size: 22px; line-height: 1; flex: none; }
.v2-faq details[open] summary::after { content: "–"; }
.v2-faq p { margin: 12px 0 0; color: var(--ob-ink-2); max-width: 48ch; }
@media (max-width: 768px) { .v2-faq { padding-bottom: 72px; } .v2-faq__grid { grid-template-columns: 1fr; gap: 0; } .v2-faq__lina { width: 96px; height: 96px; border-radius: 18px; } .v2-faq__head { margin-bottom: 24px; } }

/* 10. Footer editorial --------------------------------------------------------- */
body.ob .ob-footer { margin-top: 0; background: var(--ob-bg); color: var(--ob-ink); border-radius: 0; border-top: 1px solid var(--ob-border); padding: 96px 0 40px; }
body.ob .ob-footer a { color: var(--ob-ink); }
body.ob .ob-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; font-size: 15px; }
body.ob .ob-footer__brand img { height: 44px; margin-bottom: 16px; }
body.ob .ob-footer__brand p { color: var(--ob-ink-2); max-width: 30ch; font-size: 15px; }
body.ob .ob-footer .ob-footer__h { color: var(--ob-ink-2); font-size: 13px; letter-spacing: .08em; }
body.ob .ob-footer li a { font-weight: 600; }
body.ob .ob-footer__contact .ob-i { color: var(--ob-roxo); }
body.ob .ob-social a { background: var(--ob-lilas-100); color: var(--ob-roxo-escuro); }
body.ob .ob-social a:hover { background: var(--ob-lilas-200); }

/* ---------- selos de pagamento (rodape) 29/09/2026 ----------
   Faixa horizontal propria, largura total, abaixo das colunas (padrao Eletroboom).
   Antes ficava dentro da coluna ATENDIMENTO e estourava a largura. */
body.ob .ob-footer__grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
@media (min-width: 769px) and (max-width: 1199px) { body.ob .ob-footer__grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,.95fr) minmax(0,1.4fr); gap: 32px; } }
body.ob .ob-footer__contact li { min-width: 0; }
body.ob .ob-footer__contact li a, body.ob .ob-footer__contact li span:not(.ob-i) { min-width: 0; overflow-wrap: anywhere; }
body.ob .ob-footer__pay { display: block; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ob-border); }
body.ob .ob-footer__pay-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
body.ob .ob-pay-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ob-border); border-radius: 8px; padding: 0 10px; height: 30px; box-sizing: border-box; }
body.ob .ob-pay-chip img { height: 18px; width: auto; max-width: 40px; display: block; object-fit: contain; }
body.ob .ob-pay-chip--wide img { max-width: 64px; }
body.ob .ob-footer__pay-line { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--ob-ink-2); margin: 0 0 6px; }
body.ob .ob-footer__pay-line .ob-i { flex: none; width: 13px; height: 13px; padding: 0; background: none; color: var(--ob-roxo-escuro); }
body.ob .ob-footer__pay-verify { margin: 0; }
body.ob .ob-footer__pay-verify a { font-size: 12px; color: var(--ob-ink-2); text-decoration: underline; text-underline-offset: 3px; }
body.ob .ob-footer__pay-verify a:hover { color: var(--ob-roxo-escuro); }
@media (max-width: 480px) {
  body.ob .ob-footer__pay { margin-top: 36px; padding-top: 20px; }
  body.ob .ob-footer__pay-badges { gap: 6px; }
  body.ob .ob-pay-chip { height: 28px; padding: 0 8px; }
  body.ob .ob-pay-chip img { height: 16px; max-width: 34px; }
  body.ob .ob-pay-chip--wide img { max-width: 54px; }
  body.ob .ob-footer__pay-line { align-items: flex-start; }
  body.ob .ob-footer__pay-line .ob-i { margin-top: 2px; }
}
.v2-mark { font-weight: 900; font-size: min(21vw, 300px); letter-spacing: -.06em; line-height: .8; color: var(--ob-lilas-100); margin-top: 56px; user-select: none; white-space: nowrap; overflow: hidden; }
body.ob .ob-footer__bottom { margin-top: 24px; padding-top: 0; border-top: 0; font-size: 13px; color: var(--ob-ink-2); }
body.ob .ob-footer__bottom a { color: var(--ob-ink-2); }
@media (max-width: 768px) { body.ob .ob-footer { padding-top: 64px; } body.ob .ob-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } body.ob .ob-footer__grid > div:first-child { grid-column: 1 / -1; } .v2-mark { font-size: 17vw; } }
/* 23/09/2026 P1: 2 colunas ate 599px estourava a pagina em 381px a 360/375/390 —
   ".ob-footer__brand" (361px) + coluna nao cabiam. 1 coluna abaixo de 400px. */
@media (max-width: 399px) { body.ob .ob-footer__grid { grid-template-columns: minmax(0,1fr); } }

/* 11. CATEGORIA / LOJA --------------------------------------------------------- */
.v2-cat { padding: 48px 0 0; }
body.ob .ob-breadcrumb { font-size: 14px; color: var(--ob-ink-2); margin-bottom: 28px; padding-top: 0 !important; }
.v2-cat__head { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.v2-cat h1 { font-size: var(--v2-h2); letter-spacing: -.035em; line-height: .92; margin: 0; }
.v2-cat h1 em { font-style: normal; color: var(--ob-roxo); }
.v2-cat__lead { margin: 22px 0 0; font-size: 18px; color: var(--ob-ink-2); max-width: 44ch; }
.v2-cat__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.v2-cat__facts div { padding: 16px 0; border-top: 1px solid var(--ob-border); }
.v2-cat__facts .v2-num { display: block; font-size: 30px; color: var(--ob-roxo); line-height: 1; }
.v2-cat__facts small { display: block; margin-top: 6px; font-weight: 700; color: var(--ob-ink-2); font-size: 14px; }
.v2-cat__facts .v2-num { letter-spacing: -.02em; }
.v2-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 56px 0 28px; padding-top: 24px; border-top: 1px solid var(--ob-border); }
.v2-filters__l { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-ink-2); margin-right: 8px; }
.v2-filters button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; font-weight: 800; font-size: 14px; background: #fff; border: 1.5px solid var(--ob-border-2); color: var(--ob-ink-2); transition: border-color 200ms, color 200ms, background-color 200ms; }
.v2-filters button.is-active, .v2-filters button:hover { border-color: var(--ob-roxo); color: var(--ob-ink); background: var(--ob-lilas-50); }
.v2-filters button.is-all { padding-left: 14px; }
.v2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.v2-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.v2-pcard.is-hidden { display: none; }
/* Miniatura do card (corrigido 22/09/2026).
   Bug medido em produção: a caixa era 4/3 (contentbox 421x265) mas `place-items:center`
   deixa o item com altura indefinida, então `height:100%` do <picture>/<img> caía para
   auto e a imagem quadrada renderizava 371x371 dentro de 265px com overflow:hidden —
   28,4% do produto cortado em TODOS os 29 cards.
   Correção sistêmica: (a) caixa quadrada, que é a proporção de 29/29 das fotos do
   catálogo; (b) `max-height/max-width:100%` como trava dura, para que nenhuma foto
   futura de outra proporção volte a estourar a caixa. */
/* Superfície do card: NEUTRA e respiro curto de propósito.
   Medição 22/09/2026 das 29 fotos: os 5 rolimãs têm fundo CHAPADO #FFF1F1 (rosa-claro);
   os 24 Drift têm fundo de estúdio COM GRADIENTE (#E0E1E0 a #FEFEFE, cantos diferentes).
   São duas produções fotográficas distintas — nenhuma cor de card reconcilia as duas, e
   aumentar o padding só destaca mais o quadrado da foto. Mantido fundo neutro + 6%. */
.v2-pcard__media { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ob-border); display: grid; place-items: center; padding: 6%; }
.v2-pcard__media picture { display: grid; place-items: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; }
.v2-pcard__media img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; transition: transform 700ms var(--ob-ease); }
.v2-pcard:hover .v2-pcard__media img { transform: scale(1.04); }
.v2-pcard__body { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 4px 0; border-top: 0; }
.v2-pcard__name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; margin: 0; letter-spacing: -.01em; }
.v2-pcard__name a { color: inherit; text-decoration: none !important; }
.v2-pcard__name a::after { content: ""; position: absolute; inset: 0; }
.v2-pcard__line { display: block; font-size: 13px; font-weight: 700; color: var(--ob-ink-2); margin-top: 4px; }
.v2-pcard__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; position: relative; z-index: 1; }
.v2-pcard__foot .v2-btn { height: 44px; }
.v2-empty { padding: 64px 0; text-align: center; color: var(--ob-ink-2); }
.v2-cat__section { padding: 96px 0 0; }
.v2-cat__section h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; margin: 0; }
.v2-cat__section .v2-sub { color: var(--ob-ink-2); font-weight: 700; margin: 8px 0 0; }
.v2-cat__section .v2-shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.v2-ficha { padding: 140px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.v2-ficha h2 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.03em; margin: 0 0 28px; }
.v2-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 32px; margin: 0; }
.v2-dl dt, .v2-dl dd { padding: 14px 0; border-top: 1px solid var(--ob-border); margin: 0; }
.v2-dl dt { font-weight: 800; }
.v2-dl dd { color: var(--ob-ink-2); }
.v2-box { margin: 36px 0 0; padding: 0; list-style: none; }
.v2-box li { padding: 12px 0; border-top: 1px solid var(--ob-border); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.v2-box .ob-i { color: var(--ob-verde-ink); }
.v2-box__h { margin: 0 0 4px; }
body.ob .woocommerce-pagination ul { margin: 48px 0 0; }
@media (max-width: 899px) { .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .v2-ficha { grid-template-columns: 1fr; gap: 48px; padding-top: 88px; } }
@media (max-width: 768px) {
	.v2-cat { padding-top: 24px; }
	.v2-cat__head { grid-template-columns: 1fr; gap: 28px; }
	.v2-cat h1 { font-size: 44px; }
	.v2-cat__lead { font-size: 16px; }
	.v2-cat__facts .v2-num { font-size: 26px; }
	.v2-filters { margin: 32px 0 20px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
	.v2-filters button { flex: none; }
	.v2-pcard__media { border-radius: 20px; }
	.v2-pcard__name { font-size: 15px; }
	.v2-pcard__body { padding-top: 12px; flex-direction: column; gap: 6px; }
	.v2-pcard__body .v2-price--sm .por { font-size: 20px; }
	.v2-pcard__foot { margin-top: 10px; }
	.v2-pcard__foot .v2-btn { height: 40px; font-size: 13px; padding-left: 14px; }
	.v2-dl { grid-template-columns: 1fr; gap: 0; }
	.v2-dl dd { border-top: 0; padding-top: 0; }
}
@media (max-width: 599px) { .v2-grid { gap: 24px 12px; } }

/* 12. PRODUTO ------------------------------------------------------------------- */
.v2-product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding-top: 8px; }
.v2-gal { position: sticky; top: calc(var(--ob-header-h) + 16px); min-width: 0; }
.v2-gal__main { position: relative; aspect-ratio: 1; border-radius: 40px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ob-border); display: grid; place-items: center; padding: 5%; }
.v2-gal__main picture { width: 100%; height: 100%; display: grid; place-items: center; }
.v2-gal__main img { width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms var(--ob-ease), filter 220ms var(--ob-ease); }
.v2-gal__main.is-switching img { opacity: 0; filter: blur(2px); }
.v2-gal__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.v2-gal__thumbs::-webkit-scrollbar { display: none; }
.v2-gal__thumbs button { flex: none; width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: var(--ob-lilas-50); border: 2px solid transparent; padding: 6px; transition: border-color 200ms, transform 200ms var(--ob-ease); }
.v2-gal__thumbs button:hover { transform: translateY(-2px); }
.v2-gal__thumbs button.is-active { border-color: var(--ob-roxo); background: #fff; }
.v2-gal__thumbs picture, .v2-gal__thumbs img { width: 100%; height: 100%; }
.v2-gal__thumbs img { object-fit: contain; }
.v2-buy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.v2-buy__line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-buy__line .v2-lbl { color: var(--ob-ink-2); }
.v2-buy h1 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -.035em; line-height: .95; margin: 14px 0 0; }
.v2-buy__color { margin: 10px 0 0; font-size: 18px; color: var(--ob-ink-2); font-weight: 700; }
.v2-buy__color b { color: var(--ob-ink); font-weight: 800; }
.v2-buy__price { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.v2-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--ob-verde-ink); }
.v2-stock.is-out { color: var(--ob-erro); }
/* cor como escolha nomeada */
.v2-colorpick { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ob-border); }
.v2-colorpick__h { font-weight: 800; font-size: 15px; margin: 0 0 12px; display: flex; gap: 8px; }
.v2-colorpick__h span { color: var(--ob-ink-2); font-weight: 700; }
.v2-colorpick ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.v2-colorpick a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border-radius: 999px; border: 1.5px solid var(--ob-border-2); background: #fff; font-weight: 800; font-size: 14px; color: var(--ob-ink); text-decoration: none !important; transition: border-color 200ms, background-color 200ms, transform 200ms var(--ob-ease); }
.v2-colorpick a:hover { border-color: var(--ob-roxo); transform: translateY(-1px); }
.v2-colorpick a.is-active { border-color: var(--ob-ink); background: var(--ob-ink); color: #fff; }
.v2-colorpick a.is-active .v2-sw { border-color: var(--ob-ink); }
.v2-colorpick .v2-sw { width: 26px; height: 26px; }
/* régua idade/peso */
.v2-fit { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.v2-fit__h { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-ink-2); margin: 0 0 10px; }
.v2-fit__bar { position: relative; height: 6px; border-radius: 999px; background: var(--ob-lilas-100); }
.v2-fit__bar i { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); width: var(--w, 100%); border-radius: 999px; background: var(--ob-roxo); }
.v2-fit__scale { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; color: var(--ob-ink-2); }
.v2-fit__val { margin: 8px 0 0; font-weight: 800; font-size: 16px; }
/* compra */
.v2-buy__form { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-top: 32px; }
.v2-buy__form .ob-qty { height: 56px; }
.v2-buy__form .v2-btn { height: 56px; width: 100%; justify-content: space-between; }
.v2-buy__form .v2-btn.is-added { animation: ob-pop 500ms var(--ob-ease); }
.v2-buy__wa { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; font-size: 15px; color: var(--ob-ink-2); text-decoration: none !important; }
.v2-buy__wa .ob-i { color: #128C4B; flex: none; }
.v2-buy__wa:hover { color: var(--ob-ink); }
.v2-hl { margin: 32px 0 0; padding: 0; list-style: none; display: grid; }
.v2-hl li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ob-border); }
.v2-hl b { font-family: var(--ob-font-alt); font-weight: 500; font-size: 20px; color: var(--ob-roxo); letter-spacing: -.01em; line-height: 1.1; }
.v2-hl span { color: var(--ob-ink-2); font-size: 15px; }
.v2-hl span strong { color: var(--ob-ink); display: block; font-size: 16px; }
body.ob .ob-shipping-hooks { margin-top: 24px; }
body.ob .ob-shipping { border: 0 !important; border-top: 1px solid var(--ob-border) !important; border-radius: 0 !important; padding: 20px 0 0 !important; }
body.ob .ob-shipping .calculatorRow p { font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-ink-2); }
body.ob .ob-shipping input.iptCep { border-radius: 999px !important; }
.v2-buy .ob-prose { margin-top: 20px; font-size: 15px; }
.v2-details { padding-top: 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.v2-details h2 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.03em; margin: 0 0 28px; }
.v2-related { padding-top: 140px; }
.v2-related .v2-shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.v2-related h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; margin: 0; }
body.ob .ob-buybar { border-top: 1px solid var(--ob-border); }
body.ob .ob-buybar .ob-price { font-family: var(--ob-font-alt); font-weight: 500; font-size: 22px; }
body.ob .ob-buybar .v2-btn { flex: 1; height: 50px; justify-content: space-between; }
@media (max-width: 899px) {
	.v2-product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.v2-gal { position: static; }
	.v2-details { grid-template-columns: 1fr; gap: 48px; padding-top: 88px; }
	.v2-related { padding-top: 88px; }
}
@media (max-width: 768px) {
	.v2-gal__main { border-radius: 24px; }
	.v2-buy h1 { font-size: 40px; }
	.v2-fit { grid-template-columns: 1fr; gap: 16px; }
	.v2-hl li { grid-template-columns: 104px 1fr; gap: 12px; }
	.v2-hl b { font-size: 17px; }
	.v2-buy__form { grid-template-columns: 1fr; }
	.v2-buy__form .ob-qty { width: max-content; }
	.v2-buy__form .v2-btn { padding-left: 20px; }
}

/* 12b. Tabelas de totais (pedido recebido / totais do carrinho): layout próprio, fora do grid de itens do carrinho */
table.order_details { background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); overflow: hidden; }
.order_details th, .order_details td { padding: 14px 18px; border-bottom: 1px solid var(--ob-border); vertical-align: top; }
.order_details thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ob-ink-2); }
.order_details tfoot th { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ob-ink-2); font-weight: 700; }
.order_details tfoot td, .order_details td.product-total { text-align: right; font-weight: 800; }
.order_details tfoot tr:last-child th, .order_details tfoot tr:last-child td { border-bottom: 0; font-size: 18px; color: var(--ob-ink); }
@media (max-width: 767px) {
	body.ob .order_details tr, body.ob .cart_totals tr, body.ob .woocommerce-table--order-details tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; border: 0; }
	body.ob .order_details thead { display: table-header-group; }
	body.ob .order_details th, body.ob .order_details td, body.ob .cart_totals th, body.ob .cart_totals td { display: block; padding: 12px 14px; border-bottom: 1px solid var(--ob-border); }
	body.ob .order_details td, body.ob .cart_totals td { text-align: right; flex: 0 1 auto; min-width: 0; }
	body.ob .order_details th, body.ob .cart_totals th, body.ob .order_details td.product-name { flex: 1 1 40%; text-align: left; min-width: 0; }
	body.ob .woocommerce-Price-amount { white-space: nowrap; }
	body.ob.woocommerce-order-received .ob-wa-float { display: none; }
	body.ob .woocommerce-order, body.ob .woocommerce-order > *, body.ob .woocommerce-order-details { min-width: 0; max-width: 100%; }
	body.ob table.order_details { width: 100%; table-layout: fixed; display: block; }
	body.ob table.order_details thead, body.ob table.order_details tbody, body.ob table.order_details tfoot { display: block; }
}

/* 13. Páginas institucionais na mesma tipografia --------------------------------- */
body.ob .ob-page h1 { font-size: var(--v2-h2); letter-spacing: -.035em; line-height: .92; }

/* 14. Reduced motion: tudo estático, trilha desenhada, stack vira lista ----------- */
@media (prefers-reduced-motion: reduce) {
	.v2-hero h1, .v2-hero__sub, .v2-hero__ctas { opacity: 1; transform: none; }
	.v2-hero__media { clip-path: none; }
	.v2-hero__media img { transform: none; }
	.v2-trilha path { stroke-dashoffset: 0 !important; stroke-dasharray: none; }
	.v2-trilha .dash { opacity: 1; stroke-dasharray: 14 18; }
	.v2-card { position: static; transform: none !important; opacity: 1 !important; }
	.v2-stack__spacer { display: none; }
	.v2-trail { display: none; }
	.v2-panel__p { filter: none; transform: none; }
}

/* ============================================================================
   WHATSAPP (refeito 22/09/2026) — glifo oficial preenchido, sem balão genérico.
   Antes: path traçado desenhado à mão (deformado e serrilhado em 18–28px).
   ========================================================================== */
/* Glifo de marca: nunca herda o traço da família de ícones do tema. */
.ob-i--brand { fill: currentColor; stroke: none; flex: none; }
/* Alinhamento ótico: o glifo preenchido pesa mais que o texto ao lado. */
.ob-i--whatsapp { position: relative; top: -.5px; }

/* Botão flutuante: alvo de toque 56px, glifo a ~57% do círculo (proporção da marca). */
body.ob .ob-wa-float {
	right: 18px; bottom: 18px; width: 56px; height: 56px;
	background: #25D366; color: #fff;
	box-shadow: 0 6px 16px -4px rgba(18, 140, 75, .45), 0 2px 6px rgba(42, 35, 64, .18);
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
body.ob .ob-wa-float .ob-i { width: 32px; height: 32px; top: 0; }
body.ob .ob-wa-float:hover { background: #1FBF5A; transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(18, 140, 75, .5), 0 2px 6px rgba(42, 35, 64, .2); }
body.ob .ob-wa-float:focus-visible { outline: 3px solid var(--ob-roxo-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.ob .ob-wa-float { transition: none; } body.ob .ob-wa-float:hover { transform: none; } }

/* Ícone no header (ação redonda) — contraste AA sobre fundo claro. */
body.ob .ob-action--wa { color: #128C4B; }
body.ob .ob-action--wa:hover { color: #0E6E3B; }

/* Dentro de botão com texto: glifo um pouco menor que a caixa de texto. */
body.ob .ob-btn--wa .ob-i { width: 20px; height: 20px; }
body.ob .v2-buy__wa .ob-i { color: #128C4B; }

/* ============================================================================
   LOJA COMPLETA COM FILTROS (item 6, 22/09/2026) - filtro por querystring.
   Sem AJAX de proposito: o HTML e cacheado pelo LiteSpeed e nonce nao pode viver
   em HTML cacheado. Cada combinacao e uma URL propria e cacheavel.
   ========================================================================== */
.v2-shop__bar { display: grid; gap: 22px; padding: 28px 0 34px; margin-bottom: 8px; border-top: 1px solid var(--ob-border); border-bottom: 1px solid var(--ob-border); }
.v2-fgroup { display: grid; grid-template-columns: 84px 1fr; align-items: baseline; gap: 12px 18px; }
.v2-fgroup__l { font-family: var(--ob-font-alt); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-ink-3); }
.v2-fopts { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(42, 35, 64, .16); background: transparent; color: var(--ob-ink); font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none !important; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.v2-chip:hover { border-color: var(--ob-ink); color: var(--ob-ink); }
.v2-chip small { font-family: var(--ob-font-alt); font-weight: 500; font-size: 12px; color: var(--ob-ink-3); font-variant-numeric: tabular-nums; }
.v2-chip.is-on { background: var(--ob-ink); border-color: var(--ob-ink); color: #fff; }
.v2-chip.is-on small { color: rgba(255, 255, 255, .72); }
/* Opcao que zera o resultado: continua clicavel (para desmarcar), mas sinalizada. */
.v2-chip.is-off { opacity: .42; }
.v2-chip.is-off.is-on { opacity: 1; }
.v2-chip--sw .v2-sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 35, 64, .18); flex: none; }
.v2-shop__end { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 4px; }
.v2-shop__count { margin: 0; margin-right: auto; font-size: 15px; color: var(--ob-ink-2); }
.v2-shop__count strong { font-family: var(--ob-font-alt); font-weight: 500; font-size: 20px; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.v2-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ob-ink-2); font-weight: 700; }
.v2-sort select { height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(42, 35, 64, .16); background: #fff; color: var(--ob-ink); font: inherit; font-weight: 700; cursor: pointer; }
.v2-sort select:hover { border-color: var(--ob-ink); }
.v2-clear { font-weight: 800; font-size: 14px; color: var(--ob-roxo-ink); text-decoration: underline !important; text-underline-offset: 3px; }
.v2-clear:hover { color: var(--ob-rosa); }

/* Paginacao */
.v2-pager, ul.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 56px 0 0; padding: 0; }
ul.page-numbers li { margin: 0; }
ul.page-numbers .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(42, 35, 64, .16); font-weight: 800; font-size: 15px; color: var(--ob-ink); text-decoration: none !important; font-variant-numeric: tabular-nums; }
ul.page-numbers .page-numbers:hover { border-color: var(--ob-ink); }
ul.page-numbers .page-numbers.current { background: var(--ob-ink); border-color: var(--ob-ink); color: #fff; }
ul.page-numbers .page-numbers.dots { border-color: transparent; }

/* Filtros de categoria por cor (archive-product.php) */
.v2-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 18px 0 24px; margin-bottom: 20px; border-bottom: 1px solid var(--ob-border); }
.v2-filters__l { font-family: var(--ob-font-alt); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-ink-3); margin-right: 8px; }
.v2-filters button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(42, 35, 64, .16); background: #fff; color: var(--ob-ink); font-weight: 700; font-size: 14px; cursor: pointer; transition: all 180ms ease; }
.v2-filters button:hover { border-color: var(--ob-ink); }
.v2-filters button.is-active { background: var(--ob-ink); border-color: var(--ob-ink); color: #fff; }
.v2-filters .v2-sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

@media (max-width: 768px) {
	.v2-filters { gap: 8px; padding: 14px 0 18px; flex-wrap: wrap; }
	.v2-filters button { flex: none; height: 38px; padding: 0 14px; font-size: 13px; }
	.v2-shop__bar { gap: 16px; padding: 16px 0 20px; }
	.v2-fgroup { grid-template-columns: 1fr; gap: 8px; }
	.v2-fopts { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
	.v2-chip { flex: none; height: 38px; padding: 0 14px; font-size: 13px; }
	.v2-shop__end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
	.v2-shop__count { width: auto; font-size: 14px; }
	.v2-sort { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
	.v2-sort select { flex: 1; height: 42px; font-size: 13px; }
}

/* ==========================================================================
   FILTROS DA LOJA EM ≤480px — vira painel lateral (item 3, dono, 23/09/2026)
   Antes a mesma barra do desktop ficava inline no mobile: os grupos de chip
   empurravam o 1º produto para baixo da dobra (medido +290px em 390px). Aqui
   o formulário (.v2-shop__bar / #ob-filter-panel) sai do fluxo normal via
   position:fixed e vira um painel off-canvas; só o botão "Filtrar" + contagem
   ficam na barra inline, então nada empurra o grid de produtos.
   24/09/2026 (dono): o mesmo painel passou a valer no DESKTOP também — a barra
   de filtros aberta ocupava a dobra inteira. Era "(max-width: 480px)"; agora é
   "screen" (todas as larguras). Ajustes só de desktop no bloco logo abaixo.
   ========================================================================== */
.v2-shop__mobilebar, .v2-shop__backdrop, .v2-shop__panelhead { display: none; }
@media screen {
	.v2-shop__mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 18px; }
	.v2-shop__filterbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(42, 35, 64, .16); background: #fff; color: var(--ob-ink); font-weight: 800; font-size: 14px; cursor: pointer; }
	.v2-shop__filterbtn:hover { border-color: var(--ob-ink); }
	.v2-shop__filterbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ob-roxo); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
	.v2-shop__mobilecount { margin: 0; font-size: 14px; color: var(--ob-ink-2); }
	.v2-shop__mobilecount strong { font-family: var(--ob-font-alt); font-weight: 500; color: var(--ob-ink); }

	.v2-shop__backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(20, 16, 30, .45); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
	.v2-shop__backdrop.is-open { opacity: 1; pointer-events: auto; }
	.v2-shop__backdrop[hidden] { display: none; }

	.v2-shop__bar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(86vw, 360px); max-width: 100vw; margin: 0; padding: 20px 20px 28px; border: 0; border-radius: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -16px 0 40px -12px rgba(20, 16, 30, .35); transform: translateX(100%); transition: transform 260ms var(--ob-ease, ease); }
	.v2-shop__bar#ob-filter-panel.is-open { transform: translateX(0); }
	/* Dentro do painel há espaço vertical de sobra: os chips voltam a quebrar linha
	   em vez de rolar na horizontal (regra herdada do bloco de 768px, acima). */
	.v2-fopts { flex-wrap: wrap; overflow-x: visible; }

	.v2-shop__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
	.v2-shop__paneltitle { margin: 0; font-family: var(--ob-font-alt); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ob-ink); }
	.v2-shop__closebtn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ob-lilas-50); color: var(--ob-ink); cursor: pointer; position: relative; }
	.v2-shop__closebtn::after { content: ""; position: absolute; inset: -3px; } /* 23/09/2026 (achado P1 #3): 38px + 3px de cada lado = 44px de alvo de toque. */
	.v2-shop__closebtn:hover { background: var(--ob-lilas-100); }

	/* Dentro do painel (qualquer largura): grupos empilhados, ordenar em largura total. */
	#ob-filter-panel .v2-fgroup { grid-template-columns: 1fr; gap: 8px; }
	#ob-filter-panel .v2-shop__end { justify-content: space-between; gap: 12px; }
	#ob-filter-panel .v2-sort { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
	#ob-filter-panel .v2-sort select { flex: 1; }
}
/* Desktop/tablet (24/09/2026): painel um pouco mais largo e barra "Filtrar" com respiro. */
@media screen and (min-width: 481px) {
	.v2-shop__mobilebar { padding: 8px 0 24px; border-bottom: 1px solid var(--ob-border); margin-bottom: 8px; }
	.v2-shop__bar { width: min(92vw, 420px); padding: 26px 28px 32px; }
}
body.ob-filters-open { overflow: hidden; }

/* ============================================================================
   CARRINHO (item 5, 22/09/2026) - antes caia no template cru do WooCommerce,
   sem "Finalizar compra" reconhecivel e sem nenhum caminho de volta a loja.
   ========================================================================== */
.ob-cart { padding-bottom: 120px; }
.ob-cart__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 8px 0 32px; }
.ob-cart__head h1 { font-size: var(--v2-h2-s); letter-spacing: -.03em; margin: 0; }
.ob-cart__back { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--ob-roxo-ink); text-decoration: none !important; }
.ob-cart__back .is-back { transform: rotate(180deg); }
.ob-cart__back:hover { color: var(--ob-rosa); }
.ob-cart__grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.ob-cart__table { width: 100%; border-collapse: collapse; }
.ob-cart__table thead th { text-align: left; font-family: var(--ob-font-alt); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-ink-3); padding: 0 12px 14px 0; border-bottom: 1px solid var(--ob-border); }
.ob-cart__table td { padding: 20px 12px 20px 0; border-bottom: 1px solid var(--ob-border); vertical-align: middle; }
.ob-cart__table .product-thumbnail { width: 96px; }
.ob-cart__table .product-thumbnail img { width: 88px; height: 88px; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ob-border); }
.ob-cart__table .product-name a { font-weight: 800; font-size: 17px; color: var(--ob-ink); text-decoration: none !important; display: inline-block; position: relative; }
.ob-cart__table .product-name a::after { content: ""; position: absolute; inset: -13px -4px; } /* 23/09/2026 (achado P1 #6): texto ~17px de altura, ::after eleva a área clicável pra 44px+. */
.ob-cart__table .product-name a:hover { color: var(--ob-roxo-escuro); }
.ob-cart__unit { display: block; margin-top: 4px; font-size: 13px; color: var(--ob-ink-2); }
.ob-cart__table .product-subtotal { font-family: var(--ob-font-alt); font-weight: 500; font-size: 20px; white-space: nowrap; }
.ob-cart__remove { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ob-ink-3); }
.ob-cart__remove:hover { background: var(--ob-erro-50); color: var(--ob-erro); }
.ob-cart__table .quantity input { height: 44px; }
.ob-cart__table td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 24px; border-bottom: 0; }
.ob-cart__coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-right: auto; }
.ob-cart__coupon label { font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
.ob-cart__coupon .ob-input { height: 44px; width: 180px; }
.ob-cart__side { position: sticky; top: calc(var(--ob-header-h) + 20px); display: grid; gap: 14px; padding: 28px; border-radius: 28px; background: var(--ob-lilas-50); }
.ob-cart__side h2 { font-size: 20px; margin: 0 0 8px; }
.ob-cart__totals table { width: 100%; border-collapse: collapse; }
.ob-cart__totals th, .ob-cart__totals td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--ob-border); font-size: 15px; }
.ob-cart__totals td { text-align: right; }
.ob-cart__totals .order-total td, .ob-cart__totals .order-total th { border-bottom: 0; font-family: var(--ob-font-alt); font-weight: 500; font-size: 20px; }
.ob-cart__checkout { width: 100%; justify-content: space-between; }
.ob-cart__keep { display: block; text-align: center; font-weight: 800; font-size: 15px; color: var(--ob-roxo-ink); text-decoration: underline !important; text-underline-offset: 3px; padding: 6px 0; }
.ob-cart__keep:hover { color: var(--ob-rosa); }
.ob-cart--empty .v2-empty h1 { font-size: var(--v2-h2-s); margin: 0 0 12px; }
.ob-cart__emptyacts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

@media (max-width: 991px) {
	.ob-cart__grid { grid-template-columns: 1fr; gap: 32px; }
	.ob-cart__side { position: static; }
}
@media (max-width: 640px) {
	.ob-cart__table thead { display: none; }
	/* 23/09/2026: a 3ª coluna "auto" tinha que caber o preço (ex. "R$ 1.699,00", ~90px)
	   E o botão remover — isso espremia a coluna do nome do produto a ~103px em 390px de
	   tela. Remove e subtotal saem da grade de 3 colunas: remove vira selo absoluto no
	   canto, subtotal ganha linha própria de largura total. Nome do produto agora usa
	   quase toda a largura disponível. */
	.ob-cart__table tr { position: relative; display: grid; grid-template-columns: 88px minmax(0,1fr); grid-template-areas: "thumb name" "thumb qty" "thumb sub"; gap: 4px 14px; padding: 18px 44px 18px 0; border-bottom: 1px solid var(--ob-border); }
	.ob-cart__table td { border: 0; padding: 0; }
	.ob-cart__table .product-thumbnail { grid-area: thumb; width: auto; }
	.ob-cart__table .product-name { grid-area: name; min-width: 0; }
	.ob-cart__table .product-quantity { grid-area: qty; align-self: end; }
	.ob-cart__table .product-subtotal { grid-area: sub; align-self: end; text-align: left; margin-top: 4px; }
	.ob-cart__table .product-remove { position: absolute; top: 18px; right: 0; grid-area: unset; }
	.ob-cart__table tr.woocommerce-cart-form__cart-item + tr td.actions { grid-column: 1 / -1; }
	.ob-cart__table td.actions { display: grid; gap: 12px; }
	.ob-cart__coupon { margin-right: 0; }
	.ob-cart__coupon .ob-input { flex: 1; width: auto; }
	.ob-cart__side { padding: 22px; border-radius: 22px; }
}

/* ==========================================================================
   14. SELETOR "Qual é do meu filho?" (template-parts/chooser.php)
   Microinteração que ENSINA: duas barras (idade/peso) movem um marcador sobre
   as faixas reais de peso dos 3 modelos. O que cabe acende, o que não cabe apaga.
   Só transform/opacity. Sem JS, o estado inicial já é um resultado válido.
   ========================================================================== */
.ob-chooser__head h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; max-width: 16ch; margin: 0; }
.ob-chooser__head .v2-lead { max-width: 46ch; }
.ob-chooser__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; margin-top: 56px; }

/* controles */
.ob-ctrl + .ob-ctrl { margin-top: 36px; }
.ob-ctrl__lbl { display: inline-block; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-roxo-escuro); }
.ob-ctrl__val { display: block; font-family: var(--ob-font-alt); font-weight: 500; font-size: 15px; color: var(--ob-ink-2); line-height: 1.1; margin-top: 6px; }
.ob-ctrl__val b { font-size: 40px; color: var(--ob-ink); letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ob-ctrl__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 4px 0 0; background: transparent; cursor: pointer; display: block; }
.ob-ctrl__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--ob-lilas-100); }
.ob-ctrl__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--ob-lilas-100); }
.ob-ctrl__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 999px; background: var(--ob-roxo-cta); border: 4px solid #fff; box-shadow: 0 6px 18px -4px rgba(94, 68, 160, .55); transition: transform 160ms var(--ob-ease); }
.ob-ctrl__range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 999px; background: var(--ob-roxo-cta); border: 4px solid #fff; box-shadow: 0 6px 18px -4px rgba(94, 68, 160, .55); }
.ob-ctrl__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ob-ctrl__scale { display: flex; justify-content: space-between; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; color: var(--ob-ink-2); }

/* gráfico de faixas */
.ob-bands { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ob-border); }
.ob-bands__cap { margin: 0 0 18px; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-ink-2); }
/* Gráfico de faixas: rótulo em coluna própria (--lane) para que a linha do
   marcador cruze SÓ as barras. --p é a fração do peso escolhido (0 a 1). */
.ob-bands__plot { position: relative; padding-top: 34px; --lane: 212px; }
.ob-bands__marker { position: absolute; left: calc(var(--lane) + (100% - var(--lane)) * var(--p, .3)); top: 34px; bottom: 16px; width: 2px; background: var(--ob-ink); border-radius: 2px; transform: translateX(-1px); transition: left 180ms var(--ob-ease); z-index: 2; }
.ob-bands__marker span { position: absolute; bottom: 100%; margin-bottom: 8px; left: 50%; transform: translateX(-50%); background: var(--ob-ink); color: #fff; font-family: var(--ob-font-alt); font-weight: 500; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ob-band { display: grid; grid-template-columns: calc(var(--lane) - 24px) minmax(0, 1fr); column-gap: 24px; row-gap: 3px; align-items: center; padding: 15px 0; }
.ob-band + .ob-band { border-top: 1px solid var(--ob-border); }
.ob-band__name { grid-column: 1; grid-row: 1; font-weight: 800; font-size: 15px; color: var(--ob-ink-2); transition: color 200ms var(--ob-ease); }
.ob-band__max { grid-column: 1; grid-row: 2; font-size: 12.5px; font-weight: 700; color: var(--ob-ink-2); }
.ob-band__track { grid-column: 2; grid-row: 1 / span 2; position: relative; display: block; height: 14px; border-radius: 999px; background: rgba(42, 35, 64, .06); }
.ob-band__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #B7A6D8; transition: background-color 220ms var(--ob-ease); }
.ob-band.is-on .ob-band__name { color: var(--ob-ink); }
.ob-band.is-on .ob-band__fill { background: var(--ob-roxo); }
.ob-band.is-win .ob-band__fill { background: var(--ob-roxo-ink); box-shadow: 0 6px 18px -6px rgba(62, 42, 115, .55); }
.ob-band.is-win .ob-band__track { box-shadow: 0 0 0 2px rgba(62, 42, 115, .16); }
.ob-band.is-win .ob-band__name { color: var(--ob-roxo-ink); }

/* resultado */
.ob-chooser__out { position: relative; }
/* `display:none` e não `opacity:0`: com os cards ocultos ainda no viewport, o navegador
   baixava as TRÊS fotos de resultado no desktop (~130 KB por página, em duas páginas).
   A troca ganha a entrada por animação, que não depende do card de saída estar montado. */
.ob-pick { display: none; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; align-items: stretch; background: #fff; border-radius: 36px; overflow: hidden; box-shadow: var(--ob-shadow-v2); }
.ob-pick.is-on { display: grid; animation: ob-pick-in 260ms var(--ob-ease) both; }
@keyframes ob-pick-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-pick--none { grid-template-columns: 1fr; }
.ob-pick__media { margin: 0; background: var(--ob-lilas-100); }
.ob-pick__media picture, .ob-pick__media img { width: 100%; height: 100%; }
.ob-pick__media img { object-fit: cover; }
.ob-pick__txt { padding: 34px 34px 32px; display: flex; flex-direction: column; }
.ob-pick__tag { display: inline-flex; align-self: flex-start; margin: 0; background: var(--ob-verde-50); color: var(--ob-verde-ink); font-family: var(--ob-font-alt); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.ob-pick__tag--warn { background: var(--ob-amarelo-50); color: #7A4E00; }
.ob-pick h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.02; margin: 18px 0 0; }
.ob-pick__why { margin: 12px 0 0; color: var(--ob-ink-2); font-size: 16px; }
.ob-pick__act { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: auto; padding-top: 26px; }
.ob-pick__alt { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--ob-ink-2); }
.ob-pick__alt a { font-weight: 800; color: var(--ob-roxo-escuro); text-decoration: underline; text-underline-offset: 3px; }
.ob-chooser__more { margin: 40px 0 0; }

@media (prefers-reduced-motion: reduce) {
	.ob-bands__marker, .ob-band__fill, .ob-band__name { transition: none; }
	.ob-pick.is-on { animation: none; }
}
@media (max-width: 1023px) {
	.ob-chooser__body { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
}
@media (max-width: 768px) {
	.ob-chooser__head h2 { font-size: 36px; }
	.ob-ctrl__val b { font-size: 32px; }
	.ob-pick { grid-template-columns: 1fr; border-radius: 28px; }
	.ob-pick__media { aspect-ratio: 16 / 10; }
	.ob-pick__txt { padding: 24px 22px 26px; }
	/* Telas estreitas: a faixa empilha, então a linha vertical cruzaria os nomes.
	   Troca por um ponto do peso dentro de cada barra — mesma informação, sem ruído. */
	.ob-bands__plot { --lane: 0px; padding-top: 4px; }
	.ob-band { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
	.ob-band__name { grid-row: 1; }
	.ob-band__track { grid-column: 1; grid-row: 2; }
	.ob-band__max { grid-column: 1; grid-row: 3; }
	.ob-bands__marker { display: none; }
	.ob-band__track::after { content: ""; position: absolute; left: clamp(7px, calc(var(--p, .3) * 100%), calc(100% - 7px)); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--ob-ink); border: 3px solid var(--ob-bg); z-index: 1; transition: left 180ms var(--ob-ease); }
	.ob-guia__tool .ob-band__track::after, .v2-ruler .ob-band__track::after { border-color: var(--ob-lilas-50); }
}

/* ==========================================================================
   15. PÁGINA /qual-e-do-meu-filho/
   ========================================================================== */
.ob-guia__head { padding: 56px 0 0; }
.ob-guia__head h1 { font-size: var(--v2-h2); letter-spacing: -.035em; line-height: .94; margin: 0; max-width: 14ch; }
.ob-guia__head h1 em { font-style: normal; color: var(--ob-roxo); }
.ob-guia__lead { margin: 24px 0 0; font-size: 20px; color: var(--ob-ink-2); max-width: 46ch; }
.ob-guia__jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 34px 0 0; padding: 0; }
.ob-guia__jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--ob-border-2); font-weight: 800; font-size: 14px; color: var(--ob-ink); text-decoration: none !important; transition: border-color 200ms var(--ob-ease), background-color 200ms var(--ob-ease); }
.ob-guia__jump a:hover { border-color: var(--ob-roxo); background: var(--ob-lilas-50); }
.ob-guia__jump small { color: var(--ob-ink-2); font-weight: 700; }
.ob-guia__trio { margin: 48px 0 0; border-radius: 40px; overflow: hidden; background: var(--ob-lilas-100); position: relative; }
.ob-guia__trio picture, .ob-guia__trio img { display: block; width: 100%; height: auto; }
.ob-guia__trio figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 28px 22px; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(to top, rgba(26, 20, 44, .92) 0%, rgba(26, 20, 44, .72) 38%, rgba(26, 20, 44, 0) 100%); }
.ob-guia__tool { margin-top: 72px; padding: 96px 0 104px; background: var(--ob-lilas-50); }
.ob-guia__table { padding: 110px 0 0; }
.ob-guia__table h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; margin: 0; }
.ob-tablehint { display: none; }
.ob-tablewrap { margin-top: 44px; overflow-x: auto; scrollbar-width: thin; }
/* 23/09/2026 (task item 7): abaixo de 640px a tabela de 3 colunas mostrava só ~1 coluna
   por vez (2 arrastos pra ver os 3 modelos). Troca pra cards empilhados por modelo —
   mesmos dados, sem arrastar; ver page-qual-e-do-meu-filho.php .ob-guia__cards. */
.ob-guia__cards { display: none; }
.ob-guia__card { background: var(--ob-white); border-radius: var(--ob-r-card); box-shadow: var(--ob-shadow); padding: 20px; margin-top: 16px; }
.ob-guia__card h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.01em; }
.ob-guia__card h3 a { color: var(--ob-ink); text-decoration: none !important; }
.ob-guia__card h3 small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
.ob-guia__card dl { margin: 0 0 16px; }
.ob-guia__card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ob-border); font-size: 14.5px; }
.ob-guia__card dl > div:first-child { border-top: 0; }
.ob-guia__card dt { color: var(--ob-ink-2); font-weight: 700; }
.ob-guia__card dd { margin: 0; text-align: right; font-weight: 800; color: var(--ob-ink); }
.ob-guia__card .v2-btn { width: 100%; justify-content: space-between; }
@media (max-width: 640px) {
	/* !important: a regra .ob-tablehint{display:flex} do breakpoint de 768px (mais abaixo
	   neste arquivo) empataria em especificidade e venceria por ordem de cascata em 375-414px. */
	.ob-tablewrap, .ob-tablehint { display: none !important; }
	.ob-guia__cards { display: block; margin-top: 20px; }
}
.ob-tablewrap:focus-visible { outline: 3px solid var(--ob-azul-ink); outline-offset: 4px; }
.ob-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.ob-table th, .ob-table td { text-align: left; padding: 18px 20px; border-top: 1px solid var(--ob-border); vertical-align: top; }
.ob-table thead th { border-top: 0; padding-top: 0; font-size: 18px; letter-spacing: -.01em; }
.ob-table thead th a { color: var(--ob-ink); text-decoration: none !important; }
.ob-table thead th a:hover { color: var(--ob-roxo-escuro); }
.ob-table thead th small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
.ob-table tbody th { width: 19%; font-weight: 800; color: var(--ob-ink); }
.ob-table tbody td { color: var(--ob-ink-2); font-size: 15px; }
.ob-table tbody tr:nth-child(odd) td, .ob-table tbody tr:nth-child(odd) th { background: rgba(138, 107, 199, .04); }
.ob-guia__rules { padding: 110px 0 0; }
.ob-guia__rules-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ob-guia__rules h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; line-height: .98; margin: 0; max-width: 12ch; }
.ob-guia__rules h2 .dim { color: #8E82A8; }
.ob-rules { list-style: none; margin: 0; padding: 0; }
.ob-rules li { display: grid; grid-template-columns: 48px 1fr; gap: 0 18px; padding: 24px 0; border-top: 1px solid var(--ob-border); }
.ob-rules li:last-child { border-bottom: 1px solid var(--ob-border); }
.ob-rules__ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--ob-lilas-50); color: var(--ob-roxo-escuro); }
.ob-rules b { font-size: 18px; letter-spacing: -.01em; }
.ob-rules small { font-size: 15px; color: var(--ob-ink-2); line-height: 1.45; margin-top: 4px; }
.ob-guia__cta { padding: 96px 0 130px; }
.ob-guia__cta .ob-cta { margin: 0; }
@media (max-width: 899px) {
	.ob-guia__rules-grid { grid-template-columns: 1fr; gap: 28px; }
	.ob-guia__rules h2 { max-width: 18ch; }
}
@media (max-width: 768px) {
	.ob-guia__head { padding-top: 28px; }
	.ob-guia__head h1 { font-size: 44px; max-width: none; }
	.ob-guia__lead { font-size: 17px; margin-top: 16px; }
	.ob-guia__trio { margin-top: 32px; border-radius: 24px; }
	.ob-guia__trio figcaption { padding: 44px 16px 16px; font-size: 13px; }
	.ob-guia__tool { margin-top: 48px; padding: 64px 0 72px; }
	.ob-guia__table, .ob-guia__rules { padding-top: 72px; }
	.ob-guia__table h2, .ob-guia__rules h2 { font-size: 34px; }
	.ob-table th, .ob-table td { padding: 14px 14px; }
	.ob-tablehint { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-weight: 800; font-size: 13.5px; color: var(--ob-roxo-escuro); }
	.ob-tablewrap { margin-top: 14px; -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,.25) 100%); }
	/* Sem isto, ao arrastar para ver o Drift 8" o rótulo da linha some e o usuário
	   perde o que está comparando. */
	.ob-table tbody th[scope="row"], .ob-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ob-bg); box-shadow: 1px 0 0 var(--ob-border); }
	.ob-table tbody tr:nth-child(odd) th[scope="row"] { background: #F7F4FC; }
	.ob-guia__cta { padding: 64px 0 80px; }
}

/* ==========================================================================
   16. SOBRE NÓS (page-sobre-nos.php) — editorial, com prova
   ========================================================================== */
.ob-sobre__head { padding: 56px 0 0; }
.ob-sobre__head h1 { font-size: var(--v2-h2); letter-spacing: -.035em; line-height: .94; margin: 0; max-width: 12ch; }
.ob-sobre__head h1 em { font-style: normal; color: var(--ob-roxo); }
.ob-sobre__lead { margin: 24px 0 0; font-size: 20px; color: var(--ob-ink-2); max-width: 52ch; }
.ob-sobre__facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; }
.ob-sobre__facts li { padding: 24px 0 0; border-top: 1px solid var(--ob-border); }
.ob-sobre__facts .v2-num { display: block; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--ob-roxo); white-space: nowrap; }
/* 23/09/2026: sem nowrap, "90" e " dias" (ou "100" e "%") quebravam em linhas
   separadas nas 2 colunas estreitas do mobile. Textos são curtos, não estouram. */
.ob-sobre__facts .v2-num small { font-size: .45em; display: inline; }
/* 23/09/2026: ".ob-sobre__facts small" (abaixo) forca TODO <small> a display:block
   -- incluindo este, aninhado dentro do numero ("90<small> dias</small>"), o que
   jogava a unidade pra uma segunda linha. Precisa vencer por especificidade. */
.ob-sobre__facts b { display: block; margin-top: 10px; font-size: 17px; letter-spacing: -.01em; }
.ob-sobre__facts small { display: block; margin-top: 4px; font-size: 14px; color: var(--ob-ink-2); line-height: 1.4; }
.ob-sobre__block { padding: 110px 0 0; }
.ob-sobre__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ob-sobre__grid h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; line-height: .98; margin: 0; max-width: 13ch; }
.ob-sobre__grid h2 .dim { color: #8E82A8; }
.ob-sobre__grid .v2-lead { margin-top: 22px; max-width: 44ch; }
.ob-sobre__grid .ob-muted { margin-top: 14px; color: var(--ob-ink-2); font-size: 16px; max-width: 46ch; }
.ob-sobre__grid .ob-rules { margin-top: 34px; }
.ob-sobre__grid--rev .ob-sobre__media { order: 2; }
.ob-sobre__media { margin: 0; border-radius: 40px; overflow: hidden; background: var(--ob-lilas-100); aspect-ratio: 4 / 3.4; }
.ob-sobre__media picture, .ob-sobre__media img { width: 100%; height: 100%; }
.ob-sobre__media img { object-fit: cover; }
.ob-sobre__lineup { padding: 120px 0 0; }
.ob-sobre__shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ob-sobre__shead h2 { font-size: var(--v2-h2-s); letter-spacing: -.03em; margin: 0; }
.ob-sobre__shead .v2-link { margin-top: 0; }
.ob-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.ob-lineup__card { display: flex; flex-direction: column; color: inherit; text-decoration: none !important; }
.ob-lineup__card figure { margin: 0 0 20px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ob-lilas-100); }
.ob-lineup__card figure picture, .ob-lineup__card figure img { width: 100%; height: 100%; }
.ob-lineup__card figure img { object-fit: cover; transition: transform 700ms var(--ob-ease); }
.ob-lineup__card:hover figure img { transform: scale(1.04); }
.ob-lineup__card h3 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.ob-lineup__meta { margin: 6px 0 0; font-size: 14px; font-weight: 800; color: var(--ob-roxo-escuro); }
.ob-lineup__desc { margin: 10px 0 0; font-size: 15px; color: var(--ob-ink-2); }
.ob-lineup__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; }
.ob-lineup__foot .v2-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--ob-lilas-50); color: var(--ob-roxo-escuro); transition: transform 220ms var(--ob-ease), background-color 220ms var(--ob-ease); }
.ob-lineup__card:hover .v2-ic { transform: translateX(3px); background: var(--ob-lilas-200); }
.ob-sobre__trust { padding: 120px 0 0; }
.ob-sobre__trust .ob-sobre__grid { align-items: start; }
.ob-deflist { margin: 0; }
.ob-deflist > div { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 0 28px; padding: 18px 0; border-top: 1px solid var(--ob-border); }
.ob-deflist > div:last-child { border-bottom: 1px solid var(--ob-border); }
.ob-deflist dt { font-weight: 800; font-size: 15px; margin: 0; }
.ob-deflist dd { margin: 0; font-size: 15px; color: var(--ob-ink-2); }
.ob-sobre__cta { padding: 110px 0 130px; }
.ob-sobre__cta .ob-cta { margin: 0; }
@media (max-width: 1023px) {
	.ob-sobre__facts { grid-template-columns: 1fr 1fr; gap: 0 32px; }
	.ob-sobre__facts li:nth-child(n+3) { margin-top: 24px; }
	.ob-lineup { grid-template-columns: 1fr; gap: 28px; }
	.ob-lineup__card { display: grid; grid-template-columns: 140px 1fr; gap: 0 20px; align-items: start; }
	.ob-lineup__card figure { margin: 0; aspect-ratio: 1; border-radius: 20px; }
	.ob-lineup__foot { padding-top: 12px; }
}
@media (max-width: 899px) {
	.ob-sobre__grid { grid-template-columns: 1fr; gap: 32px; }
	.ob-sobre__grid--rev .ob-sobre__media { order: -1; }
	.ob-sobre__grid h2 { max-width: 18ch; }
	.ob-deflist > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 768px) {
	.ob-sobre__head { padding-top: 28px; }
	.ob-sobre__head h1 { font-size: 44px; max-width: none; }
	.ob-sobre__lead { font-size: 17px; margin-top: 16px; }
	.ob-sobre__facts { margin-top: 36px; }
	.ob-sobre__facts .v2-num { font-size: 34px; }
	.ob-sobre__facts b { font-size: 15px; }
	.ob-sobre__block, .ob-sobre__lineup, .ob-sobre__trust { padding-top: 72px; }
	.ob-sobre__media { border-radius: 26px; aspect-ratio: 4 / 3; }
	.ob-sobre__grid h2, .ob-sobre__shead h2 { font-size: 34px; }
	.ob-sobre__cta { padding: 72px 0 80px; }
}
@media (max-width: 599px) {
	.ob-lineup__card { grid-template-columns: 104px 1fr; }
	.ob-lineup__card h3 { font-size: 18px; }
}

/* ==========================================================================
   17. CONTATO (page-contato.php)
   ========================================================================== */
.ob-contato__head { padding: 56px 0 0; }
.ob-contato__head h1 { font-size: var(--v2-h2); letter-spacing: -.035em; line-height: .94; margin: 0; max-width: 11ch; }
.ob-contato__head h1 em { font-style: normal; color: var(--ob-roxo); }
.ob-contato__lead { margin: 24px 0 0; font-size: 19px; color: var(--ob-ink-2); max-width: 50ch; }
.ob-contato__main { padding: 64px 0 130px; }
.ob-contato__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ob-contato__wa { display: grid; grid-template-columns: 58px 1fr 24px; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 26px; background: var(--ob-ink); color: #fff; text-decoration: none !important; transition: transform 200ms var(--ob-ease), background-color 200ms var(--ob-ease); }
.ob-contato__wa:hover { background: #3a3155; transform: translateY(-2px); color: #fff; }
.ob-contato__wa-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: #128C4B; color: #fff; }
.ob-contato__wa-txt b { display: block; font-size: 19px; letter-spacing: -.01em; }
.ob-contato__wa-txt small { display: block; margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ob-contato__wa .v2-ic { transition: transform 220ms var(--ob-ease); }
.ob-contato__wa:hover .v2-ic { transform: translateX(4px); }
.ob-contato__list { list-style: none; margin: 8px 0 0; padding: 0; }
.ob-contato__list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ob-border); }
.ob-contato__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ob-lilas-50); color: var(--ob-roxo-escuro); }
.ob-contato__list b { display: block; font-size: 16px; letter-spacing: -.01em; }
.ob-contato__list b a { color: inherit; text-decoration: none !important; }
.ob-contato__list b a:hover { color: var(--ob-roxo-escuro); }
.ob-contato__list small { display: block; margin-top: 2px; font-size: 14px; color: var(--ob-ink-2); }
.ob-contato__short { margin-top: 36px; padding: 24px 26px 8px; border-radius: 26px; background: var(--ob-lilas-50); }
.ob-contato__short-h { margin: 0 0 6px; font-family: var(--ob-font-alt); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-roxo-escuro); }
.ob-contato__short a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 700; font-size: 15px; color: var(--ob-ink); text-decoration: none !important; border-top: 1px solid rgba(42, 35, 64, .07); }
.ob-contato__short a .ob-i { color: var(--ob-roxo-escuro); flex: none; transition: transform 200ms var(--ob-ease); }
.ob-contato__short a:hover { color: var(--ob-roxo-ink); }
.ob-contato__short a:hover .ob-i { transform: translateX(3px); }
.ob-contato__formwrap { padding: 36px 36px 38px; border-radius: 36px; background: #fff; box-shadow: var(--ob-shadow-v2); }
.ob-contato__formwrap h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; margin: 0; }
.ob-contato__formlead { margin: 8px 0 26px; font-size: 15px; color: var(--ob-ink-2); }
@media (max-width: 899px) {
	.ob-contato__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 768px) {
	.ob-contato__head { padding-top: 28px; }
	.ob-contato__head h1 { font-size: 44px; max-width: none; }
	.ob-contato__lead { font-size: 17px; margin-top: 16px; }
	.ob-contato__main { padding: 44px 0 80px; }
	.ob-contato__wa { grid-template-columns: 48px 1fr; padding: 18px 18px; border-radius: 22px; }
	.ob-contato__wa-ic { width: 48px; height: 48px; }
	.ob-contato__wa .v2-ic { display: none; }
	.ob-contato__wa-txt b { font-size: 17px; }
	.ob-contato__formwrap { padding: 24px 20px 26px; border-radius: 26px; }
}

/* Ajustes de ritmo depois da primeira leitura em tela (22/09/2026):
   o seletor compacto da home fechava com respiro demais, e o FAQ do guia
   herdava o padding da home (150px) antes do CTA. */
.v2-ruler { padding-bottom: 110px; }
.ob-guia__tool + .ob-guia__table { padding-top: 110px; }
body.page .v2-faq { padding-bottom: 0; }
body.page .v2-faq__head { margin-bottom: 28px; }
@media (max-width: 768px) { .v2-ruler { padding-bottom: 64px; } }

/* drawer-fechado-invisivel: painel fechado some de verdade (sem sombra vazando na borda e fora do alcance do teclado) */
@media screen { /* era (max-width: 480px); desde 24/09/2026 vale em todas as larguras */
	.v2-shop__bar#ob-filter-panel { visibility: hidden; box-shadow: none; transition: transform 260ms var(--ob-ease, ease), visibility 0s linear 260ms, box-shadow 0s linear 260ms; }
	.v2-shop__bar#ob-filter-panel.is-open { visibility: visible; box-shadow: -16px 0 40px -12px rgba(20, 16, 30, .35); transition: transform 260ms var(--ob-ease, ease), visibility 0s, box-shadow 0s; }
}

/* ==========================================================================
   18. PÁGINAS INSTITUCIONAIS & LEGAIS (page.php)
   ========================================================================== */
.ob-page { padding: 56px 0 110px; }
.ob-page--narrow .ob-page__in { max-width: 820px; margin: 0 auto; }
.ob-page__head { margin-bottom: 32px; }
.ob-page__head .v2-kicker { margin-bottom: 12px; }
.ob-page__title { font-size: clamp(34px, 3.8vw, 56px); letter-spacing: -.035em; line-height: .96; margin: 0; color: var(--ob-ink); }
.ob-page .ob-note { margin: 28px 0 36px; padding: 18px 24px; border-radius: 18px; background: rgba(124, 58, 237, 0.06); border-left: 4px solid var(--ob-roxo); color: var(--ob-ink-2); font-size: 15px; line-height: 1.55; }
.ob-page .ob-note strong { color: var(--ob-roxo-escuro); font-weight: 700; }
.ob-page .ob-prose { font-size: 16px; line-height: 1.7; color: var(--ob-ink-2); }
.ob-page .ob-prose h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; margin: 44px 0 16px; color: var(--ob-ink); }
.ob-page .ob-prose h3 { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.02em; line-height: 1.15; margin: 32px 0 12px; color: var(--ob-ink); }
.ob-page .ob-prose p { margin: 0 0 20px; }
.ob-page .ob-prose ul, .ob-page .ob-prose ol { margin: 0 0 24px; padding-left: 24px; }
.ob-page .ob-prose li { margin-bottom: 8px; }
.ob-page .ob-prose a { color: var(--ob-roxo-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ob-page .ob-prose a:hover { color: var(--ob-roxo); }
.ob-page__support { margin-top: 56px; padding: 28px 32px; border-radius: 24px; background: var(--ob-lilas-50); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ob-page__support-txt b { display: block; font-size: 18px; color: var(--ob-ink); letter-spacing: -.01em; }
.ob-page__support-txt small { display: block; margin-top: 4px; font-size: 14px; color: var(--ob-ink-2); }
.ob-page__wa-btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 24px; border-radius: 999px; background: #128C4B; color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: transform 180ms var(--ob-ease), background-color 180ms var(--ob-ease); box-shadow: 0 4px 14px rgba(18, 140, 75, 0.25); }
.ob-page__wa-btn:hover { background: #0E703C; transform: translateY(-2px); }
.ob-page__wa-ic { display: grid; place-items: center; }
@media (max-width: 768px) {
	.ob-page { padding: 36px 0 72px; }
	.ob-page__head { margin-bottom: 24px; }
	.ob-page__title { font-size: 38px; }
	.ob-page__support { padding: 22px 20px; flex-direction: column; align-items: stretch; }
	.ob-page__wa-btn { justify-content: center; width: 100%; }
}


/* 24/09/2026: loja principal — cabecalho enxuto para os produtos aparecerem
   ja na primeira tela (antes o titulo + fatos + filtros ocupavam tudo). */
.woocommerce-shop .v2-cat__head { gap: 32px; align-items: center; }
.woocommerce-shop .v2-cat h1 { font-size: clamp(34px, 3.6vw, 56px); }
.woocommerce-shop .v2-cat__lead { margin-top: 12px; font-size: 16px; }
.woocommerce-shop .v2-cat__facts div { padding: 10px 0; }
.woocommerce-shop .v2-cat__facts .v2-num { font-size: 22px; }
.woocommerce-shop .v2-cat__facts small { font-size: 13px; margin-top: 4px; }
@media (max-width: 768px) {
	.woocommerce-shop .v2-cat__facts { display: none; }
	.woocommerce-shop .v2-cat h1 { font-size: 34px; }
}
@media (min-width: 901px) {
	/* 24/09/2026 (tela-cheia): breakpoint desce de 1100 para 901 — entre 900 e
	   1099px a grade ficava em 3 colunas e 28 produtos (múltiplo de 4, não de 3)
	   sobravam 1 item numa fileira quase vazia (28 = 9×3 + 1). Com 4 colunas em
	   toda a faixa "desktop" (≥901px), 28/4 = 7 fileiras cheias sempre. */
	.woocommerce-shop .v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
}

/* ==========================================================================
   24/09/2026 — TELA CHEIA por seção (pedido do dono). Cada seção de conteúdo
   ocupa min-height: calc(100svh - header), centralizada verticalmente, com
   padding/imagens escalando por svh para caber sem cortar em telas baixas
   (matriz de teste inclui 1366×657). NADA de conteúdo/copy/logo/cor mudou.
   Escopo min-width:901px — mobile/retrato (≤900px) continua no fluxo natural
   já existente (breakpoints antigos de 768/899px não são tocados). Blocos
   curtos (FAQ da home, cabeçalho de /contato/) não são esticados: ficam
   compactos/fundidos ao vizinho, conforme decisão do dono. */
@media (min-width: 901px) {

	/* ---- Home: "o giro" / specs / oferta — 1 tela cada, centralizado ---- */
	.v2-turn, .v2-specs, .v2-offer {
		min-height: calc(100svh - var(--ob-header-h));
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	.v2-turn__grid, .v2-specs__grid, .v2-offer__grid { width: 100%; }
	.v2-turn { padding: clamp(28px, 7svh, 120px) 0; }
	.v2-specs { padding: clamp(28px, 7svh, 150px) 0 clamp(24px, 6svh, 110px); }
	.v2-offer { padding: clamp(28px, 7svh, 150px) 0; }
	/* imagens grandes (aspect-ratio fixo) ganham teto em svh; como usam
	   object-fit:cover, em tela baixa elas só cortam um pouco mais — não
	   sobra vazio e a coluna de texto nunca é espremida por causa da foto. */
	.v2-turn__media { max-height: min(52svh, 40svh + 110px); }
	.v2-macro { max-height: min(30svh, 20svh + 80px); }
	.v2-offer figure { max-height: 58svh; }
	.v2-turn__facts { margin-top: clamp(16px, 5svh, 40px); }
	.v2-turn__facts li { padding: clamp(8px, 2.2svh, 18px) 0; }
	.v2-lead { margin-top: clamp(8px, 1.6svh, 14px); }
	.v2-speclist { margin-top: clamp(10px, 3.4svh, 44px); gap: 0 clamp(20px, 3vw, 40px); }
	.v2-spec { padding: clamp(6px, 1.8svh, 22px) 0; }
	.v2-spec .v2-num { font-size: clamp(26px, 5svh, 40px); }
	.v2-turn__txt h2, .v2-specs h2 { font-size: var(--v2-h2-s-fit); }
	.v2-specs__grid { gap: clamp(24px, 4vw, 56px); }

	/* ---- Home: narrativa de scroll (3 modelos) — mais fôlego de tela por
	   card empilhado. Sem JS controlando o efeito (position:sticky puro,
	   conferido no main.js), então mexer no spacer/gap é seguro. Não bate
	   3 telas exatas em toda altura (limitação de conteúdo, documentada no
	   relatório) mas aumenta bastante o tempo de exibição de cada modelo. */
	.v2-story { padding-top: clamp(64px, 10svh, 150px); padding-bottom: clamp(48px, 8svh, 120px); }
	.v2-stack { gap: clamp(28px, 12svh, 140px); }
	.v2-stack__spacer { height: calc(100svh - var(--ob-header-h)); }

	/* ---- Home: FAQ — bloco curto, NÃO esticado a tela cheia (regra do
	   dono). Só ganha teto de padding proporcional pra não sobrar vazio. ---- */
	.v2-faq { padding-bottom: clamp(64px, 10svh, 150px); }

	/* ---- /sobre-nos/ — cada bloco = 1 tela, centralizado ---- */
	.ob-sobre__head { min-height: calc(100svh - var(--ob-header-h)); display: flex; align-items: center; box-sizing: border-box; padding: clamp(24px, 6svh, 56px) 0; }
	.ob-sobre__block, .ob-sobre__lineup, .ob-sobre__trust {
		min-height: calc(100svh - var(--ob-header-h));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: clamp(24px, 6svh, 110px) 0;
	}
	.ob-sobre__block > .ob-container, .ob-sobre__lineup > .ob-container, .ob-sobre__trust > .ob-container { width: 100%; }
	.ob-sobre__cta { min-height: calc(60svh - var(--ob-header-h)); display: flex; align-items: center; box-sizing: border-box; padding: clamp(24px, 6svh, 110px) 0; }
	.ob-sobre__media { max-height: 62svh; }

	/* ---- /contato/ — cabeçalho compacto e fundido (bloco curto, regra do
	   dono); o corpo (WhatsApp + form) é a "1 tela" real da página. ---- */
	.ob-contato__head { padding: clamp(20px, 5svh, 56px) 0 0; }
	.ob-contato__main {
		min-height: calc(100svh - var(--ob-header-h));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: clamp(24px, 6svh, 64px) 0 clamp(32px, 7svh, 130px);
	}
	.ob-contato__grid { width: 100%; }

	/* ---- /produtos/ (loja) — intro+filtros compactos já cabem na 1ª tela
	   (ajuste de 20:13 hoje); aqui só garantimos que a área de produtos
	   comece o quanto antes, sem alterar o grid em si. ---- */
	.woocommerce-shop .v2-cat { padding-bottom: clamp(16px, 3svh, 32px); }

	/* ---- Produto único: galeria nunca estoura a tela (sticky); a caixa de
	   compra tem conteúdo variável (cor, régua, qtd, frete, destaques) que
	   pode passar de 1 tela em telas baixas — por design ela NUNCA é
	   cortada (overflow visível, sem max-height/clip), a galeria sticky é
	   quem fica confinada a 1 tela enquanto o usuário rola a compra. */
	.v2-gal__main { max-height: calc(100svh - var(--ob-header-h) - 32px); }
	/* .v2-details é display:grid (2 colunas, align-items:start) — só damos
	   piso de altura, sem trocar display (trocar pra flex quebraria as
	   colunas). Conteúdo varia por produto; pode passar de 1 tela em telas
	   baixas, nunca é cortado (sem max-height/overflow aqui). */
	.v2-details { min-height: calc(100svh - var(--ob-header-h)); box-sizing: border-box; padding: clamp(48px, 9svh, 140px) 0; }
	.v2-related {
		min-height: calc(100svh - var(--ob-header-h));
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		box-sizing: border-box;
		padding: clamp(48px, 9svh, 140px) 0;
	}
}

/* 30/09/2026: revisão editorial, mantendo cores, fontes e componentes. */
.ob-sobre__head h1 { max-width: 18ch; }
.ob-rules b, .ob-rules small { display: block; }


/* 30/09/2026: packshots reais. Foto inteira, sem cortes nem ampliação além do original. */
.ob-product-photo { display: flex !important; align-items: center; justify-content: center; background: #fff; }
.ob-product-photo img.ob-product-photo__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hx-model__media:has(.ob-product-photo)::after { background: none; }
.ob-cupom__media img { object-fit: contain; background: #fff; }