/**
 * NiaRunner — CSS Customizado
 * Corrida, tecnologia e ancestralidade africana.
 *
 * Cores da marca:
 * --wp--preset--color--accent-1: #D4622B (Laranja Queimado)
 * --wp--preset--color--accent-2: #3D2B1F (Marrom Ancestral)
 * --wp--preset--color--accent-3: #1B8C3A (Verde Pan-Africano)
 * --wp--preset--color--accent-4: #C4262E (Vermelho Pan-Africano)
 * --wp--preset--color--accent-5: #111111 (Preto Profundo)
 * --wp--preset--color--accent-6: #D4A844 (Dourado Ancestral)
 * --wp--preset--color--accent-7: #FFF8F0 (Creme Quente)
 * --wp--preset--color--accent-8: #2A2A2A (Cinza Escuro)
 */

/* ========================================
   1. ROOT & VARIÁVEIS CUSTOMIZADAS
   ======================================== */

:root {
	--nia-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	--nia-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
	--nia-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
	--nia-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
	--nia-radius: 8px;
	--nia-radius-lg: 16px;
	--nia-radius-pill: 50px;
}

/* Fix overflow horizontal (scrollbar) */
html,
body {
	overflow-x: hidden;
	max-width: 100vw;
}

body {
	position: relative;
}

/* ========================================
   2. GLOBAL / BODY
   ======================================== */

body.niarunner-theme {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Scrollbar customizada (dark mode) */
body.niarunner-theme::-webkit-scrollbar {
	width: 8px;
}

body.niarunner-theme::-webkit-scrollbar-track {
	background: var(--wp--preset--color--accent-5);
}

body.niarunner-theme::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent-1);
	border-radius: 4px;
}

body.niarunner-theme::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--accent-6);
}

/* Seleção de texto com cores da marca */
::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* ========================================
   3. TIPOGRAFIA
   ======================================== */

.niarunner-theme h1,
.niarunner-theme h2,
.niarunner-theme h3,
.niarunner-theme h4,
.niarunner-theme h5,
.niarunner-theme h6 {
	letter-spacing: -0.02em;
}

/* Texto com destaque laranja (classe utilitária) */
.nia-text-accent {
	color: var(--wp--preset--color--accent-1);
}

.nia-text-gold {
	color: var(--wp--preset--color--accent-6);
}

/* Gradiente de texto */
.nia-text-gradient {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-6));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ========================================
   4. HEADER / NAVEGAÇÃO
   ======================================== */

/* Header com fundo escuro e borda sutil */
.niarunner-header {
	background-color: var(--wp--preset--color--accent-5);
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* backdrop-filter em pseudo-elemento para não afetar position:fixed dos filhos */
.niarunner-header::before {
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	z-index: -1;
}

/* Logo NiaRunner */
.niarunner-header .wp-block-site-title a {
	color: var(--wp--preset--color--accent-1) !important;
	text-decoration: none !important;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Nav principal: ocupa espaço flexível e centraliza os links */
.niarunner-primary-nav.wp-block-navigation {
	flex: 1;
	justify-content: center !important;
}

/* Links de navegação */
.niarunner-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast) !important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	transition: var(--nia-transition);
	position: relative;
}

.niarunner-header .wp-block-navigation a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent-1);
	transition: var(--nia-transition);
}

.niarunner-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

.niarunner-header .wp-block-navigation a:hover::after {
	width: 100%;
}

/* ========================================
   5. HERO SECTION - FULLSCREEN COM OVERLAY
   ======================================== */

.niarunner-hero {
	position: relative !important;
	min-height: 85vh !important;
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
	padding: 0 !important;
	background: #111 !important;
}

/* Imagem de fundo (absoluta, cobre tudo) */
.niarunner-hero-bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	z-index: 1 !important;
	display: block !important;
}

/* Overlay gradiente escuro da direita para esquerda (protege texto à direita) */
.niarunner-hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2 !important;
	background: linear-gradient(
		270deg,
		rgba(17, 17, 17, 0.92) 0%,
		rgba(17, 17, 17, 0.78) 30%,
		rgba(17, 17, 17, 0.35) 55%,
		rgba(17, 17, 17, 0.05) 75%,
		transparent 100%
	) !important;
	pointer-events: none !important;
}

/* Conteúdo sobreposto - alinhado à direita */
.niarunner-hero-content {
	position: relative !important;
	z-index: 3 !important;
	max-width: 540px !important;
	margin-left: auto !important;
	padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 5rem) !important;
}

/* Título com estilo itálico/elegante */
.niarunner-hero-title {
	font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 1.25rem !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Subtítulo */
.niarunner-hero-subtitle {
	font-size: clamp(0.9rem, 1.2vw, 1.05rem) !important;
	opacity: 0.75 !important;
	margin-bottom: 2rem !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
	max-width: 380px !important;
}

/* Botão CTA - estilo discreto, borda fina */
.niarunner-hero-btn .wp-block-button__link {
	background: rgba(255, 248, 240, 0.15) !important;
	color: var(--wp--preset--color--accent-7) !important;
	border: 1px solid rgba(255, 248, 240, 0.4) !important;
	border-radius: 50px !important;
	padding: 12px 28px !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	transition: var(--nia-transition) !important;
	box-shadow: none !important;
}

.niarunner-hero-btn .wp-block-button__link:hover {
	background: rgba(255, 248, 240, 0.25) !important;
	border-color: rgba(255, 248, 240, 0.7) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.niarunner-hero-btn .wp-block-button__link:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(255, 248, 240, 0.3) !important;
}

/* ========================================
   6. BOTÕES / CTA
   ======================================== */

/* Corrige borda quebrada e foco/hover acessível nos botões */
.wp-block-button__link:focus,
.wp-block-button__link:active {
	outline: none !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wp--preset--color--accent-1);
	border-radius: 50px !important;
}

.wp-block-button__link:hover {
	outline: none !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wp--preset--color--accent-1);
	border-radius: 50px !important;
}

