/*
 * Przycisk bazowy — Figma, sekcja "buttons": czerwony, po najechaniu ciemny.
 * Mobile (ramka 360): 114x38, Stolzl Medium 9.65px.
 * Desktop (ramka 1728): wysokość 62, padding 20.39, Stolzl Medium 20px.
 */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(114 * var(--u));
	min-height: calc(38 * var(--u));
	padding: 0 calc(7.45 * var(--u));
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-transform: uppercase;
	text-align: center;
	border-radius: var(--radius-0);
	white-space: nowrap;
	background-color: var(--color-brand-red);
	color: var(--color-white);
	transition: background-color 0.2s ease;
}

@media (min-width: 900px) {
	.button {
		min-width: 0;
		min-height: calc(62 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
		color: var(--color-cream);
	}
}

.button:hover,
.button:focus-visible {
	background-color: var(--color-ink);
}

.button--brand {
	background-color: var(--color-brand-red);
}

.button--brand:hover,
.button--brand:focus-visible {
	background-color: var(--color-ink);
}

/* Pełna szerokość rodzica — przyciski "dodaj do koszyka" na kartach produktów WooCommerce */
.button--block {
	display: flex;
	width: 100%;
}