/* ==========================================================================
   OlaBebe theme · main.css · fonte da verdade: design-system/olabebe/MASTER.md
   Ordem: tokens → reset → tipografia → utilitários → header → hero → seções da home
   → catálogo → produto → carrinho/sidecart → formulários/Woo base → footer → motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--ob-roxo: #8A6BC7;
	--ob-roxo-escuro: #5E44A0;
	--ob-roxo-cta: #7454B6; /* 5.3:1 com branco; o #8A6BC7 do manual fica em superfícies/ícones */
	--ob-roxo-ink: #3E2A73;
	--ob-rosa: #D85E8F;
	--ob-rosa-50: #FCEFF4;
	--ob-amarelo: #FFCC76;
	--ob-amarelo-50: #FFF6E3;
	--ob-verde: #8FC80C;
	--ob-verde-ink: #4E7300;
	--ob-verde-50: #F1F9DF;
	--ob-azul: #56B9E9;
	--ob-azul-ink: #1D6E96;
	--ob-azul-50: #E9F6FD;
	--ob-lilas-50: #F6F2FC;
	--ob-lilas-100: #EDE6F8;
	--ob-lilas-200: #DCD0F0;
	--ob-bg: #FFFDFB;
	--ob-white: #FFFFFF;
	--ob-ink: #2A2340;
	--ob-ink-2: #6B6480;
	--ob-ink-3: #6F6885; /* 5.2:1 sobre --ob-bg */
	--ob-border: rgba(42, 35, 64, .08);
	--ob-border-2: rgba(42, 35, 64, .14);
	--ob-erro: #D63B3B;
	--ob-erro-50: #FDECEC;

	--ob-font: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ob-font-alt: "Fredoka", var(--ob-font);

	--ob-r-card: 24px;
	--ob-r-inner: 18px;
	--ob-r-input: 14px;
	--ob-r-pill: 999px;

	--ob-shadow: 0 10px 30px -12px rgba(138, 107, 199, .28);
	--ob-shadow-lg: 0 30px 60px -24px rgba(94, 68, 160, .35);
	--ob-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

	--ob-ease: cubic-bezier(.32, .72, 0, 1);
	--ob-t: 220ms var(--ob-ease);
	--ob-t-slow: 650ms var(--ob-ease);

	--ob-container: 1360px;
	--ob-gutter: clamp(16px, 4vw, 40px);
	--ob-section: clamp(64px, 9vw, 128px);
	--ob-header-h: 72px;
}

/* 2. Fontes self-hosted -------------------------------------------------- */
@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/fredoka-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Nunito Fallback";
	src: local("Segoe UI"), local("Arial");
	size-adjust: 104%;
	ascent-override: 101%;
	descent-override: 35%;
	line-gap-override: 0%;
}

/* 3. Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ob-font);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ob-ink);
	background: var(--ob-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--ob-roxo-escuro); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
.ob-prose a, .ob-note a, .ob-lead a { text-decoration: underline; text-underline-offset: .18em; }
ul[class], ol[class], .ob-swatches ul, .ob-footer ul, .ob-box ul { list-style: none; margin: 0; padding: 0; }
/* <picture> de ob_img() precisa ocupar o container em qualquer viewport */
.ob-about__media picture, .ob-sidecart__item picture { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.ob-about__media { min-width: 0; overflow: hidden; }
.ob-about, .ob-contact, .ob-cta { min-width: 0; }
.ob-about > * { min-width: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--ob-ink); text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1rem; }
:focus-visible { outline: 3px solid var(--ob-azul); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--ob-amarelo); color: var(--ob-ink); }

/* 4. Utilitários ---------------------------------------------------------- */
.ob-container { width: min(100% - 2 * var(--ob-gutter), var(--ob-container)); margin-inline: auto; }
.ob-section { padding-block: var(--ob-section); }
.ob-section--tight { padding-block: calc(var(--ob-section) * .6); }
.ob-section--lilas { background: var(--ob-lilas-50); }
.ob-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ob-font-alt); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-roxo-escuro); background: var(--ob-lilas-100); padding: 6px 14px; border-radius: var(--ob-r-pill); margin-bottom: 18px; }
.ob-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ob-ink-2); max-width: 62ch; }
.ob-muted { color: var(--ob-ink-2); }
.ob-center { text-align: center; }
.ob-center .ob-lead { margin-inline: auto; }
.ob-mt-0 { margin-top: 0; }

