/*
Theme Name: VillaForza
Theme URI: https://villaforza.com.br
Author: Matheus Lima
Description: Tema de blocos da VillaForza — catálogo de afiliados de suplementos, saúde e acessórios de treino. Paleta Verde Floresta + Lima Forza, Montserrat + Inter (fontes locais, sem Google Fonts), integração com WooCommerce (produtos externos/afiliados).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villaforza
Tags: block-theme, full-site-editing, e-commerce, custom-colors
*/

:root {
	--vf-floresta: #14201C;
	--vf-lima: #B7E36A;
	--vf-off: #F7F8F5;
	--vf-grafite: #252A29;
	--vf-borda: #DDE2DC;
	--vf-sup: #EEF1EC;
	--vf-sec: #5B6461;
	--vf-medio: #3D5A4C;
	--vf-lima-texto: #4A7318;
	--vf-mont: var(--wp--preset--font-family--montserrat);
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--vf-lima-texto); outline-offset: 2px; }
.vf-eyebrow { font-family: var(--vf-mont); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0; }

/* ---------- Barra de aviso ---------- */
.vf-topbar { font-size: 13px; text-align: center; }
.vf-topbar p { margin: 0; }

/* ---------- Cabeçalho ---------- */
.vf-header { position: relative; z-index: 20; }
.vf-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--vf-floresta) !important; }
.vf-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.vf-logo__word { font-family: var(--vf-mont); font-size: 21px; line-height: 1; white-space: nowrap; }
.vf-logo__word b { font-weight: 800; letter-spacing: .03em; }
.vf-logo__word span { font-weight: 400; letter-spacing: .16em; }
.vf-logo--dark { color: var(--vf-off) !important; }
.vf-logo--dark .vf-logo__word span { font-weight: 300; }

.vf-search { flex: 1 1 320px; max-width: 640px; }
.vf-search .wp-block-search__inside-wrapper { border: 2px solid var(--vf-floresta) !important; border-radius: 10px; padding: 0 4px 0 12px !important; background: #fff; height: 48px; align-items: center; }
.vf-search .wp-block-search__input { border: 0 !important; font-size: 15px; background: transparent; min-width: 0; }
.vf-search .wp-block-search__button { margin: 0; border-radius: 8px; background: var(--vf-floresta); color: var(--vf-off); padding: 8px 12px; }
.vf-search .wp-block-search__button svg { fill: currentColor; }

.vf-nav .wp-block-navigation-item__content { padding: 8px 0; color: var(--vf-floresta); text-decoration: none; }
.vf-nav .wp-block-navigation-item__content:hover { color: var(--vf-lima-texto); }
.vf-nav .vf-nav-destaque > .wp-block-navigation-item__content { color: var(--vf-lima-texto); }

/* ---------- Hero ---------- */
.vf-hero { position: relative; overflow: hidden; isolation: isolate; }
.vf-hero::before, .vf-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.vf-hero::before { right: 8%; top: -80px; width: 90px; height: 720px; background: var(--vf-lima); transform: rotate(22deg); opacity: .9; }
.vf-hero::after { right: 22%; top: -40px; width: 90px; height: 600px; background: var(--vf-medio); transform: rotate(-28deg); }
.vf-hero .vf-hero__img img { border-radius: 20px; width: 100%; height: 400px; object-fit: cover; display: block; }
.vf-hero .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--vf-off); color: var(--vf-off); background: transparent; }
.vf-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--vf-off); color: var(--vf-floresta); }

