/* =========================================================================
   THE FLOATING CONTACT DOCK  —  WhatsApp over Call, every page
   -------------------------------------------------------------------------
   Moved here out of `product-page.css` when the single call disc became a
   two-channel dock that rides on the home page too: this file is ~2KB and
   loads everywhere, while the 120KB product stylesheet stays on product
   surfaces where it belongs.

   The discs mirror the side cart's bubble on purpose — same 60px disc, same
   white ground, same 30px glyph — so the controls in that corner band read as
   one set rather than three unrelated badges.
   ====================================================================== */

.tjl-pp-dock {
	--pp-purple: #8441C0;
	--pp-deep: #3A1259;

	position: fixed;
	left: 22px;
	bottom: 26px;
	z-index: 998;

	/* Left, because the side cart owns the right corner on every shopping
	   page and the mobile menu capsule owns the centre. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.tjl-pp-dock .tjl-pp-fab {
	display: inline-flex;
	align-items: center;
	gap: 0;
	max-width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 3px 14px -2px rgba( 58, 18, 89, 0.22 );
	text-decoration: none;
	overflow: hidden;
	transition: max-width 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.2s ease;
}

.tjl-pp-dock .tjl-pp-fab__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
}

.tjl-pp-dock .tjl-pp-ico {
	width: 30px;
	height: 30px;
}

.tjl-pp-dock .tjl-pp-call .tjl-pp-ico path { fill: var(--pp-purple); }

.tjl-pp-dock .tjl-pp-fab__txt {
	flex: none;
	padding-right: 24px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--pp-deep);
}

/* ⚠️ The label only unfurls where a pointer can actually hover. A tap leaves
   `:hover` LATCHED on a touchscreen, so without this guard the first tap near
   the dock would leave one disc stuck open — and on a phone an open label is
   a third of the screen width. Same rule, same reason, as the shop filter
   tiles. */
@media ( hover: hover ) and ( pointer: fine ) {
	.tjl-pp-dock .tjl-pp-fab:hover {
		max-width: 262px;
		box-shadow: 0 6px 20px -4px rgba( 58, 18, 89, 0.32 );
	}
}

.tjl-pp-dock .tjl-pp-fab:focus-visible {
	max-width: 262px;
	outline: 2px solid var(--pp-purple);
	outline-offset: 3px;
}

/* The WhatsApp disc keeps the mark's own green; the ring is the only part
   that is ours, and it is what ties it to the purple disc below it. */
.tjl-pp-dock .tjl-pp-wa .tjl-pp-fab__txt { color: #0F6B3F; }

/* -------------------------------------------------------------------------
   Phones — discs only. The accessible name carries the meaning.
   ---------------------------------------------------------------------- */
@media ( max-width: 767px ) {
	.tjl-pp-dock {
		left: 14px;
		bottom: 16px;
		gap: 10px;
	}

	.tjl-pp-dock .tjl-pp-fab,
	.tjl-pp-dock .tjl-pp-fab:focus-visible {
		max-width: 60px;
	}

	.tjl-pp-dock .tjl-pp-fab__txt { display: none; }
}

/* -------------------------------------------------------------------------
   The dock retires at the foot of the document.

   `body.tjl-pp-at-foot` is set by an IntersectionObserver on the footer (see
   `contact-dock.js`). Both bubbles are `position: fixed`, so at full scroll
   they cover the last stretch of the page whatever is in it — which is how
   the call disc came to sit on the payment marks and the copyright.
   Reserving a gutter for them costs page height on every screen; getting out
   of the way when there is nothing left to scroll costs none.

   The side cart's own bubble is covered here too: it shares the corner band,
   and retiring only ours would move the collision rather than end it.
   ---------------------------------------------------------------------- */
.tjl-pp-dock,
.xoo-wsc-basket {
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

body.tjl-pp-at-foot .tjl-pp-dock,
body.tjl-pp-at-foot .xoo-wsc-basket {
	opacity: 0;
	visibility: hidden;
	transform: translateY( 10px );
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.tjl-pp-dock,
	.tjl-pp-dock .tjl-pp-fab,
	.xoo-wsc-basket { transition: none; }
}

/* Print: a fixed contact bubble on paper is just ink. */
@media print {
	.tjl-pp-dock { display: none; }
}