/*
 * vgs-design — catalog module (stage 2, ADR-047 / doc 33).
 * Product cards (Flatsome's .product-small in rows and grids, vgpf's .vgpf-card), the game tiles and the
 * home-page shortcodes ([vgs_hero], [vgs_games], [vgs_how], [vgs_trust], [vgs_sell]).
 * Every rule sits under body.vgs-design; tokens only (tokens.css). The design reference is
 * vgstore-system/docs/design/1405-07-05/final (components.css: .pcard, .gtile, .escrow).
 */

/* ── Icons printed by the shortcodes and the card lines ─────────────────── */
body.vgs-design .vgsd-i {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Seller badge (vgs-settlement): one tone for every tier ─────────────── */
/* The tier is in the words («فروشنده برتر», «فروشنده فعال»…); three colours on the same card competed with
 * the price and the stock line. White pill, medal glyph in the brand ink. */
body.vgs-design .vgs-seller-badge,
body.vgs-design .vgs-seller-badge[class*="vgs-seller-badge--t"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-pill);
	background: var(--vgs-surface);
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-12);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
	white-space: nowrap;
	vertical-align: middle;
}

body.vgs-design .vgs-seller-badge::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--vgs-primary-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='m9 13.8-1.2 6.7L12 18.3l4.2 2.2-1.2-6.7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='m9 13.8-1.2 6.7L12 18.3l4.2 2.2-1.2-6.7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ── Product card — Flatsome .product-small (home rows, related, grids) ──
 * Order: image · game line (mixed lists) · title (2 lines, 400) · price · stock + delivery · seller badge.
 * The whole card keeps Flatsome's links; nothing is added to buy from the card. */
body.vgs-design .product-small.box {
	padding: var(--vgs-s2);
	background: var(--vgs-surface);
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-lg);
	box-shadow: none;
	transition: border-color var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .product-small.box:hover {
	border-color: var(--vgs-line-strong);
}

body.vgs-design .product-small .box-image {
	padding: 0;
	border-radius: var(--vgs-r-md);
	overflow: hidden;
	background: var(--vgs-field);
}

/* Equal-height rows (related products, some home rows) size the picture box by its top padding and lay
 * the image over it; the child theme's 15px padding is gone, the ratio has to stay. */
body.vgs-design .has-equal-box-heights .product-small .box-image {
	padding-top: 100%;
}

/* The child theme rounds the home rows' pictures into pills (`.mkh-sec-product … .image-none
 * {border-radius:65px !important}`). */
body.vgs-design .product-small .box-image > div {
	border-radius: var(--vgs-r-md) !important;
	overflow: hidden;
}

body.vgs-design .product-small .box-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Out of stock: the card fades and its meta line says «فروخته شد» — Flatsome's label over the picture
 * repeated it in a second style. */
body.vgs-design .product-small .out-of-stock-label {
	display: none;
}

body.vgs-design .out-of-stock > .col-inner > .product-small.box {
	opacity: 0.72;
}

body.vgs-design .product-small .box-text {
	display: flex;
	flex-direction: column;
	gap: var(--vgs-s1);
	padding: 10px 4px 2px;
	text-align: start;
}

body.vgs-design .product-small .title-wrapper {
	min-width: 0;
}

body.vgs-design .product-small .product-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 3.4em;
	margin: 0;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-body);
	line-height: 1.7;
}

/* Flatsome's `.box a{display:inline-block}` makes the title one atomic box, which the two-line clamp
 * cannot cut; inline, the clamp counts its lines. */
body.vgs-design .product-small .product-title a {
	display: inline;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* The whole card is one target (the title's link stretched over it); the picture keeps its own link to
 * the same page underneath. */
body.vgs-design .product-small.box {
	position: relative;
}

body.vgs-design .product-small .product-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--vgs-r-lg);
}

/* Price box: price first, then the stock line, then the seller badge (printed first by vgs-settlement). */
body.vgs-design .product-small .price-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vgs-s1);
	text-align: start;
}

