:root {
	--primary: #7a2d2d; /* Tom de vinho */
	--secondary: #c1a165; /* Tom dourado */
	--background: #fdfdfd; /* Fundo mais claro */
	--border-radius: 16px; /* Maior arredondamento */
}

.text-primary {
	color: var(--primary);
}
.text-secondary {
	color: var(--secondary);
}

.bg-primary {
	background-color: var(--primary);
}

.bg-secondary {
	background-color: var(--secondary);
}

/* Torna o hover mais específico para o botão add-to-cart */
button.add-to-cart:hover {
	background-color: var(--secondary); /* Mantém o efeito de hover */
	transform: scale(1.05); /* Aumenta o tamanho do botão ao passar o mouse */
}

/* Foco no input, somente se estiver em um campo específico */
input:focus {
	border-color: var(--secondary);
	box-shadow: 0 0 6px var(--secondary);
}

/* Foco no botão add-to-cart, com maior especificidade */
button.add-to-cart:focus {
	outline: none;
	box-shadow: 0 0 12px var(--secondary); /* Destaque do botão quando em foco */
}

/* Alterações específicas para quando o botão add-to-cart for clicado e estiver em hover */
button.add-to-cart:hover {
	background-color: var(
		--secondary
	); /* Garante que o botão tenha a cor de fundo correta */
	transform: scale(1.05); /* Efeito de ampliação */
}

/* Remove os spin buttons no Chrome, Edge e Safari apenas para a classe .input-number */
input.input-number::-webkit-inner-spin-button,
input.input-number::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remove os spin buttons no Firefox apenas para a classe .input-number */
input.input-number {
	appearance: textfield;
	-moz-appearance: textfield;
}