button,
input,
select,
textarea {
	font: inherit;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.2rem;
	background: var(--accent);
	color: #f7fffb;
	cursor: pointer;
	font-weight: 600;
	transition:
		transform 140ms ease,
		filter 140ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn:active:not(:disabled) {
	transform: scale(0.97);
}

.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.btn-ghost {
	background: #fffdf8;
	color: var(--ink);
	border: 1px solid color-mix(in srgb, var(--ink) 28%, var(--line));
	box-shadow: 0 1px 0 rgba(28, 25, 20, 0.04);
}

.btn-ghost:hover {
	background: #fff;
	border-color: color-mix(in srgb, var(--ink) 42%, var(--line));
	filter: none;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	backdrop-filter: blur(8px);
	border-radius: 1rem;
	padding: 1rem;
}

.grid-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.product-card {
	display: grid;
	gap: 0.6rem;
	padding: 0.9rem;
	border-bottom: 1px solid var(--line);
}

.product-card h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.35rem;
}

.muted {
	color: var(--ink-muted);
}

.stack {
	display: grid;
	gap: 1rem;
}

.form-field {
	display: grid;
	gap: 0.35rem;
}

.form-field input,
.form-field select,
.form-field textarea {
	border: 1px solid var(--line);
	border-radius: 0.6rem;
	padding: 0.7rem 0.8rem;
	background: #fffdf8;
}