body.vgs-design .product-small .price-wrapper .price {
	order: 1;
	display: block;
	margin: 0;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-16);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .product-small .price-wrapper .price .woocommerce-Price-amount {
	font-size: inherit;
}

body.vgs-design .product-small .price-wrapper .vgs-pmeta {
	order: 2;
}

body.vgs-design .product-small .price-wrapper .vgs-seller-badge {
	order: 3;
}

/* Game line and stock/delivery line (LoopCard.php). */
body.vgs-design .vgs-pgame {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-12);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-pgame img {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	object-fit: cover;
}

body.vgs-design .vgs-pgame span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.vgs-design .vgs-pmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-12);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vgs-ok-ink);
	font-weight: var(--vgs-fw-strong);
}

body.vgs-design .vgs-stock::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vgs-ok);
}

/* Sold: a hollow ring, so the state is told by shape as well as colour. */
body.vgs-design .vgs-stock--out {
	color: var(--vgs-ink-2);
}

body.vgs-design .vgs-stock--out::before {
	box-sizing: border-box;
	background: none;
	border: 1.5px solid var(--vgs-ink-2);
}

body.vgs-design .vgs-dl {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

body.vgs-design .vgs-dl .vgsd-i {
	width: 16px;
	height: 16px;
}

/* Row arrows (Flickity): a 44px round control with a visible edge instead of a faded shadow. */
body.vgs-design .row-slider .flickity-prev-next-button {
	width: var(--vgs-tap) !important;
	height: var(--vgs-tap) !important;
	border: 1px solid var(--vgs-line-strong);
	border-radius: 50%;
	background: var(--vgs-surface);
	box-shadow: none !important;
	color: var(--vgs-ink);
	opacity: 1;
}

body.vgs-design .row-slider .flickity-prev-next-button svg {
	width: 100%;
	height: 100% !important;
	padding: 26%;
	fill: currentColor;
}

body.vgs-design .row-slider .flickity-prev-next-button:hover {
	background: var(--vgs-field);
}

/* ── vgpf (catalog, category and search pages) ──────────────────────────
 * vgpf draws its own cards and filters from --vgpf-* tokens; pointing them at the design tokens gives one
 * palette, one radius scale and flat cards without touching vgpf's markup (which vgpf caches). */
body.vgs-design {
	--vgpf-accent: var(--vgs-primary);
	--vgpf-accent-hover: var(--vgs-primary-hover);
	--vgpf-on-accent: var(--vgs-on-primary);
	--vgpf-accent-soft: var(--vgs-primary-soft);
	--vgpf-accent-ring: var(--vgs-primary-soft-2);
	--vgpf-accent-shadow: transparent;
	--vgpf-ink: var(--vgs-ink);
	--vgpf-ink-2: var(--vgs-ink-2);
	--vgpf-ink-3: var(--vgs-muted);
	--vgpf-surface: var(--vgs-surface);
	--vgpf-surface-2: var(--vgs-field);
	--vgpf-border: var(--vgs-line);
	--vgpf-border-strong: var(--vgs-line-strong);
	--vgpf-ok: var(--vgs-ok);
	--vgpf-danger: var(--vgs-danger);
	--vgpf-r-lg: var(--vgs-r-lg);
	--vgpf-r-md: var(--vgs-r-md);
	--vgpf-r-sm: var(--vgs-r-sm);
	--vgpf-shadow-sm: none;
}

body.vgs-design .vgpf-card {
	box-shadow: none;
}

body.vgs-design .vgpf-card:hover {
	border-color: var(--vgs-line-strong);
	box-shadow: none;
	transform: none;
}

body.vgs-design .vgpf-card .vgpf-card__img {
	aspect-ratio: auto;
	padding: var(--vgs-s2) var(--vgs-s2) 0;
	background: var(--vgs-surface);
}

body.vgs-design .vgpf-card .vgpf-card__img img,
body.vgs-design .vgpf-card:hover .vgpf-card__img img {
	aspect-ratio: 1;
	height: auto;
	border-radius: var(--vgs-r-md);
	transform: none;
}

body.vgs-design .vgpf-card .vgpf-card__body {
	gap: 6px;
	padding: 10px 12px 12px;
}

body.vgs-design .vgpf-card .vgpf-card__title {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: 3.4em;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-body);
	line-height: 1.7;
}

