/**
 * WhatsApp enquiry button (single product page).
 *
 * Deliberately quiet: a bordered button in WhatsApp's own green rather than a
 * filled block, so it reads as a second option next to "Add to cart" instead
 * of competing with it.
 */
.sqp-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 14px 0 0;
	padding: 12px 20px;
	border: 1.5px solid #25d366;
	border-radius: 10px;
	background: #fff;
	/* Darker than WhatsApp's own green so the resting text clears the 4.5
	   readability threshold on white. */
	color: #0b6b38;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.sqp-wa:hover,
.sqp-wa:focus {
	/* WhatsApp's own #25d366 is too light to carry white text — this is the
	   same green taken down until the label stays readable. */
	background: #0f7a3f;
	border-color: #0f7a3f;
	color: #fff;
	text-decoration: none;
	transform: translateY( -1px );
}

.sqp-wa:active { transform: translateY( 0 ); }
.sqp-wa:focus-visible { outline: 2px solid #0b6b38; outline-offset: 2px; }

.sqp-wa-ico { flex: 0 0 auto; display: block; }
.sqp-wa-txt { display: block; }

@media ( max-width: 600px ) {
	.sqp-wa { width: 100%; padding: 13px 16px; font-size: 14px; }
}

/* Never on a printed invoice or product sheet. */
@media print {
	.sqp-wa { display: none !important; }
}

/* ============================================================
   The floating button: every page of the shop, one corner.
   ============================================================ */
.sqp-wa-float {
	position: fixed;
	bottom: calc( 20px + env( safe-area-inset-bottom ) );
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* A shade down from WhatsApp's own #25d366: the white glyph only reaches
	   1.98 against that, and an icon needs 3. This still reads as WhatsApp. */
	background: #18a04d;
	color: #fff;
	box-shadow: 0 6px 20px rgba( 15, 122, 63, .38 );
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

/* The corner is a setting, and it follows the page's own direction. */
.sqp-wa-float.is-left { left: 20px; right: auto; }
.sqp-wa-float.is-right { right: 20px; left: auto; }

.sqp-wa-float:hover,
.sqp-wa-float:focus {
	background: #0f7a3f;
	color: #fff;
	text-decoration: none;
	transform: scale( 1.06 );
	box-shadow: 0 10px 26px rgba( 15, 122, 63, .45 );
}
.sqp-wa-float:active { transform: scale( .98 ); }
.sqp-wa-float:focus-visible { outline: 3px solid #0b6b38; outline-offset: 3px; }
.sqp-wa-float svg { display: block; }

@media ( max-width: 600px ) {
	.sqp-wa-float { width: 52px; height: 52px; bottom: calc( 16px + env( safe-area-inset-bottom ) ); }
	.sqp-wa-float.is-left { left: 16px; }
	.sqp-wa-float.is-right { right: 16px; }
}

/* Someone who asked for less movement gets none. */
@media ( prefers-reduced-motion: reduce ) {
	.sqp-wa-float { transition: none; }
	.sqp-wa-float:hover,
	.sqp-wa-float:focus,
	.sqp-wa-float:active { transform: none; }
}

@media print {
	.sqp-wa-float { display: none !important; }
}