/* Komponenty wielokrotnego użytku (przyciski, plakietki, pasek akcji produktu). */

/* Przyciski */
.kp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kp-space-2);
	min-height: var(--kp-btn-height);
	padding: 0 var(--kp-space-3);
	border: 1px solid var(--kp-color-brand);
	border-radius: var(--kp-radius);
	background: var(--kp-color-brand);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--kp-transition), color var(--kp-transition), box-shadow var(--kp-transition);
}
.kp-btn:hover { box-shadow: var(--kp-shadow); }
.kp-btn--ghost { background: transparent; color: var(--kp-color-brand); }
.kp-btn--ghost:hover { background: var(--kp-color-bg-soft); }

/* Plakietki */
.kp-badge {
	position: absolute;
	top: var(--kp-space-3);
	left: var(--kp-space-3);
	z-index: 2;
	padding: 2px 10px;
	border-radius: var(--kp-radius-pill);
	background: var(--kp-color-accent);
	color: var(--kp-color-text);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Pasek akcji produktu: Do listy + Porównaj w jednej parze (używany gdy kp_enable_custom_actions = true).
   Ujednolicenie wyglądu przycisków YITH – klasy YITH sprawdzić na stagingu. */
.kp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kp-space-2);
	align-items: center;
	margin-top: var(--kp-space-3);
}
.kp-actions a,
.kp-actions .compare,
.kp-actions .add_to_wishlist {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--kp-space-3);
	border: 1px solid var(--kp-color-line);
	border-radius: var(--kp-radius-pill);
	background: var(--kp-color-bg);
	color: var(--kp-color-text);
	font-size: 14px;
	text-decoration: none;
	transition: border-color var(--kp-transition), background var(--kp-transition);
}
.kp-actions a:hover,
.kp-actions .compare:hover,
.kp-actions .add_to_wishlist:hover {
	border-color: var(--kp-color-brand);
	background: var(--kp-color-bg-soft);
}

/* Ruch: szanujemy ustawienie „ogranicz ruch” */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}