body.vgs-design .vgpf-card .vgpf-card__price {
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-16);
	font-weight: var(--vgs-fw-strong);
}

body.vgs-design .vgpf-results .vgpf-card__buy--row .vgpf-card__price .woocommerce-Price-currencySymbol,
body.vgs-design .vgpf-card .vgpf-card__buy--row .vgpf-card__price del {
	font-size: var(--vgs-fs-12);
}

body.vgs-design .vgpf-card .vgpf-card__stock {
	color: var(--vgs-ok-ink);
	font-size: var(--vgs-fs-12);
	font-weight: var(--vgs-fw-strong);
}

body.vgs-design .vgpf-card .vgpf-card__stock--out {
	color: var(--vgs-ink-2);
}

body.vgs-design .vgpf-card .vgpf-card__stock--out::before {
	box-sizing: border-box;
	background: none;
	border: 1.5px solid var(--vgs-ink-2);
}

/* vgpf's cart button (the owner's choice of style in vgpf's settings): the 44px target and the radius scale. */
body.vgs-design .vgpf-results .vgpf-card__add--icon,
body.vgs-design .vgpf-results .vgpf-card__add--icon-soft {
	width: var(--vgs-tap);
	height: var(--vgs-tap);
	border-radius: var(--vgs-r-md);
}

body.vgs-design .vgpf-results .vgpf-card__add--full,
body.vgs-design .vgpf-results .vgpf-card__add--full-soft {
	height: var(--vgs-tap);
	border-radius: var(--vgs-r-md);
}

/* ── Buttons of the shortcodes ──────────────────────────────────────────
 * Own class (not Flatsome's .button), so the owner's theme buttons and these never fight. */
body.vgs-design .vgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vgs-s2);
	min-height: var(--vgs-btn-md);
	min-width: var(--vgs-tap);
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--vgs-r-md);
	font-size: var(--vgs-fs-16);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--vgs-dur-fast) var(--vgs-ease), border-color var(--vgs-dur-fast) var(--vgs-ease), transform var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .vgs-btn:active {
	transform: scale(0.98);
}

body.vgs-design .vgs-btn .vgsd-i {
	width: 20px;
	height: 20px;
}

body.vgs-design .vgs-btn--primary,
body.vgs-design .vgs-btn--primary:hover,
body.vgs-design .vgs-btn--primary:focus {
	background: var(--vgs-primary);
	color: var(--vgs-on-primary);
}

body.vgs-design .vgs-btn--primary:hover {
	background: var(--vgs-primary-hover);
}

body.vgs-design .vgs-btn--secondary,
body.vgs-design .vgs-btn--secondary:hover,
body.vgs-design .vgs-btn--secondary:focus {
	background: var(--vgs-surface);
	border-color: var(--vgs-line-strong);
	color: var(--vgs-ink);
}

body.vgs-design .vgs-btn--secondary:hover {
	background: var(--vgs-field);
	border-color: var(--vgs-ink-2);
}

body.vgs-design .vgs-btn--light,
body.vgs-design .vgs-btn--light:hover,
body.vgs-design .vgs-btn--light:focus {
	background: var(--vgs-surface);
	color: var(--vgs-primary-ink);
}

body.vgs-design .vgs-btn--light:hover {
	background: var(--vgs-primary-soft);
}

body.vgs-design .vgs-btn--on-brand,
body.vgs-design .vgs-btn--on-brand:hover,
body.vgs-design .vgs-btn--on-brand:focus {
	background: transparent;
	border-color: var(--vgs-on-brand-line);
	color: var(--vgs-on-brand);
}

