/*
 * The product card, one design for every product list: catalogs, search, front page collections, subscription
 * tiles, "recommended games" on product pages, the cart page's cross-sells and its empty state's new products, the
 * landing pages' carousels. And product prices wherever they are shown.
 *
 * The card: image, title (two lines at most), then price and an icon cart button on one row, always visible. On a
 * phone the price takes two lines (current, old) and the discount badge is left out. Hover effects only where there
 * is a pointer that hovers: on a touch screen a tap leaves :hover stuck on the card.
 *
 * The icon cart button is also the wishlist page's "В корзину" (wishlist.css lays out the rest of its rows).
 *
 * Loaded on every page. Not cards: the add-ons slider on product pages (snippet 302, [cross_sell_slider]) and the
 * order confirmation's product block keep their own styles.
 *
 * History: moved here 2026-10-22 from snippets 14, 26, 65, 77, 140, 158, 163 and the card parts of 20 and 68 (the
 * hover-button card) and 229 (the compact card of the regional catalogs). On 2026-10-22 Kirill chose the compact
 * card for every list; the hover-button card's rules went, and so did the hover scale.
 *
 * Most !important here beat rules of snippets that still print after this file; they go when those snippets do.
 */

/* ── Price, everywhere ──────────────────────────────────────────────────────── */

.wp-block-woocommerce-product-price del bdi {
	text-decoration: line-through !important;
}

/* 158 was meant to skip /playstation-plus/ and /fortnite/, but its two conditions were OR-ed, so it loaded on
   every page; it still does. */
.wc-block-components-product-price {
	font-size: 28px;
	font-style: normal;
	font-weight: 600;
	padding: 0;
	text-align: left;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 10px;
}

.wc-block-components-product-price ins,
.slick-slide .discounted-price {
	color: inherit !important;
	text-decoration: none;
	display: flex !important;
	align-items: center;
	gap: 8px;
}

.wc-block-components-product-price .woocommerce-Price-amount {
	display: inline-block;
}

/* WooCommerce 11 renders both price variants in the mini cart and hides the unused one with the hidden
   attribute; the display rules here and in snippets 60/68 (display: grid !important) and 103
   (.wc-block-cart-item__prices .wc-block-components-product-price { display: flex !important }, printed after
   this file) must not show it again */
.wc-block-components-product-price[hidden],
.wc-block-cart-item__prices .wc-block-components-product-price[hidden] {
	display: none !important;
}

/* An amount never breaks between its digits: WooCommerce separates thousands with a plain space, and a narrow column
   put "4" and "020 ₽" on two lines (the wishlist, 2026-10-22) */
.woocommerce-Price-amount {
	letter-spacing: -0.02em;
	white-space: nowrap;
}

@media (max-width: 768px) {
	div[data-block-name="woocommerce/product-price"] .woocommerce-Price-amount {
		letter-spacing: -0.05em;
	}
}

/* A sale price, wherever it shows. Snippet 22 prints it as del.base-price, then ins.discounted-price holding the price
   and the badge; one look for it (Kirill, 2026-10-22: in the wishlist the badge stuck to the price and was large; the
   product page, the cards and the lists each had grown rules of their own): the price paid, the badge after it, the
   old price last, smaller and grey. Sizes follow the price's own font size, so the one rule serves the product page
   (26px), the cards (22 and 18px) and the lists (20px). The order takes a flex row, which price containers are. */
ins.discounted-price {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	order: 1;
	color: inherit;
	text-decoration: none;
}

del.base-price {
	order: 2;
	font-size: 0.7em;
	font-weight: 500;
	color: #7A7A7A;
}

.discount-badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: auto;
	padding: 0.1em 0.35em 0.1em 0.3em;
	border-radius: 0.25em;
	background: var(--wp--preset--color--custom-accent-purple);
	color: var(--wp--preset--color--primary);
	font-size: clamp(12px, 0.65em, 16px);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.aws_result_link .discount-badge {
	display: none;
}

del.base-price span {
	text-decoration: line-through;
}

