/* Apple Liquid Glass - minimal, clean, transparent */

.gpg {
	--gpg-ink: oklch(28% 0.045 282);
	--gpg-ink-soft: oklch(48% 0.03 282);
	--gpg-line: oklch(100% 0 0 / 0.55);
	--gpg-glass: linear-gradient(155deg, oklch(100% 0 0 / 0.58), oklch(100% 0 0 / 0.16));
	--gpg-glass-strong: linear-gradient(155deg, oklch(100% 0 0 / 0.72), oklch(100% 0 0 / 0.3));
	--gpg-blur: saturate(120%) blur(18px);
	--gpg-accent: oklch(58% 0.2 282);
	--gpg-sale: oklch(62% 0.19 15);
	--gpg-card: 240px;
	--gpg-r: 20px;
	--gpg-ease: cubic-bezier(0.22, 1, 0.36, 1);

	padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px);
	overflow: hidden;
	color: var(--gpg-ink);
	font-family: Vazirmatn, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	background: transparent;
	border: none;
}

.gpg__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--gpg-card), 1fr);
	gap: 12px;
	margin: 0;
	padding: 2px 0 8px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: oklch(0% 0 0 / 0.2) transparent;
}
.gpg__track::-webkit-scrollbar { height: 6px; }
.gpg__track::-webkit-scrollbar-track { background: oklch(0% 0 0 / 0.08); border-radius: 99px; }
.gpg__track::-webkit-scrollbar-thumb { background: oklch(0% 0 0 / 0.25); border-radius: 99px; }
.gpg__item { scroll-snap-align: center; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
	.gpg__item { animation: gpg-rise 0.5s var(--gpg-ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
	@keyframes gpg-rise { from { opacity: 0; transform: translateY(12px); } }
}

.gpg__card {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: var(--gpg-r);
	border: 1px solid var(--gpg-line);
	background: var(--gpg-glass);
	-webkit-backdrop-filter: var(--gpg-blur);
	backdrop-filter: var(--gpg-blur);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.8), 0 10px 24px oklch(0% 0 0 / 0.08);
	transition: transform 0.3s var(--gpg-ease), box-shadow 0.3s var(--gpg-ease);
}
.gpg__card:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.85), 0 16px 36px oklch(0% 0 0 / 0.14);
}

.gpg__media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 140px;
	padding: 8px;
	border-radius: calc(var(--gpg-r) - 6px);
	background: radial-gradient(120% 80% at 50% 20%, oklch(100% 0 0 / 0.4), oklch(100% 0 0 / 0) 70%);
	text-decoration: none;
}
.gpg__media img, .gpg__media .gpg__img {
	max-width: 100%;
	height: auto;
	max-height: 130px;
	object-fit: contain;
	filter: drop-shadow(0 8px 12px oklch(0% 0 0 / 0.12));
	transition: transform 0.4s var(--gpg-ease);
}
.gpg__card:hover .gpg__media img, .gpg__card:hover .gpg__media .gpg__img { transform: scale(1.06); }

.gpg__badge {
	position: absolute;
	top: 6px;
	inset-inline-start: 6px;
	padding: 4px 9px;
	border-radius: 99px;
	border: 1px solid oklch(100% 0 0 / 0.5);
	background: linear-gradient(160deg, oklch(70% 0.19 15 / 0.8), oklch(58% 0.2 8 / 0.5));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: oklch(99% 0.01 20);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.4);
}

.gpg__name { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.6; }
.gpg__name a {
	color: var(--gpg-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s;
}
.gpg__name a:hover { color: var(--gpg-accent); }

.gpg__price {
	margin-top: auto;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: var(--gpg-ink);
}
.gpg__price del {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--gpg-ink-soft);
	opacity: 0.7;
	text-decoration-thickness: 0.5px;
	margin-inline-end: 6px;
}
.gpg__price .unit { font-size: 0.7em; }

.gpg__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: 99px;
	border: 1px solid var(--gpg-line);
	background: var(--gpg-glass-strong);
	-webkit-backdrop-filter: var(--gpg-blur);
	backdrop-filter: var(--gpg-blur);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.85), 0 6px 14px oklch(0% 0 0 / 0.08);
	color: var(--gpg-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.22s var(--gpg-ease), box-shadow 0.22s var(--gpg-ease);
}
.gpg__cart svg { width: 16px; height: 16px; flex: none; }
.gpg__cart:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.9), 0 10px 20px oklch(0% 0 0 / 0.12); }
.gpg__cart:active { transform: translateY(0) scale(0.97); }
.gpg__cart:focus-visible { outline: 2px solid var(--gpg-accent); outline-offset: 2px; }
.gpg__cart.loading { opacity: 0.65; pointer-events: none; }
.gpg__cart.added::after { content: none; }
.gpg__cart--out { color: var(--gpg-ink-soft); background: var(--gpg-glass); cursor: default; font-weight: 500; }

.gpg__empty {
	margin: 0;
	padding: 28px 18px;
	border-radius: var(--gpg-r);
	border: 1px dashed var(--gpg-line);
	text-align: center;
	color: var(--gpg-ink-soft);
	font-size: 0.875rem;
	line-height: 1.8;
}
.gpg-notice { padding: 12px 16px; border: 1px solid oklch(80% 0.1 60); border-radius: 10px; }

@media (max-width: 640px) {
	.gpg { --gpg-card: 80vw; --gpg-r: 16px; }
	.gpg__track { scroll-snap-type: x mandatory; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gpg__card, .gpg__cart { background: oklch(100% 0 0 / 0.85); }
}