/*
 * Fase 1 — Foundation: elementos globais (DESIGN.md §8–11, §29–31, §38).
 * Componentes específicos (header, cards, home) ficam em arquivos próprios.
 */

/* ---------- Página ---------- */

html,
body {
	background-color: var(--arsenal-black);
}

body {
	color: var(--arsenal-gray);
	font-family: var(--arsenal-font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: rgba(var(--arsenal-blue-rgb), .35);
	color: var(--arsenal-white);
}

/* ---------- Tipografia (§9) ---------- */

h1, h2, h3, h4, h5, h6,
.title,
.wd-el-title .title,
.page-title .entry-title {
	font-family: var(--arsenal-font-title);
	font-weight: 600;
	color: var(--arsenal-white);
	letter-spacing: .01em;
}

/* Números — preço, float e quantidades em Inter Bold (§9.3). */
.price,
.amount,
.woocommerce-Price-amount,
.qty,
.product-labels .product-label {
	font-family: var(--arsenal-font-text);
	font-variant-numeric: tabular-nums;
}

.price,
.price .amount {
	color: var(--arsenal-white);
	font-weight: 700;
}

/* Preço antigo: âncora visual discreta; o atual tem o maior peso (§46). */
.price del,
.price del .amount {
	color: var(--arsenal-gray);
	font-weight: 500;
	opacity: 1;
}

.price ins {
	text-decoration: none;
}

/* ---------- Botões (§29) ---------- */

:is(.btn, .button, button, [type=submit], [type=button]) {
	--btn-brd-radius: var(--arsenal-radius-button);
	--btn-font-family: var(--arsenal-font-text);
	--btn-font-weight: 700;
	--btn-height: 44px;
	--btn-font-size: 14px;
	transition:
		background-color var(--arsenal-dur-micro) var(--arsenal-ease),
		border-color var(--arsenal-dur-micro) var(--arsenal-ease),
		color var(--arsenal-dur-micro) var(--arsenal-ease),
		box-shadow var(--arsenal-dur-micro) var(--arsenal-ease);
}

/*
 * Secundário (§29.2): transparente, borda #242B35, borda azul no hover.
 * É o estilo padrão do Woodmart ("default").
 */
:is(.btn-color-default, .btn.btn-default, .button:not(.alt):not(.btn-accent):not(.single_add_to_cart_button):not(.checkout-button)) {
	--btn-bgcolor: transparent;
	--btn-bgcolor-hover: transparent;
	--btn-color: var(--arsenal-white);
	--btn-color-hover: var(--arsenal-white);
	--btn-brd-width: 1px;
	--btn-brd-color: var(--arsenal-border);
	--btn-brd-color-hover: var(--arsenal-blue);
	--btn-box-shadow-hover: var(--arsenal-glow-blue);
}

/*
 * Primário (§29.1). O Woodmart aplica as variáveis --btn-accented-* em
 * .btn-accent, add-to-cart, checkout etc.; o btn-color-primary dos widgets
 * do Elementor segue a mesma regra de contraste.
 */
:is(.btn-color-primary, .btn-accent) {
	--btn-bgcolor: var(--arsenal-blue-button);
	--btn-bgcolor-hover: var(--arsenal-blue-light);
	--btn-brd-color: var(--arsenal-blue-button);
	--btn-brd-color-hover: var(--arsenal-blue-light);
	--btn-color: #FFFFFF;
	--btn-color-hover: var(--arsenal-black);
	--btn-box-shadow-hover: var(--arsenal-glow-blue);
}

.arsenal-btn--secondary .btn,
.btn-color-default.btn-style-bordered,
.btn-color-primary.btn-style-bordered {
	--btn-bgcolor: transparent;
	--btn-color: var(--arsenal-white);
	--btn-brd-color: var(--arsenal-border);
	--btn-brd-color-hover: var(--arsenal-blue);
	--btn-bgcolor-hover: transparent;
	--btn-color-hover: var(--arsenal-white);
}

/* Premium (§29.3) — só em ações de itens High Tier. */
.btn.arsenal-btn-premium,
.arsenal-btn-premium .btn {
	--btn-bgcolor: var(--arsenal-gold);
	--btn-bgcolor-hover: #E3BB6B;
	--btn-brd-color: var(--arsenal-gold);
	--btn-brd-color-hover: #E3BB6B;
	--btn-color: var(--arsenal-black);
	--btn-color-hover: var(--arsenal-black);
	--btn-box-shadow-hover: var(--arsenal-glow-gold);
}

/*
 * Seta que desliza no hover (§30). Vale no próprio botão ou no wrapper do
 * widget do Elementor: <div class="arsenal-btn-arrow"><a class="btn">…</a></div>
 */
:is(.btn.arsenal-btn-arrow, .arsenal-btn-arrow .btn)::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 6px;
	transition: transform var(--arsenal-dur-micro) var(--arsenal-ease);
}