/* Botões: pill único + ícone em "ilha" */
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px 0 26px; border-radius: var(--ob-r-pill); font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: -.005em; white-space: nowrap; transition: transform var(--ob-t), background-color var(--ob-t), box-shadow var(--ob-t), color var(--ob-t); text-decoration: none !important; }
.ob-btn:active { transform: scale(.97); }
.ob-btn .ob-btn__ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; margin-right: -8px; transition: transform var(--ob-t), background-color var(--ob-t); }
.ob-btn:hover .ob-btn__ic { transform: translate(3px, -1px); }
.ob-btn--primary { background: var(--ob-roxo-cta); color: #fff; box-shadow: 0 8px 22px -10px rgba(94, 68, 160, .7), var(--ob-shadow-inset); }
.ob-btn--primary:hover { background: var(--ob-roxo-escuro); color: #fff; }
.ob-btn--primary .ob-btn__ic { background: rgba(255, 255, 255, .18); }
.ob-btn--white { background: #fff; color: var(--ob-roxo-escuro); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35); }
.ob-btn--white:hover { background: var(--ob-lilas-50); }
.ob-btn--white .ob-btn__ic { background: var(--ob-lilas-100); }
.ob-btn--ghost { background: transparent; color: var(--ob-roxo-escuro); box-shadow: inset 0 0 0 2px var(--ob-lilas-200); }
.ob-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ob-roxo); }
.ob-btn--ghost-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ob-btn--ghost-white:hover { background: rgba(255, 255, 255, .12); }
.ob-btn--wa { background: #25D366; color: #073d1f; }
.ob-btn--wa:hover { background: #1fbf5a; }
.ob-btn--sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.ob-btn--sm .ob-btn__ic { width: 26px; height: 26px; }
.ob-btn--block { width: 100%; }
.ob-btn[disabled], .ob-btn.is-loading { opacity: .6; pointer-events: none; }
.ob-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ob-roxo-escuro); }
.ob-link .ob-i { transition: transform var(--ob-t); }
.ob-link:hover .ob-i { transform: translateX(3px); }

/* Chips e badges */
.ob-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ob-r-pill); font-size: .86rem; font-weight: 700; background: var(--ob-lilas-100); color: var(--ob-roxo-ink); }
.ob-chip--rosa { background: var(--ob-rosa-50); color: #9A2F5E; }
.ob-chip--verde { background: var(--ob-verde-50); color: var(--ob-verde-ink); }
.ob-chip--azul { background: var(--ob-azul-50); color: var(--ob-azul-ink); }
.ob-chip--amarelo { background: var(--ob-amarelo-50); color: #7A4B00; }
.ob-price { font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-price--badge { display: inline-block; background: var(--ob-rosa); color: #fff; padding: 4px 12px; border-radius: 14px; }
.ob-price-old { font-size: .95rem; color: var(--ob-ink-3); text-decoration: line-through; font-weight: 700; }
.ob-price-from { font-size: .86rem; color: var(--ob-ink-2); font-weight: 700; }

/* Double-bezel */

/* 5. Header ---------------------------------------------------------------- */
.ob-header { position: sticky; top: 0; z-index: 40; height: var(--ob-header-h); background: rgba(255, 253, 251, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--ob-t), box-shadow var(--ob-t); }
.ob-header.is-scrolled { border-color: var(--ob-border); box-shadow: 0 8px 30px -22px rgba(42, 35, 64, .35); }
.ob-header__in { height: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.ob-logo { display: inline-flex; align-items: center; flex: none; }
.ob-logo img { height: 44px; width: auto; }
.ob-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.ob-nav a { padding: 10px 14px; border-radius: var(--ob-r-pill); font-weight: 800; font-size: .98rem; color: var(--ob-ink); transition: background-color var(--ob-t), color var(--ob-t); text-decoration: none !important; }
.ob-nav a:hover, .ob-nav a.is-active { background: var(--ob-lilas-100); color: var(--ob-roxo-escuro); }
.ob-nav a.is-cta { color: var(--ob-roxo-escuro); }
.ob-search { position: relative; flex: 0 1 300px; }
.ob-search input { width: 100%; height: 44px; padding: 0 44px 0 18px; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-pill); background: #fff; font-size: .95rem; transition: border-color var(--ob-t), box-shadow var(--ob-t); }
.ob-search input:focus { outline: 0; border-color: var(--ob-roxo); box-shadow: 0 0 0 4px var(--ob-lilas-100); }
.ob-search button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ob-roxo-escuro); }
.ob-search__dd { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: var(--ob-r-inner); box-shadow: var(--ob-shadow-lg); padding: 8px; display: none; z-index: 5; }
.ob-search__dd.is-open { display: block; }
.ob-search__dd a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none !important; color: var(--ob-ink); }
.ob-search__dd a:hover { background: var(--ob-lilas-50); }
.ob-search__dd img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ob-search__dd small { display: block; color: var(--ob-ink-2); }
.ob-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.ob-action { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ob-ink); transition: background-color var(--ob-t), color var(--ob-t); text-decoration: none !important; }
.ob-action:hover { background: var(--ob-lilas-100); color: var(--ob-roxo-escuro); }
.ob-action--wa { color: #128C4B; }
.ob-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ob-rosa); color: #fff; font-size: .7rem; font-weight: 900; line-height: 18px; text-align: center; }
.ob-count.is-zero { display: none; }
.ob-burger { display: none; }
@media (max-width: 1063px) {
	/* 23/09/2026: sem isto, .ob-logo e .ob-actions ficam colados (ambos flex-start),
	   deixando os icones grudados no logo e uma faixa vazia a direita.
	   24/09/2026: corte subiu de 1023 para 1063 — medido com puppeteer que o menu
	   desktop completo (logo+nav+busca+ações+CTA) só cabe sem estourar a partir de
	   ~1060px (926px úteis de container); em 1024-1059px sobrava até 26px de
	   rolagem horizontal fantasma. Nessa faixa estreita o menu agora colapsa pro
	   mesmo hambúrguer/drawer que já funciona no mobile, em vez de espremer os
	   links (evita menu ilegível/clicável demais perto do limite). */
	.ob-header__in { justify-content: space-between; width: 100%; }
	.ob-logo { margin-right: auto; }
	.ob-actions { margin-left: auto; }
	.ob-nav, .ob-search { display: none; }
	.ob-burger { display: grid; }
	.ob-logo img { height: 40px; }
}

/* Drawer (menu mobile) */
.ob-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.ob-drawer.is-open { display: block; }
.ob-drawer__bg { position: absolute; inset: 0; background: rgba(42, 35, 64, .45); backdrop-filter: blur(4px); }
.ob-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff; padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 18px; border-radius: 0 28px 28px 0; box-shadow: var(--ob-shadow-lg); animation: ob-slide-in 420ms var(--ob-ease); }
.ob-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.ob-drawer__panel form { display: flex; gap: 8px; }
.ob-drawer__panel form input { flex: 1; height: 46px; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-pill); padding: 0 16px; }
.ob-drawer__group .ob-drawer__h { font-family: var(--ob-font-alt); font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-ink-3); margin: 0 0 6px 12px; }
.ob-drawer__group a { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; font-weight: 800; color: var(--ob-ink); text-decoration: none !important; animation: ob-rise 500ms var(--ob-ease) both; animation-delay: var(--d, 0ms); }
.ob-drawer__group a:hover { background: var(--ob-lilas-50); }
.ob-drawer__foot { margin-top: auto; display: grid; gap: 10px; }
@keyframes ob-slide-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 6. Hero assinatura ---------------------------------------------------- */

