/*
Theme Name:   Brechó da Catarina
Theme URI:    https://brechodacatarina.com.br
Description:  Tema filho do Storefront com a identidade visual da Catarina (@VoaCatarina). Paleta amarelo/rosa/magenta suavizada para e-commerce, hero da causa, barra de meta de arrecadação, doação avulsa, PIX e WhatsApp.
Author:       Equipe Voa Catarina
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  brecho-catarina
Tags:         e-commerce, two-columns, custom-colors
*/

/* ==========================================================================
   1. TOKENS DE MARCA
   --------------------------------------------------------------------------
   Para voltar à versão "fiel aos brownies" (amarelo forte de fundo),
   troque --cat-fundo para var(--cat-amarelo-claro) e --cat-superficie
   para #fff. Tudo o mais se ajusta sozinho.
   ========================================================================== */

:root {
	/* Cores extraídas das artes de venda */
	--cat-amarelo:        #F7DE3C;
	--cat-amarelo-escuro: #E4C81F;
	--cat-amarelo-claro:  #FDF4C4;
	--cat-rosa:           #F0BFCD;
	--cat-rosa-claro:     #FCEFF3;
	--cat-magenta:        #D6337F;
	--cat-magenta-escuro: #AF2265;
	--cat-marrom:         #7A4F2E;
	--cat-marrom-claro:   #C9A063;

	/* Neutros */
	--cat-tinta:      #2B2118;
	--cat-tinta-suave:#6B5F55;
	--cat-fundo:      #FFFDF7;
	--cat-superficie: #FFFFFF;
	--cat-borda:      #EDE4D6;

	/* Semânticos */
	--cat-acento:        var(--cat-magenta);
	--cat-acento-hover:  var(--cat-magenta-escuro);
	--cat-destaque:      var(--cat-amarelo);

	/* Tipografia */
	--cat-fonte: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Formas */
	--cat-raio:       14px;
	--cat-raio-pill:  999px;
	--cat-sombra:     0 2px 8px rgba(43, 33, 24, .06);
	--cat-sombra-alta:0 12px 32px rgba(43, 33, 24, .12);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body,
button, input, select, textarea,
.site-header, .storefront-breadcrumb {
	font-family: var(--cat-fonte);
}

body {
	background-color: var(--cat-fundo);
	color: var(--cat-tinta);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title, .widget h1, .widget h2, .widget h3,
.page-title, .product_title, .entry-title {
	font-family: var(--cat-fonte);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--cat-tinta);
}

a { color: var(--cat-acento); }
a:hover, a:focus { color: var(--cat-acento-hover); }

::selection { background: var(--cat-amarelo); color: var(--cat-tinta); }

/* Foco visível — acessibilidade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--cat-magenta);
	outline-offset: 2px;
}

/* ==========================================================================
   3. BARRA SUPERIOR (PIX / WhatsApp / causa)
   ========================================================================== */

.cat-topbar {
	background: var(--cat-magenta);
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.cat-topbar__inner {
	max-width: 66.5em;
	margin: 0 auto;
	padding: .55em 1.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5em 1.5em;
	text-align: center;
}

.cat-topbar a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	white-space: nowrap;
}

.cat-topbar a:hover { color: var(--cat-amarelo); border-color: var(--cat-amarelo); }

.cat-topbar__pix {
	background: rgba(255, 255, 255, .16);
	border: 0;
	color: #fff;
	font: inherit;
	padding: .2em .8em;
	border-radius: var(--cat-raio-pill);
	cursor: pointer;
	transition: background .15s ease;
}

.cat-topbar__pix:hover { background: var(--cat-amarelo); color: var(--cat-tinta); }

/* ==========================================================================
   4. CABEÇALHO
   ========================================================================== */

.site-header {
	background-color: var(--cat-superficie) !important;
	border-bottom: 1px solid var(--cat-borda);
	padding-top: 1.25em;
	padding-bottom: 0;
}

.site-header .site-branding img,
.site-header .custom-logo-link img {
	max-height: 88px;
	width: auto;
}

.site-header .site-title a {
	color: var(--cat-marrom) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.site-header .site-description { color: var(--cat-tinta-suave) !important; }

/* Menu principal */
.storefront-primary-navigation { background-color: transparent !important; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--cat-tinta) !important;
	font-weight: 600;
	font-size: .95rem;
	padding: .9em .9em;
	position: relative;
}

.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after {
	content: '';
	position: absolute;
	left: .9em; right: .9em; bottom: .45em;
	height: 3px;
	border-radius: 3px;
	background: var(--cat-amarelo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.nav-menu > li > a:hover::after,
.main-navigation ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

.main-navigation ul.menu ul, .main-navigation ul.nav-menu ul {
	background: var(--cat-superficie);
	border-radius: var(--cat-raio);
	box-shadow: var(--cat-sombra-alta);
	overflow: hidden;
}

/* Carrinho no header */
.site-header-cart .cart-contents {
	color: var(--cat-tinta) !important;
	font-weight: 600;
}

.site-header-cart .cart-contents .count {
	background: var(--cat-magenta);
	color: #fff;
	border-radius: var(--cat-raio-pill);
	padding: .1em .55em;
	font-size: .8em;
	margin-left: .35em;
}

.site-header-cart .widget_shopping_cart {
	background: var(--cat-superficie);
	border-radius: var(--cat-raio);
	box-shadow: var(--cat-sombra-alta);
}

/* Busca */
.site-search .widget_product_search form input[type="search"],
.woocommerce-product-search input[type="search"],
.search-field {
	border-radius: var(--cat-raio-pill);
	border: 1px solid var(--cat-borda);
	background: var(--cat-fundo);
	box-shadow: none;
	padding: .7em 1.2em;
}

/* ==========================================================================
   5. HERO DA CAUSA
   ========================================================================== */

.cat-hero {
	background:
		radial-gradient(120% 90% at 12% 0%, var(--cat-amarelo-claro) 0%, rgba(253, 244, 196, 0) 60%),
		linear-gradient(135deg, var(--cat-rosa-claro) 0%, var(--cat-fundo) 55%, var(--cat-amarelo-claro) 100%);
	border-bottom: 1px solid var(--cat-borda);
	padding: 3.5em 1.5em;
	position: relative;
	overflow: hidden;
}

.cat-hero::before {
	content: '';
	position: absolute;
	right: -80px; top: -80px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: var(--cat-amarelo);
	opacity: .28;
	pointer-events: none;
}

.cat-hero__inner {
	max-width: 66.5em;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 2.5em;
	align-items: center;
	position: relative;
	z-index: 1;
}

.cat-hero__selo {
	display: inline-block;
	background: var(--cat-magenta);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .45em 1.1em;
	border-radius: var(--cat-raio-pill);
	margin-bottom: 1em;
}

.cat-hero__titulo {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 .5em;
	color: var(--cat-tinta);
}

.cat-hero__titulo em {
	font-style: normal;
	color: var(--cat-magenta);
	background: linear-gradient(180deg, transparent 62%, var(--cat-amarelo) 62%);
	padding: 0 .1em;
}

.cat-hero__texto {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--cat-tinta-suave);
	max-width: 34em;
	margin: 0 0 1.75em;
}

.cat-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
}

.cat-hero__midia { text-align: center; }

.cat-hero__midia img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cat-raio);
	box-shadow: var(--cat-sombra-alta);
}