body.vgs-design .vgs-btn--on-brand:hover {
	background: var(--vgs-primary-hover);
	border-color: var(--vgs-on-brand);
}

/* ── Section head, plate ───────────────────────────────────────────────── */
body.vgs-design .vgs-sec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vgs-s3);
	margin: 0 0 var(--vgs-s2);
}

body.vgs-design .vgs-sec__title {
	margin: 0;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-18);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-head);
}

body.vgs-design .vgs-sec__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: var(--vgs-tap);
	padding: 0 4px;
	color: var(--vgs-primary-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	text-decoration: none;
	white-space: nowrap;
}

body.vgs-design .vgs-sec__more:hover {
	color: var(--vgs-primary-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.vgs-design .vgs-sec__more .vgsd-i {
	width: 20px;
	height: 20px;
}

body.vgs-design .vgs-plate {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--vgs-r-md);
	background: var(--vgs-primary-soft);
	color: var(--vgs-primary-ink);
}

body.vgs-design .vgs-plate--ok {
	background: var(--vgs-ok-soft);
	color: var(--vgs-ok-ink);
}

body.vgs-design .vgs-desk {
	display: none;
}

/* ── [vgs_hero] — the page's one brand block ──────────────────────────── */
body.vgs-design .vgs-hero {
	background: var(--vgs-brand-block);
	color: var(--vgs-on-brand);
}

body.vgs-design .vgs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(var(--vgs-container) + 2 * var(--vgs-gutter));
	margin: 0 auto;
	padding: 18px var(--vgs-gutter) 20px;
}

body.vgs-design .vgs-hero__eyebrow {
	display: none;
}

body.vgs-design .vgs-hero__title {
	margin: 0;
	color: var(--vgs-on-brand);
	font-size: var(--vgs-fs-22);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-head);
}

body.vgs-design .vgs-hero__lead {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	color: var(--vgs-on-brand);
	font-size: var(--vgs-fs-14);
	line-height: 1.7;
}

body.vgs-design .vgs-hero__lead .vgsd-i {
	width: 20px;
	height: 20px;
}

body.vgs-design .vgs-hero :focus-visible {
	outline-color: var(--vgs-on-brand);
}

body.vgs-design .vgs-search {
	position: relative;
	display: block;
	margin: 14px 0 0;
}

body.vgs-design .vgs-search > .vgsd-i {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 12px;
	transform: translateY(-50%);
	color: var(--vgs-ink-2);
	pointer-events: none;
}

body.vgs-design .vgs-search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: var(--vgs-control-h);
	margin: 0;
	padding: 0 12px;
	padding-inline-start: 44px;
	border: 1px solid transparent;
	border-radius: var(--vgs-r-md);
	background: var(--vgs-surface);
	box-shadow: none;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-16);
	-webkit-appearance: none;
	appearance: none;
}

body.vgs-design .vgs-search input[type="search"]::placeholder {
	color: var(--vgs-muted);
	opacity: 1;
}

body.vgs-design .vgs-search input[type="search"]:focus {
	border-color: var(--vgs-on-brand);
	box-shadow: 0 0 0 3px var(--vgs-on-brand-line);
	outline: none;
}

body.vgs-design .vgs-hero__ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vgs-s2);
	margin: var(--vgs-s3) 0 0;
}

body.vgs-design .vgs-hero__ctas .vgs-btn {
	padding: 0 10px;
}

body.vgs-design .vgs-hero__trust,
body.vgs-design .vgs-hero .vgs-escrow {
	display: none;
}

/* ── Escrow card (desktop hero) ─────────────────────────────────────────── */
body.vgs-design .vgs-escrow {
	gap: var(--vgs-s3);
	margin: 0;
	padding: var(--vgs-s4);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-surface);
	color: var(--vgs-ink);
}