:is(.btn.arsenal-btn-arrow, .arsenal-btn-arrow .btn):is(:hover, :focus-visible)::after {
	transform: translateX(4px);
}

/* Desabilitado (§8.4) */
:is(.btn, .button, button, [type=submit], [type=button]):is(:disabled, .disabled, [aria-disabled="true"]) {
	--btn-bgcolor: var(--arsenal-dark);
	--btn-bgcolor-hover: var(--arsenal-dark);
	--btn-brd-color: var(--arsenal-border);
	--btn-brd-color-hover: var(--arsenal-border);
	--btn-color: var(--arsenal-gray);
	--btn-color-hover: var(--arsenal-gray);
	--btn-box-shadow-hover: none;
	opacity: .6;
	cursor: not-allowed;
}

/* ---------- Formulários ---------- */

:is(input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number],
	input[type=password], input[type=url], input[type=date], textarea, select) {
	background-color: var(--arsenal-dark);
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-input);
	color: var(--arsenal-white);
	transition: border-color var(--arsenal-dur-micro) var(--arsenal-ease),
		box-shadow var(--arsenal-dur-micro) var(--arsenal-ease);
}

:is(input, textarea, select):focus {
	border-color: var(--arsenal-blue);
	box-shadow: 0 0 0 3px rgba(var(--arsenal-blue-rgb), .2);
}

/* ---------- Foco visível (§38) ---------- */

/* Um único anel de foco em todo o site, por cima do estilo pontilhado do tema. */
:focus-visible,
html :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--arsenal-blue-light) !important;
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------- Selos (§20) ---------- */

.product-labels .product-label {
	border-radius: var(--arsenal-radius-badge);
	font-weight: 700;
	letter-spacing: .02em;
	min-height: 0;
	padding: 4px 8px;
}

/* Oferta: vermelho, texto branco bold (exceção de contraste registrada, §2-D). */
.product-labels .onsale {
	background-color: var(--arsenal-danger);
	color: #FFFFFF;
}

/* Novo — mesmo azul de botão, pelo contraste com o texto branco. */
.product-labels .new {
	background-color: var(--arsenal-blue-button);
	color: #FFFFFF;
}

.product-labels .out-of-stock {
	background-color: var(--arsenal-dark);
	border: 1px solid var(--arsenal-border);
	color: var(--arsenal-gray);
}

/* ---------- Resíduos do tema verde anterior ---------- */

/* A descrição curta era verde e em caixa alta; o bloco técnico da Fase 5 a substitui. */
.woocommerce-product-details__short-description {
	color: var(--arsenal-gray);
	text-transform: none;
}

/* ---------- Movimento reduzido (§38) ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Título das páginas institucionais ---------- */

.page-title .entry-title,
.wd-page-title .entry-title {
	font-family: var(--arsenal-font-title);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ---------- Etapas do checkout (carrinho, finalizar, pagamento) ---------- */

/* Algo herdado do site antigo trocava o uppercase do Woodmart por
   capitalize ("Carrinho De Compras"). */
html body .wd-checkout-steps,
html body .wd-checkout-steps li {
	font-size: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
}