.wp-block-button__link,
.niarunner-theme .wp-element-button,
.nia-btn {
	transition: var(--nia-transition);
	position: relative;
	overflow: hidden;
}

.wp-block-button__link:hover,
.niarunner-theme .wp-element-button:hover,
.nia-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--nia-shadow-md);
}

.wp-block-button__link:active,
.niarunner-theme .wp-element-button:active,
.nia-btn:active {
	transform: translateY(0);
}

/* Botão outline */
.nia-btn-outline {
	/* container: remove borda e sombra para evitar anel duplo */
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	display: inline-block;
}

/* A borda e padding são aplicadas ao link interno, evitando o anel duplo causado
   pela combinação de border no container + box-shadow no link */
.nia-btn-outline .wp-block-button__link {
	display: inline-block;
	padding: 12px 28px !important;
	border: 2px solid var(--wp--preset--color--accent-1) !important;
	border-radius: 50px !important;
	background: transparent !important;
	color: var(--wp--preset--color--accent-1) !important;
	box-shadow: none !important;
	transition: var(--nia-transition);
	text-decoration: none;
}

.nia-btn-outline .wp-block-button__link:hover,
.nia-btn-outline .wp-block-button__link:active {
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.16) !important; /* sombra sutil no hover */
}

/* Foco acessível: mantém anel de foco sem dupla borda */
.nia-btn-outline .wp-block-button__link:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wp--preset--color--accent-1) !important;
}

/* Botão dourado */
.nia-btn-gold {
	background: var(--wp--preset--color--accent-6) !important;
	color: var(--wp--preset--color--accent-5) !important;
	border-radius: 50px !important;
	line-height: 0 !important;
	font-size: 0 !important;
}

.nia-btn-gold .wp-block-button__link {
	font-size: 0.8rem !important;
	line-height: 1.7 !important;
	padding: 14px 32px !important;
	border-radius: 50px !important;
	display: inline-block !important;
}

.nia-btn-gold:hover {
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ========================================
   7. CARDS
   ======================================== */

.nia-card {
	background-color: var(--wp--preset--color--accent-8);
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
	transition: var(--nia-transition);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.nia-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nia-shadow-lg);
	border-color: rgba(212, 98, 43, 0.3);
}

.nia-card-image {
	overflow: hidden;
}

.nia-card-image img {
	transition: var(--nia-transition);
}

.nia-card:hover .nia-card-image img {
	transform: scale(1.05);
}

.nia-card-content {
	padding: 1.5rem;
}

.nia-card-tag {
	display: inline-block;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	padding: 4px 12px;
	border-radius: var(--nia-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}

/* ========================================
   8. SEÇÕES
   ======================================== */

.nia-section {
	padding: 2rem 0;
}

.nia-section-dark {
	background-color: var(--wp--preset--color--accent-5);
}

.nia-section-earth {
	background-color: var(--wp--preset--color--accent-2);
}

.nia-section-light {
	background-color: var(--wp--preset--color--accent-7);
	color: var(--wp--preset--color--accent-5);
}

/* Separador com padrão africano (geométrico) — header e footer */
.nia-divider {
	height: 4px;
	background: repeating-linear-gradient(90deg,
			var(--wp--preset--color--accent-1) 0px,
			var(--wp--preset--color--accent-1) 20px,
			var(--wp--preset--color--accent-3) 20px,
			var(--wp--preset--color--accent-3) 40px,
			var(--wp--preset--color--accent-4) 40px,
			var(--wp--preset--color--accent-4) 60px,
			var(--wp--preset--color--accent-6) 60px,
			var(--wp--preset--color--accent-6) 80px);
	border: none;
	margin: 0;
}

/* Dentro do <main> (entre hero e conteúdo): fade suave */
main .nia-divider {
	height: 24px;
	background: linear-gradient(to bottom,
		var(--wp--preset--color--accent-5),
		var(--wp--preset--color--base));
}

/* Linha fina dourada */
.nia-line-gold {
	width: 60px;
	height: 3px;
	background-color: var(--wp--preset--color--accent-6);
	border: none;
	margin: 1rem 0;
}

/* ========================================
   9. FOOTER
   ======================================== */

.niarunner-footer {
	background-color: var(--wp--preset--color--accent-5);
	color: rgba(255, 255, 255, 0.7);
	border-top: 2px solid var(--wp--preset--color--accent-1);
}

.niarunner-footer a {
	color: var(--wp--preset--color--accent-7) !important;
	transition: var(--nia-transition);
}

.niarunner-footer a:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

.niarunner-footer .nia-footer-mission {
	font-style: italic;
	color: var(--wp--preset--color--accent-6);
	font-size: 0.9rem;
}

/* Barra pan-africana no fundo do footer */
.nia-footer-bar {
	height: 4px;
	background: linear-gradient(90deg,
			var(--wp--preset--color--accent-4) 0%,
			var(--wp--preset--color--accent-4) 33.33%,
			var(--wp--preset--color--accent-5) 33.33%,
			var(--wp--preset--color--accent-5) 66.66%,
			var(--wp--preset--color--accent-3) 66.66%,
			var(--wp--preset--color--accent-3) 100%);
}

/* ========================================
   10. BLOG / NOTÍCIAS
   ======================================== */

.niarunner-theme .wp-block-post-template {
	gap: 2rem;
}

.niarunner-theme .wp-block-post {
	background-color: var(--wp--preset--color--accent-8);
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
	transition: var(--nia-transition);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.niarunner-theme .wp-block-post:hover {
	border-color: rgba(212, 98, 43, 0.2);
	box-shadow: var(--nia-shadow-md);
}

.niarunner-theme .wp-block-post-featured-image img {
	border-radius: 0;
}

.niarunner-theme .wp-block-post-date {
	color: var(--wp--preset--color--accent-6);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ========================================
   11. LOJINHA DA NIA (WooCommerce)
   ======================================== */

/* --- 11a. Product Cards (Grid) --- */

.niarunner-theme .woocommerce .products .product,
.nia-product-card {
	background-color: var(--wp--preset--color--accent-8);
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
	transition: var(--nia-transition);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.niarunner-theme .woocommerce .products .product:hover,
.nia-product-card:hover {
	border-color: rgba(212, 98, 43, 0.3);
	transform: translateY(-4px);
	box-shadow: var(--nia-shadow-lg);
}

.niarunner-theme .woocommerce .products .product .price,
.wc-block-components-product-price {
	color: var(--wp--preset--color--accent-6) !important;
	font-weight: 700;
	font-size: 1.25rem;
}

.wc-block-components-product-price del {
	color: rgba(255, 255, 255, 0.4) !important;
	font-size: 0.9rem;
}

.wc-block-components-product-price ins {
	color: var(--wp--preset--color--accent-6) !important;
	text-decoration: none;
}

/* --- 11b. Product Buttons --- */

.niarunner-theme .woocommerce .button,
.niarunner-theme .woocommerce .added_to_cart,
.wc-block-components-product-button .wp-element-button,
.wc-block-grid__product-add-to-cart .wp-element-button {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--nia-radius-pill) !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	transition: var(--nia-transition) !important;
	border: none !important;
	padding: 10px 24px !important;
	font-size: 0.85rem !important;
	font-family: var(--wp--preset--font-family--heading) !important;
}

.niarunner-theme .woocommerce .button:hover,
.wc-block-components-product-button .wp-element-button:hover {
	background-color: var(--wp--preset--color--accent-6) !important;
	color: var(--wp--preset--color--accent-5) !important;
	transform: translateY(-2px);
	box-shadow: var(--nia-shadow-md);
}

/* --- 11c. Sale Badge --- */

.niarunner-theme .woocommerce .sale-badge,
.niarunner-theme .woocommerce .onsale,
.wc-block-components-product-sale-badge {
	background-color: var(--wp--preset--color--accent-4) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--nia-radius-pill);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px;
}

/* --- 11d. Product Image --- */

.wc-block-components-product-image img,
.niarunner-theme .woocommerce .products .product img {
	transition: var(--nia-transition);
}

.nia-product-card:hover .wc-block-components-product-image img,
.niarunner-theme .woocommerce .products .product:hover img {
	transform: scale(1.05);
}

/* Placeholder image styling */
.wc-block-components-product-image .woocommerce-placeholder,
.woocommerce .products .product .woocommerce-placeholder {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-8) 0%, var(--wp--preset--color--accent-2) 100%);
	opacity: 0.6;
}