/* Grey old price, white current one */
.wc-block-components-product-price {
	text-decoration-color: #7A7A7A !important;
}

del .woocommerce-Price-amount {
	color: #7A7A7A !important;
	text-decoration-color: #7A7A7A !important;
}

del {
	text-decoration-color: #7A7A7A;
	color: #7A7A7A;
}

.wp-block-woocommerce-product-price {
	margin-top: auto;
}

/* ── "DLC" after a product's title ──────────────────────────────────────────── */

/* PHP snippet 160 adds it to every product title (the_title), wherever it is printed; it shows on the product page
   and stays hidden in links. A small chip in the title's line, after its last word: it belongs to the name (Kirill,
   2026-10-22). It was a 120 x 40 block on a line of its own, 20px in from the title (the title's flex row, meant to
   keep them side by side, lost to product.css's display: block). The snippet joins it to the last word with a
   no-break space, so it never starts a line alone. Raised 0.25em, its middle sits at the middle of the title's capitals
   (measured: within half a pixel at both sizes). */
.dlc-mark {
	display: inline-flex;
	align-items: center;
	vertical-align: 0.25em;
	margin-left: 2px;
	padding: 4px 10px;
	border-radius: 7px;
	background: var(--wp--preset--color--custom-accent-purple);
	color: var(--wp--preset--color--primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

h2.woocommerce-loop-product__title span.dlc-mark,
a span.dlc-mark {
	display: none;
}

@media screen and (max-width: 781px) {
	.dlc-mark {
		padding: 2px 6px;
		border-radius: 5px;
		font-size: 12px;
	}
}

/* ── Card ───────────────────────────────────────────────────────────────────── */

ul.wc-block-product-template__responsive > li.wc-block-product, /* "ul": beats snippet 103's slider height */
ul.wc-block-product-template > li.wc-block-product {
	height: 100%;
}

li.wc-block-product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"image image"
		"title title"
		"price button";
	column-gap: 12px;
	row-gap: 0;
	align-items: stretch;
	height: 100%;
	padding-bottom: 18px !important;
	box-sizing: border-box;
	background: #232323;
	border-radius: 20px;
	transition: background-color var(--gp-hover-out) ease;
}

/* Kill default block spacing between card children */
li.wc-block-product > *:not(:last-child) {
	margin-bottom: 0 !important;
}

li.wc-block-product > .wp-block-spacer {
	display: none;
}

.wc-block-product-template__responsive {
	grid-gap: 1em;
}

/* The 24 px between a collection's heading and its cards: in WooCommerce 10.x the layout's block gap after the
   collection's (empty) notices container; 11 removes it with this same selector. Kept, so the update does not
   move the cards. */
.wp-block-woocommerce-product-collection .wc-block-components-notices:not(:has(*)) + .wc-block-product-template {
	margin-block-start: 24px;
}

/* Product 140521 "Турецкий аккаунт PSN" stays out of the catalogs; its page redirects (PHP snippet 141) */
.products-catalog li.wc-block-product.post-140521 {
	display: none;
}

/* Image */

li.wc-block-product > [data-block-name="woocommerce/product-image"],
li.wc-block-product > .wc-block-components-product-image {
	grid-area: image;
	width: 100%;
	justify-self: stretch;
	align-self: start;
}

/* Card images only: since WooCommerce 11 the product page gallery's large image sits in the same
   wc-block-components-product-image wrapper and has its own rules in product.css */
li.wc-block-product .wc-block-components-product-image {
	padding: 8px;
}

li.wc-block-product .wc-block-components-product-image img {
	border-radius: 12px;
	max-height: 282px;
	aspect-ratio: 1 / 1;
}

/* PS Plus Extra / Deluxe badge printed by PHP snippet 138 */
.svg-badge {
	padding-left: 4%;
}

/* Title, two lines at most */

/* Left-aligned whatever the block's own alignment setting says: the subscription tiles' templates centre their
   title and price (has-text-align-center), and the card is one design everywhere */
li.wc-block-product > .wp-block-post-title {
	grid-area: title;
	justify-self: stretch;
	align-self: start;
	margin: 0 !important;
	padding: 0 14px !important;
	min-height: 2.5em;
	box-sizing: border-box;
	text-align: left;
}

/* Card titles are h3 in catalogs and h2 in "recommended games" (the block's level setting): match the block, not
   the tag */
h3.wp-block-post-title a,
li.wc-block-product > .wp-block-post-title a {
	max-height: 2.6em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wp-block-post-title a {
	text-decoration: none !important;
}

/* Price row: sale price first so it lines up with the title */

li.wc-block-product > [data-block-name="woocommerce/product-price"] {
	grid-area: price;
	width: auto !important;
	max-width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 10px 0 0 14px !important;
	align-self: center;
	justify-self: start;
	box-sizing: border-box;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 6px 8px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 22px !important;
	font-weight: 600;
	line-height: 1.2 !important;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > .woocommerce-Price-amount {
	font-size: 22px;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > del.base-price {
	display: inline !important;
	order: 2;
	font-size: 16px !important;
	font-weight: 500;
	opacity: 0.45;
	line-height: 1.25;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > del.base-price .woocommerce-Price-amount {
	font-size: inherit;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price {
	display: inline-flex !important;
	order: 1;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	color: inherit !important;
	line-height: 1.2;
	font-size: 22px !important;
}

li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price .woocommerce-Price-amount {
	font-size: 22px;
}

/* The badge itself: the sale price rule at the top of this file */
li.wc-block-product > [data-block-name="woocommerce/product-price"] .discount-badge {
	display: inline-flex !important;
}

/* Cart button: an icon chip, accent when the card is hovered or the button focused */

li.wc-block-product > div.wp-block-button,
li.wc-block-product > [data-block-name="woocommerce/product-button"] {
	grid-area: button;
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: auto !important;
	justify-content: flex-end !important;
	align-items: center !important;
	align-self: center;
	margin: 0 14px 0 0 !important;
	padding: 10px 0 0 !important;
}

.wp-block-button.wc-block-components-product-button {
	gap: unset;
	display: flex;
	z-index: 2;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button,
li.wc-block-product [data-block-name="woocommerce/product-button"] button.has-accent-background-color,
li.wc-block-product .wc-block-components-product-button__button,
li.wc-block-product .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.cross-sells-product .wc-block-components-product-button__button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button,
.woosw-list .woosw-item--atc a.button {
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1) !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
	background-image: none !important;
	color: #e7e7e7 !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: background-color var(--gp-hover-out) ease, color var(--gp-hover-out) ease;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button:focus,
li.wc-block-product .wc-block-components-product-button__button:focus,
li.wc-block-product .wp-block-button.wc-block-components-product-button .wp-block-button__link:focus,
.cross-sells-product .wc-block-components-product-button__button:focus,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button:focus,
.woosw-list .woosw-item--atc a.button:focus {
	background: var(--wp--preset--color--accent) !important;
	background-color: var(--wp--preset--color--accent) !important;
	background-image: none !important;
	color: var(--wp--preset--color--secondary, #111) !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* The button's text stays for screen readers */
li.wc-block-product [data-block-name="woocommerce/product-button"] button span {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button::before,
.cross-sells-product .wc-block-components-product-button__button::before,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button::before,
.woosw-list .woosw-item--atc a.button::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-cart) center / contain no-repeat; /* global.css */
	mask: var(--gp-icon-cart) center / contain no-repeat;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] .added_to_cart,
a.added_to_cart.wc_forward {
	display: none !important;
}

/* Hover, only with a pointer that hovers. The title changes colour with the card (the theme's links took 0.5s over
   its background's change); the timing: global.css, "Hover". */
li.wc-block-product > .wp-block-post-title > a,
.cross-sells-product .wc-block-components-product-name,
.wc-block-grid__product .wc-block-grid__product-title {
	transition: color var(--gp-hover-out) ease;
}


@media (hover: hover) {
	li.wc-block-product:hover {
		background: #383838;
		cursor: pointer;
	}

	li.wc-block-product:hover > .wp-block-post-title > a,
	.cross-sells-product:hover .wc-block-components-product-name,
	.wc-block-grid__product:hover .wc-block-grid__product-title {
		color: var(--wp--preset--color--accent) !important;
	}

	:is(.cross-sells-product, .wc-block-grid__product):hover {
		background: #383838;
	}

	li.wc-block-product:hover [data-block-name="woocommerce/product-button"] button,
	li.wc-block-product:hover [data-block-name="woocommerce/product-button"] button.has-accent-background-color,
	li.wc-block-product:hover .wc-block-components-product-button__button,
	li.wc-block-product:hover .wp-block-button.wc-block-components-product-button .wp-block-button__link,
	.cross-sells-product:hover .wc-block-components-product-button__button,
	.wc-block-grid__product:hover .wc-block-grid__product-add-to-cart .add_to_cart_button,
	.woosw-list .woosw-item--atc a.button:hover {
		background: var(--wp--preset--color--accent) !important;
		background-color: var(--wp--preset--color--accent) !important;
		background-image: none !important;
		color: var(--wp--preset--color--secondary, #111) !important;
		border: none !important;
		box-shadow: none !important;
		opacity: 1 !important;
	}
}

/* Narrower screens */

@media only screen and (max-width: 1210px) {
	li.wc-block-product {
		padding-bottom: 12px !important;
		column-gap: 10px;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price,
	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > .woocommerce-Price-amount,
	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price,
	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price .woocommerce-Price-amount {
		font-size: 18px !important;
	}

	li.wc-block-product [data-block-name="woocommerce/product-button"] button,
	li.wc-block-product .wc-block-components-product-button__button {
		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		height: 34px !important;
	}
}

/* Phones: two-line price — current | button / old price | (empty) */
@media only screen and (max-width: 768px) {
	li.wc-block-product > .wp-block-post-title {
		padding: 0 8px !important;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] {
		align-self: start;
		padding: 10px 0 0 8px !important;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price {
		flex-direction: column !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 2px;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price {
		order: 1;
		gap: 0;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > del.base-price {
		order: 2;
		display: block !important;
	}

	li.wc-block-product > [data-block-name="woocommerce/product-price"] .discount-badge {
		display: none !important;
	}

	li.wc-block-product > div.wp-block-button,
	li.wc-block-product > [data-block-name="woocommerce/product-button"] {
		align-self: start;
		margin: 0 8px 0 0 !important;
		padding: 10px 0 0 !important;
	}
}

/* ── The cart page's "Вас может заинтересовать…" ─────────────────────────────── */

/* The same card (Kirill, 2026-10-22: they were WooCommerce's own, centred, with an "ADD TO CART" bar). The Cart block
   renders them in the browser with its own markup: picture, title, rating and price in one <div>, the button after
   it. That <div> gives its children to the card's grid; the button is the chip above. The selectors weigh as much as
   WooCommerce's own for these (blocks/cart.css: 30% wide, centred, inline-block), which print earlier. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div:has(> .cross-sells-product) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1em;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"image image"
		"title title"
		"price button";
	column-gap: 12px;
	width: auto;
	margin: 0;
	padding: 0 0 18px;
	box-sizing: border-box;
	background: #232323;
	border-radius: 20px;
	text-align: left;
	transition: background-color var(--gp-hover-out) ease;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div:first-child {
	display: contents;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image {
	grid-area: image;
	margin: 0;
	padding: 8px;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
	grid-area: title;
	margin: 0;
	padding: 0 14px;
	min-height: 2.5em;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	text-align: left;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-rating-stars {
	display: none;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
	grid-area: price;
	align-self: center;
	justify-self: start;
	display: flex;
	gap: 6px 8px;
	margin: 0;
	padding: 10px 0 0 14px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price__regular {
	order: 1;
	font-size: 16px;
	font-weight: 500;
	opacity: 0.45;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
	grid-area: button;
	align-self: center;
	justify-content: flex-end;
	margin: 0 14px 0 0;
	padding: 10px 0 0;
}

@media only screen and (max-width: 1210px) {
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
		padding-bottom: 12px;
		column-gap: 10px;
	}

	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
		font-size: 18px;
	}
}

/* Phones: two to a row, as in the catalogs */
@media only screen and (max-width: 768px) {
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div:has(> .cross-sells-product) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
		padding: 0 8px;
	}

	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: 2px;
		padding: 10px 0 0 8px;
	}

	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
		align-self: start;
		margin: 0 8px 0 0;
	}
}

/* ── WooCommerce's older grid blocks: the empty cart's "Новинка в магазине" ───── */

/* The same card (Kirill, 2026-10-22: the empty cart still showed WooCommerce's own, centred, with a long "В КОРЗИНУ").
   The Newest Products block is server-rendered: its link holds the sale badge, the picture and the title, and gives them
   to the card's grid (display: contents keeps them inside the link). Any other block of this family (On Sale, Top
   Rated, Hand-picked) gets the card too. */
.wc-block-grid ul.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid.has-3-columns ul.wc-block-grid__products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-block-grid.has-2-columns ul.wc-block-grid__products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"image image"
		"title title"
		"price button";
	column-gap: 12px;
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	padding: 0 0 18px;
	box-sizing: border-box;
	border: 0;
	background: #232323;
	border-radius: 20px;
	text-align: left;
	transition: background-color var(--gp-hover-out) ease;
}

.wc-block-grid__product > .wc-block-grid__product-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image {
	grid-area: image;
	margin: 0;
	padding: 8px;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
	grid-area: title;
	align-self: start;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	margin: 0;
	padding: 0 14px;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
	grid-area: price;
	align-self: center;
	justify-self: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	padding: 10px 0 0 14px;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	grid-area: button;
	position: static;
	align-self: center;
	justify-content: flex-end;
	width: auto;
	margin: 0 14px 0 0;
	padding: 10px 0 0;
	transform: none;
}

/* The theme paints this grid's sale price in the accent */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price ins {
	color: inherit;
}

/* The sale picture over the cover's corner, as on the catalog cards. WooCommerce centres it (margin: 0 auto 12px);
   the cart page's old rules zeroed that and went with them, and the picture slid 28px in (Kirill, 2026-10-22). */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
	position: absolute;
	z-index: 1;
	margin: 0;
}

@media only screen and (max-width: 1210px) {
	.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
		padding-bottom: 12px;
		column-gap: 10px;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
		font-size: 18px;
	}
}

/* Phones: two to a row, as in the catalogs. Under 481px WooCommerce stacks a has-4-columns grid one to a row
   (.wc-block-grid.has-4-columns .wc-block-grid__products { display: block }); the has-N class here outweighs it. */
@media only screen and (max-width: 768px) {
	.wc-block-grid ul.wc-block-grid__products,
	.wc-block-grid[class*="has-"] ul.wc-block-grid__products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
		padding: 0 8px;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: 2px;
		padding: 10px 0 0 8px;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price .discount-badge {
		display: none;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
		align-self: start;
		margin: 0 8px 0 0;
	}
}

/* ── The landing pages' carousels: snippet 225 ────────────────────────────────── */

/* The same card (Kirill, 2026-10-22: "Карточки давай по всему сайту еще раз проверим"; these had a black full-bleed
   cover, bold title and price, and rose on hover). The landing templates (/ps-account-tr/, /ps-account-in/,
   /xbox-account-tr/, /ps-games-india/) show another site's products: a card is one link holding the cover, the
   "% SALE" mark, the title and the price, with no cart button. Snippet 225's rules print after this file, so these
   weigh a class more. Its carousel stays: four to a row on wide screens, scrolled by its arrows. */
.ctpl-car__track .ctpl-card {
	gap: 0;
	padding-bottom: 18px;
	overflow: visible;
	background: #232323;
	border-radius: 20px;
	transition: background-color var(--gp-hover-out) ease;
}

/* Without snippet 225's lift on hover: a tap leaves :hover stuck on a touch screen */
.ctpl-car__track .ctpl-card:hover {
	transform: none;
}

.ctpl-car__track .ctpl-card__media {
	width: auto;
	height: auto;
	min-height: 0;
	margin: 8px;
	aspect-ratio: 1 / 1;
	overflow: visible;
	background: none;
}

.ctpl-car__track .ctpl-card__media img {
	border-radius: 12px;
}

/* Its text ribbon becomes the catalog's picture (the sale badge rules below), on the card's corner */
.ctpl-car__track .ctpl-card__sale {
	top: -8px;
	left: -8px;
	padding: 0;
	transform: none;
	box-shadow: none;
}

.ctpl-car__track .ctpl-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	padding: 0 14px;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.ctpl-car__track .ctpl-card__price {
	gap: 6px 8px;
	padding: 10px 14px 0;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.ctpl-car__track .ctpl-card__price :is(.price, ins, bdi) {
	font-weight: inherit;
	color: inherit;
}

.ctpl-car__track .ctpl-card__price del {
	font-size: 16px;
}

.ctpl-car__track .ctpl-card__price .discount-badge {
	margin-left: 0;
}

@media (hover: hover) {
	.ctpl-car__track .ctpl-card:hover {
		background: #383838;
	}

	.ctpl-car__track .ctpl-card:hover .ctpl-card__title {
		color: var(--wp--preset--color--accent);
	}
}

@media only screen and (max-width: 1210px) {
	.ctpl-car__track .ctpl-card {
		padding-bottom: 12px;
	}

	.ctpl-car__track .ctpl-card__price {
		font-size: 18px;
	}
}

/* Three to a row where snippet 225 has two, so the square covers stay the catalog's size */
@media only screen and (min-width: 768px) and (max-width: 900px) {
	.ctpl-car__track .ctpl-card {
		flex-basis: calc((100% - 2.4rem) / 3);
	}
}

/* Phones: as the product page's add-ons (snippet 302), two cards and the edge of a third, swiped with a finger, no
   arrows; the price on two lines and no badge, as on the catalog cards */
@media only screen and (max-width: 767px) {
	.ctpl-products .ctpl-car__nav {
		display: none;
	}

	.ctpl-car .ctpl-car__track {
		gap: 12px;
	}

	.ctpl-car__track .ctpl-card {
		flex: 0 0 calc((100% - 12px) / 2.3);
		min-width: 0;
	}

	.ctpl-car__track .ctpl-card__title {
		padding: 0 8px;
	}

	.ctpl-car__track .ctpl-card__price {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 10px 8px 0;
	}

	.ctpl-car__track .ctpl-card__price .discount-badge {
		display: none;
	}
}

/* ── Sale badge: our picture instead of WooCommerce's text ──────────────────── */

.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge--align-right {
	left: 0;
	margin: 0;
	position: absolute;
	right: 0px;
	top: 0;
}

/* Product collection badges, the classic grid of the empty cart's "new products" block, the landing carousels' mark */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale,
.wc-block-grid__product-onsale,
.ctpl-car__track .ctpl-card__sale {
	background-image: url('https://gamepropaganda.com/wp-content/uploads/2024/05/изображение_2024-05-06_040355562.png') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	text-indent: -9999px !important; /* the picture carries the text */
	width: 134px !important;
	height: 78px !important;
	background-color: transparent !important;
	border-radius: 0px !important;
}

.woocommerce ul.products li.product .onsale {
	left: 0;
	top: 0;
}

.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
	background-color: transparent !important;
	border-radius: 0px !important;
	border: none;
	left: 0 !important;
	top: 0 !important;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge--align-left {
	left: 0 !important;
	top: 0 !important;
	border-radius: 0px !important;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
	.wc-block-components-product-sale-badge,
	.woocommerce span.onsale,
	.wc-block-grid__product-onsale,
	.ctpl-car__track .ctpl-card__sale {
		width: 120px !important;
		height: 60px !important;
	}
}