/*
 * 420Express Site UI v0.1.1
 * Runtime-approved UI integration for WoodMart.
 */

/* ---------------------------------------------------------
 * Floating launchers
 *
 * Each source plugin keeps its own native bottom positioning.
 * The cookie collision offset lives on :root so Customer
 * Support's runtime inline-style rewrite cannot erase it.
 * --------------------------------------------------------- */
html body button[id="420exp-support-launcher"].exp420-support-launcher {
	transform: translateY(var(--exp420-support-cookie-shift, 0px)) !important;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

html body button[id="420exp-support-launcher"].exp420-support-launcher:hover,
html body button[id="420exp-support-launcher"].exp420-support-launcher:focus-visible {
	transform: translateY(calc(var(--exp420-support-cookie-shift, 0px) - 1px)) !important;
}

html body .scrollToTop.exp420-avoid-support {
	right: var(--exp420-scrolltop-right, 20px) !important;
	transition:
		right .2s ease,
		opacity .25s ease,
		transform .25s ease !important;
}

html body button[id="420exp-rewards-launcher"].exp420-rewards-launcher {
	transform: translateY(var(--exp420-rewards-cookie-shift, 0px)) !important;
}

html body button[id="420exp-rewards-launcher"].exp420-rewards-launcher:hover,
html body button[id="420exp-rewards-launcher"].exp420-rewards-launcher:focus-visible {
	transform: translateY(calc(var(--exp420-rewards-cookie-shift, 0px) - 1px)) !important;
}

/* ---------------------------------------------------------
 * Sticky desktop logo reveal
 *
 * JS moves the REAL WoodMart sticky-row logo into the nav.
 * The original left-column width is preserved, so the menu
 * geometry stays unchanged. The logo itself is absolute and
 * therefore consumes zero menu-flow width.
 * --------------------------------------------------------- */
@media (min-width: 1025px) {
	.whb-header-bottom.whb-sticky-row .wd-header-main-nav {
		position: relative !important;
		display: block !important;
	}

	.whb-header-bottom.whb-sticky-row .wd-header-main-nav > ul.wd-nav-main {
		flex: initial !important;
	}

	.whb-header-bottom.whb-sticky-row .exp420-nav-reveal-logo {
		position: absolute !important;
		left: var(--exp420-sticky-logo-left, 0px) !important;
		top: 50% !important;

		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		box-sizing: border-box !important;

		flex: none !important;

		width: 54px !important;
		min-width: 54px !important;
		max-width: 54px !important;
		height: 52px !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;
		opacity: 0 !important;
		clip-path: inset(0 0 0 100%) !important;
		pointer-events: none !important;

		transform: translateY(-50%) !important;

		transition:
			clip-path .30s cubic-bezier(.22,.61,.36,1),
			opacity .16s ease !important;
	}

	/*
	 * The source PNG contains substantial transparent padding.
	 * Render it at the DevTools-approved 118px canvas size and
	 * crop it through the fixed 54px reveal slot.
	 */
	.whb-header-bottom.whb-sticky-row .exp420-nav-reveal-logo > .wd-logo {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;

		display: block !important;

		width: 118px !important;
		min-width: 118px !important;
		max-width: 118px !important;
		height: auto !important;

		margin: 0 !important;
		padding: 0 !important;

		transform: translate(-50%, -50%) !important;
	}

	.whb-header-bottom.whb-sticky-row .exp420-nav-reveal-logo img {
		display: block !important;

		width: 118px !important;
		min-width: 118px !important;
		max-width: 118px !important;
		height: auto !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: initial !important;
	}

	/*
	 * Reveal in place. Width never animates, so Home/Catalog/...
	 * do not move when the logo appears.
	 */
	.whb-header.whb-sticked
	.whb-header-bottom.whb-sticky-row
	.exp420-nav-reveal-logo.exp420-logo-positioned {
		opacity: 1 !important;
		clip-path: inset(0 0 0 0) !important;
		pointer-events: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body button[id="420exp-support-launcher"].exp420-support-launcher,
	html body button[id="420exp-rewards-launcher"].exp420-rewards-launcher,
	.whb-header-bottom.whb-sticky-row .exp420-nav-reveal-logo {
		transition: none !important;
	}
}


/* v0.1.6 — mini-cart interaction layer.
 *
 * On narrow viewports WoodMart's cart drawer can occupy the entire right side
 * of the screen. The Support launcher is temporarily suppressed while the
 * drawer is open so it cannot cover cart controls or checkout CTA.
 */
html.exp420-cart-drawer-open
button[id="420exp-support-launcher"].exp420-support-launcher {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}


/* v0.1.8 — mobile Support lives in the WoodMart sticky header.
 *
 * The original Support launcher stays available on desktop. On phones,
 * WoodMart's sticky header owns the Support entry point, so the fixed launcher
 * is removed from layout entirely.
 */
@media (max-width: 767px) {
	html body button[id="420exp-support-launcher"].exp420-support-launcher {
		display: none !important;
	}
}