/* Faixa de fatos (sem cards) */

/* 7. Linhas (bento 1+2) --------------------------------------------------- */

/* 8. Narrativa de scroll: seletor + sticky stack ------------------------- */

/* 9. Specs tiles (2 col, fundos variados) --------------------------------- */
@media (max-width: 599px) { .ob-tiles { grid-template-columns: 1fr; } }

/* 10. Sobre / manifesto ---------------------------------------------------- */
.ob-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.ob-about__media { border-radius: var(--ob-r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ob-lilas-100); }
.ob-about__media img { width: 100%; height: 100%; object-fit: cover; }
.ob-about__pillars { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 767px) { .ob-about { grid-template-columns: 1fr; } .ob-about__media { aspect-ratio: 4 / 3; } }

/* 11. FAQ ------------------------------------------------------------------ */

/* 12. CTA final ------------------------------------------------------------ */
.ob-cta { border-radius: 28px; background: var(--ob-roxo-escuro); color: #fff; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.ob-cta h2 { color: #fff; }
.ob-cta p { color: rgba(255, 255, 255, .85); }
.ob-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 767px) { .ob-cta { grid-template-columns: 1fr; } .ob-cta__actions { justify-content: flex-start; } }

/* 13. Catálogo (loja/categoria) ------------------------------------------- */
.ob-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--ob-ink-3); margin-bottom: 14px; }
.ob-breadcrumb a { color: var(--ob-ink-2); display: inline-flex; align-items: center; position: relative; }
/* 23/09/2026 (achado P1 #6): "Início" media ~32x22px; ::after eleva pra >=44px sem mudar o texto/layout do rodapé de migalhas. */
.ob-breadcrumb a::after { content: ""; position: absolute; inset: -13px -8px; }
.ob-empty { padding: 64px 0; text-align: center; color: var(--ob-ink-2); }
.woocommerce-result-count, .woocommerce-ordering, .woocommerce-breadcrumb, .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; margin: 32px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 50%; font-weight: 800; background: #fff; border: 1px solid var(--ob-border-2); }
.woocommerce-pagination span.current { background: var(--ob-roxo); color: #fff; border-color: var(--ob-roxo); }

/* 14. Produto -------------------------------------------------------------- */
.ob-qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-pill); background: #fff; }
.ob-qty button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--ob-roxo-escuro); }
.ob-qty input { width: 44px; height: 100%; text-align: center; border: 0; font-weight: 800; background: transparent; -moz-appearance: textfield; }
.ob-qty input::-webkit-outer-spin-button, .ob-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Barra fixa de compra no mobile */
.ob-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 253, 251, .92); backdrop-filter: blur(12px); border-top: 1px solid var(--ob-border); transform: translateY(110%); transition: transform 380ms var(--ob-ease); }
.ob-buybar.is-visible { transform: none; }
.ob-buybar__in { display: flex; align-items: center; gap: 12px; }
.ob-buybar__price { display: flex; flex-direction: column; line-height: 1.1; }
.ob-buybar__price .ob-price { font-size: 1.25rem; }
.ob-buybar .ob-btn { flex: 1; min-height: 50px; }
@media (max-width: 899px) { .ob-buybar { display: block; } body.single-product { padding-bottom: 80px; } }

