/* ==========================================================================
   Engagement: WhatsApp support (bottom-right) and recent-activity toasts (bottom-left).
   Uses the theme's tokens when present, with the brand palette as fallback.
   Both widgets rise above the footer bar and any fixed bottom bar (--sbd-eg-lift, set by
   engagement.js) and never sit on top of each other.
   ========================================================================== */

.sbd-wa,
.sbd-proof {
	--eg-navy: var(--navy, #0B1F4B);
	--eg-navy-2: var(--navy-2, #10285E);
	--eg-royal: var(--royal, #2546A8);
	--eg-blue: var(--blue, #1F5FBF);
	--eg-sky: var(--sky, #CFE3F7);
	--eg-sky-2: var(--sky-2, #7FB2E5);
	--eg-sky-3: var(--sky-3, #E8F1FB);
	--eg-yellow: var(--yellow, #F5C518);
	--eg-muted: #4A5875;
	--eg-green: #25D366;
	--eg-sans: var(--f-sans, "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
	--eg-mono: var(--f-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
	--eg-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
	--eg-edge: 24px;
	--eg-btn: 60px;
	--eg-gap: 14px;
	position: fixed;
	bottom: calc(var(--eg-edge) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	font-family: var(--eg-sans);
	-webkit-font-smoothing: antialiased;
	transform: translate3d(0, calc(var(--sbd-eg-lift, 0px) * -1), 0);
	transition: opacity .35s ease, visibility 0s linear 0s;
}
.sbd-wa *, .sbd-proof * { box-sizing: border-box; }
.sbd-wa.is-compact, .sbd-proof.is-compact { --eg-btn: 46px; }

/* Hidden while the mobile menu or the page-transition curtain is up. */
html.nav-open .sbd-wa, html.nav-open .sbd-proof,
html.sbd-intro .sbd-wa, html.sbd-intro .sbd-proof { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }

/* Yield: a call to action (hero buttons, Add to cart, Place order) is passing underneath. */
.sbd-wa.is-yield, .sbd-proof.is-yield { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.sbd-wa.is-yield .sbd-wa__link { transform: translateY(10px) scale(.92); }
.sbd-wa__link { transition: transform .5s var(--eg-ease); }

/* --------------------------------------------------------------------------
   WhatsApp float
   ----------------------------------------------------------------------- */
.sbd-wa { right: calc(var(--eg-edge) + env(safe-area-inset-right, 0px)); z-index: 58; pointer-events: none; }
.sbd-wa__link { position: relative; display: block; width: var(--eg-btn); height: var(--eg-btn); color: #fff; text-decoration: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.sbd-wa__link:focus { outline: none; }

.sbd-wa__btn {
	position: relative; display: grid; place-items: center; width: 100%; height: 100%;
	background: var(--eg-navy); color: var(--eg-yellow);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 18px 40px -16px rgba(11, 31, 75, .65), 0 2px 6px rgba(11, 31, 75, .18);
	isolation: isolate; transition: color .35s var(--eg-ease), transform .5s var(--eg-ease);
}
.sbd-wa__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--eg-yellow); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--eg-ease); }
.sbd-wa__glyph { width: 46%; height: 46%; transition: transform .5s var(--eg-ease); }
.sbd-wa__dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: var(--eg-green); border: 2px solid #fff; }
.sbd-wa__pulse { position: absolute; inset: -1px; z-index: -2; border: 1px solid var(--eg-yellow); opacity: 0; pointer-events: none; animation: sbdWaPulse 5.2s var(--eg-ease) 2.5s infinite; }
.sbd-wa__pulse--2 { animation-delay: 2.85s; border-color: var(--eg-sky-2); }
@keyframes sbdWaPulse {
	0% { opacity: .85; transform: scale(1); }
	34% { opacity: 0; transform: scale(1.65); }
	100% { opacity: 0; transform: scale(1.65); }
}

.sbd-wa.is-open .sbd-wa__btn, .sbd-wa.is-peek .sbd-wa__btn { color: var(--eg-navy); }
.sbd-wa.is-open .sbd-wa__btn::before, .sbd-wa.is-peek .sbd-wa__btn::before { transform: scaleY(1); }
.sbd-wa.is-open .sbd-wa__glyph { transform: rotate(-8deg) scale(1.06); }
.sbd-wa.is-open .sbd-wa__pulse, .sbd-wa.is-calm .sbd-wa__pulse, .sbd-wa.is-compact .sbd-wa__pulse { animation: none; opacity: 0; }

/* Over dark sections (footer, dark bands) the button turns yellow so it still stands out. */
.sbd-wa.is-on-dark .sbd-wa__btn { background: var(--eg-yellow); color: var(--eg-navy); border-color: var(--eg-yellow); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.sbd-wa.is-on-dark .sbd-wa__btn::before { background: #fff; }
.sbd-wa.is-on-dark .sbd-wa__dot { border-color: var(--eg-navy); }
.sbd-wa.is-on-dark .sbd-wa__pulse { border-color: rgba(255, 255, 255, .7); }
.sbd-wa.is-on-dark .sbd-wa__card { border-color: rgba(255, 255, 255, .26); }
.sbd-proof.is-on-dark .sbd-proof__card { border-color: rgba(255, 255, 255, .2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .7); }

/* Keyboard focus: a white + blue double ring reads on light pages and on the navy footer. */
.sbd-wa__link:focus-visible .sbd-wa__btn { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--eg-blue), 0 18px 40px -16px rgba(11, 31, 75, .65); }

/* The card slides out to the left of the button. */
.sbd-wa__card {
	position: absolute; right: calc(100% + 10px); bottom: 0;
	display: grid; gap: .45rem; width: 300px; max-width: calc(100vw - var(--eg-btn) - var(--eg-edge) * 2 - 10px);
	padding: 1.1rem 1.2rem 1rem;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 25% 100%,
		var(--eg-navy);
	color: #fff; border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 30px 60px -30px rgba(11, 31, 75, .8);
	text-align: left;
	opacity: 0; visibility: hidden; pointer-events: none;
	clip-path: inset(0 0 0 100%); transform: translateX(14px);
	transition: clip-path .6s var(--eg-ease), transform .6s var(--eg-ease), opacity .3s ease, visibility 0s linear .6s;
}
.sbd-wa__card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--eg-yellow); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--eg-ease) .1s; }
.sbd-wa.is-open .sbd-wa__card, .sbd-wa.is-peek .sbd-wa__card {
	opacity: 1; visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transform: none;
	transition: clip-path .7s var(--eg-ease), transform .7s var(--eg-ease), opacity .25s ease, visibility 0s;
}
.sbd-wa.is-open .sbd-wa__card::after, .sbd-wa.is-peek .sbd-wa__card::after { transform: scaleY(1); }
.sbd-wa__card > span { display: block; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .5s var(--eg-ease); }
.sbd-wa.is-open .sbd-wa__card > span, .sbd-wa.is-peek .sbd-wa__card > span { opacity: 1; transform: none; }
.sbd-wa.is-open .sbd-wa__card > span:nth-child(2), .sbd-wa.is-peek .sbd-wa__card > span:nth-child(2) { transition-delay: .06s; }
.sbd-wa.is-open .sbd-wa__card > span:nth-child(3), .sbd-wa.is-peek .sbd-wa__card > span:nth-child(3) { transition-delay: .12s; }
.sbd-wa.is-open .sbd-wa__card > span:nth-child(4), .sbd-wa.is-peek .sbd-wa__card > span:nth-child(4) { transition-delay: .18s; }
.sbd-wa.is-open .sbd-wa__card > span:nth-child(5), .sbd-wa.is-peek .sbd-wa__card > span:nth-child(5) { transition-delay: .24s; }

.sbd-wa__card > .sbd-wa__k { display: flex; align-items: center; gap: .55rem; margin: 0 0 .1rem; font: 500 .6rem/1.4 var(--eg-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--eg-sky-2); }
.sbd-wa__live { position: relative; display: block; width: 7px; height: 7px; background: var(--eg-green); }
.sbd-wa__live::after { content: ""; position: absolute; inset: 0; background: var(--eg-green); animation: sbdWaLive 2s ease-out infinite; }
@keyframes sbdWaLive { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.sbd-wa__t { font-size: 1.04rem; font-weight: 500; line-height: 1.22; letter-spacing: -.02em; }
.sbd-wa__n { font-size: 1.55rem; font-weight: 500; line-height: 1.1; letter-spacing: -.035em; color: var(--eg-yellow); font-variant-numeric: tabular-nums; }
.sbd-wa__h { color: #B9C7DE; font-size: .8rem; line-height: 1.45; }
.sbd-wa__card > .sbd-wa__go { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .14); font: 500 .64rem/1 var(--eg-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.sbd-wa__go svg { transition: transform .45s var(--eg-ease); }
.sbd-wa__link:hover .sbd-wa__go svg, .sbd-wa__link:focus-visible .sbd-wa__go svg { transform: translateX(4px); }

/* Peek (once per visit): a shorter card that introduces the button. */
.sbd-wa.is-peek:not(.is-open) .sbd-wa__card > .sbd-wa__h, .sbd-wa.is-peek:not(.is-open) .sbd-wa__card > .sbd-wa__go { display: none; }

/* Without the script: plain hover/focus. */
.sbd-wa:not([data-ready]) .sbd-wa__link:focus-visible .sbd-wa__card { opacity: 1; visibility: visible; clip-path: none; transform: none; }
.sbd-wa:not([data-ready]) .sbd-wa__link:focus-visible .sbd-wa__card > span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
	.sbd-wa:not([data-ready]) .sbd-wa__link:hover .sbd-wa__card { opacity: 1; visibility: visible; clip-path: none; transform: none; }
	.sbd-wa:not([data-ready]) .sbd-wa__link:hover .sbd-wa__card > span { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Recent-activity toast
   ----------------------------------------------------------------------- */
.sbd-proof {
	left: calc(var(--eg-edge) + env(safe-area-inset-left, 0px)); z-index: 57;
	width: min(380px, calc(100vw - var(--eg-edge) * 2 - var(--eg-btn) - var(--eg-gap)));
	pointer-events: none;
}
.sbd-proof.is-solo { width: min(380px, calc(100vw - var(--eg-edge) * 2)); }
.sbd-proof__card {
	position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 .9rem; align-items: center;
	padding: .7rem .6rem .8rem .7rem;
	background: #fff; color: var(--eg-navy);
	border: 1px solid rgba(11, 31, 75, .12);
	box-shadow: 0 26px 50px -30px rgba(11, 31, 75, .6), 0 3px 10px -4px rgba(11, 31, 75, .16);
	pointer-events: auto;
	opacity: 0; transform: translateY(22px); clip-path: inset(100% 0 0 0);
	transition: opacity .3s ease, transform .7s var(--eg-ease), clip-path .7s var(--eg-ease);
}
.sbd-proof.is-in .sbd-proof__card { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.sbd-proof.is-out .sbd-proof__card { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 0 0); transition: opacity .35s ease, transform .45s ease; }
.sbd-proof:not(.is-in):not(.is-out) .sbd-proof__card { visibility: hidden; }

.sbd-proof__thumb { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; background: var(--eg-sky-3); }
.sbd-proof__thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.18); transition: transform 1.1s var(--eg-ease); }
.sbd-proof.is-in .sbd-proof__thumb img { transform: scale(1); }
.sbd-proof__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(31, 95, 191, 0) 45%, rgba(11, 31, 75, .28)); pointer-events: none; }

.sbd-proof__body { min-width: 0; }
.sbd-proof__body > * { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .55s var(--eg-ease); }
.sbd-proof.is-in .sbd-proof__body > * { opacity: 1; transform: none; }
.sbd-proof.is-in .sbd-proof__body > :nth-child(2) { transition-delay: .07s; }
.sbd-proof.is-in .sbd-proof__body > :nth-child(3) { transition-delay: .14s; }

.sbd-proof__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .3rem; font: 500 .58rem/1.3 var(--eg-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--eg-blue); }
.sbd-proof__meta i { display: block; flex: none; width: 6px; height: 6px; background: var(--eg-yellow); box-shadow: 0 0 0 1px rgba(11, 31, 75, .12); }
.sbd-proof__tag { padding: .15rem .35rem; border: 1px solid rgba(11, 31, 75, .24); color: var(--eg-muted); letter-spacing: .12em; }
.sbd-proof__text { margin: 0; font-size: .86rem; line-height: 1.38; letter-spacing: -.005em; color: var(--eg-navy); }
.sbd-proof__text strong { font-weight: 600; }
.sbd-proof__link { color: var(--eg-navy); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(31, 95, 191, .45); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .25s, text-decoration-color .25s; }
.sbd-proof__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.sbd-proof__link:hover, .sbd-proof__card:hover .sbd-proof__link { color: var(--eg-blue); text-decoration-color: currentColor; }
.sbd-proof__link:focus { outline: none; }
.sbd-proof__link:focus-visible::after { outline: 2px solid var(--eg-blue); outline-offset: 2px; }
.sbd-proof__time { margin: .3rem 0 0; color: var(--eg-muted); font-size: .74rem; line-height: 1.3; }

.sbd-proof__close {
	position: relative; z-index: 2; align-self: start; display: grid; place-items: center;
	width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: transparent; color: var(--eg-muted); cursor: pointer; transition: background-color .25s, color .25s;
}
.sbd-proof__close:hover { background: var(--eg-sky-3); color: var(--eg-navy); }
.sbd-proof__close:focus { outline: none; }
.sbd-proof__close:focus-visible { outline: 2px solid var(--eg-blue); outline-offset: 0; background: var(--eg-sky-3); color: var(--eg-navy); }
.sbd-proof__close svg { width: 14px; height: 14px; }

/* Time left on screen: a hairline that drains, and stops while the toast is hovered or focused. */
.sbd-proof__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: rgba(11, 31, 75, .06); }
.sbd-proof__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--eg-blue), var(--eg-yellow)); transform-origin: left; transform: scaleX(1); }
.sbd-proof.is-in .sbd-proof__bar i { animation: sbdProofBar var(--eg-show, 7s) linear forwards; }
.sbd-proof.is-paused .sbd-proof__bar i { animation-play-state: paused; }
@keyframes sbdProofBar { to { transform: scaleX(0); } }

/* The WhatsApp card has priority on narrower screens where the two would meet. */
@media (max-width: 900px) {
	html.sbd-wa-open .sbd-proof { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
}

/* --------------------------------------------------------------------------
   Small screens
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
	.sbd-wa, .sbd-proof { --eg-edge: 14px; --eg-btn: 54px; --eg-gap: 10px; }
	.sbd-wa.is-compact, .sbd-proof.is-compact { --eg-btn: 44px; }
	.sbd-wa__card { width: 260px; padding: .95rem 1rem .9rem; }
	.sbd-wa__n { font-size: 1.35rem; }
	.sbd-proof__card { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 .7rem; padding: .6rem .45rem .7rem .6rem; }
	.sbd-proof__thumb { width: 48px; height: 48px; }
	.sbd-proof__text { font-size: .8rem; }
	.sbd-proof__meta { font-size: .54rem; margin-bottom: .2rem; }
	.sbd-proof__time { font-size: .7rem; margin-top: .2rem; }
	.sbd-proof__close { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: fades only, no pulse
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sbd-wa__pulse, .sbd-wa__live::after { animation: none !important; opacity: 0 !important; }
	.sbd-wa__link, .sbd-wa.is-yield .sbd-wa__link { transform: none; transition: none; }
	.sbd-wa__btn::before { transition: opacity .2s ease; transform: none; opacity: 0; }
	.sbd-wa.is-open .sbd-wa__btn::before, .sbd-wa.is-peek .sbd-wa__btn::before { opacity: 1; }
	.sbd-wa__glyph, .sbd-wa.is-open .sbd-wa__glyph { transform: none !important; }
	.sbd-wa__card, .sbd-wa.is-open .sbd-wa__card, .sbd-wa.is-peek .sbd-wa__card { clip-path: none; transform: none; transition: opacity .25s ease, visibility 0s linear .25s; }
	.sbd-wa.is-open .sbd-wa__card, .sbd-wa.is-peek .sbd-wa__card { transition: opacity .25s ease, visibility 0s; }
	.sbd-wa__card::after { transform: none; transition: none; }
	.sbd-wa__card > span { transform: none !important; transition: opacity .25s ease !important; }
	.sbd-proof__card, .sbd-proof.is-in .sbd-proof__card, .sbd-proof.is-out .sbd-proof__card { transform: none; clip-path: none; transition: opacity .3s ease; }
	.sbd-proof__thumb img, .sbd-proof.is-in .sbd-proof__thumb img { transform: none; transition: none; }
	.sbd-proof__body > *, .sbd-proof.is-in .sbd-proof__body > * { transform: none; transition: opacity .3s ease; }
	.sbd-proof.is-in .sbd-proof__bar i { animation: none; transform: scaleX(0); }
	/* A plain cross-fade is kept (it is not motion), even where the theme switches all transitions off. */
	.sbd-proof .sbd-proof__card, .sbd-proof.is-out .sbd-proof__card { transition: opacity .3s ease !important; }
	.sbd-wa .sbd-wa__card { transition: opacity .25s ease, visibility 0s linear .25s !important; }
	.sbd-wa.is-open .sbd-wa__card, .sbd-wa.is-peek .sbd-wa__card { transition: opacity .25s ease, visibility 0s !important; }
	.sbd-wa.is-yield, .sbd-proof.is-yield { transition: opacity .25s ease, visibility 0s linear .25s !important; }
}
html.sbd-reduced .sbd-wa__pulse { animation: none; opacity: 0; }

.sbd-eg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media print { .sbd-wa, .sbd-proof { display: none !important; } }
@media (forced-colors: active) {
	.sbd-wa__btn, .sbd-proof__card, .sbd-wa__card { border: 1px solid CanvasText; }
}