/* ============================================================
   Panacea — Unified Button System
   All solid variants: white text on deep/coloured background.
   Mission 39 — override any specificity from shop.css
   ============================================================ */

/* Base */
.pn-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--pn-space-2);
	padding: 14px var(--pn-space-5);
	border-radius: var(--pn-radius-pill);
	font-family: var(--pn-font-body);
	font-size: var(--pn-fs-body);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition:
		background var(--pn-dur-fast) var(--pn-ease),
		color var(--pn-dur-fast) var(--pn-ease),
		transform var(--pn-dur-fast) var(--pn-ease),
		box-shadow var(--pn-dur-fast) var(--pn-ease);
	white-space: nowrap;
}

/* ── Solid variants — always white text ────────────────────── */
.pn-btn--primary,
.pn-btn--green {
	background: var(--pn-green-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--primary:hover,
.pn-btn--green:hover,
.pn-btn--primary:focus-visible,
.pn-btn--green:focus-visible {
	background: color-mix(in srgb, var(--pn-green-deep) 85%, #000);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(47,90,61,.25);
	color: #fff !important;
}

.pn-btn--blue {
	background: var(--pn-blue-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--blue:hover,
.pn-btn--blue:focus-visible {
	background: color-mix(in srgb, var(--pn-blue-deep) 85%, #000);
	transform: translateY(-1px);
	color: #fff !important;
}

.pn-btn--sand,
.pn-btn--quiz {
	background: var(--pn-sand-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--sand:hover,
.pn-btn--quiz:hover,
.pn-btn--sand:focus-visible,
.pn-btn--quiz:focus-visible {
	background: var(--pn-sand-dark);
	transform: translateY(-1px);
	color: #fff !important;
}

.pn-btn--rose {
	background: var(--pn-rose-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--rose:hover,
.pn-btn--rose:focus-visible {
	background: var(--pn-rose-dark);
	transform: translateY(-1px);
	color: #fff !important;
}

.pn-btn--violet {
	background: var(--pn-violet-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--violet:hover,
.pn-btn--violet:focus-visible {
	background: color-mix(in srgb, var(--pn-violet-deep) 85%, #000);
	transform: translateY(-1px);
	color: #fff !important;
}

.pn-btn--dark {
	background: var(--pn-ink-deep);
	color: #fff !important;
	border: none;
}
.pn-btn--dark:hover,
.pn-btn--dark:focus-visible {
	background: #000;
	transform: translateY(-1px);
	color: #fff !important;
}

/* ── Ghost / outline variants ───────────────────────────────── */
.pn-btn--ghost {
	background: transparent;
	color: var(--pn-ink-deep);
	border: 1.5px solid var(--pn-ink-deep);
}
.pn-btn--ghost:hover,
.pn-btn--ghost:focus-visible {
	background: var(--pn-ink-deep);
	color: #fff !important;
}

.pn-btn--ghost-green {
	background: transparent;
	color: var(--pn-green-deep);
	border: 1.5px solid var(--pn-green-deep);
}
.pn-btn--ghost-green:hover,
.pn-btn--ghost-green:focus-visible {
	background: var(--pn-green-deep);
	color: #fff !important;
}

/* ── Text/link variant ───────────────────────────────────────── */
.pn-btn--text {
	background: transparent;
	color: var(--pn-ink-deep);
	border: none;
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pn-btn--text:hover { opacity: .7; }

/* ── Size variants ───────────────────────────────────────────── */
.pn-btn--sm {
	padding: 9px 18px;
	font-size: 13px;
}
.pn-btn--lg {
	padding: 17px 44px;
	font-size: 17px;
}
.pn-btn--full { width: 100%; justify-content: center; }