body.vgs-design .vgs-escrow__cap {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-12);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-escrow__steps {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vgs-design .vgs-escrow__steps li {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--vgs-s3);
	margin: 0;
	padding: 6px 0;
}

body.vgs-design .vgs-escrow__steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: 34px;
	inset-block-end: -6px;
	inset-inline-start: 13px;
	width: 2px;
	background: var(--vgs-line);
}

body.vgs-design .vgs-escrow__steps li.is-done:not(:last-child)::after {
	background: var(--vgs-ok);
}

body.vgs-design .vgs-escrow__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--vgs-line-strong);
	border-radius: 50%;
	background: var(--vgs-surface);
	color: var(--vgs-on-primary);
}

body.vgs-design .vgs-escrow__dot .vgsd-i {
	width: 16px;
	height: 16px;
	stroke-width: 2.25;
}

body.vgs-design .vgs-escrow .is-done .vgs-escrow__dot {
	background: var(--vgs-ok);
	border-color: var(--vgs-ok);
}

body.vgs-design .vgs-escrow .is-now .vgs-escrow__dot {
	background: var(--vgs-primary);
	border-color: var(--vgs-primary);
	outline: 4px solid var(--vgs-primary-soft);
}

body.vgs-design .vgs-escrow__steps b {
	display: block;
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-escrow__steps .is-now b {
	color: var(--vgs-primary-ink);
}

body.vgs-design .vgs-escrow__steps small {
	display: block;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-13);
	line-height: 1.6;
}

body.vgs-design .vgs-escrow__foot {
	display: flex;
	align-items: center;
	gap: var(--vgs-s2);
	margin: 0;
	padding: var(--vgs-s3);
	border-radius: var(--vgs-r-md);
	background: var(--vgs-field);
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-13);
	line-height: 1.6;
}

/* ── [vgs_games] ────────────────────────────────────────────────────────── */
body.vgs-design .vgs-games {
	padding: 14px 0 0;
}

body.vgs-design .vgs-games .vgs-sec__head {
	display: none;
}

body.vgs-design .vgs-games__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72px;
	gap: var(--vgs-s2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 0 0 2px;
}

body.vgs-design .vgs-games__list::-webkit-scrollbar {
	display: none;
}

body.vgs-design .vgs-gtile {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 6px;
	min-width: 0;
	padding: 4px 0;
	color: var(--vgs-ink);
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

body.vgs-design .vgs-gtile:hover {
	color: var(--vgs-ink);
}

body.vgs-design .vgs-gtile__art {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-md);
	background: var(--vgs-field);
}

body.vgs-design .vgs-gtile__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.vgs-design .vgs-gtile:hover .vgs-gtile__art {
	border-color: var(--vgs-line-strong);
}

body.vgs-design .vgs-gtile__name {
	max-width: 84px;
	font-size: var(--vgs-fs-12);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-gtile__n {
	display: none;
	margin-top: -4px;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-12);
	line-height: 1.4;
}

/* ── [vgs_how] ──────────────────────────────────────────────────────────── */
body.vgs-design .vgs-how {
	padding: var(--vgs-s5) 0 0;
}

body.vgs-design .vgs-how__steps {
	display: grid;
	margin: 0;
	padding: var(--vgs-s2) var(--vgs-s4);
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-surface);
	list-style: none;
}

body.vgs-design .vgs-how__steps li {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--vgs-s3);
	margin: 0;
	padding: 10px 0;
}

body.vgs-design .vgs-how__steps li + li::before {
	content: "";
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: 19px;
	width: 2px;
	height: 20px;
	background: var(--vgs-primary-soft-2);
}

body.vgs-design .vgs-how__t {
	display: block;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-how__d {
	display: block;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-13);
	line-height: 1.7;
}

/* ── [vgs_trust] ────────────────────────────────────────────────────────── */
body.vgs-design .vgs-trust {
	margin: var(--vgs-s5) 0 0;
	padding: var(--vgs-s4);
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-surface);
}