@media (max-width: 768px) {
	.cat-hero { padding: 2.25em 1.25em; }
	.cat-hero__inner { grid-template-columns: 1fr; gap: 1.75em; }
	.cat-hero__midia { order: -1; }
	.cat-hero__midia img { max-width: 240px; }
}

/* ==========================================================================
   6. BARRA DE META DE ARRECADAÇÃO
   ========================================================================== */

.cat-meta {
	background: var(--cat-superficie);
	border: 1px solid var(--cat-borda);
	border-radius: var(--cat-raio);
	padding: 1.35em 1.5em;
	box-shadow: var(--cat-sombra);
	max-width: 34em;
}

.cat-meta--largura-total { max-width: none; }

.cat-meta__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: .7em;
	flex-wrap: wrap;
}

.cat-meta__valor {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--cat-magenta);
	line-height: 1;
}

.cat-meta__rotulo {
	font-size: .8125rem;
	color: var(--cat-tinta-suave);
	font-weight: 500;
}

.cat-meta__rotulo strong { color: var(--cat-tinta); font-weight: 700; }

.cat-meta__trilho {
	height: 14px;
	background: var(--cat-rosa-claro);
	border-radius: var(--cat-raio-pill);
	overflow: hidden;
	position: relative;
}

.cat-meta__preenchimento {
	height: 100%;
	border-radius: var(--cat-raio-pill);
	background: linear-gradient(90deg, var(--cat-amarelo) 0%, var(--cat-magenta) 100%);
	width: 0;
	transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
	min-width: 14px;
}