/* --- 11e. Single Product Page --- */

.nia-single-product .woocommerce-product-gallery {
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
}

.nia-single-product .product_title,
.nia-single-product .wp-block-post-title {
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
}

.nia-single-product .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--accent-7);
	font-size: 1.05rem;
	line-height: 1.7;
}

.nia-single-product .woocommerce-tabs {
	margin-top: 3rem;
}

.nia-single-product .woocommerce-tabs ul.tabs {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent-8);
	margin-bottom: 2rem;
}

.nia-single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.nia-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 24px;
	color: var(--wp--preset--color--accent-7);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	border-bottom: 2px solid transparent;
	transition: var(--nia-transition);
	margin-bottom: -2px;
}

.nia-single-product .woocommerce-tabs ul.tabs li.active a,
.nia-single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--accent-1);
	border-bottom-color: var(--wp--preset--color--accent-1);
}

.nia-single-product .woocommerce-tabs .panel {
	color: var(--wp--preset--color--accent-7);
}

/* Quantity input */
.nia-single-product .quantity input[type="number"],
.nia-woo-page .quantity input[type="number"] {
	background-color: var(--wp--preset--color--accent-8);
	color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--nia-radius);
	padding: 8px 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-align: center;
	width: 70px;
}

/* Star ratings */
.niarunner-theme .star-rating,
.niarunner-theme .wc-block-components-product-rating {
	color: var(--wp--preset--color--accent-6);
}

.niarunner-theme .star-rating span::before {
	color: var(--wp--preset--color--accent-6);
}

/* --- 11f. Cart Page --- */

.nia-woo-page .wc-block-cart {
	color: var(--wp--preset--color--accent-7);
}

.nia-woo-page .wc-block-cart__main .wc-block-cart-items {
	border-color: rgba(255, 255, 255, 0.1);
}

.nia-woo-page .wc-block-cart-items .wc-block-cart-items__row {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nia-woo-page .wc-block-components-product-name {
	color: var(--wp--preset--color--accent-7) !important;
	font-weight: 600;
}

.nia-woo-page .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

.nia-woo-page .wc-block-components-totals-wrapper {
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.nia-woo-page .wc-block-components-totals-item__label,
.nia-woo-page .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--accent-7);
}

.nia-woo-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.nia-woo-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--accent-6) !important;
	font-weight: 700;
	font-size: 1.25rem;
}

/* Cart/Checkout buttons */
.nia-woo-page .wc-block-cart__submit-button,
.nia-woo-page .wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--nia-radius-pill) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 16px 32px !important;
	font-size: 1rem !important;
	transition: var(--nia-transition) !important;
	border: none !important;
}

.nia-woo-page .wc-block-cart__submit-button:hover,
.nia-woo-page .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--accent-6) !important;
	color: var(--wp--preset--color--accent-5) !important;
	transform: translateY(-2px);
	box-shadow: var(--nia-shadow-md);
}

/* Remove button */
.nia-woo-page .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--accent-4) !important;
	font-size: 0.8rem;
	opacity: 0.7;
}

.nia-woo-page .wc-block-cart-item__remove-link:hover {
	opacity: 1;
}

/* --- 11g. Checkout Page --- */

.nia-woo-page .wc-block-checkout {
	color: var(--wp--preset--color--accent-7);
}

.nia-woo-page .wc-block-components-text-input input,
.nia-woo-page .wc-block-components-text-input textarea,
.nia-woo-page .wc-block-components-combobox .components-combobox-control input {
	background-color: var(--wp--preset--color--accent-8) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: var(--nia-radius) !important;
	transition: var(--nia-transition);
}