body.vgs-design .vgs-trust__about {
	display: none;
}

body.vgs-design .vgs-trust__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vgs-s2);
	text-align: center;
}

body.vgs-design .vgs-trust__item {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 4px 0;
	color: var(--vgs-ink);
	text-decoration: none;
}

body.vgs-design a.vgs-trust__item:hover {
	color: var(--vgs-ink);
}

body.vgs-design .vgs-trust__v {
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	line-height: 1.4;
}

body.vgs-design .vgs-trust__v b {
	font-size: var(--vgs-fs-22);
	font-weight: var(--vgs-fw-display);
}

body.vgs-design .vgs-trust__l {
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-12);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-trust__l--link {
	color: var(--vgs-primary-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── [vgs_sell] ─────────────────────────────────────────────────────────── */
body.vgs-design .vgs-sell {
	display: grid;
	gap: var(--vgs-s3);
	margin: var(--vgs-s5) 0 0;
	padding: 20px;
	border: 1px solid var(--vgs-primary-soft-2);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-primary-soft);
}

body.vgs-design .vgs-sell__top {
	display: flex;
	align-items: flex-start;
	gap: var(--vgs-s3);
}

body.vgs-design .vgs-sell .vgs-plate {
	background: var(--vgs-surface);
}

body.vgs-design .vgs-sell__title {
	margin: 0;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-18);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-head);
}

body.vgs-design .vgs-sell__text {
	margin: 2px 0 0;
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-body);
}

body.vgs-design .vgs-sell__acts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vgs-s2);
}

