/* ==========================================================================
   PeCStore — estilos do tema
   Cores: vinho #8E2425 · vinho escuro #5F1517 · cobre #C6782A · papel #F7F4F0
   ========================================================================== */

:root {
	--pec-vinho: var(--wp--preset--color--vinho);
	--pec-vinho-escuro: var(--wp--preset--color--vinho-escuro);
	--pec-cobre: var(--wp--preset--color--cobre);
	--pec-papel: var(--wp--preset--color--base);
	--pec-areia: var(--wp--preset--color--areia);
	--pec-grafite: var(--wp--preset--color--contrast);
	--pec-cinza: var(--wp--preset--color--cinza);
	--pec-raio: 6px;
	--pec-sombra: 0 1px 2px rgba(42, 36, 34, .06), 0 8px 24px rgba(42, 36, 34, .06);
	--pec-titulos: var(--wp--preset--font-family--titulos);
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Barra de topo ---------- */
.pec-barra-topo { background: var(--pec-vinho-escuro); color: #fff; padding: .45rem 1rem; }
.pec-barra-topo__texto { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; font-size: .82rem; letter-spacing: .02em; }
.pec-barra-topo__texto span + span::before { content: "•"; color: var(--pec-cobre); margin-right: 1.6rem; }
@media (max-width: 700px) {
	.pec-barra-topo__texto span:nth-child(n+3) { display: none; }
	.pec-barra-topo__texto span + span::before { margin-right: .8rem; }
}

/* ---------- Cabeçalho ---------- */
.pec-cabecalho { background: #fff; border-bottom: 1px solid var(--pec-areia); padding: .8rem 1rem; position: sticky; top: 0; z-index: 50; }
.pec-cabecalho__linha { gap: 1.5rem; }
.pec-logo { display: block; flex-shrink: 0; line-height: 0; }
.pec-logo img { width: 170px; height: auto; }
.pec-menu { font-family: var(--pec-titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; }
.pec-menu .wp-block-navigation-item__content { color: var(--pec-grafite); padding: .3rem 0; border-bottom: 2px solid transparent; }
.pec-menu .wp-block-navigation-item__content:hover { color: var(--pec-vinho); border-bottom-color: var(--pec-cobre); }
.pec-menu .wp-block-navigation__container { gap: 1.4rem; }
.pec-cabecalho__acoes { gap: .9rem; color: var(--pec-grafite); }
.pec-cabecalho__acoes .wp-block-search__button { background: none; color: inherit; padding: .3rem; }
@media (max-width: 960px) {
	.pec-logo img { width: 130px; }
	.pec-cabecalho__linha { gap: .8rem; }
}

/* ---------- Botões ---------- */
.wp-element-button.pec-botao--contorno { background: transparent; color: var(--pec-vinho); box-shadow: inset 0 0 0 2px var(--pec-vinho); }
.wp-element-button.pec-botao--contorno:hover { background: var(--pec-vinho); color: #fff; }
.wp-element-button.pec-botao--branco { background: #fff; color: var(--pec-vinho); }
.wp-element-button.pec-botao--branco:hover { background: var(--pec-areia); color: var(--pec-vinho-escuro); }
a.wp-element-button { text-decoration: none; display: inline-block; }

/* ---------- Pinceladas (decoração) ---------- */
.pec-hero__pinceladas,
.pec-rodape__pinceladas {
	background: url("../img/pinceladas-cobre.webp") no-repeat right top / min(980px, 90%) auto;
	height: 40px; pointer-events: none;
}

/* ---------- Destaque principal ---------- */
.pec-hero { padding: 1.2rem 1rem clamp(2.5rem, 6vw, 5rem); position: relative; overflow: hidden;
	background: radial-gradient(1200px 400px at 85% 20%, rgba(198, 120, 42, .08), transparent 60%), var(--pec-papel); }
.pec-hero__grelha { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.pec-hero__pre { font-family: var(--pec-titulos); font-weight: 600; color: var(--pec-cobre); text-transform: uppercase; letter-spacing: .25em; margin: 0 0 .6rem; font-size: .95rem; }
.pec-hero h1 { margin: 0; color: var(--pec-vinho); }
.pec-hero h1 span { display: block; color: var(--pec-grafite); font-size: .52em; font-weight: 700; margin-top: .4rem; text-transform: none; letter-spacing: 0; }
.pec-hero__sub { font-size: 1.15rem; max-width: 34em; color: var(--pec-cinza); margin: 1.2rem 0 1.8rem; }
.pec-hero__botoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.pec-hero__fotos { position: relative; aspect-ratio: 1 / .9; }
.pec-hero__fotos img { position: absolute; border-radius: 50%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .14)); height: auto; }
.pec-hero__f1 { width: 62%; top: 0; right: 4%; }
.pec-hero__f2 { width: 44%; bottom: 0; left: 0; }
.pec-hero__f3 { width: 36%; bottom: 6%; right: 0; }
@media (max-width: 820px) {
	.pec-hero__grelha { grid-template-columns: 1fr; }
	.pec-hero__fotos { max-width: 300px; width: 100%; margin: .5rem auto 0; aspect-ratio: 1 / .8; }
	.pec-hero__pinceladas { height: 22px; }
}

/* ---------- Vantagens ---------- */
.pec-vantagens { background: #fff; border-block: 1px solid var(--pec-areia); padding: 1.4rem 1rem; }
.pec-vantagens__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2rem; }
.pec-vantagens__lista li { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; }
.pec-vantagens__lista .pec-icone { grid-row: span 2; color: var(--pec-vinho); }
.pec-vantagens__lista strong { font-family: var(--pec-titulos); font-size: 1.12rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.pec-vantagens__lista span { font-size: .88rem; color: var(--pec-cinza); line-height: 1.3; }
@media (max-width: 900px) { .pec-vantagens__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pec-vantagens__lista { grid-template-columns: 1fr; } }

/* ---------- Secções ---------- */
.pec-seccao { padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.pec-seccao__titulo { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.pec-seccao__titulo h2 { margin: 0 0 .5rem; position: relative; display: inline-block; }
.pec-seccao__titulo h2::after { content: ""; display: block; height: 4px; width: 56px; background: var(--pec-cobre); margin: .55rem auto 0; border-radius: 2px; }
.pec-seccao__titulo p { color: var(--pec-cinza); margin: 0; }

/* ---------- Categorias (cartões) ---------- */
.pec-categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pec-categoria { background: #fff; border-radius: var(--pec-raio); box-shadow: var(--pec-sombra); padding: 1.6rem 1.3rem 1.4rem; text-align: center; color: inherit; text-decoration: none;
	display: flex; flex-direction: column; align-items: center; transition: transform .18s ease, box-shadow .18s ease; border-top: 4px solid transparent; }
.pec-categoria:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(42, 36, 34, .12); border-top-color: var(--pec-vinho); color: inherit; }
.pec-categoria img { width: 132px; height: 132px; border-radius: 50%; margin-bottom: .9rem; }
.pec-categoria h3 { margin: 0 0 .35rem; font-size: 1.45rem; text-transform: uppercase; color: var(--pec-vinho); }
.pec-categoria p { margin: 0 0 1rem; font-size: .93rem; color: var(--pec-cinza); line-height: 1.4; flex-grow: 1; }
.pec-categoria__preco { font-family: var(--pec-titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem;
	background: var(--pec-areia); color: var(--pec-vinho-escuro); padding: .3rem .8rem; border-radius: 99px; }
@media (max-width: 1000px) { .pec-categorias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pec-categorias { grid-template-columns: 1fr; } }

/* ---------- Faixa laser ---------- */
.pec-laser { background: var(--pec-vinho); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; position: relative; overflow: hidden; }
.pec-laser::before { content: ""; position: absolute; inset: auto -10% 0 auto; width: 70%; height: 60px; background: url("../img/pinceladas-cobre.webp") no-repeat right bottom / contain; opacity: .55; }
.pec-laser__grelha { display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; position: relative; }
.pec-laser img { width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); }
.pec-laser__pre { font-family: var(--pec-titulos); text-transform: uppercase; letter-spacing: .25em; color: #f0b27a; margin: 0 0 .5rem; font-weight: 600; }
.pec-laser h2 { color: #fff; margin: 0 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.pec-laser p { max-width: 38em; opacity: .92; }
@media (max-width: 720px) { .pec-laser__grelha { grid-template-columns: 1fr; text-align: center; } .pec-laser img { max-width: 220px; margin: 0 auto; } .pec-laser p { margin-inline: auto; } }

/* ---------- Serviços (círculos do estacionário) ---------- */
.pec-servicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.2rem; }
.pec-servicos li { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pec-servicos img { width: 128px; height: 128px; border-radius: 50%; margin-bottom: .6rem; transition: transform .2s ease; }
.pec-servicos li:hover img { transform: rotate(-4deg) scale(1.04); }
.pec-servicos strong { font-family: var(--pec-titulos); font-size: 1.15rem; text-transform: uppercase; color: var(--pec-vinho); line-height: 1.1; }
.pec-servicos span { font-size: .82rem; color: var(--pec-cinza); font-style: italic; }
@media (max-width: 900px) { .pec-servicos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .pec-servicos { grid-template-columns: repeat(2, 1fr); } .pec-servicos img { width: 110px; height: 110px; } }

/* ---------- Como funciona ---------- */
.pec-passos-seccao { background: #fff; }
.pec-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: none; }
.pec-passos li { background: var(--pec-papel); border-radius: var(--pec-raio); padding: 1.6rem 1.4rem; position: relative; }
.pec-passos__n { font-family: var(--pec-titulos); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--pec-cobre); display: block; margin-bottom: .3rem; }
.pec-passos h3 { margin: 0 0 .4rem; text-transform: uppercase; font-size: 1.35rem; }
.pec-passos p { margin: 0; color: var(--pec-cinza); font-size: .95rem; }
@media (max-width: 760px) { .pec-passos { grid-template-columns: 1fr; } }

/* ---------- Faixa de contacto ---------- */
.pec-contacto-faixa { padding: clamp(2rem, 5vw, 3.5rem) 1rem; background: var(--pec-areia); }
.pec-contacto-faixa__grelha { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.pec-contacto-faixa h2 { margin: 0 0 .3rem; color: var(--pec-vinho); }
.pec-contacto-faixa p { margin: 0; color: var(--pec-cinza); max-width: 34em; }
.pec-contacto-faixa__botoes { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Rodapé ---------- */
.pec-rodape { background: var(--pec-vinho-escuro); color: rgba(255, 255, 255, .86); padding: 0 1rem 1.2rem; font-size: .95rem; }
.pec-rodape__pinceladas { background-position: left top; opacity: .7; height: 34px; margin-bottom: 1.2rem; }
.pec-rodape__grelha { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.pec-rodape img { width: 170px; height: auto; margin-bottom: .8rem; }
.pec-rodape h3 { color: #fff; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; margin: .3rem 0 .7rem; }
.pec-rodape a { color: #fff; text-decoration: none; }
.pec-rodape a:hover { color: #f0b27a; }
.pec-rodape ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.pec-rodape p { margin: 0 0 .7rem; }
.pec-rodape__redes a { margin-right: 1rem; font-weight: 600; }
.pec-rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1rem; font-size: .82rem; opacity: .75; }
@media (max-width: 900px) { .pec-rodape__grelha { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pec-rodape__grelha { grid-template-columns: 1fr; } }

/* ==========================================================================
   WooCommerce — página de produto e listagens
   ========================================================================== */
.woocommerce .wc-block-components-product-price,
.wp-block-woocommerce-product-price { font-family: var(--pec-titulos); font-weight: 700; color: var(--pec-vinho); }
.single-product .wp-block-post-title { color: var(--pec-vinho); text-transform: uppercase; }

/* Configurador (tabelas de preço e medida) */
.pec-config, .pec-medida { background: #fff; border-radius: var(--pec-raio); box-shadow: var(--pec-sombra); padding: 1.3rem 1.4rem 1rem; max-width: 520px; }
.pec-campo label { font-family: var(--pec-titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; color: var(--pec-grafite); }
.pec-campo select, .pec-campo input[type="number"] {
	width: 100%; max-width: none; padding: .6rem .7rem; border: 1px solid #d9d1c8; border-radius: 4px; background: #fff; font: inherit; color: inherit; }
.pec-campo select:focus, .pec-campo input:focus { outline: 2px solid var(--pec-cobre); outline-offset: 1px; border-color: transparent; }
.pec-total { border-top: 1px dashed #d9d1c8; padding-top: .9rem; font-family: var(--pec-titulos); text-transform: uppercase; }
.pec-total .pec-preco { font-size: 2rem; color: var(--pec-vinho); margin-left: .3rem; }
.pec-total small { text-transform: none; font-family: var(--wp--preset--font-family--texto); }
.pec-escaloes { max-width: none; margin-top: .4rem; }
.pec-escaloes th { font-family: var(--pec-titulos); text-transform: uppercase; letter-spacing: .03em; color: var(--pec-cinza); font-weight: 600; }
.pec-escaloes tr.pec-atual { background: rgba(142, 36, 37, .08); color: var(--pec-vinho); }
.pec-upload { background: var(--pec-papel); border: 2px dashed #d9d1c8; border-radius: var(--pec-raio); padding: 1rem 1.2rem; max-width: 520px; }
.single_add_to_cart_button { min-width: 220px; }

/* ---------- Páginas de informação ---------- */
.pec-rascunho { background: #fff4d6; border-left: 4px solid #d8a300; padding: .7rem 1rem; border-radius: 4px; font-size: .9rem; }
.page .wp-block-post-content h2 { font-size: 1.6rem; color: var(--pec-vinho); margin-top: 2rem; }
.page .wp-block-post-content table { font-size: .9rem; }
.page .wp-block-post-content th { background: var(--pec-areia); text-align: left; }