:root {
	--psap-ink: #172033;
	--psap-font: #172033;
	--psap-primary: #0f766e;
	--psap-secondary: #e85d75;
	--psap-width: 390px;
	--psap-mobile-width: 360px;
	--psap-radius: 22px;
	--psap-muted: #667085;
	--psap-surface: rgba(255, 255, 255, 0.82);
	--psap-border: rgba(23, 32, 51, 0.12);
	--psap-accent: #0f766e;
	--psap-coral: #e85d75;
	--psap-gold: #f6c85f;
}

.psap-root {
	position: fixed;
	z-index: 999999999;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--psap-font);
}

.psap-root--bottom-left {
	right: auto;
	left: max(20px, env(safe-area-inset-left));
}

.psap-root--top-right {
	top: max(20px, env(safe-area-inset-top));
	bottom: auto;
}

.psap-root--top-left {
	top: max(20px, env(safe-area-inset-top));
	right: auto;
	bottom: auto;
	left: max(20px, env(safe-area-inset-left));
}

.psap-fab,
.psap-icon-button,
.psap-actions button,
.psap-product button,
.psap-cart-item button {
	border: 0;
	cursor: pointer;
	font: inherit;
}

.psap-fab {
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--psap-radius);
	color: #fff;
	background:
radial-gradient(circle at top left,
rgba(255,255,255,0.28),
transparent 35%),
linear-gradient(
	135deg,
	var(--psap-primary),
	#10243f 58%,
	var(--psap-secondary)
);
border:
1px solid rgba(255,255,255,0.18);

backdrop-filter: blur(18px);
box-shadow:
0 12px 40px rgba(15,118,110,0.34),
0 0 24px rgba(0,140,255,0.16),
inset 0 1px 1px rgba(255,255,255,0.22);
transition:
transform .28s cubic-bezier(.16,1,.3,1),
box-shadow .28s cubic-bezier(.16,1,.3,1);
}

.psap-root--button-small .psap-fab {
	width: 54px;
	height: 54px;
}

.psap-root--button-large .psap-fab {
	width: 74px;
	height: 74px;
}

.psap-root.no-shadows .psap-fab,
.psap-root.no-shadows .psap-panel {
	box-shadow: none;
}

.psap-fab:hover,
.psap-root.is-open .psap-fab {
transform:
	translateY(-6px)
	scale(1.04);
box-shadow:
	0 24px 60px rgba(15,23,42,0.34),
	0 0 36px rgba(0,140,255,0.24),
	inset 0 1px 1px rgba(255,255,255,0.28);
}


.psap-fab__glow {
	position: absolute;
	inset: -8px;
	border-radius: 28px;
	background: rgba(246, 200, 95, 0.16);
	opacity: 0;
	transition: opacity 180ms ease;
}

.psap-root.is-listening .psap-fab__glow {
	animation: psap-pulse 1.35s ease infinite;
	opacity: 1;
}

.psap-icon,
.psap-icon-button svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.psap-fab__text {
	position: absolute;
	right: 76px;
	max-width: 150px;
	overflow: hidden;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(23, 32, 51, 0.86);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.psap-root--bottom-left .psap-fab__text,
.psap-root--top-left .psap-fab__text {
	right: auto;
	left: 76px;
}

.psap-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	display: grid;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	place-items: center;
	border-radius: 999px;
	color: #172033;
	background: var(--psap-gold);
	font-size: 12px;
	font-weight: 800;
}

.psap-panel {
position: absolute;
right: 0;
bottom: 88px;
width: min(var(--psap-width), calc(100vw - 32px));
max-height: min(760px, calc(100vh - 118px));

overflow: hidden;

border-radius: 30px;

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.88),
		rgba(255,255,255,0.72)
	);

border:
	1px solid rgba(255,255,255,0.45);

backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);

box-shadow:
	0 20px 70px rgba(15,23,42,0.22),
	0 0 0 1px rgba(255,255,255,0.18),
	inset 0 1px 1px rgba(255,255,255,0.45);