.cat-meta__rodape {
	margin-top: .7em;
	font-size: .8125rem;
	color: var(--cat-tinta-suave);
	display: flex;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}

.cat-meta__percentual {
	font-weight: 700;
	color: var(--cat-magenta);
}

/* ==========================================================================
   7. BOTÕES
   ========================================================================== */

.button,
button, input[type="button"], input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.added_to_cart {
	background-color: var(--cat-magenta) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--cat-raio-pill);
	font-weight: 600;
	letter-spacing: .01em;
	padding: .78em 1.7em;
	text-shadow: none;
	box-shadow: none;
	transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}

.button:hover,
button:hover, input[type="button"]:hover, input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.added_to_cart:hover {
	background-color: var(--cat-magenta-escuro) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(214, 51, 127, .28);
}

/* Botão alternativo (comprar agora / finalizar) — amarelo da marca */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.cat-botao--amarelo {
	background-color: var(--cat-amarelo) !important;
	color: var(--cat-tinta) !important;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.cat-botao--amarelo:hover {
	background-color: var(--cat-amarelo-escuro) !important;
	color: var(--cat-tinta) !important;
	box-shadow: 0 6px 16px rgba(228, 200, 31, .38);
}

.cat-botao--contorno {
	background-color: transparent !important;
	color: var(--cat-magenta) !important;
	box-shadow: inset 0 0 0 2px var(--cat-magenta);
}

.cat-botao--contorno:hover {
	background-color: var(--cat-magenta) !important;
	color: #fff !important;
}

/* Botão desabilitado */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--cat-borda) !important;
	color: var(--cat-tinta-suave) !important;
	opacity: 1;
}

/* ==========================================================================
   8. LOJA E PRODUTOS
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--cat-superficie);
	border: 1px solid var(--cat-borda);
	border-radius: var(--cat-raio);
	padding: .9em .9em 1.2em;
	box-shadow: var(--cat-sombra);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
	text-align: center;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--cat-sombra-alta);
	border-color: var(--cat-rosa);
}

.woocommerce ul.products li.product a img {
	border-radius: 10px;
	margin-bottom: .9em;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	font-weight: 600;
	line-height: 1.35;
	padding: 0 0 .35em !important;
	color: var(--cat-tinta);
}

.woocommerce ul.products li.product .price {
	color: var(--cat-magenta) !important;
	font-weight: 700;
	font-size: 1.05rem;
	display: block;
	margin-bottom: .8em;
}

.woocommerce ul.products li.product .price del { color: var(--cat-tinta-suave) !important; opacity: .7; font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Selo de promoção */
.woocommerce span.onsale {
	background-color: var(--cat-amarelo) !important;
	color: var(--cat-tinta) !important;
	border-radius: var(--cat-raio-pill);
	font-weight: 700;
	font-size: .75rem;
	padding: .35em .9em;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
	top: 1em;
	left: 1em;
	right: auto;
	margin: 0;
	box-shadow: var(--cat-sombra);
}

/* Selos do brechó (peça única / vendido) */
.cat-selo {
	position: absolute;
	z-index: 3;
	top: 1em;
	right: 1em;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .35em .8em;
	border-radius: var(--cat-raio-pill);
	box-shadow: var(--cat-sombra);
}

.cat-selo--unica { background: var(--cat-rosa); color: var(--cat-marrom); }
.cat-selo--vendido { background: var(--cat-tinta); color: #fff; }

.woocommerce div.product .cat-selo { position: static; display: inline-block; margin-bottom: .8em; }

.cat-produto-vendido .woocommerce-loop-product__link img { filter: grayscale(.65); opacity: .78; }

/* Página do produto */
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cat-magenta) !important;
	font-weight: 800;
	font-size: 1.6rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cat-magenta); }

.woocommerce div.product form.cart div.quantity input.qty {
	border-radius: var(--cat-raio-pill);
	border: 1px solid var(--cat-borda);
	background: var(--cat-fundo);
}

/* Aviso de causa na página do produto e no carrinho */
.cat-nota-causa {
	background: var(--cat-amarelo-claro);
	border: 1px solid var(--cat-amarelo);
	border-radius: var(--cat-raio);
	padding: .9em 1.15em;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--cat-marrom);
	margin: 0 0 1.5em;
}

.cat-nota-causa strong { color: var(--cat-tinta); }

/* Mensagens do Woo */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--cat-raio);
	border-top-width: 3px;
}

