/* =================================================================
   File:    19-utilities.css
   Purpose: Single-purpose utility classes. Use sparingly — prefer
            adding the rule to a component file. These are escape hatches.
   ================================================================= */

/* Text alignment */
.text-start  { text-align: start; }
.text-end    { text-align: end; }
.text-center { text-align: center; }

/* Display */
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-none    { display: none; }

/* Flex helpers */
.flex-1            { flex: 1 1 auto; }
.flex-wrap         { flex-wrap: wrap; }
.items-center      { align-items: center; }
.items-start       { align-items: flex-start; }
.items-end         { align-items: flex-end; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.justify-end       { justify-content: flex-end; }

/* Margin (logical) */
.m-0  { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Padding */
.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* Borders / radii */
.rounded     { border-radius: var(--radius); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

/* Responsive show/hide */
@media (max-width: 768px) {
	.hidden-mobile  { display: none !important; }
}
@media (min-width: 769px) {
	.hidden-desktop { display: none !important; }
}

/* Aspect-ratios — products are 1:1 */
.aspect-1 { aspect-ratio: 1 / 1; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }

/* Object-fit */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* No-select */
.no-select { user-select: none; }

/* =================================================================
   Floating WhatsApp button — fixed to the bottom corner, site-wide.
   Rendered by template-parts/whatsapp-float.php.
   ================================================================= */
.liqui-wa-float {
	position: fixed;
	inset-block-end: 22px;
	inset-inline-end: 22px;
	z-index: var(--z-sticky);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.65),
	            0 4px 10px -4px rgba(0, 0, 0, 0.25);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.liqui-wa-float:hover {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 16px 34px -8px rgba(37, 211, 102, 0.75),
	            0 5px 12px -4px rgba(0, 0, 0, 0.3);
}
.liqui-wa-float:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}
.liqui-wa-float svg {
	width: 32px;
	height: 32px;
	position: relative;
	z-index: 1;
}
/* Soft expanding ring — a gentle "I'm here" pulse. */
.liqui-wa-float__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25D366;
	animation: liqui-wa-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes liqui-wa-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.liqui-wa-float__ring { animation: none; display: none; }
}
@media (max-width: 600px) {
	.liqui-wa-float {
		width: 52px;
		height: 52px;
		inset-block-end: 16px;
		inset-inline-end: 16px;
	}
	.liqui-wa-float svg { width: 28px; height: 28px; }
}