.nia-woo-page .wc-block-components-text-input input:focus,
.nia-woo-page .wc-block-components-text-input textarea:focus {
	border-color: var(--wp--preset--color--accent-1) !important;
	box-shadow: 0 0 0 2px rgba(212, 98, 43, 0.2) !important;
	outline: none !important;
}

.nia-woo-page .wc-block-components-text-input label,
.nia-woo-page .wc-block-components-combobox label {
	color: var(--wp--preset--color--accent-7) !important;
}

.nia-woo-page .wc-block-components-checkout-step__heading {
	color: var(--wp--preset--color--accent-7) !important;
	font-family: var(--wp--preset--font-family--heading);
}

.nia-woo-page .wc-block-components-checkout-step__description {
	color: rgba(255, 248, 240, 0.6);
}

.nia-woo-page .wc-block-components-checkout-step::after {
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Radio buttons & checkboxes */
.nia-woo-page .wc-block-components-radio-control__option::before {
	border-color: var(--wp--preset--color--accent-1) !important;
}

.nia-woo-page .wc-block-components-radio-control__option--checked::after {
	background-color: var(--wp--preset--color--accent-1) !important;
}

.nia-woo-page .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
	background-color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

/* Payment methods */
.nia-woo-page .wc-block-components-radio-control--highlight-checked label {
	background-color: var(--wp--preset--color--accent-8) !important;
	color: var(--wp--preset--color--accent-7) !important;
	border-color: rgba(255, 255, 255, 0.08);
}

.nia-woo-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked label {
	border-color: var(--wp--preset--color--accent-1);
	background-color: rgba(212, 98, 43, 0.05);
}

/* Coupon code */
.nia-woo-page .wc-block-components-totals-coupon__button {
	background-color: var(--wp--preset--color--accent-8) !important;
	color: var(--wp--preset--color--accent-1) !important;
	border: 1px solid var(--wp--preset--color--accent-1) !important;
	border-radius: var(--nia-radius) !important;
}

/* Select/dropdown nativos (País, Estado) — .wc-block-checkout é o div do bloco, sempre presente */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	background: #1a1a1a !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 6px !important;
	color: #FFF8F0 !important;
}

.wc-block-checkout .wc-blocks-components-select__select {
	background: #1a1a1a !important;
	color: #FFF8F0 !important;
	border: none !important;
}

/* hex direto — CSS vars não resolvem em <option> */
.wc-block-checkout .wc-blocks-components-select__select option,
.wc-block-checkout .wc-block-components-country-input select option {
	background-color: #1a1a1a !important;
	color: #FFF8F0 !important;
}

/* Títulos das steps (h2.__title dentro de __heading) */
.nia-woo-page .wc-block-components-checkout-step__title {
	color: var(--wp--preset--color--accent-7) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
}

/* Checkbox não-checked */
.nia-woo-page .wc-block-components-checkbox .wc-block-components-checkbox__input {
	background-color: var(--wp--preset--color--accent-8) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}

/* --- 11h. My Account --- */

.nia-my-account .woocommerce-MyAccount-navigation {
	background-color: var(--wp--preset--color--accent-8);
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
}

.nia-my-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nia-my-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 14px 24px;
	color: var(--wp--preset--color--accent-7);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	border-left: 3px solid transparent;
	transition: var(--nia-transition);
}

.nia-my-account .woocommerce-MyAccount-navigation ul li.is-active a,
.nia-my-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--wp--preset--color--accent-1);
	background-color: rgba(212, 98, 43, 0.05);
	border-left-color: var(--wp--preset--color--accent-1);
}

.nia-my-account .woocommerce-MyAccount-content {
	color: var(--wp--preset--color--accent-7);
}

.nia-my-account .woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--accent-1);
}

.nia-my-account .woocommerce-MyAccount-content a:hover {
	color: var(--wp--preset--color--accent-6);
}

/* Orders table */
.nia-my-account .woocommerce-orders-table,
.nia-woo-page table {
	border-collapse: collapse;
	width: 100%;
}

.nia-my-account .woocommerce-orders-table th,
.nia-woo-page table th {
	background-color: var(--wp--preset--color--accent-8);
	color: var(--wp--preset--color--accent-6);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	padding: 12px 16px;
	text-align: left;
}

.nia-my-account .woocommerce-orders-table td,
.nia-woo-page table td {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--wp--preset--color--accent-7);
}

/* --- 11i. Product Categories Grid --- */

.wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
}

.wc-block-product-categories-list li {
	background-color: var(--wp--preset--color--accent-8);
	border-radius: var(--nia-radius-lg);
	overflow: hidden;
	transition: var(--nia-transition);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.wc-block-product-categories-list li:hover {
	border-color: rgba(212, 98, 43, 0.3);
	transform: translateY(-4px);
	box-shadow: var(--nia-shadow-lg);
}

.wc-block-product-categories-list li a {
	color: var(--wp--preset--color--accent-7) !important;
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	display: block;
	padding: 1.5rem;
	text-align: center;
}

.wc-block-product-categories-list li a:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

.wc-block-product-categories-list li img {
	display: none !important;
}

/* --- 11j. Mini Cart & Notices --- */

.niarunner-theme .woocommerce-message,
.niarunner-theme .woocommerce-info {
	background-color: var(--wp--preset--color--accent-8);
	color: var(--wp--preset--color--accent-7);
	border-left: 4px solid var(--wp--preset--color--accent-1);
	border-radius: var(--nia-radius);
	padding: 1rem 1.5rem;
}

.niarunner-theme .woocommerce-error {
	background-color: var(--wp--preset--color--accent-8);
	color: var(--wp--preset--color--accent-7);
	border-left: 4px solid var(--wp--preset--color--accent-4);
	border-radius: var(--nia-radius);
	padding: 1rem 1.5rem;
}

.niarunner-theme .wc-block-components-notice-banner {
	background-color: var(--wp--preset--color--accent-8) !important;
	color: var(--wp--preset--color--accent-7) !important;
	border-radius: var(--nia-radius);
	border-left: 4px solid var(--wp--preset--color--accent-1);
}

.niarunner-theme .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--accent-4);
}