.woocommerce-message { border-top-color: var(--cat-magenta); }
.woocommerce-info { border-top-color: var(--cat-amarelo); }

/* Ordenação / resultados */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border-radius: var(--cat-raio-pill);
	border: 1px solid var(--cat-borda);
	background-color: var(--cat-superficie);
	padding: .55em 1.1em;
}

/* Paginação */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-radius: var(--cat-raio-pill);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--cat-magenta);
	color: #fff;
}

/* ==========================================================================
   9. DOAÇÃO AVULSA
   ========================================================================== */

.cat-doacao {
	background: linear-gradient(135deg, var(--cat-rosa-claro) 0%, var(--cat-amarelo-claro) 100%);
	border-radius: var(--cat-raio);
	padding: 2em 1.75em;
	text-align: center;
	border: 1px solid var(--cat-borda);
}

.cat-doacao__titulo {
	font-size: 1.4rem;
	font-weight: 800;
	margin: 0 0 .4em;
	letter-spacing: -0.02em;
}

.cat-doacao__texto {
	color: var(--cat-tinta-suave);
	margin: 0 auto 1.4em;
	max-width: 40em;
	font-size: .975rem;
	line-height: 1.6;
}

.cat-doacao__valores {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	justify-content: center;
	margin-bottom: 1.2em;
}

.cat-doacao__valor {
	background: var(--cat-superficie);
	border: 2px solid var(--cat-borda);
	border-radius: var(--cat-raio-pill);
	padding: .6em 1.4em;
	font-weight: 700;
	color: var(--cat-tinta);
	cursor: pointer;
	font-size: .975rem;
	transition: all .15s ease;
	font-family: inherit;
}

.cat-doacao__valor:hover,
.cat-doacao__valor[aria-pressed="true"] {
	border-color: var(--cat-magenta);
	background: var(--cat-magenta);
	color: #fff;
}

.cat-doacao__campo {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	background: var(--cat-superficie);
	border: 2px solid var(--cat-borda);
	border-radius: var(--cat-raio-pill);
	padding: .35em .5em .35em 1.1em;
	margin-bottom: 1.2em;
}

.cat-doacao__campo input {
	border: 0;
	background: transparent;
	width: 7em;
	font-weight: 700;
	font-size: 1rem;
	padding: .25em 0;
	font-family: inherit;
	color: var(--cat-tinta);
}

.cat-doacao__campo input:focus { outline: none; }

.cat-doacao__pix {
	margin-top: 1.2em;
	font-size: .875rem;
	color: var(--cat-tinta-suave);
}

.cat-doacao__pix code {
	background: rgba(255, 255, 255, .7);
	padding: .25em .7em;
	border-radius: var(--cat-raio-pill);
	font-size: .95em;
	color: var(--cat-marrom);
}

/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */

.site-footer {
	background-color: var(--cat-marrom) !important;
	color: rgba(255, 255, 255, .82) !important;
	padding-top: 3em;
}

.site-footer a { color: var(--cat-amarelo) !important; }
.site-footer a:hover { color: #fff !important; }

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .widget-title {
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .02em;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-top: 1.5em;
	font-size: .85rem;
}

.cat-rodape-causa {
	background: var(--cat-magenta);
	color: #fff;
	text-align: center;
	padding: 1.5em;
	font-size: .95rem;
	line-height: 1.6;
}

.cat-rodape-causa strong { color: var(--cat-amarelo); }

/* ==========================================================================
   11. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */

.cat-whats {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: #25D366;
	color: #fff !important;
	font-weight: 700;
	font-size: .9rem;
	padding: .75em 1.15em;
	border-radius: var(--cat-raio-pill);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
	text-decoration: none;
	transition: transform .15s ease;
}

.cat-whats:hover { transform: translateY(-2px); color: #fff !important; }
.cat-whats svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

@media (max-width: 600px) {
	.cat-whats__texto { display: none; }
	.cat-whats { padding: .9em; }
}

/* ==========================================================================
   12. AJUSTES FINAIS
   ========================================================================== */

.storefront-breadcrumb { background-color: transparent; padding-bottom: 0; }

.widget { border-bottom: 1px solid var(--cat-borda); }

.storefront-product-section .section-title,
.storefront-product-section h2.section-title {
	font-weight: 800;
	letter-spacing: -0.025em;
	text-align: center;
	margin-bottom: 1.2em;
}

.storefront-product-section .section-title::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	background: var(--cat-amarelo);
	border-radius: 4px;
	margin: .5em auto 0;
}

/* Respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}