body.xgsc-modal-open,
body.xgsc-cart-open {
	overflow: hidden;
}

.xgsc-root {
	position: relative;
	z-index: 99990;
}

.xgsc-modal-layer[hidden] {
	display: none !important;
}

.xgsc-modal-layer {
	inset: 0;
	position: fixed;
}

.xgsc-modal-backdrop {
	background: rgba(3, 10, 20, 0.72);
	inset: 0;
	position: absolute;
}

.xgsc-modal {
	background: linear-gradient(180deg, rgba(8, 24, 42, 0.98) 0%, rgba(4, 13, 24, 0.99) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 22px;
	box-shadow: 0 28px 90px rgba(5, 22, 46, 0.46);
	left: 50%;
	max-height: calc(100vh - 48px);
	max-width: 780px;
	overflow: auto;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(calc(100vw - 32px), 780px);
}

.xgsc-modal-close {
	align-items: center;
	appearance: none;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 28px;
	height: 40px;
	justify-content: center;
	position: absolute;
	right: 16px;
	top: 16px;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	width: 40px;
}

.xgsc-modal-close:hover,
.xgsc-modal-close:focus {
	background: #2f7cf6 !important;
	color: #fff !important;
	transform: scale(1.04);
}

.xgsc-modal-body {
	padding: 20px;
}

.xgsc-product-head {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 96px minmax(0, 1fr);
	margin-bottom: 10px;
	padding-right: 48px;
}

.xgsc-product-thumb img {
	border-radius: 16px;
	display: block;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.xgsc-kicker {
	color: #73b8f6;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.xgsc-product-copy h2,
.xgsc-cart-head h2 {
	color: #fff;
	font-size: 24px;
	line-height: 1.1;
	margin: 0;
}

.xgsc-toast-stack {
	display: grid;
	gap: 10px;
	max-width: min(420px, calc(100vw - 24px));
	position: fixed;
	right: 16px;
	top: 16px;
	z-index: 100001;
}

.xgsc-toast {
	background: #0d7e43;
	border-radius: 999px;
	box-shadow: 0 16px 40px rgba(13, 126, 67, 0.28);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	opacity: 0;
	padding: 12px 18px;
	transform: translateY(-8px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.xgsc-toast.is-error {
	background: #c63a3a;
	box-shadow: 0 16px 40px rgba(198, 58, 58, 0.24);
}

.xgsc-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.xgsc-fab {
	align-items: center;
	appearance: none;
	background: #0d1625;
	border: 0;
	border-radius: 18px;
	bottom: 18px;
	box-shadow: 0 18px 42px rgba(5, 12, 24, 0.3);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	gap: 12px;
	min-height: 64px;
	padding: 12px 16px;
	position: fixed;
	right: 18px;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	z-index: 99995;
}

.xgsc-root.is-cart-open .xgsc-fab {
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	visibility: hidden;
}

.xgsc-fab-icon {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.xgsc-fab-icon svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 20px;
}

.xgsc-fab-copy {
	display: grid;
	gap: 2px;
	text-align: left;
}

.xgsc-fab-copy strong {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.1;
}

.xgsc-fab-copy span {
	color: rgba(255, 255, 255, 0.76);
	font-size: 12px;
	line-height: 1.2;
}

.xgsc-count {
	align-items: center;
	background: #2f7cf6;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	height: 26px;
	justify-content: center;
	min-width: 26px;
	padding: 0 8px;
}

.xgsc-cart-backdrop[hidden] {
	display: none !important;
}

.xgsc-cart-backdrop {
	background: rgba(8, 14, 26, 0.42);
	inset: 0;
	position: fixed;
}

.xgsc-cart-panel {
	background: #f8fafc;
	box-shadow: -10px 0 40px rgba(7, 17, 33, 0.2);
	color: #0f1728;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100vh;
	height: 100dvh;
	max-width: 390px;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform 180ms ease;
	width: min(100vw, 390px);
}

.xgsc-root.is-cart-open .xgsc-cart-panel {
	transform: translateX(0);
}

.xgsc-cart-head {
	align-items: start;
	background: #091423;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 18px 18px 16px;
}

.xgsc-cart-close {
	align-items: center;
	appearance: none;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 28px;
	height: 38px;
	justify-content: center;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	width: 38px;
}

.xgsc-cart-close:hover,
.xgsc-cart-close:focus {
	background: #2f7cf6 !important;
	color: #fff !important;
	transform: scale(1.04);
}

.xgsc-cart-body {
	min-height: 0;
	overflow: auto;
	padding: 14px 18px;
}

.xgsc-empty {
	align-items: center;
	background: #fff;
	border: 1px dashed rgba(15, 23, 40, 0.18);
	border-radius: 18px;
	display: grid;
	min-height: 180px;
	padding: 18px;
	text-align: center;
}

.xgsc-cart-items {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.xgsc-cart-item {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(15, 23, 40, 0.06);
	display: grid;
	gap: 12px;
	grid-template-columns: 84px minmax(0, 1fr);
	padding: 12px;
}

.xgsc-cart-thumb img {
	border-radius: 14px;
	display: block;
	height: 84px;
	object-fit: cover;
	width: 84px;
}

.xgsc-cart-copy {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.xgsc-cart-row {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.xgsc-cart-row h3 {
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
}

.xgsc-remove {
	align-items: center;
	appearance: none;
	background: #eef2f7;
	border: 0;
	border-radius: 999px;
	color: #7b8798;
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	width: 34px;
}

.xgsc-remove:hover,
.xgsc-remove:focus {
	background: #e33d64 !important;
	color: #fff !important;
	transform: scale(1.04);
}

.xgsc-meta {
	color: #64748b;
	font-size: 12px;
	line-height: 1.45;
}

.xgsc-meta dl,
.xgsc-meta dt,
.xgsc-meta dd {
	margin: 0;
}

.xgsc-meta dl {
	display: grid;
	gap: 3px;
}

.xgsc-qty {
	align-items: center;
	background: #edf2f7;
	border-radius: 999px;
	display: inline-flex;
	gap: 8px;
	padding: 4px;
}

.xgsc-qty button {
	align-items: center;
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 999px;
	color: #0f1728;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 900;
	height: 28px;
	justify-content: center;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	width: 28px;
}

.xgsc-qty button:hover,
.xgsc-qty button:focus {
	background: #2f7cf6 !important;
	color: #fff !important;
	transform: scale(1.04);
}

.xgsc-qty span {
	font-size: 13px;
	font-weight: 800;
	min-width: 18px;
	text-align: center;
}

.xgsc-cart-footer {
	background: #fff;
	border-top: 1px solid rgba(15, 23, 40, 0.08);
	display: grid;
	gap: 14px;
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	position: relative;
	z-index: 1;
}

.xgsc-subtotal {
	align-items: center;
	display: flex;
	font-size: 14px;
	justify-content: space-between;
}

.xgsc-subtotal strong {
	font-size: 18px;
}

.xgsc-actions {
	display: grid;
	gap: 10px;
}

.xgsc-button {
	align-items: center;
	background: #2f7cf6;
	border-radius: 12px;
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	text-decoration: none;
}

.xgsc-button--ghost {
	background: #edf4ff;
	color: #1e4ed8;
}

.xgsc-state {
	align-items: center;
	color: #fff;
	display: grid;
	gap: 12px;
	justify-items: center;
	min-height: 220px;
	padding: 24px;
	text-align: center;
}

.xgsc-spinner {
	animation: xgsc-spin 0.8s linear infinite;
	border: 3px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	border-top-color: #087bd8;
	height: 38px;
	width: 38px;
}

.xgpb-submit.is-loading {
	opacity: 0.72;
}

@keyframes xgsc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 640px) {
	.xgsc-fab {
		bottom: 12px;
		left: 12px;
		right: 12px;
		width: calc(100vw - 24px);
	}

	.xgsc-modal {
		max-height: calc(100vh - 24px);
		width: calc(100vw - 24px);
	}

	.xgsc-product-head {
		grid-template-columns: 1fr;
		padding-right: 0;
	}

	.xgsc-cart-panel {
		max-width: 100vw;
		width: 100vw;
	}
}