.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: calc(var(--btn-height) + 2 * var(--btn-ring) + 2 * var(--btn-border-width, 1px));
	width: fit-content;
	min-width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: var(--btn-ring) calc(var(--btn-ring) + var(--btn-pad, 0px));
	position: relative;
	border: var(--btn-border-width, 1px) solid var(--btn-border-color, transparent);
	background: transparent;
	font-size: 18px;
	line-height: 18px;
	font-weight: 700;
	transition: all 0.3s ease;
	border-radius: var(--radius-pill);
	cursor: pointer;
	user-select: none;
}
.btn::before {
	content: "";
	position: absolute;
	inset: var(--btn-ring);
	background: var(--btn-bg, transparent);
	border-radius: var(--radius-pill);
	transition: background 0.3s ease;
	z-index: 0;
}
.btn > * {
	position: relative;
	z-index: 1;
}
.btn span {
	font-family: var(--font-family-1);
	font-weight: 700;
	height: 18px;
	color: var(--btn-color, inherit);
	transition: all 0.3s ease;
}
.btn img {
	height: 18px;
	width: auto;
	object-fit: contain;
	filter: var(--btn-img-filter, none);
	transition: filter 0.3s;
}
.btn.active {
	border-color: var(--btn-hover-border-color, var(--btn-border-color, transparent));
}
@media not all and (pointer: coarse) {
	.btn:hover {
		border-color: var(--btn-hover-border-color, var(--btn-border-color, transparent));
	}
}
.btn.active::before {
	background: var(--btn-hover-bg, var(--btn-bg, transparent));
}
@media not all and (pointer: coarse) {
	.btn:hover::before {
		background: var(--btn-hover-bg, var(--btn-bg, transparent));
	}
}
.btn.active span {
	color: var(--btn-hover-color, var(--btn-color, inherit));
}
@media not all and (pointer: coarse) {
	.btn:hover span {
		color: var(--btn-hover-color, var(--btn-color, inherit));
	}
}
.btn.active img {
	filter: var(--btn-hover-img-filter, var(--btn-img-filter, none));
}
@media not all and (pointer: coarse) {
	.btn:hover img {
		filter: var(--btn-hover-img-filter, var(--btn-img-filter, none));
	}
}

/* ================================ */
/* Variants — тільки змінні         */
/* ================================ */

.btn.btn-primary {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--primary);
	--btn-color: var(--primary-match);
	--btn-border-color: var(--primary-ring);
	--btn-hover-border-color: var(--accent);
	--btn-hover-bg: var(--accent);
	--btn-hover-color: var(--accent-match);
	--btn-img-filter: var(--primary-filter-match);
}

.btn.btn-glass {
	--btn-pad: var(--btn-padding);
	--btn-bg: transparent;
	--btn-color: var(--black);
	--btn-border-color: var(--black);
	--btn-hover-bg: var(--white);
	--btn-hover-color: var(--black);
	--btn-hover-border-color: var(--primary-ring);
	backdrop-filter: blur(60px);
}

.btn.btn-accent {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--accent);
	--btn-color: var(--white);
	--btn-border-color: var(--accent);
	--btn-hover-border-color: var(--primary-ring);
	--btn-hover-bg: var(--primary);
	--btn-hover-color: var(--primary-match);
	--btn-hover-img-filter: brightness(0) invert(1);
}

.btn.btn-dark {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--black);
	--btn-color: var(--white);
	--btn-border-color: var(--black);
	--btn-hover-bg: var(--white);
	--btn-hover-color: var(--black);
	--btn-img-filter: brightness(0) invert(1);
	--btn-hover-img-filter: none;
}

.btn.btn-white {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--white);
	--btn-color: var(--black);
	--btn-border-color: var(--black);
	--btn-hover-bg: var(--black);
	--btn-hover-color: var(--white);
	--btn-hover-img-filter: brightness(0) invert(1);
}

.btn.btn-gray {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--gray);
	--btn-color: var(--black);
	--btn-hover-bg: var(--primary);
	--btn-hover-color: var(--primary-match);
}

.btn.btn-red {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--red);
	--btn-color: var(--white);
	--btn-border-color: var(--red);
	--btn-hover-bg: var(--red-hover);
	--btn-hover-color: var(--white);
	--btn-img-filter: brightness(0) invert(1);
}

/* Border Variant */
.btn.btn-border {
	--btn-pad: var(--btn-padding);
	--btn-border-width: 1px;
	--btn-border-color: var(--black);
	--btn-color: var(--black);
	--btn-hover-bg: var(--primary);
	--btn-hover-border-color: var(--primary);
	--btn-hover-color: var(--primary-match);
}

/* Border + Primary */
.btn.btn-border.primary {
	--btn-border-color: var(--primary);
	--btn-hover-img-filter: brightness(0);
}

/* Border + Red */
.btn.btn-border.red {
	--btn-border-color: var(--red);
	--btn-color: var(--red);
	--btn-hover-bg: var(--red);
	--btn-hover-border-color: var(--red);
	--btn-hover-color: var(--white);
	--btn-hover-img-filter: var(--red-filter);
}

/* ================================ */
/* Special                          */
/* ================================ */

.btn.btn-circle {
	--btn-ring: 0px;
	--btn-border-width: 1px;
	--btn-border-color: var(--black);
	height: 38px;
	width: 38px;
	padding: 9px;
	border-radius: var(--radius-max);
}
.btn:is(.btn-catalog, .btn-sale) {
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
}
.btn:is(.btn-catalog, .btn-sale) :is(span, img) {
	height: 16px;
}
.btn.btn-small {
	--btn-height: var(--btn-height-small);
}
.btn.btn-full {
	width: 100%;
	--btn-pad: 0;
}
.btn.btn-50 {
	width: 50%;
	--btn-pad: 0;
}

/* Стани */
.btn.disabled {
	--btn-bg: var(--gray);
	--btn-hover-bg: var(--gray);
}
.disabled {
	background: var(--gray);
}

@media (max-width: 1680px) {
	.btn {
		font-size: 16px;
		line-height: 16px;
	}
	.btn span,
	.btn img {
		height: 16px;
	}
}