.niarunner-theme .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--accent-3);
}

/* Mini Cart icon in header */
.niarunner-theme .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast) !important;
	transition: var(--nia-transition);
	margin-left: 0.5rem;
}

.niarunner-theme .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--accent-1) !important;
}

.niarunner-theme .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 700;
}

/* Mini Cart Drawer */
.niarunner-theme .wc-block-mini-cart__drawer .components-modal__content {
	background-color: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--accent-7) !important;
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading);
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: none;
	border-radius: var(--nia-radius);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: var(--nia-transition);
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:hover {
	background-color: var(--wp--preset--color--accent-6) !important;
	transform: translateY(-1px);
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart {
	color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
	border-radius: var(--nia-radius);
	transition: var(--nia-transition);
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-components-product-name {
	color: var(--wp--preset--color--accent-7) !important;
}

.niarunner-theme .wc-block-mini-cart__drawer .wc-block-components-product-price {
	color: var(--wp--preset--color--accent-1) !important;
	font-weight: 700;
}

/* --- 11k. Shipping Banner --- */

.nia-shipping-banner {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- 11k.2 Frete — Plugin Melhor Envio Cotação --- */
/* Corrige contraste: fundo claro (#F2F2F2) do plugin vs. texto branco herdado do tema dark */

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto.containerCalculator {
	background-color: var(--wp--preset--color--accent-8) !important; /* #2A2A2A */
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px !important;
	padding: 20px !important;
	color: var(--wp--preset--color--contrast) !important; /* #FFFFFF */
}

/* Todos os textos internos — forçar cor legível */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .calculatorRow,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .row,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto p,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto table,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto thead,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto tbody,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto tr,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto td,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto small {
	color: var(--wp--preset--color--contrast) !important; /* #FFFFFF */
}

/* Input de CEP — adaptar ao dark theme */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep {
	background-color: var(--wp--preset--color--accent-5) !important; /* #111111 */
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px !important;
	padding: 10px 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--accent-1) !important; /* #D4622B laranja */
	box-shadow: 0 0 0 2px rgba(212, 98, 43, 0.25) !important;
}

/* --- 11k.3 Nia Store — botão pill --- */
/* Fix: wrapper div com background sem border-radius torna botão rectangular */
.nia-section .wp-block-button {
	border-radius: 50px;
	overflow: hidden;
}
.nia-section .wp-block-button__link,
.nia-section .wp-element-button {
	border-radius: 50px !important;
}

/* --- 11l. WooCommerce Blocks Responsive --- */

@media (max-width: 768px) {
	.nia-product-card {
		margin-bottom: 1rem;
	}

	.nia-woo-page .wc-block-cart .wc-block-cart__main,
	.nia-woo-page .wc-block-cart .wc-block-cart__sidebar {
		flex-basis: 100%;
	}

	.nia-my-account .woocommerce-MyAccount-navigation,
	.nia-my-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
	}

	.wc-block-product-categories-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================================
   12. REDES SOCIAIS
   ======================================== */

.nia-social-links {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nia-social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-8);
	color: var(--wp--preset--color--contrast) !important;
	transition: var(--nia-transition);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nia-social-links a:hover {
	background-color: var(--wp--preset--color--accent-1);
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(212, 98, 43, 0.4);
}

/* ========================================
   13. ANIMAÇÕES
   ======================================== */

/* Fade in de baixo para cima */
.nia-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.nia-animate.nia-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fade in da esquerda */
.nia-animate-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.nia-animate-left.nia-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Fade in da direita */
.nia-animate-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.nia-animate-right.nia-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Hero: conteúdo sempre acima da dobra — sem animação de entrada */
.niarunner-hero .nia-animate,
.niarunner-hero .nia-animate-left,
.niarunner-hero .nia-animate-right {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Pulse sutil para CTA */
@keyframes nia-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(212, 98, 43, 0.4);
	}

	50% {
		box-shadow: 0 0 0 12px rgba(212, 98, 43, 0);
	}
}

.nia-pulse {
	animation: nia-pulse 2s infinite;
}

/* Glow do logo */
@keyframes nia-glow {

	0%,
	100% {
		filter: drop-shadow(0 0 4px rgba(212, 98, 43, 0.3));
	}

	50% {
		filter: drop-shadow(0 0 12px rgba(212, 98, 43, 0.6));
	}
}

.nia-logo-glow {
	animation: nia-glow 3s ease-in-out infinite;
}

/* ========================================
   14. PADRÕES GEOMÉTRICOS AFRICANOS
   ======================================== */

/* Padrão de borda superior estilo Kente */
.nia-kente-top {
	border-top: 4px solid transparent;
	border-image: repeating-linear-gradient(90deg,
			var(--wp--preset--color--accent-1) 0px,
			var(--wp--preset--color--accent-1) 15px,
			var(--wp--preset--color--accent-6) 15px,
			var(--wp--preset--color--accent-6) 30px,
			var(--wp--preset--color--accent-3) 30px,
			var(--wp--preset--color--accent-3) 45px,
			var(--wp--preset--color--accent-4) 45px,
			var(--wp--preset--color--accent-4) 60px) 1;
}

/* Background pattern sutil */
.nia-pattern-bg {
	background-image:
		linear-gradient(30deg, rgba(212, 98, 43, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(212, 98, 43, 0.03) 87.5%, rgba(212, 98, 43, 0.03)),
		linear-gradient(150deg, rgba(212, 98, 43, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(212, 98, 43, 0.03) 87.5%, rgba(212, 98, 43, 0.03)),
		linear-gradient(30deg, rgba(212, 98, 43, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(212, 98, 43, 0.03) 87.5%, rgba(212, 98, 43, 0.03)),
		linear-gradient(150deg, rgba(212, 98, 43, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(212, 98, 43, 0.03) 87.5%, rgba(212, 98, 43, 0.03));
	background-size: 80px 140px;
	background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}

/* ========================================
   15. RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
	.niarunner-hero {
		min-height: 70vh !important;
	}

	.niarunner-hero-bg {
		object-position: 65% top !important;
	}

	.niarunner-hero-overlay {
		background: linear-gradient(
			0deg,
			rgba(17, 17, 17, 0.95) 0%,
			rgba(17, 17, 17, 0.7) 40%,
			rgba(17, 17, 17, 0.2) 70%,
			transparent 100%
		) !important;
	}

	.niarunner-hero-content {
		align-self: flex-end !important;
		padding: 2rem 1.5rem 3rem !important;
		max-width: 100% !important;
	}

	.niarunner-hero-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}

	.niarunner-hero h1,
	.wp-block-cover.niarunner-hero h1 {
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.niarunner-hero-subtitle {
		max-width: 100% !important;
	}

	.nia-social-links {
		justify-content: center;
	}

	.nia-card {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.niarunner-hero {
		min-height: 60vh !important;
	}

	.niarunner-header .wp-block-navigation a {
		font-size: 0.8rem;
		letter-spacing: 0.05em;
	}
}

/* ========================================
   16. FORMULÁRIO DE CONTATO (CF7)
   ======================================== */

/* Container do formulário */
.niarunner-theme .nia-contact-form .wpcf7 {
	max-width: 100%;
}

.niarunner-theme .nia-contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Rows do formulário */
.niarunner-theme .nia-form-row {
	margin-bottom: 1.25rem;
}

/* Inputs e textarea */
.niarunner-theme .nia-contact-form .wpcf7-form-control.nia-input,
.niarunner-theme .nia-contact-form .wpcf7-form-control-wrap select,
.niarunner-theme .nia-contact-form .wpcf7-form-control-wrap input,
.niarunner-theme .nia-contact-form .wpcf7-form-control-wrap textarea {
	width: 100%;
	padding: 14px 18px;
	background-color: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--accent-7) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--nia-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	transition: var(--nia-transition);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.niarunner-theme .nia-contact-form .wpcf7-form-control-wrap select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFF8F0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

.niarunner-theme .nia-contact-form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1) !important;
	box-shadow: 0 0 0 3px rgba(212, 98, 43, 0.15);
}

/* Placeholder */
.niarunner-theme .nia-contact-form .wpcf7-form-control::placeholder {
	color: rgba(255, 248, 240, 0.35);
	font-style: italic;
}

/* Textarea altura mínima */
.niarunner-theme .nia-contact-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

/* Select option styling */
.niarunner-theme .nia-contact-form select option {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-7);
}

/* Botão de envio */
.niarunner-theme .nia-contact-form .wpcf7-submit,
.niarunner-theme .nia-form-submit .wpcf7-submit {
	width: 100%;
	padding: 16px 32px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1), #e07540) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: none;
	border-radius: var(--nia-radius-pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: var(--nia-transition);
	box-shadow: var(--nia-shadow-md);
	margin-top: 0.5rem;
}

.niarunner-theme .nia-contact-form .wpcf7-submit:hover {
	background: linear-gradient(135deg, #e07540, var(--wp--preset--color--accent-6)) !important;
	transform: translateY(-2px);
	box-shadow: var(--nia-shadow-lg);
}

.niarunner-theme .nia-contact-form .wpcf7-submit:active {
	transform: translateY(0);
}

/* Spinner de loading */
.niarunner-theme .nia-contact-form .wpcf7-spinner {
	margin: 1rem auto 0;
	display: block;
}

/* Mensagens de validação */
.niarunner-theme .nia-contact-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-4);
	font-size: 0.8rem;
	margin-top: 6px;
	display: block;
}

/* Mensagem de sucesso */
.niarunner-theme .nia-contact-form .wpcf7-response-output {
	border: none !important;
	border-radius: var(--nia-radius);
	padding: 14px 20px !important;
	margin: 1.5rem 0 0 !important;
	font-size: 0.9rem;
	text-align: center;
}

.niarunner-theme .nia-contact-form .wpcf7-mail-sent-ok,
.niarunner-theme .nia-contact-form .wpcf7 form.sent .wpcf7-response-output {
	background-color: rgba(27, 140, 58, 0.15) !important;
	color: var(--wp--preset--color--accent-3) !important;
	border-left: 4px solid var(--wp--preset--color--accent-3) !important;
}

.niarunner-theme .nia-contact-form .wpcf7-validation-errors,
.niarunner-theme .nia-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.niarunner-theme .nia-contact-form .wpcf7 form.unaccepted .wpcf7-response-output {
	background-color: rgba(196, 38, 46, 0.15) !important;
	color: var(--wp--preset--color--accent-4) !important;
	border-left: 4px solid var(--wp--preset--color--accent-4) !important;
}

.niarunner-theme .nia-contact-form .wpcf7 form.failed .wpcf7-response-output {
	background-color: rgba(212, 98, 43, 0.15) !important;
	color: var(--wp--preset--color--accent-1) !important;
	border-left: 4px solid var(--wp--preset--color--accent-1) !important;
}

/* Não válido highlight */
.niarunner-theme .nia-contact-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent-4) !important;
}

