.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--btn-height);
	width: fit-content;
	min-width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: var(--btn-pad, 0);
	border: var(--btn-border-width, 0) solid var(--btn-border-color, transparent);
	background: var(--btn-bg, transparent);
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	border-radius: var(--radius-small);
	cursor: pointer;
	user-select: none;
}
.btn span {
	font-family: var(--font-family-1);
	font-weight: 500;
	height: 14px;
	color: var(--btn-color, inherit);
	transition: all 0.3s ease;
}
.btn img {
	height: 14px;
	width: auto;
	object-fit: contain;
	filter: var(--btn-img-filter, none);
	transition: filter 0.3s;
}
.btn:is(:hover, .active) {
	background: var(--btn-hover-bg, var(--btn-bg, transparent));
	border-color: var(--btn-hover-border-color, var(--btn-border-color, transparent));
}
.btn:is(:hover, .active) span {
	color: var(--btn-hover-color, var(--btn-color, inherit));
}
.btn:is(:hover, .active) 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-hover-bg: var(--accent);
	--btn-hover-color: var(--accent-match);
	--btn-img-filter: var(--primary-filter-match);
}

.btn.btn-accent {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--accent);
	--btn-color: var(--white);
	--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-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-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-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: 2px;
	--btn-border-color: var(--border);
	--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-border-width: 1px;
	--btn-border-color: var(--border);
	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.btn-small {
	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);
}