opacity: 0;
pointer-events: none;

transform:
	translateY(20px)
	scale(.94);

transform-origin: bottom right;
transition:
	opacity .35s cubic-bezier(.16,1,.3,1),
	transform .35s cubic-bezier(.16,1,.3,1);

z-index: 999999999;
}

.psap-root.no-glass .psap-panel {
	background: #fff;
	backdrop-filter: none;
}

.psap-root--mode-dark .psap-panel {
	--psap-surface: rgba(20, 28, 42, 0.9);
	--psap-border: rgba(255, 255, 255, 0.13);
	--psap-muted: #b8c0cc;
	color: #f8fafc;
}

.psap-root--mode-dark .psap-search input,
.psap-root--mode-dark .psap-status-line,
.psap-root--mode-dark .psap-product,
.psap-root--mode-dark .psap-cart-item {
	background: rgba(255, 255, 255, 0.08);
	color: #f8fafc;
}

.psap-root--bottom-left .psap-panel {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}

.psap-root--top-right .psap-panel,
.psap-root--top-left .psap-panel {
	top: 78px;
	bottom: auto;
	transform-origin: top right;
}

.psap-root--top-left .psap-panel {
	right: auto;
	left: 0;
	transform-origin: top left;
}

.psap-root.is-open .psap-panel {
	opacity: 1;
	pointer-events: auto;
	animation: psapPanelFloatIn .45s cubic-bezier(.16,1,.3,1);
	transform: translateY(0) scale(1);
}

.psap-panel__header {
display: flex;
position: relative;
align-items: flex-start;
justify-content: space-between;
gap: 16px;

padding: 24px 24px 18px;

border-bottom:
	1px solid rgba(255,255,255,0.28);

background:
	linear-gradient(
		135deg,
		rgba(0,140,255,0.10),
		rgba(139,92,246,0.08),
		rgba(0,255,200,0.06)
	);
backdrop-filter: blur(20px);
z-index: 1;
}

.psap-kicker,
.psap-panel h2,
.psap-empty {
	margin: 0;
}

.psap-kicker {
	color: var(--psap-primary);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.psap-panel h2 {
	margin-top: 4px;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 800;
    letter-spacing: -0.03em;
}

.psap-panel::before {
content: '';

position: absolute;

top: -120px;
right: -120px;

width: 240px;
height: 240px;

background:
	radial-gradient(
		circle,
		rgba(0,140,255,0.16),
		transparent 70%
	);

pointer-events: none;

z-index: 0;
mix-blend-mode: screen;

}


.psap-icon-button {
position: relative;
display: grid;
place-items: center;

flex: 0 0 auto;

width: 48px;
height: 48px;

border-radius: 18px;

border:
	1px solid rgba(255,255,255,0.35);

background:
	linear-gradient(
		145deg,
		rgba(255,255,255,0.95),
		rgba(240,240,240,0.75)
	);

color: #111827;

backdrop-filter: blur(18px);

box-shadow:
	0 8px 24px rgba(15,23,42,0.12),
	inset 0 1px 1px rgba(255,255,255,0.65);

overflow: hidden;

transition:
	transform .25s ease,
	box-shadow .25s ease,
	background .25s ease;

}

.psap-icon-button::before {
content: '';
position: absolute;
inset: 0;

background:
	linear-gradient(
		135deg,
		rgba(0,140,255,0.12),
		rgba(0,255,200,0.08)
	);

opacity: 0;

transition: opacity .25s ease;

}

.psap-icon-button:hover {
transform:
translateY(-3px)
scale(1.05);
box-shadow:
	0 14px 36px rgba(15,23,42,0.20);

}

.psap-icon-button:hover::before {
opacity: 1;
}

.psap-icon-button:active {
transform: scale(.96);
}


.psap-icon-button--accent {
	color: #fff;
	background: var(--psap-primary);
}

.psap-panel__body {
	display: grid;
	gap: 14px;
	max-height: calc(min(680px, 100vh - 118px) - 84px);
	overflow: auto;
	padding: 20px;
	position: relative;
    z-index: 1;
}

.psap-status-line {
position: relative;
padding: 18px 20px;

border-radius: 22px;

border:
	1px solid rgba(255,255,255,0.35);

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.92),
		rgba(255,255,255,0.72)
	);

