/* Privacy on the shop (mu-plugins/arendal-consent-gate.php, consent.js). Matches the main site's components.css. */

/* ---- Chat launcher ----
   Stands in for Zendesk's own launcher until the chat is loaded: same size, place, colour, shadow and icon, so the
   swap is invisible. A click loads Zendesk and opens the chat (consent.js); once Zendesk is ready (html.chat-ready)
   its own launcher fades in and this one fades out. Without JavaScript it links to the contact page. */
.chat-launcher{
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: #2f4342;
	color: #ffffff;
	box-shadow: rgba(36, 36, 36, 0.15) 0 20px 30px 0;
	transition: opacity 0.2s ease-in 0.7s, visibility 0s linear 0.9s;
}
.chat-launcher svg{ width: 36px; height: 36px; fill: currentColor; }
.chat-launcher:hover,
.chat-launcher:focus{ color: #ffffff; }
.chat-launcher:focus-visible{ outline: 2px solid #c9a86a; outline-offset: 2px; }
/* loading: the icon breathes until Zendesk answers */
html.chat-loading .chat-launcher svg{ animation: chat-launcher-wait 1s ease-in-out infinite alternate; }
@keyframes chat-launcher-wait{ from{ opacity: 1; } to{ opacity: 0.35; } }
html.chat-ready .chat-launcher{ opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ html.chat-loading .chat-launcher svg{ animation: none; opacity: 0.6; } }
@media print{ .chat-launcher{ display: none; } }

/* Zendesk chat open (html.chat-open): the header (z-index 10000000 / 1000000) drops below the chat window (999999),
   so on phones the chat's own top bar and close button stay visible. */
html.chat-open #navigation_mobile,
html.chat-open #navigation_desktop{
	z-index: 999990;
}

/* ---- Shown in place of a Klaviyo form until marketing cookies are allowed ---- */
.consent-note{
	max-width: 500px;
	margin: 1em auto;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
	opacity: 0.8;
}
.consent-note button{
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.consent-note button:hover,
.consent-note button:focus-visible{
	color: #c9a86a;
}