/* CF7 Responsivo */
@media (max-width: 768px) {
	.niarunner-theme .nia-contact-form .wpcf7-submit {
		padding: 14px 24px;
		font-size: 0.9rem;
	}
}

/* ========================================
   16b. FORMULÁRIO DE CONTATO (WPForms)
   ======================================== */

/* Esconder campo honeypot anti-spam */
.nia-contact-form .wpforms-field-hp {
	display: none !important;
	visibility: hidden !important;
}

/* Container */
.niarunner-theme .nia-contact-form .wpforms-container {
	max-width: 100%;
}

/* Field wrapper */
.niarunner-theme .nia-contact-form .wpforms-field {
	margin-bottom: 1.25rem;
	padding: 0;
}

/* Labels */
.niarunner-theme .nia-contact-form .wpforms-field-label {
	color: var(--wp--preset--color--accent-7);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	display: block;
}

.niarunner-theme .nia-contact-form .wpforms-required-label {
	color: var(--wp--preset--color--accent-1);
	margin-left: 2px;
}

/* ── Inputs, textarea, select ──
   Seletores duplos: type-attr + classe .wpforms-field-large para máxima cobertura.
   Sem .niarunner-theme para ter seletor mais curto e bater WPForms inline styles. */
.nia-contact-form .wpforms-field input[type="text"],
.nia-contact-form .wpforms-field input[type="email"],
.nia-contact-form .wpforms-field input[type="tel"],
.nia-contact-form .wpforms-field input[type="url"],
.nia-contact-form .wpforms-field input.wpforms-field-large,
.nia-contact-form .wpforms-field input.wpforms-field-medium,
.nia-contact-form .wpforms-field textarea,
.nia-contact-form .wpforms-field select,
.nia-contact-form .wpforms-field select.wpforms-field-large {
	width: 100% !important;
	padding: 14px 18px !important;
	background: var(--wp--preset--color--accent-5) !important;
	background-color: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--accent-7) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--nia-radius) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.95rem !important;
	transition: var(--nia-transition);
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