body.vgs-design .vgs-sell__acts .vgs-btn {
	padding: 0 10px;
}

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 850px) {
	body.vgs-design .vgs-desk {
		display: inline;
	}

	body.vgs-design .vgs-sec__head {
		margin-block-end: var(--vgs-s3);
	}

	body.vgs-design .vgs-sec__title {
		font-size: var(--vgs-fs-22);
	}

	body.vgs-design .vgs-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 64px;
		align-items: center;
		padding-block: var(--vgs-s7);
	}

	body.vgs-design .vgs-hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		color: var(--vgs-on-brand-2);
		font-size: var(--vgs-fs-14);
		font-weight: var(--vgs-fw-strong);
		line-height: var(--vgs-lh-label);
	}

	body.vgs-design .vgs-hero__eyebrow .vgsd-i {
		width: 20px;
		height: 20px;
	}

	body.vgs-design .vgs-hero__title {
		margin-block-start: 10px;
		font-size: var(--vgs-fs-hero);
		line-height: 1.35;
	}

	body.vgs-design .vgs-hero__lead {
		max-width: 48ch;
		margin-block-start: 10px;
		color: var(--vgs-on-brand-2);
		font-size: var(--vgs-fs-16);
	}

	body.vgs-design .vgs-hero__lead .vgsd-i {
		display: none;
	}

	body.vgs-design .vgs-hero .vgs-search {
		max-width: 560px;
		margin-block-start: var(--vgs-s5);
	}

	body.vgs-design .vgs-hero .vgs-search input[type="search"] {
		min-height: var(--vgs-btn-lg);
	}

	body.vgs-design .vgs-hero__ctas {
		display: flex;
		margin-block-start: var(--vgs-s4);
	}

	body.vgs-design .vgs-hero__ctas .vgs-btn {
		min-height: var(--vgs-btn-lg);
		padding: 0 28px;
	}

	body.vgs-design .vgs-hero__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 24px;
		margin: 28px 0 0;
		padding: 0;
		color: var(--vgs-on-brand-2);
		font-size: var(--vgs-fs-14);
		line-height: var(--vgs-lh-label);
		list-style: none;
	}

	body.vgs-design .vgs-hero__trust li {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
	}

	body.vgs-design .vgs-hero__trust .vgsd-i {
		width: 20px;
		height: 20px;
		color: var(--vgs-on-brand);
	}

	body.vgs-design .vgs-hero__trust b {
		color: var(--vgs-on-brand);
	}

	body.vgs-design .vgs-hero .vgs-escrow {
		display: grid;
		justify-self: end;
		width: 100%;
		max-width: 460px;
	}

	body.vgs-design .vgs-games {
		padding-block-start: var(--vgs-s6);
	}

	body.vgs-design .vgs-games .vgs-sec__head {
		display: flex;
	}

	body.vgs-design .vgs-games__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--vgs-s3);
		overflow: visible;
	}

	body.vgs-design .vgs-gtile {
		gap: var(--vgs-s2);
		padding: 16px 8px 14px;
		border: 1px solid var(--vgs-line);
		border-radius: var(--vgs-r-lg);
		background: var(--vgs-surface);
	}

	body.vgs-design .vgs-gtile:hover {
		border-color: var(--vgs-line-strong);
	}

	body.vgs-design .vgs-gtile__art {
		width: 72px;
		height: 72px;
		border-radius: 14px;
	}

	body.vgs-design .vgs-gtile__name {
		max-width: none;
		font-size: var(--vgs-fs-14);
	}

	body.vgs-design .vgs-gtile__n {
		display: block;
		font-size: var(--vgs-fs-13);
	}

	body.vgs-design .vgs-how {
		padding-block-start: var(--vgs-s7);
	}

	body.vgs-design .vgs-how__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vgs-s4);
		padding: 0;
		border: 0;
		background: none;
	}

	body.vgs-design .vgs-how__steps li {
		grid-template-columns: 48px 1fr;
		padding: 20px;
		border: 1px solid var(--vgs-line);
		border-radius: var(--vgs-r-lg);
		background: var(--vgs-surface);
	}

	body.vgs-design .vgs-how__steps .vgs-plate {
		width: 48px;
		height: 48px;
	}

	body.vgs-design .vgs-how__steps li + li::before {
		inset-block-start: 50%;
		inset-inline-start: auto;
		inset-inline-end: calc(100% + 1px);
		width: 14px;
		height: 2px;
	}

	body.vgs-design .vgs-how__t {
		font-size: var(--vgs-fs-16);
	}

	body.vgs-design .vgs-how__d {
		font-size: var(--vgs-fs-14);
	}

	body.vgs-design .vgs-trust {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: var(--vgs-s6);
		align-items: center;
		margin-block-start: var(--vgs-s7);
		padding: 28px 32px;
	}

	body.vgs-design .vgs-trust__about {
		display: block;
		margin: 0;
		color: var(--vgs-ink-2);
		font-size: var(--vgs-fs-16);
		line-height: 1.9;
	}

	body.vgs-design .vgs-trust__about b {
		display: block;
		margin-block-end: 6px;
		color: var(--vgs-ink);
		font-size: var(--vgs-fs-22);
	}

	body.vgs-design .vgs-trust__v b {
		font-size: var(--vgs-fs-28);
	}

	body.vgs-design .vgs-trust__l {
		font-size: var(--vgs-fs-13);
	}

	body.vgs-design .vgs-sell {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--vgs-s5);
		margin-block-start: var(--vgs-s7);
		padding: 28px 32px;
	}

	body.vgs-design .vgs-sell .vgs-sell__top .vgs-plate {
		width: 56px;
		height: 56px;
	}

	body.vgs-design .vgs-sell__title {
		font-size: var(--vgs-fs-22);
	}

	body.vgs-design .vgs-sell__text {
		max-width: 60ch;
		font-size: var(--vgs-fs-16);
	}

	body.vgs-design .vgs-sell__acts {
		display: flex;
	}

	body.vgs-design .vgs-sell__acts .vgs-btn {
		padding: 0 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.vgs-design .vgs-btn,
	body.vgs-design .product-small.box {
		transition: none;
	}

	body.vgs-design .vgs-btn:active {
		transform: none;
	}
}