/* Relacionados */

/* 15. Sidecart ------------------------------------------------------------- */
.ob-sidecart { position: fixed; inset: 0; z-index: 70; display: none; }
.ob-sidecart.is-open { display: block; }
.ob-sidecart__bg { position: absolute; inset: 0; background: rgba(42, 35, 64, .45); backdrop-filter: blur(4px); }
.ob-sidecart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 440px); background: #fff; border-radius: 28px 0 0 28px; box-shadow: var(--ob-shadow-lg); display: flex; flex-direction: column; animation: ob-slide-right 420ms var(--ob-ease); }
@keyframes ob-slide-right { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-sidecart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--ob-border); }
.ob-sidecart__head h3 { margin: 0; font-size: 1.2rem; }
.ob-sidecart__body { flex: 1; overflow: auto; padding: 12px 22px; }
.ob-sidecart__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ob-border); }
.ob-sidecart__item img { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; background: var(--ob-lilas-50); }
.ob-sidecart__item h4 { font-size: .98rem; margin: 0 0 4px; }
.ob-sidecart__item .ob-qty { height: 38px; }
.ob-sidecart__item .ob-qty button { width: 34px; }
.ob-sidecart__item .ob-qty input { width: 34px; }
.ob-sidecart__rm { color: var(--ob-ink-3); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.ob-sidecart__rm:hover { background: var(--ob-erro-50); color: var(--ob-erro); }
.ob-sidecart__price { font-weight: 900; text-align: right; }

/**
 * Garantia Estendida (24/09/2026): linha de toggle reaproveitada no sidecart,
 * no /carrinho/ (dentro da célula do produto, via hook nativo) e no checkout
 * (inc/warranty.php + inc/checkout.php + woocommerce/cart/cart.php). Botão em
 * contorno roxo (não preenchido) de propósito: "CTA roxo único" por tela — o
 * botão preenchido (.ob-btn--primary / v2-btn--p) continua sendo o único CTA
 * cheio; este é um controle secundário que só preenche quando ativo.
 */
.ob-sidecart__item .ob-warranty-row { grid-column: 1 / -1; }
.ob-warranty-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--ob-lilas-50); border: 1px solid var(--ob-lilas-200); border-radius: 14px; }
.ob-warranty-row.is-active { background: var(--ob-lilas-100); }
.ob-warranty-row__ic { flex: none; display: grid; place-items: center; color: var(--ob-roxo-cta); }
.ob-warranty-row__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-warranty-row__name { font-size: .82rem; font-weight: 800; color: var(--ob-ink); }
.ob-warranty-row__price { font-size: .8rem; font-weight: 700; color: var(--ob-ink-3); }
.ob-warranty-row__btn { flex: none; font-size: .8rem; font-weight: 800; padding: 7px 14px; border-radius: var(--ob-r-pill); border: 1.5px solid var(--ob-roxo-cta); color: var(--ob-roxo-cta); background: transparent; white-space: nowrap; transition: background var(--ob-t), color var(--ob-t); }
.ob-warranty-row__btn:hover { background: var(--ob-lilas-200); }
.ob-warranty-row__btn.is-active { background: var(--ob-roxo-cta); color: #fff; border-color: var(--ob-roxo-cta); }
.ob-warranty-row__btn:disabled { opacity: .6; pointer-events: none; }
.product-name .ob-warranty-row { max-width: 420px; }
.ob-sidecart__empty { padding: 48px 12px; text-align: center; color: var(--ob-ink-2); display: grid; gap: 14px; justify-items: center; }
.ob-sidecart__foot { padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ob-border); display: grid; gap: 10px; }
.ob-sidecart__total { display: flex; justify-content: space-between; font-weight: 900; font-size: 1.15rem; }
.ob-sidecart__total small { display: block; color: var(--ob-ink-2); font-weight: 600; font-size: .82rem; }
.ob-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 80; background: var(--ob-ink); color: #fff; padding: 12px 18px; border-radius: var(--ob-r-pill); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity var(--ob-t), transform var(--ob-t); }
.ob-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 16. Woo base (carrinho, conta, avisos, formulários) --------------------- */
.ob-page { padding-block: clamp(28px, 5vw, 56px) var(--ob-section); }
.ob-page--narrow .ob-page__in { max-width: 820px; margin-inline: auto; }
.ob-page__head { margin-bottom: 28px; }
.ob-prose { max-width: 70ch; }
.ob-prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.ob-prose h3 { margin-top: 1.4em; }
.ob-prose ul, .ob-prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.ob-prose li { margin-bottom: .35em; }
.ob-note { padding: 14px 18px; border-radius: 14px; background: var(--ob-amarelo-50); color: #7A4B00; font-weight: 700; font-size: .95rem; margin-bottom: 24px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { list-style: none; margin: 0 0 18px; padding: 12px 18px; border-radius: 14px; background: var(--ob-lilas-100); color: var(--ob-roxo-ink); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; outline: 0 !important; }
.woocommerce-error { background: var(--ob-erro-50); color: var(--ob-erro); flex-direction: column; align-items: flex-start; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.woocommerce-error .button { margin-left: auto; min-height: 42px; padding: 0 18px; font-size: .92rem; }
.woocommerce-message { background: var(--ob-verde-50); color: var(--ob-verde-ink); }
.woocommerce-message .button, .woocommerce-info .button { float: none; order: 2; margin-left: auto; min-height: 42px; padding: 0 18px; font-size: .92rem; }
.ob-checkout-body .woocommerce-notices-wrapper { max-width: 640px; margin: 16px auto 0; padding: 0 16px; }
/* Cupom do Woo: começa fechado (o JS do Woo faz o toggle); sem o CSS do Woo ele apareceria aberto. */
form.checkout_coupon.woocommerce-form-coupon { display: none; }
/* Simulador de frete (Melhor Envio) dentro do tema */
.ob-shipping:empty { display: none; }
.ob-shipping .containerCalculator { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.ob-shipping .calculatorRow p { font-weight: 800; color: var(--ob-ink); margin: 0 0 8px; font-size: .95rem; }
.ob-shipping .col-75 { width: 100% !important; }
.ob-shipping input.iptCep { width: 100% !important; min-height: 50px; padding: 12px 16px !important; border: 1.5px solid var(--ob-border-2) !important; border-radius: var(--ob-r-input) !important; background: #fff !important; font: inherit !important; font-weight: 700; }
.ob-shipping input.iptCep:focus { outline: 0; border-color: var(--ob-roxo); box-shadow: 0 0 0 4px var(--ob-lilas-100); }
.ob-shipping .resultado-frete table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .92rem; }
.ob-shipping .resultado-frete td, .ob-shipping .resultado-frete th { padding: 8px 4px; border-bottom: 1px solid var(--ob-border); text-align: left; }
.ob-shipping .resultado-frete small { color: var(--ob-ink-2); }
#calcular-frete-loader { display: none; }
.form-row { margin: 0 0 14px; }
.form-row label { display: block; font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.form-row label .required { color: var(--ob-rosa); text-decoration: none; }
.form-row .optional { color: var(--ob-ink-3); font-weight: 600; font-size: .8rem; }
.input-text, .ob-input, .woocommerce textarea, select.select, .form-row select, .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="password"], .form-row input[type="number"], .form-row textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-input); background: #fff; transition: border-color var(--ob-t), box-shadow var(--ob-t); }
.form-row textarea, .woocommerce textarea { min-height: 120px; }
.input-text:focus, .ob-input:focus, .form-row select:focus, .form-row textarea:focus { outline: 0; border-color: var(--ob-roxo); box-shadow: 0 0 0 4px var(--ob-lilas-100); }
.form-row.woocommerce-invalid .input-text { border-color: var(--ob-erro); }
.form-row-first, .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
.form-row-last { margin-left: 14px; }
@media (max-width: 599px) { .form-row-first, .form-row-last { width: 100%; margin-left: 0; display: block; } }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--ob-r-pill); background: var(--ob-roxo-cta); color: #fff; font-weight: 800; transition: background-color var(--ob-t), transform var(--ob-t); cursor: pointer; }
.woocommerce .button:hover { background: var(--ob-roxo-escuro); color: #fff; text-decoration: none; }
.woocommerce .button:active { transform: scale(.97); }
.woocommerce .button.alt { background: var(--ob-rosa); }
/* 23/09/2026 (achado P1 #9, CTA do funil): "Finalizar compra" no carrinho mantém as classes
   nativas do Woo (checkout-button button alt wc-forward) por compatibilidade de hooks, mas
   .woocommerce .button.alt (3 classes) tem mais especificidade que .v2-btn--p (1 classe) e
   pintava o botão de rosa/magenta — diferente do roxo (--ob-roxo-cta) usado no resto do funil
   (produto, checkout, contato). Esta regra, mais específica, devolve o roxo sem remover a
   classe .alt (evita risco de quebrar algo do Woo que dependa dela). */
.woocommerce .button.alt.v2-btn--p { background: var(--ob-roxo-cta); }
.woocommerce .button.alt.v2-btn--p:hover { background: var(--ob-roxo-escuro); }
.woocommerce .button[disabled] { opacity: .5; cursor: not-allowed; }
/* Carrinho */
.woocommerce-cart-form { margin-bottom: 24px; }
.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); overflow: hidden; }
.shop_table th { text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ob-ink-3); padding: 14px 16px; border-bottom: 1px solid var(--ob-border); }
.shop_table td { padding: 16px; border-bottom: 1px solid var(--ob-border); vertical-align: middle; }
.shop_table tr:last-child td { border-bottom: 0; }
.shop_table .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: var(--ob-lilas-50); }
.shop_table .product-name a { font-weight: 800; color: var(--ob-ink); }
.shop_table .product-remove a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ob-ink-3); font-weight: 900; font-size: 1.2rem; position: relative; }
/* 23/09/2026 (achado P1 #4): esta regra (mais específica que .ob-cart__remove em v2.css) é quem
   realmente vale no carrinho — media 34x34px reais. ::after eleva a área clicável a 44px sem mudar o ícone visual. */
