/*
 * Masterfish storefront — WP header integration (řez 8d). SITE-WIDE.
 *
 * After the Woo cutover the storefront cart + account are OUR widgets (mf-cart-widget / mf-account-widget),
 * injected by MF_SF_Header into Salient's desktop header icon area AND the mobile/off-canvas menu.
 *
 * SAFETY (super-safe): pure runtime stylesheet enqueued by the plugin → deactivating the plugin removes
 * it and Salient's native icons (incl. its account icon) return. No theme files / DB settings touched.
 */

/* 1) Suppress Salient's NATIVE account icon (→ old WP/Woo /muj-ucet/). Our account widget replaces it.
 *    Desktop (#nectar-user-account) + the mobile top-bar icon (.mobile-user-account). Search + the
 *    hamburger/off-canvas toggle are left intact. */
#nectar-user-account,
.mobile-user-account {
	display: none !important;
}

/* 2) DESKTOP icon area: our widget <li>s sit inline next to search/hamburger in `.buttons.sf-menu`. */
.buttons.sf-menu li.mf-sf-header-item {
	display: inline-flex !important;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0 6px;
}
li.mf-sf-header-item > mf-account-widget,
li.mf-sf-header-item > mf-cart-widget {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
/* Fallback link (shown only before the Stencil component upgrades) — keep it inline + unobtrusive. */
li.mf-sf-header-item .mf-sf-fallback {
	text-decoration: none;
}

/* 3) MOBILE / off-canvas (dark background): our widgets must be WHITE + readable. The widgets are
 *    Shadow DOM but read the --mf-* custom properties, which pierce the boundary — so re-map the colour
 *    tokens on the off-canvas wrapper. Only affects the --ocm context (mobile/off-canvas). */
li.mf-sf-header-item--ocm {
	--mf-color-text: #ffffff;
	--mf-color-ink-2: rgba(255, 255, 255, 0.85);
	--mf-color-text-muted: rgba(255, 255, 255, 0.7);
	--mf-color-line: rgba(255, 255, 255, 0.25);
	--mf-color-line-2: rgba(255, 255, 255, 0.4);
	--mf-color-surface: transparent;
	--mf-color-surface-alt: rgba(255, 255, 255, 0.08);
}
li.mf-sf-header-item--ocm .mf-sf-fallback {
	color: #ffffff;
}