/* Single product page prong toggle (inc/product-prong-toggle.php) — own
   token set so it renders correctly regardless of what else is loaded on
   the product page; values match the kit selector's prong toggle so the
   two look identical. */

.gw-prong-toggle {
	--gw-green: #358459;
	--gw-border: #dfe3dc;
	--gw-text: #3a3f3a;

	display: inline-flex;
	border: 1px solid var(--gw-border);
	border-radius: 999px;
	overflow: hidden;
	margin: 4px 0 20px;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
		"Helvetica Neue", "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

.gw-prong-pill {
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var(--gw-text) !important;
	background: #fff;
	display: inline-block;
	transition: background 0.15s ease;
}
.gw-prong-pill + .gw-prong-pill { border-left: 1px solid var(--gw-border); }
.gw-prong-pill.is-selected { background: var(--gw-green); color: #fff !important; }
.gw-prong-pill:not(.is-selected):hover { background: #f4f2ec; }