/* Select: seta customizada — padding-right menor para não cortar o texto */
.nia-contact-form .wpforms-field select,
.nia-contact-form .wpforms-field select.wpforms-field-large {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFF8F0' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 32px !important;
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Select option — hex direto (CSS variables não resolvem em <option> nativos em vários browsers) */
.nia-contact-form .wpforms-field select option {
	background-color: #111111 !important;
	color: #FFF8F0 !important;
}

/* Focus */
.nia-contact-form .wpforms-field input:focus,
.nia-contact-form .wpforms-field textarea:focus,
.nia-contact-form .wpforms-field select:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--accent-1) !important;
	box-shadow: 0 0 0 3px rgba(212, 98, 43, 0.15) !important;
}

/* Placeholder */
.nia-contact-form .wpforms-field input::placeholder,
.nia-contact-form .wpforms-field textarea::placeholder {
	color: rgba(255, 248, 240, 0.35) !important;
	font-style: italic;
}

/* Textarea altura mínima */
.nia-contact-form .wpforms-field textarea {
	min-height: 140px !important;
	resize: vertical;
}

/* Erro de validação — texto */
.niarunner-theme .nia-contact-form .wpforms-error {
	color: var(--wp--preset--color--accent-4);
	font-size: 0.8rem;
	margin-top: 6px;
	display: block;
}

/* Erro de validação — borda vermelha no campo */
.nia-contact-form .wpforms-field input.wpforms-error,
.nia-contact-form .wpforms-field input.wpforms-field-large.wpforms-error,
.nia-contact-form .wpforms-field textarea.wpforms-error,
.nia-contact-form .wpforms-field select.wpforms-error {
	border-color: var(--wp--preset--color--accent-4) !important;
}

/* ── Botão de envio ──
   Duplo seletor: .wpforms-submit e button[type="submit"] */
.niarunner-theme .nia-contact-form .wpforms-submit-container {
	margin-top: 0.5rem;
}

.nia-contact-form .wpforms-submit,
.nia-contact-form button[type="submit"] {
	width: 100% !important;
	padding: 16px 32px !important;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1), #e07540) !important;
	background-color: var(--wp--preset--color--accent-1) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--nia-radius-pill) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: var(--nia-transition);
	box-shadow: var(--nia-shadow-md);
}