.shop_table .product-remove a::after { content: ""; position: absolute; inset: -5px; }
.shop_table .product-remove a:hover { background: var(--ob-erro-50); color: var(--ob-erro); text-decoration: none; }
.shop_table .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-pill); }
.shop_table .quantity .qty { width: 72px; height: 44px; text-align: center; border: 0; background: transparent; font-weight: 800; }
.shop_table .actions { background: var(--ob-lilas-50); }
.shop_table .actions .coupon { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shop_table .actions .coupon .input-text { width: 200px; min-height: 46px; }
.shop_table .actions .coupon label { display: none; }
.shop_table .actions > .button { float: right; }
.cart-collaterals { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 24px; justify-content: end; }
.cart_totals { grid-column: 2; background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); padding: 22px; box-shadow: var(--ob-shadow); }
.cart_totals h2 { font-size: 1.3rem; }
.cart_totals .shop_table { border: 0; }
.cart_totals th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ob-ink-2); padding-left: 0; }
.cart_totals td { padding-right: 0; text-align: right; font-weight: 800; }
.cart_totals .order-total td { font-size: 1.3rem; }
.wc-proceed-to-checkout .button { width: 100%; min-height: 56px; font-size: 1.05rem; margin-top: 12px; }
.cross-sells { display: none; }
.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; text-align: left; }
.woocommerce-shipping-methods li { padding: 8px 0; font-weight: 700; }
.woocommerce-shipping-calculator .button { margin-top: 8px; }
.cart-empty { text-align: center; padding: 40px 0 10px; font-size: 1.2rem; font-weight: 800; }
.return-to-shop { text-align: center; }
@media (max-width: 767px) {
	.cart-collaterals { grid-template-columns: 1fr; }
	.cart_totals { grid-column: 1; }
	.shop_table thead { display: none; }
	.shop_table tr { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px 12px; padding: 14px 12px; border-bottom: 1px solid var(--ob-border); }
	.shop_table td { padding: 0; border: 0; }
	.shop_table .product-thumbnail { grid-row: 1 / span 3; }
	.shop_table .product-remove { grid-column: 3; grid-row: 1; justify-self: end; }
	.shop_table .product-name { grid-column: 2; }
	.shop_table .product-price { display: none; }
	.shop_table .product-quantity { grid-column: 2; }
	.shop_table .product-subtotal { grid-column: 3; grid-row: 3; font-weight: 900; }
	.shop_table td.actions { grid-column: 1 / -1; display: grid; gap: 10px; }
	.shop_table .actions .coupon { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
	.shop_table .actions .coupon .input-text { width: 100%; }
	.shop_table .actions > .button { float: none; width: 100%; margin-top: 0; }
}
/* Minha conta */
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 14px; border-radius: var(--ob-r-pill); background: #fff; border: 1.5px solid var(--ob-border-2); font-weight: 800; color: var(--ob-ink-2); }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { border-color: var(--ob-roxo); color: var(--ob-roxo-escuro); text-decoration: none; }
.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); padding: 24px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { max-width: 480px; background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); padding: 28px; box-shadow: var(--ob-shadow); }
.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 767px) { .u-columns { grid-template-columns: 1fr; } }
.woocommerce-order-received .woocommerce-order { display: grid; gap: 24px; }
.woocommerce-thankyou-order-received { font-size: 1.4rem; font-weight: 900; color: var(--ob-verde-ink); }
.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 14px; background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); padding: 18px; }
.woocommerce-order-overview li { flex: 1 1 150px; font-size: .9rem; color: var(--ob-ink-2); }
.woocommerce-order-overview strong { display: block; color: var(--ob-ink); }