color: #667085;

font-size: 15px;
font-weight: 500;

backdrop-filter: blur(20px);

box-shadow:
	0 8px 24px rgba(15,23,42,0.06),
	inset 0 1px 1px rgba(255,255,255,0.6);

overflow: hidden;

}

.psap-status-line::before {
content: '';
position: absolute;
top: 0;
left: -120%;

width: 120%;
height: 100%;

background:
	linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,0.5),
		transparent
	);

animation: psapShine 4s linear infinite;

}

@keyframes psapShine {
to {
left: 120%;
}
}


.psap-search {
	display: grid;
	grid-template-columns: 1fr 58px;
	gap: 8px;
}

.psap-search input {
width: 100%;
min-width: 0;
height: 62px;

border-radius: 20px;

border:
	1px solid rgba(255,255,255,0.4);

padding: 0 20px;

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.96),
		rgba(255,255,255,0.78)
	);

color: #0f172a;

font-size: 15px;
font-weight: 500;

backdrop-filter: blur(20px);

box-shadow:
	0 8px 24px rgba(15,23,42,0.08),
	inset 0 1px 1px rgba(255,255,255,0.7);

transition:
	all .35s cubic-bezier(.16,1,.3,1);

}

.psap-search input:focus {
outline: none;
transform: translateY(-2px);
border:
	1px solid rgba(0,140,255,0.35);

box-shadow:
	0 0 0 4px rgba(0,140,255,0.10),
	0 14px 34px rgba(0,140,255,0.16);

}


.psap-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.psap-actions button,
.psap-product button,
.psap-cart-item button {

border-radius: 18px;
position: relative;
overflow: hidden;

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.95),
		rgba(240,247,255,0.85)
	);

color: #0f766e;

font-size: 13px;
font-weight: 800;
letter-spacing: .4px;

border:
	1px solid rgba(255,255,255,0.35);

backdrop-filter: blur(14px);

box-shadow:
	0 8px 24px rgba(15,23,42,0.08);

transition:
	transform .25s ease,
	box-shadow .25s ease;

}

.psap-actions button::before,
.psap-product button::before,
.psap-cart-item button::before {
content: '';

position: absolute;

top: 0;
left: -120%;

width: 120%;
height: 100%;

background:
	linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,0.55),
		transparent
	);

transition: left .55s ease;

}

.psap-actions button:hover::before,
.psap-product button:hover::before,
.psap-cart-item button:hover::before {

left: 120%;

}


.psap-actions button:hover,
.psap-product button:hover,
.psap-cart-item button:hover {

transform:
	translateY(-3px);

box-shadow:
	0 16px 36px rgba(15,23,42,0.14);

}

.psap-actions button {
	min-height: 42px;
	padding: 8px 10px;
}

.psap-results,
.psap-cart {
	display: grid;
	gap: 10px;
}

.psap-product,
.psap-cart-item {
display: grid;
grid-template-columns:
	54px
	minmax(0, 1fr)
	auto;

gap: 12px;
align-items: center;
padding: 14px;
border-radius: 22px;
border:
	1px solid rgba(255,255,255,0.34);

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.88),
		rgba(255,255,255,0.68)
	);
backdrop-filter: blur(18px);

box-shadow:
	0 10px 30px rgba(15,23,42,0.08),
	inset 0 1px 1px rgba(255,255,255,0.5);

transition:
	transform .25s ease,
	box-shadow .25s ease;
}

.psap-product:hover,
.psap-cart-item:hover {
transform:
	translateY(-3px);
box-shadow:
	0 18px 40px rgba(15,23,42,0.14);
}


.psap-product img,
.psap-cart-item img,
.psap-product__placeholder {
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	object-fit: cover;
	background: linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(246, 200, 95, 0.24));
}

