/*
 * GA Foundation overlay stack. The classes come from assets/js/overlay-stack.js;
 * why, and the production numbers: includes/class-overlay-stack.php.
 */

/*
 * Every hide below is visibility + pointer-events, never display: none. Klaviyo removes its
 * pop-up's full-window overlay only when the teaser's entrance animation ends, and an element
 * that is not displayed never animates: with display: none the overlay stayed on the page at
 * opacity 0, z-index 90000, and swallowed every tap (real-vendor test, 2026-10-30).
 * Each hide also lists the descendants and their ::before/::after: Klaviyo's reset class
 * (.kl-private-reset-css-*) re-declares visibility and pointer-events on every element it
 * draws, so hiding the teaser's box alone left its text catching taps.
 */

/* 1. A consent banner or its settings dialog shows: it is the only layer at the bottom. */
html.ga-ovl-consent [class*="kl-teaser-"],
html.ga-ovl-consent [class*="kl-teaser-"] *,
html.ga-ovl-consent [class*="kl-teaser-"] *::before,
html.ga-ovl-consent [class*="kl-teaser-"] *::after,
html.ga-ovl-consent:not(.hs-messages-widget-open) #hubspot-messages-iframe-container,
html.ga-ovl-consent:not(.hs-messages-widget-open) #hubspot-messages-iframe-container * {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* 4. The chat launcher sits above the layer docked under it. HubSpot's open conversation is left where HubSpot puts it. */
html.ga-ovl-lift:not(.hs-messages-widget-open) #hubspot-messages-iframe-container {
	bottom: var(--ga-ovl-chat-lift, 0px) !important;
}

@media (max-width: 767px) {

	/* 2. A GA sticky add-to-cart bar shows: it carries the offer, so the teaser stays off it. */
	html.ga-ovl-sticky [class*="kl-teaser-"],
	html.ga-ovl-sticky [class*="kl-teaser-"] *,
	html.ga-ovl-sticky [class*="kl-teaser-"] *::before,
	html.ga-ovl-sticky [class*="kl-teaser-"] *::after {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* 3. Phones get the chat launcher on the contact page only (Erik, 2026-10-30). A conversation that is
	   open, or was opened earlier in this tab (ga-ovl-chat-on), keeps it on every page so replies are seen. */
	html:not(.ga-ovl-chat-on):not(.hs-messages-widget-open) body:not(.ga-ovl-chat-page) #hubspot-messages-iframe-container,
	html:not(.ga-ovl-chat-on):not(.hs-messages-widget-open) body:not(.ga-ovl-chat-page) #hubspot-messages-iframe-container * {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* Klaviyo docks the teaser's 20 px close X 8 px past the right edge of its full-width bar.
	   Bring it inside the bar and give it a 44 px target. */
	[class*="kl-teaser-"] .klaviyo-close-form {
		top: 10px !important;
		right: 10px !important;
	}

	[class*="kl-teaser-"] .klaviyo-close-form::after {
		content: "";
		position: absolute;
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
	}

	/* CookieLawInfo on a phone: was 216 px, a third of a 664 px window. Same copy and choices, tighter box:
	   12 px padding (was 25), 13 px copy (was 14.7), and no stray <br> after the bar (23 px). */
	#cookie-law-info-bar {
		padding: 12px 16px !important;
	}

	#cookie-law-info-bar > span > br {
		display: none;
	}

	#cookie-law-info-bar .cli-bar-message {
		font-size: 13px;
		line-height: 17px;
	}

	#cookie-law-info-bar .cli-bar-btn_container {
		margin-top: 4px;
		padding-right: 0;
	}

	/* 44 px targets for both answers (ACCEPT was 71 x 31, Cookie Settings 110 x 24). */
	#cookie-law-info-bar .cli_settings_button,
	#cookie-law-info-bar .cli-plugin-main-button {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		vertical-align: middle;
	}

	/* The opt-out label prints #e0e0e0 on white (1.3:1) and Cookie Settings #afafaf (2.1:1): both read as disabled. */
	#cookie-law-info-bar .cli_settings_button {
		color: #555555 !important;
	}

	#cookie-law-info-bar .wt-cli-ccpa-element label {
		color: #555555 !important;
		display: inline-block;
		padding: 6px 0;
	}
}

/* CookieLawInfo on a phone 360 px or wider: the opt-out shares one 44 px row with both answers (left: opt-out;
   right: Cookie Settings, ACCEPT). 150 px stacked -> 108 px, 16% of a 664 px window (Erik, 2026-10-31: "still huge").
   Same copy, same three controls, each 44 px tall. Narrower phones keep the stacked layout above. */
@media (min-width: 360px) and (max-width: 767px) {

	#cookie-law-info-bar {
		padding: 8px 12px !important;
	}

	#cookie-law-info-bar .cli-bar-container {
		position: relative;
		display: block !important;
	}

	#cookie-law-info-bar .cli-bar-message {
		margin: 0 !important;
	}

	#cookie-law-info-bar .wt-cli-ccpa-element {
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
	}

	#cookie-law-info-bar .wt-cli-ccpa-element label {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
		padding: 0 !important;
	}

	#cookie-law-info-bar .cli-bar-btn_container {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
	}

	#cookie-law-info-bar .cli_settings_button {
		margin: 0 2px 0 0 !important;
		padding: 0 4px !important;
	}
}