/* 17. Contato -------------------------------------------------------------- */
.ob-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.ob-contact__channels { display: grid; gap: 12px; }
.ob-channel { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--ob-border); text-decoration: none !important; color: var(--ob-ink); transition: transform var(--ob-t), box-shadow var(--ob-t); }
.ob-channel:hover { transform: translateY(-2px); box-shadow: var(--ob-shadow); }
.ob-channel .ob-i { flex: none; color: var(--ob-roxo-escuro); width: 26px; height: 26px; }
.ob-channel strong { display: block; }
.ob-channel span { color: var(--ob-ink-2); font-size: .92rem; }
.ob-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--ob-border); border-radius: var(--ob-r-card); padding: 26px; box-shadow: var(--ob-shadow); }
.ob-form label { font-weight: 800; font-size: .92rem; display: grid; gap: 6px; }
.ob-form .ob-input { min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--ob-border-2); border-radius: var(--ob-r-input); }
.ob-form textarea.ob-input { min-height: 130px; resize: vertical; }
.ob-form__hp { position: absolute; left: -9999px; }
.ob-form__msg { padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.ob-form__msg.is-ok { background: var(--ob-verde-50); color: var(--ob-verde-ink); }
.ob-form__msg.is-err { background: var(--ob-erro-50); color: var(--ob-erro); }
@media (max-width: 767px) { .ob-contact { grid-template-columns: 1fr; } }

/* 18. Footer --------------------------------------------------------------- */
.ob-footer { margin-top: var(--ob-section); background: var(--ob-roxo-escuro); color: rgba(255, 255, 255, .92); border-radius: 36px 36px 0 0; padding: clamp(40px, 6vw, 72px) 0 28px; }
.ob-footer a { color: #fff; }
.ob-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.ob-footer__brand img { height: 64px; width: auto; margin-bottom: 16px; }
.ob-footer__brand p { max-width: 36ch; font-size: .95rem; }
.ob-footer .ob-footer__h { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--ob-font-alt); font-weight: 500; margin-bottom: 14px; }
.ob-footer ul { display: grid; gap: 8px; }
.ob-footer li a { font-weight: 700; }
.ob-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.ob-footer__contact .ob-i { flex: none; margin-top: 3px; color: var(--ob-amarelo); }
.ob-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ob-footer__pay span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: .8rem; font-weight: 700; }
.ob-footer__bottom a { text-decoration: underline; text-underline-offset: .18em; }
.ob-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .85rem; color: rgba(255, 255, 255, .88); }
.ob-social { display: flex; gap: 8px; }
.ob-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background-color var(--ob-t); }
.ob-social a:hover { background: rgba(255, 255, 255, .25); }
@media (max-width: 899px) { .ob-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ob-footer__grid { grid-template-columns: 1fr; } }

/* WhatsApp flutuante (só mobile fora do produto/checkout) */
.ob-wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
body.single-product .ob-wa-float, body.ob-checkout-body .ob-wa-float { display: none; }

/* 19. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ob-ease), transform 700ms var(--ob-ease); transition-delay: var(--d, 0ms); }
	html.js [data-reveal].is-in { opacity: 1; transform: none; }
	.ob-btn--primary.is-added { animation: ob-pop 500ms var(--ob-ease); }
	@keyframes ob-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
	.ob-buybar { transform: none; }
}