.psap-product__name {
	display: block;
	overflow: hidden;
	color: var(--psap-ink);
	font-weight: 800;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.psap-product__price,
.psap-cart-item span,
.psap-empty {
	color: var(--psap-muted);
	font-size: 13px;
}

.psap-product button {
	min-height: 34px;
	padding: 8px 12px;
}

.psap-cart__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.psap-cart-item {
	grid-template-columns: 44px minmax(0, 1fr) 32px 32px auto;
}

.psap-cart-item img,
.psap-cart-item .psap-product__placeholder {
	width: 44px;
	height: 44px;
}

.psap-cart-item strong {
	display: block;
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.psap-cart-item button {
min-width: 38px;
height: 38px;

padding: 0 12px;

border-radius: 14px;

font-size: 15px;
font-weight: 800;

background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.95),
		rgba(240,247,255,0.85)
	);

box-shadow:
	0 8px 20px rgba(15,23,42,0.08);

transition:
	transform .2s ease,
	box-shadow .2s ease;
}

.psap-cart-item button:hover {
transform:
	translateY(-2px);

box-shadow:
	0 12px 28px rgba(15,23,42,0.14);
}


@keyframes psap-pulse {
	0% {
		transform: scale(0.92);
		opacity: 0.4;
	}

	70% {
		transform: scale(1.16);
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes psap-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

.psap-root--animation-float .psap-fab {
	animation: psap-float 3s ease-in-out infinite;
}

.psap-root--animation-glow .psap-fab__glow,
.psap-root--animation-pulse .psap-fab__glow {
	animation: psap-pulse 1.8s ease infinite;
	opacity: 1;
}

.psap-root--animation-none .psap-fab,
.psap-root--animation-none .psap-fab__glow {
	animation: none;
}

@media (max-width: 480px) {
	.psap-root {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	.psap-root--bottom-left {
		left: 16px;
	}

	.psap-fab {
		margin-left: auto;
	}

	.psap-root--bottom-left .psap-fab {
		margin-right: auto;
		margin-left: 0;
	}

	.psap-panel,
	.psap-root--bottom-left .psap-panel {
		right: 0;
		left: 0;
		width: min(var(--psap-mobile-width), 100%);
	}

	.psap-actions {
		grid-template-columns: 1fr;
	}
}

.psap-panel__body::-webkit-scrollbar {
width: 8px;
}

.psap-panel__body::-webkit-scrollbar-track {
background: transparent;
}

.psap-panel__body::-webkit-scrollbar-thumb {
border-radius: 999px;

background:
	linear-gradient(
		180deg,
		rgba(15,118,110,0.5),
		rgba(0,140,255,0.45)
	);
}
@keyframes psapPanelFloatIn {
from {
	opacity: 0;

	transform:
		translateY(30px)
		scale(.92)
		rotateX(8deg);
}

to {
	opacity: 1;

	transform:
		translateY(0)
		scale(1)
		rotateX(0deg);
}
}

.psap-panel {
isolation: isolate;
}

.psap-panel::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background:
	linear-gradient(
		135deg,
		rgba(255,255,255,0.45),
		rgba(255,255,255,0.06)
	);

-webkit-mask:
	linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}

.psap-search button {
display: grid;
place-items: center;

width: 58px;
height: 62px;

border: none;

border-radius: 20px;

background:
	linear-gradient(
		135deg,
		var(--psap-primary),
		#0f172a
	);

color: #ffffff;

box-shadow:
	0 10px 24px rgba(15,118,110,0.24);

transition:
	transform .25s ease,
	box-shadow .25s ease;
}

.psap-search button:hover {
transform:
	translateY(-2px)
	scale(1.04);

box-shadow:
	0 16px 34px rgba(15,118,110,0.34);
}

.psap-search button:active {
transform: scale(.96);
}
.psap-cart {
padding-top: 10px;

border-top:
	1px solid rgba(255,255,255,0.18);
}