:root {

	--mgk-navy:      var(--ink);
	--mgk-navy-md:   var(--ink);
	--mgk-navy-lt:   var(--ink-2);
	--mgk-navy-900:  var(--ink);
	--mgk-navy-800:  var(--ink);
	--mgk-navy-700:  var(--ink);
	--mgk-teal:      var(--accent);
	--mgk-teal-lt:   var(--accent-2);
	--mgk-teal-bg:   color-mix(in srgb, var(--accent) 10%, var(--surface));
	--mgk-blue:      var(--accent);
	--mgk-cta-blue:  var(--accent);
	--mgk-wish-add:  var(--accent);
	--mgk-accent:    var(--accent-2);

	--mgk-badge-promo-bg: var(--accent);
	--mgk-badge-promo-fg: var(--on-accent);

	--mgk-bg:        var(--bg);
	--mgk-bg-alt:    var(--raise);
	--mgk-surface:   var(--surface);
	--mgk-ph-bg:     var(--raise);
	--mgk-border:    var(--line);
	--mgk-border-lt: var(--line);
	--mgk-text:      var(--ink);
	--mgk-text-dark: var(--ink);
	--mgk-text-2:    var(--ink-2);
	--mgk-text-3:    color-mix(in srgb, var(--ink-2) 70%, var(--surface));
	--mgk-neutral:   var(--ink-2);

	--mgk-shadow:    0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
	--mgk-shadow-lg: 0 10px 30px color-mix(in srgb, var(--ink) 16%, transparent);

	--mgk-line:      var(--line);
	--mgk-bg-2:      var(--raise);
}

@media (max-width: 640px) {
	:root {
		--fm-blue:    var(--accent);
		--fm-blue-dk: color-mix(in srgb, var(--accent) 70%, var(--ink));
		--fm-blue-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
		--fm-blue-bd: color-mix(in srgb, var(--accent) 18%, var(--surface));
		--fm-ink:     var(--ink);
		--fm-ink-2:   var(--ink);
		--fm-ink-3:   var(--ink-2);
		--fm-muted:   var(--ink-2);
		--fm-line:    var(--line);
		--fm-red:     var(--accent);
	}
}

body,
.mgk-fm,
.mgk-fm__site {
	font-family: Arial, Helvetica, system-ui, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

button, input, select, textarea {
	font-family: inherit;
}

.elementor-widget-mgk_cart,
.elementor-widget-mgk_checkout,
.elementor-widget-mgk_order_success,
.elementor-widget-mgk_order_tracking,
.elementor-widget-mgk_seasonal_campaign_page,
.elementor-widget-mgk_write_review,

.elementor-widget-mgk_invoice_popup {
	font-family: var(--mgk-font);
}

.elementor-widget-mgk_cart,
.elementor-widget-mgk_checkout,
.elementor-widget-mgk_order_success,
.elementor-widget-mgk_order_tracking,
.elementor-widget-mgk_write_review,
body:has(.elementor-widget-mgk_order_tracking) .elementor-widget-mgk_invoice_popup {
	--mgk-font: Arial, Helvetica, sans-serif;
}

.elementor-widget-mgk_cart,
.elementor-widget-mgk_cart *,
.elementor-widget-mgk_checkout,
.elementor-widget-mgk_checkout *,
.elementor-widget-mgk_order_success,
.elementor-widget-mgk_order_success *,
.elementor-widget-mgk_order_tracking,
.elementor-widget-mgk_order_tracking *,
.elementor-widget-mgk_write_review,
.elementor-widget-mgk_write_review *,
body:has(.elementor-widget-mgk_order_tracking) .elementor-widget-mgk_invoice_popup,
body:has(.elementor-widget-mgk_order_tracking) .elementor-widget-mgk_invoice_popup * {
	font-family: Arial, Helvetica, sans-serif !important;
}

.elementor-widget-mgk_checkout .mgk-checkout__holdtimer-clock {
	font-variant-numeric: tabular-nums;
}

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

.mgk-prod:hover {
	border-color: var(--ink);
}

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

.mgk-prod__name {
	color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

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

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

.mgk-prod__options {
	color: color-mix(in srgb, var(--ink) 75%, transparent);
	background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

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

.mgk-prod .mgk-prod__add-wide:hover {
	background-color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

@media (max-width: 640px) {
	.mgk-products .mgk-prod__was,
	.cr-grid .mgk-prod__was,
	.mgk-fbt .mgk-prod__was,
	.mgk-seasoncamp .mgk-prod__was,
	.mgk-freshpicks .mgk-prod__was {
		color: var(--ink-2) !important;
	}

	.mgk-products .mgk-prod__add,
	.mgk-products .mgk-prod__add-wide,
	.cr-grid .mgk-prod__add,
	.cr-grid .mgk-prod__add-wide,
	.mgk-fbt .mgk-prod__add,
	.mgk-fbt .mgk-prod__add-wide,
	.mgk-seasoncamp .mgk-prod__add-wide,
	.mgk-freshpicks .mgk-prod__add,
	.mgk-freshpicks .mgk-prod__add-wide {
		background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
		border-color: var(--line) !important;
	}

	.mgk-products .mgk-prod__add:hover,
	.mgk-products .mgk-prod__add-wide:hover,
	.cr-grid .mgk-prod__add:hover,
	.cr-grid .mgk-prod__add-wide:hover,
	.mgk-fbt .mgk-prod__add:hover,
	.mgk-fbt .mgk-prod__add-wide:hover,
	.mgk-seasoncamp .mgk-prod__add-wide:hover,
	.mgk-freshpicks .mgk-prod__add:hover,
	.mgk-freshpicks .mgk-prod__add-wide:hover {
		background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
	}
}

.mgk-fab {
	box-shadow: color-mix(in srgb, var(--ink) 15%, transparent) 0px 4px 12px;
}

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

.mgk-fab--btt:hover {
	background-color: var(--bg);
}

.mgk-fab--contact {
	color: color-mix(in srgb, var(--accent) 70%, var(--ink));
	background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
	border-color: var(--line);
}

.mgk-fab--contact svg {
	color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

.mgk-fab--contact:hover {
	background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
}