.nia-contact-form .wpforms-submit:hover,
.nia-contact-form button[type="submit"]:hover {
	background: linear-gradient(135deg, #e07540, var(--wp--preset--color--accent-6)) !important;
	transform: translateY(-2px);
	box-shadow: var(--nia-shadow-lg);
}

.nia-contact-form .wpforms-submit:active,
.nia-contact-form button[type="submit"]:active {
	transform: translateY(0);
}

.nia-contact-form .wpforms-submit[disabled],
.nia-contact-form button[type="submit"][disabled] {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Confirmação de sucesso */
.niarunner-theme .nia-contact-form .wpforms-confirmation-container-full,
.niarunner-theme .nia-contact-form .wpforms-confirmation-scroll {
	background-color: rgba(27, 140, 58, 0.15) !important;
	border-left: 4px solid var(--wp--preset--color--accent-3) !important;
	border-radius: var(--nia-radius);
	padding: 14px 20px !important;
	margin-top: 1.5rem;
	font-size: 0.9rem;
	text-align: center;
}

.niarunner-theme .nia-contact-form .wpforms-confirmation-container-full p,
.niarunner-theme .nia-contact-form .wpforms-confirmation-scroll p {
	color: #FFF8F0 !important;
	margin: 0;
}

/* Alerta genérico de erro de envio */
.niarunner-theme .nia-contact-form .wpforms-alert-danger,
.niarunner-theme .nia-contact-form .wpforms-alert-warning {
	background-color: rgba(196, 38, 46, 0.15) !important;
	color: var(--wp--preset--color--accent-4) !important;
	border-left: 4px solid var(--wp--preset--color--accent-4) !important;
	border-radius: var(--nia-radius);
	padding: 14px 20px !important;
	margin-top: 1.5rem;
	font-size: 0.9rem;
}

/* Responsivo */
@media (max-width: 768px) {
	.nia-contact-form .wpforms-submit,
	.nia-contact-form button[type="submit"] {
		padding: 14px 24px !important;
		font-size: 0.9rem !important;
	}
}

/* ========================================
   16c. BARRA DE CONTATO (/contato)
   ======================================== */

/* Linha separadora abaixo da barra */
.nia-contact-bar {
	border-bottom: 1px solid rgba(255, 248, 240, 0.08);
}

/* Itens: separador vertical entre eles */
.nia-contact-bar__items {
	align-items: center;
}

.nia-contact-bar__items p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem !important;
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.01em;
	padding: 0.25rem 2rem 0.25rem 0;
	border-right: 1px solid rgba(255, 248, 240, 0.2);
	line-height: 1.4;
}

.nia-contact-bar__items p:last-child {
	padding-right: 0;
	border-right: none;
}

/* Link destaque */
.nia-contact-bar__items a {
	color: var(--wp--preset--color--accent-1) !important;
	font-weight: 700;
	text-decoration: none;
	transition: var(--nia-transition);
}

.nia-contact-bar__items a:hover {
	color: var(--wp--preset--color--accent-6) !important;
	text-decoration: underline;
}

/* Mobile: stacked, sem separador */
@media (max-width: 600px) {
	.nia-contact-bar__items p {
		border-right: none;
		padding-right: 0;
	}
}

/* ========================================
   16d. PÁGINA DE VÍDEOS (TikTok Feed)
   ======================================== */


/* ========================================
   17. UTILITÁRIOS
   ======================================== */

.nia-text-center {
	text-align: center;
}

.nia-text-left {
	text-align: left;
}

.nia-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.nia-mt-0 {
	margin-top: 0 !important;
}

.nia-mb-0 {
	margin-bottom: 0 !important;
}

.nia-p-0 {
	padding: 0 !important;
}

.nia-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ========================================
   12. FORCE COMPACT LAYOUT (Last Resort)
   ======================================== */

:root {
	--wp--style--block-gap: 0px !important;
}

/* Reduzir margens verticais de todos os blocos principais */
.wp-site-blocks>* {
	margin-block-start: 1rem !important;
	margin-block-end: 0 !important;
}

/* Reduzir espaçamento de títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 0.5rem !important;
	margin-top: 1rem !important;
}

/* Reduzir espaçamento de parágrafos */
p {
	margin-bottom: 0.75rem !important;
}

/* Reduzir espaçamento interno de colunas e grupos */
.wp-block-columns {
	margin-bottom: 1rem !important;
}

.wp-block-group {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}


/* ── Header nav spacing fix ── */
/* ── Menu spacing fix (global) ── */
@media (min-width: 768px) {

	.niarunner-header .wp-block-navigation__container,
	.wp-block-navigation__container,
	.wp-block-navigation ul,
	.wp-block-navigation {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 28px !important;
		column-gap: 28px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Ensure mobile menu doesn't lose gap entirely if using flex column */
@media (max-width: 767px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 20px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* ==========================
   RESPONSIVIDADE - HEADER
   ========================== */
@media (max-width: 780px) {
	/* Permitir que o header quebre de forma controlada em telas pequenas */
	.niarunner-header {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 12px;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* O grupo da direita (navegação + ícones) deve ocupar toda a linha abaixo do título quando necessário */
	.niarunner-header > .wp-block-group:last-child,
	.niarunner-header .wp-block-group > .wp-block-group {
		width: 100% !important;
		display: flex !important;
		justify-content: flex-end !important;
		box-sizing: border-box;
	}

	/* Forçar o container de navegação a se ajustar à largura disponível */
	.niarunner-header .wp-block-navigation,
	.niarunner-header .niarunner-primary-nav {
		width: 100% !important;
		order: 2;
		margin-top: 8px;
		justify-content: center !important;
	}

	/* On small screens, hide the responsive container when closed to avoid visible white area */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}

	/* Itens de navegação ficam em coluna quando a largura for pequena */
	.niarunner-header .wp-block-navigation .wp-block-navigation__container,
	.niarunner-header .wp-block-navigation ul {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px;
		align-items: center;
	}

	/* Mantém os ícones (minicart / conta) à direita na primeira linha */
	.niarunner-header .wp-block-group > .wp-block-group {
		order: 1;
		justify-content: flex-end;
	}

	/* Ajustes visuais para evitar overflow no menu */
	.niarunner-header .wp-block-navigation a {
		white-space: normal !important;
		text-align: center;
	}

}

/* When logged in, WP admin bar can change viewport - ensure hero still visible */
body.admin-bar .niarunner-hero {
	margin-top: 0 !important;
}

/* Hero de páginas internas (wp-block-cover) — compacto, sem espaço excessivo */
.wp-block-cover.niarunner-hero {
	min-height: 0 !important;
	padding-top: 4rem !important;
	padding-bottom: 2rem !important;
}

/* Safety: force global dark background to avoid editor/admin white overlays on mobile */
html, body, .wp-site-blocks, .site, .site-content {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Hide any unexpected inner white backgrounds coming from block editor wrappers */
.edit-site, .edit-site__iframe, .block-editor-page, .editor-post-preview, .editor-styles-wrapper {
	background: transparent !important;
}

/* Prevent horizontal scrollbars coming from admin bar or editor overlays */
html, body {
	overflow-x: hidden !important;
}

/* ========================================
   MENU RESPONSIVO (MOBILE)
   ======================================== */

/* Overlay aberto: tela inteira com fundo escuro */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container[data-wp-class--is-menu-open="true"] {
	display: flex !important;
	visibility: visible !important;
	height: 100vh !important;
	max-height: none !important;
	overflow: auto !important;
	pointer-events: auto !important;
	position: fixed !important;
	inset: 0 !important;
	background: var(--wp--preset--color--accent-5) !important;
	z-index: 100000 !important;
}

/* Itens em coluna centralizada */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container[data-wp-class--is-menu-open="true"] .wp-block-navigation__container {
	flex-direction: column !important;
	gap: 20px !important;
	align-items: center !important;
	padding-top: 60px !important;
}

/* Labels maiores */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container[data-wp-class--is-menu-open="true"] .wp-block-navigation-item__label {
	font-size: 1.1rem !important;
	text-align: center !important;
}

/* Botão fechar */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container[data-wp-class--is-menu-open="true"] .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
}