/* Botão lima (CTA principal) */
.vf-btn-lima .wp-block-button__link { background: var(--vf-lima) !important; color: var(--vf-floresta) !important; font-weight: 800; }
.vf-btn-lima .wp-block-button__link:hover { background: #a6d455 !important; }

/* ---------- Categorias ---------- */
.vf-cats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.vf-cat { background: #fff; border: 1px solid var(--vf-borda); border-radius: 16px; padding: 22px 16px; text-align: center; transition: border-color .15s, transform .15s; position: relative; }
.vf-cat:hover { border-color: var(--vf-floresta); transform: translateY(-2px); }
.vf-cat__icon { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 16px; background: var(--vf-floresta); display: flex; align-items: center; justify-content: center; }
.vf-cat__icon svg { width: 30px; height: 30px; }
.vf-cat p { margin: 0; font-family: var(--vf-mont); font-size: 15px; font-weight: 700; }
.vf-cat a { color: var(--vf-floresta); text-decoration: none; }
.vf-cat a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* card inteiro clicável */

/* ---------- Cards de produto (WooCommerce) ---------- */
.woocommerce ul.products, .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 0 !important; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid var(--vf-borda); border-radius: 16px; padding: 14px !important;
	display: flex; flex-direction: column; gap: 10px; position: relative;
}
.woocommerce ul.products li.product a img { border-radius: 12px; background: var(--vf-sup); aspect-ratio: 1/1; object-fit: contain; margin: 0 0 4px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--vf-mont); font-size: 17px !important; font-weight: 700; line-height: 1.3; color: var(--vf-floresta); padding: 0 !important; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; text-decoration: none; }
.woocommerce ul.products li.product .price { font-family: var(--vf-mont); font-size: 24px !important; font-weight: 800; color: var(--vf-floresta) !important; margin: auto 0 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.woocommerce ul.products li.product .vf-loja-parceira { margin-top: -4px; }
.woocommerce ul.products li.product .price del { font-size: 15px; font-weight: 500; color: var(--vf-sec); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
	margin: 4px 0 0 !important; width: 100%; box-sizing: border-box; padding: 0 12px !important; text-align: center; height: 48px; display: flex !important; align-items: center; justify-content: center; gap: 8px;
	border-radius: 10px; background: var(--vf-floresta) !important; color: var(--vf-off) !important;
	font-family: var(--vf-mont); font-weight: 700; font-size: 15px;
}
.woocommerce ul.products li.product .button:hover { background: var(--vf-medio) !important; }
.woocommerce ul.products li.product .button.product_type_external::after {
	content: ""; width: 16px; height: 16px; flex-shrink: 0;
	background: var(--vf-lima);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce span.onsale {
	top: 24px !important; left: 24px !important; right: auto !important; margin: 0 !important; min-height: 0; min-width: 0; line-height: 1;
	padding: 6px 10px; border-radius: 6px; background: var(--vf-lima); color: var(--vf-floresta);
	font-family: var(--vf-mont); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.vf-loja-parceira { font-size: 12px; color: var(--vf-sec); margin-top: -6px; }

/* ---------- Produto individual ---------- */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.woocommerce div.product > * { float: none !important; width: auto !important; }
.woocommerce div.product .woocommerce-product-gallery { background: #fff; border: 1px solid var(--vf-borda); border-radius: 16px; padding: 16px; }
.woocommerce div.product .product_title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.woocommerce div.product p.price { font-family: var(--vf-mont); font-size: 28px !important; font-weight: 800; color: var(--vf-floresta) !important; }
.woocommerce div.product form.cart { margin: 20px 0; }
.woocommerce div.product form.cart .button, .vf-btn-loja {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	min-height: 54px; padding: 0 30px !important; border-radius: 10px !important;
	background: var(--vf-lima) !important; color: var(--vf-floresta) !important; box-shadow: inset 0 0 0 2px var(--vf-floresta);
	font-family: var(--vf-mont); font-weight: 800 !important; font-size: 16px !important; text-decoration: none;
}
.woocommerce div.product form.cart .button:hover, .vf-btn-loja:hover { background: #a6d455 !important; }
.vf-aviso-afiliado { font-size: 13px; line-height: 1.5; color: var(--vf-sec); margin: 8px 0 0; }
.vf-aviso-suplemento { display: flex; gap: 10px; background: var(--vf-sup); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; margin: 20px 0; }
.vf-aviso-suplemento svg { flex-shrink: 0; }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 16px !important; border-bottom: 1px solid var(--vf-borda); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 16px 0 0 !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--vf-mont); font-weight: 700; color: var(--vf-sec) !important; padding: 12px 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vf-floresta) !important; box-shadow: inset 0 -3px 0 var(--vf-lima); }
.woocommerce .woocommerce-breadcrumb { font-size: 13px; color: var(--vf-sec) !important; margin-bottom: 20px !important; }
.woocommerce .woocommerce-breadcrumb a { color: var(--vf-sec) !important; }
.woocommerce table.shop_attributes, .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-color: var(--vf-borda) !important; }

/* Barra fixa "Ver melhor oferta" (mobile) */
.vf-sticky-cta { display: none; }

/* ---------- Loja / arquivo ---------- */
.woocommerce .woocommerce-result-count { font-size: 14px; color: var(--vf-sec); }
.woocommerce .woocommerce-ordering select { height: 44px; border: 1px solid #A9B2AD; border-radius: 10px; padding: 0 12px; background: #fff; }
.woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 44px; height: 44px; display: flex !important; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--vf-borda) !important; background: #fff; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--vf-floresta) !important; color: var(--vf-off) !important; }

/* ---------- Banner promocional ---------- */
.vf-banner { position: relative; overflow: hidden; isolation: isolate; }
.vf-banner::before { content: ""; position: absolute; z-index: -1; right: 30%; top: -60px; width: 70px; height: 420px; background: var(--vf-floresta); opacity: .08; transform: rotate(22deg); }

/* ---------- Guia (posts) ---------- */
.vf-guia .wp-block-post-template { gap: 20px; }
.vf-post-card { background: #fff; border: 1px solid var(--vf-borda); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.vf-post-card .wp-block-post-featured-image { margin: 0; height: 170px; background: var(--vf-floresta); position: relative; overflow: hidden; }
.vf-post-card .wp-block-post-featured-image:not(:has(img))::after,
.vf-post-card .vf-thumb-fallback::after { content: ""; position: absolute; right: 30px; top: -30px; width: 36px; height: 240px; background: var(--vf-lima); transform: rotate(22deg); }
.vf-post-card .wp-block-post-featured-image img { height: 170px; object-fit: cover; }
/* Post sem imagem destacada: faixa da marca no lugar da foto */
.vf-post-card:not(:has(.wp-block-post-featured-image))::before {
	content: ""; display: block; height: 140px; flex-shrink: 0;
	background: linear-gradient(112deg, var(--vf-floresta) 0 72%, var(--vf-lima) 72% 77%, var(--vf-floresta) 77% 100%);
}
/* Lupa do zoom da galeria */
.woocommerce div.product .woocommerce-product-gallery__trigger { top: 24px !important; right: 24px !important; background: #fff; border: 1px solid var(--vf-borda); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.woocommerce div.product .woocommerce-product-gallery__trigger img.emoji { width: 18px !important; height: 18px !important; }
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.vf-post-card .vf-post-card__body { padding: 18px; }
.vf-post-card .wp-block-post-terms a { font-family: var(--vf-mont); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vf-lima-texto); text-decoration: none; }
.vf-post-card .wp-block-post-title a { color: var(--vf-floresta); text-decoration: none; }
.vf-post-card .wp-block-post-title a:hover { color: var(--vf-lima-texto); }

/* ---------- Como funciona ---------- */
.vf-step__num { font-family: var(--vf-mont); font-size: 28px; font-weight: 800; color: var(--vf-lima-texto); margin: 0; line-height: 1; }

/* ---------- Rodapé ---------- */
.vf-footer a { color: #C9D1CC; text-decoration: none; }
.vf-footer a:hover { color: var(--vf-lima); }
.vf-footer .wp-block-navigation .wp-block-navigation-item__content { padding: 4px 0; }
.vf-footer__legal { border-top: 1px solid #2E3D37; }
.vf-footer__legal p { margin: 0 0 6px; }

/* ---------- Conteúdo de artigos ---------- */
.vf-artigo .wp-block-post-content > p, .vf-artigo .wp-block-post-content li { font-size: 17px; line-height: 1.7; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.vf-hero::before { right: -10px; top: -40px; width: 48px; height: 360px; }
	.vf-hero::after { display: none; }
	.vf-hero .vf-hero__img img { height: 220px; }
	.vf-hero .wp-block-buttons, .vf-hero .wp-block-button { width: 100%; }
	.vf-hero .wp-block-button__link { width: 100%; text-align: center; }
	.vf-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.vf-cat { padding: 14px 6px; border-radius: 14px; }
	.vf-cat__icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
	.vf-cat__icon svg { width: 24px; height: 24px; }
	.vf-cat p { font-size: 12px; }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.woocommerce ul.products li.product { padding: 10px !important; gap: 8px; border-radius: 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
	.woocommerce ul.products li.product .price { font-size: 19px !important; }
	.woocommerce ul.products li.product .button { height: 44px; font-size: 14px; }
	.woocommerce span.onsale { top: 16px !important; left: 16px !important; font-size: 10px; padding: 4px 7px; }
	.woocommerce div.product { grid-template-columns: 1fr; gap: 20px; }
	.single-product .vf-sticky-cta {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; gap: 12px;
		background: #fff; border-top: 1px solid var(--vf-borda); padding: 12px 16px; box-shadow: 0 -6px 20px rgba(20,32,28,.08);
	}
	.single-product .vf-sticky-cta .vf-sticky-cta__preco { display: flex; flex-direction: column; font-size: 12px; color: var(--vf-sec); flex-shrink: 0; }
	.single-product .vf-sticky-cta .vf-sticky-cta__preco strong { font-family: var(--vf-mont); font-size: 20px; font-weight: 800; color: var(--vf-floresta); }
	.single-product .vf-sticky-cta .vf-btn-loja { flex-grow: 1; min-height: 52px; padding: 0 12px !important; }
	.single-product { padding-bottom: 80px; }
	.vf-header-row { gap: 12px !important; }
	.vf-search { flex-basis: 100%; max-width: none; }
}

/* ---------- Correções da revisão (v1.0.2) ---------- */
/* blockGap do WP empurrava os cards 2+ para baixo */
.vf-cats > * { margin: 0 !important; }
.vf-cat p { margin: 0 !important; }
/* Botão "Ver na loja" nunca ultrapassa o card; produtos relacionados também */
.woocommerce ul.products li.product .button { max-width: 100%; }
/* Celular: menu (hambúrguer) na mesma linha do logo */
@media (max-width: 599px) {
	.vf-header > .vf-nav { position: absolute; top: 14px; right: 16px; margin: 0 !important; }
	.vf-header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
	.vf-header-row .vf-logo { min-height: 44px; }
	.vf-header { padding-bottom: 12px !important; }
}
/* Datas em pt-BR vêm das Configurações; aqui só o estilo */
.vf-post-card .wp-block-post-date { font-size: 14px; color: var(--vf-sec); }
/* Preço "de" menor na página do produto */
.woocommerce div.product p.price del { font-size: .6em; font-weight: 500; color: var(--vf-sec); opacity: 1; margin-right: 6px; }
.woocommerce div.product p.price ins { text-decoration: none; }
/* Menu aberto no celular: itens maiores e com área de toque */
.vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 20px; font-weight: 700; padding: 10px 0; }
.vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.vf-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; background: var(--vf-off); }
/* Artigos do Guia: tabelas e listas */
.vf-artigo .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 15px; background: #fff; border-radius: 12px; overflow: hidden; }
.vf-artigo .wp-block-table th { background: var(--vf-floresta); color: var(--vf-off); font-family: var(--vf-mont); font-weight: 700; text-align: left; }
.vf-artigo .wp-block-table th, .vf-artigo .wp-block-table td { padding: 10px 14px; border: 1px solid var(--vf-borda); vertical-align: top; }
.vf-artigo .wp-block-table { overflow-x: auto; }
.vf-artigo .wp-block-post-featured-image img { border-radius: 16px; max-height: 480px; object-fit: cover; }
.vf-artigo h2.wp-block-heading { font-size: clamp(22px, 2.6vw, 28px); margin-top: 40px; }
.vf-artigo h3.wp-block-heading { font-size: 19px; margin-top: 28px; }
.vf-hero .vf-hero__img img { object-position: 35% center; }