.mgk-btn--teal {
	color: var(--on-accent);
}

.mgk-pill__view {
	color: var(--on-accent);
	background-color: var(--accent);
}

.mgk-freshpicks__arrow {
	background-color: var(--bg);
}

.mgk-chev::before {
	border-top-color: var(--ink-2);
	border-right-color: var(--ink-2);
}

.mgk-cartrow__controls .mgk-qty {
	background-color: var(--bg);
}

.mgk-cart__back {
	color: var(--accent);
}

.mgk-cartrow__discount {
	color: var(--accent);
}

.mgk-cartrow__optbtn {
	border-color: var(--line);
}

.mgk-cartrow__optbtn-text {
	color: var(--ink);
}

.mgk-cartrow__optpanel {
	background-color: var(--surface);
	border-color: var(--line);
}

.mgk-cartrow__optlabel {
	color: var(--ink);
}

.mgk-cartrow__optchoice {
	color: var(--ink);
	border-color: var(--line);
}

.mgk-cartrow__optchoice:hover {
	border-color: var(--accent);
}

.mgk-cartrow__optpanel .mgk-pill__clear {
	color: var(--accent);
	border-color: var(--accent);
}

.mgk-cartrow__optpanel .mgk-pill__view {
	color: var(--on-accent);
	background-color: var(--accent);
}

.mgk-cart__aside > .mgk-card:first-child {
	box-shadow: color-mix(in srgb, var(--ink) 6%, transparent) 0px 2px 12px;
}

.mgk-cart__checkout {
	background-color: var(--accent);
}

.mgk-cart__checkout:hover {
	background-color: color-mix(in srgb, var(--accent) 82%, var(--ink));
}

.mgk-pdpamodal__backdrop {
	background-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.mgk-pdpamodal__cat-chip {
	color: var(--on-accent);
}

.mgk-pdpamodal__knob {
	background-color: var(--surface);
	box-shadow: color-mix(in srgb, var(--ink) 20%, transparent) 0px 1px 3px;
}

.mgk-chip--blue {
	color: var(--on-accent);
}

.mgk-termsheet__backdrop {
	background-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

@media (max-width: 640px) {
	.mgk-fbt .mgk-prod {
		background-color: var(--surface);
	}

	body:has(.mgk-cart) {
		background-color: var(--bg);
	}

	.mgk-cart__tab-buttons {
		background-color: var(--raise);
	}

	.mgk-cart__tab.is-active {
		background-color: var(--surface);
		box-shadow: color-mix(in srgb, var(--ink) 6%, transparent) 0px 2px 6px;
	}

	.mgk-cartrow {
		border-bottom-color: var(--line);
	}

	.mgk-cartrow .mgk-qty {
		background-color: var(--bg);
	}

	.mgk-cartrow .mgk-qty__btn:active {
		background-color: color-mix(in srgb, var(--accent) 8%, transparent);
	}

	.mgk-cartrow__remove {
		color: var(--ink-2);
	}

	.mgk-cart__checkout {
		color: var(--on-accent);
	}

	.mgk-cart__dock {
		background-color: var(--surface);
		box-shadow: color-mix(in srgb, var(--ink) 6%, transparent) 0px -2px 10px;
	}

	.mgk-cart__empty-text {
		color: var(--ink-2);
	}

	.mgk-pdpamodal__backdrop {
		background-color: color-mix(in srgb, var(--ink) 45%, transparent);
	}

	.mgk-pdpamodal__x:hover {
		background-color: var(--raise);
	}

	.mgk-pdpamodal__cat {
		background-color: var(--surface);
	}

	.mgk-pdpamodal__cat.is-locked {
		background-color: var(--surface);
	}

	.mgk-pdpamodal__cat-chip {
		color: var(--on-accent);
	}

	.mgk-pdpamodal__toggle {
		background-color: var(--raise);
	}

	.mgk-pdpamodal__toggle.is-on {
		background-color: var(--accent);
	}

	.mgk-pdpamodal__knob {
		box-shadow: color-mix(in srgb, var(--ink) 25%, transparent) 0px 1px 3px;
	}

	.mgk-pdpamodal__audit {
		color: var(--ink-2);
	}

	.mgk-termsheet__backdrop {
		background-color: color-mix(in srgb, var(--ink) 45%, transparent);
	}

	.mgk-termsheet__x:hover {
		background-color: var(--raise);
	}

	.mgk-voucher-accordion {
		background-color: var(--surface);
	}
}