/*
 * The product card, one design for every product list: catalogs, search, front page collections, subscription
 * tiles (on a phone the PS Plus tariff picker lays them out as rows: ps-plus.css), "recommended games" and the add-ons
 * 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 order confirmation's product block keeps its 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). The snippet joins it to the last word with a no-break space, so it never starts a line alone. Its size
   and its place in the line: the text badge's rule (global.css); here only its look. */
.dlc-mark {
	margin-left: 2px;
	background: var(--wp--preset--color--custom-accent-purple);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

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

/* A phone's title is 18px: a larger share keeps the mark readable (12px, as before) */
@media screen and (max-width: 781px) {
	.dlc-mark {
		--gp-badge-scale: 0.66;
	}
}

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

/* The card's measures, one set for every card markup: the blocks' cards, the cart's cross-sells, the older grid, the
   landing carousels. One inset for the card's insides on every side but the cover's (the title, the price, both
   buttons, the foot), and a corner concentric with the buttons': the card's radius is the inset plus the buttons'
   8px, the outer radius being the inner one plus the gap between them (Kirill, 2026-10-25: "согласовать скругления").
   The cover runs to the card's edges, its top corners the card's (Kirill, 2026-10-25: no frame round the picture).
   12px on wide screens, 8px on a phone and on the small cards (the product page's six-column rows, the cart). */
:is(li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card) {
	--gp-card-inset: 12px;
	--gp-card-chip: 36px;
	--gp-card-radius: calc(var(--gp-card-inset) + 8px);
	/* Under the pointer the whole card lightens: the cover mostly, the card's ground only a little. Without a frame
	   round the cover, a lighter ground alone lit just the strip under the picture (Kirill, 2026-10-26: "подсвечивается
	   только нижняя часть"). */
	--gp-card-hover: #2e2e2e;
	--gp-card-cover-hover: 0.35; /* the cover's soft-light layer, below */
	--gp-card-cover-colour: saturate(1.25);
}

/* The cover lightens with the card: a white layer over it in soft light lifts its middle tones and leaves its white
   and black as they are. brightness() pushed everything lighter than about 80% white to plain white, and light covers
   lost their detail (Kirill, 2026-10-26: "на белых карточках пересветы"). Soft light barely shows on a light cover,
   which has few middle tones, so the colours also get a quarter richer (Kirill chose it, 2026-10-26). The layer covers
   the picture only: the image wrappers carry the inset under it as padding (the landing carousels' as margin). */
li.wc-block-product .wc-block-components-product-image,
.cross-sells-product .wc-block-components-product-image,
.wc-block-grid__product .wc-block-grid__product-image,
.ctpl-car__track .ctpl-card__media {
	position: relative;
}

li.wc-block-product .wc-block-components-product-image::after,
.cross-sells-product .wc-block-components-product-image::after,
.wc-block-grid__product .wc-block-grid__product-image::after,
.ctpl-car__track .ctpl-card__media::after {
	content: "";
	position: absolute;
	inset: 0 0 var(--gp-card-inset);
	border-radius: var(--gp-card-radius) var(--gp-card-radius) 0 0;
	background: #fff;
	mix-blend-mode: soft-light;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--gp-hover-out) ease;
}

.ctpl-car__track .ctpl-card__media::after {
	inset: 0;
}

li.wc-block-product .wc-block-components-product-image img,
.cross-sells-product .wc-block-components-product-image img,
.wc-block-grid__product .wc-block-grid__product-image img,
.ctpl-car__track .ctpl-card__media img {
	transition: filter var(--gp-hover-out) ease;
}

@media only screen and (max-width: 768px) {
	:is(li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card) {
		--gp-card-inset: 8px;
	}
}

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: var(--gp-card-inset) !important;
	box-sizing: border-box;
	background: #232323;
	border-radius: var(--gp-card-radius);
	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;
}

/* Closer on a phone (snippet 60 until 2026-10-27). "ul" and both classes: over snippet 103's 0.7em on the front
   page's carousels (.mpsproductslide .wc-block-product-template__responsive). The PS Plus tariffs keep their 8px
   (ps-plus.css), which the snippet's !important used to override. */
@media (max-width: 781px) {
	ul.wc-block-product-template.wc-block-product-template__responsive {
		grid-gap: 0.7rem;
	}
}

/* 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: 0 0 var(--gp-card-inset);
}

li.wc-block-product .wc-block-components-product-image img {
	border-radius: var(--gp-card-radius) var(--gp-card-radius) 0 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Title, two lines at most */

/* Left-aligned and regular weight whatever the block's own settings say: the subscription tiles' templates centre
   their title and price (has-text-align-center), the front page's carousels set no weight, so their h3 was bold
   (Kirill, 2026-10-25), 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 var(--gp-card-inset) !important;
	min-height: 2.5em;
	box-sizing: border-box;
	font-weight: 400;
	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: the old price above the price, as in the cart's and the wishlist's rows, and the price with the cart button
   at the card's foot, so the prices of a row stand on one line, sale or not (Kirill, 2026-10-24/25: the price at the
   button's middle "did not get along" with it; the same on every width). The price's line is its font size high
   (line-height 1) and ends 2px above the button's bottom (moved up in place, so the card's height does not change),
   which puts the digits 5px above that edge: with the button's 8px rounding and the digits' weight they look level
   (Kirill, 2026-10-25: at 3px they looked low; gp-docs design/interface.md, "Ровняем по видимому краю"). The old price's line is
   line-height 1 too and sits right on the price's: about 5px between them by the letters (it was 11px, and a card
   with a one-line title had a hole under it, Kirill, 2026-10-25). Every card keeps the old price's line (min-height:
   16px and the price's), so a card on sale and one without are the same height; the price and the button keep 12px
   of room under the title. The same for the cart's cross-sells, the
   empty cart's grid and the landing carousels below. */

li.wc-block-product > [data-block-name="woocommerce/product-price"] {
	grid-area: price;
	position: relative;
	bottom: 2px;
	width: auto !important;
	max-width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 12px 0 0 var(--gp-card-inset) !important;
	align-self: end;
	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: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	gap: 0;
	min-height: 38px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 22px !important;
	font-weight: 600;
	line-height: 1 !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: block !important;
	order: 1;
	font-size: 16px !important;
	font-weight: 500;
	opacity: 0.45;
	line-height: 1;
}

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: 2;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	color: inherit !important;
	line-height: 1;
	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: relative !important; /* holds the button's "in the cart" tick */
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: auto !important;
	justify-content: flex-end !important;
	align-items: center !important;
	align-self: end;
	margin: 0 var(--gp-card-inset) 0 0 !important;
	padding: 12px 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: var(--gp-card-chip, 36px) !important;
	min-width: var(--gp-card-chip, 36px) !important;
	max-width: var(--gp-card-chip, 36px) !important;
	height: var(--gp-card-chip, 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;
}

/* The button's states (Kirill, 2026-10-25: "нет никакого фидбека о нажатии"). While the product is being added, the
   icon gives way to a turning ring, as on the product page's button (product.css), and back. Once the server took it
   (the cart counts the product in before it answers; the ring covers that time), the button stays grey with the
   accent tick on its corner, the wishlist's "in the cart" (wishlist.css): a done action does not ask to be tapped
   again; a tap on it opens the mini cart. After a reload too. Our marks on the Interactivity API button
   (js/card-cart-buttons.js); the cross-sells' (React) and the older grid's (jQuery) mark theirs loading, and the card
   leaves its list once added. */
li.wc-block-product [data-block-name="woocommerce/product-button"] button::before,
li.wc-block-product [data-block-name="woocommerce/product-button"] button::after,
.cross-sells-product .wc-block-components-product-button__button::before,
.cross-sells-product .wc-block-components-product-button__button::after,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button::before,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button::after {
	transition: opacity 0.2s ease;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button::after,
.cross-sells-product .wc-block-components-product-button__button::after,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	font-family: inherit;
	opacity: 0;
	animation: gp-card-cart-ring 1s linear infinite;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button.gp-adding::before,
.cross-sells-product .wc-block-components-product-button__button.loading::before,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button.loading::before {
	opacity: 0;
}

li.wc-block-product [data-block-name="woocommerce/product-button"] button.gp-adding::after,
.cross-sells-product .wc-block-components-product-button__button.loading::after,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .add_to_cart_button.loading::after {
	opacity: 1;
}

@keyframes gp-card-cart-ring {
	to {
		transform: rotate(360deg);
	}
}

/* The tick sits on the button's holder, as the button clips what leaves its box. The holder's 12px over the button
   (the chip's rule above) puts the tick 5px over the button's corner, as in the wishlist. Its ring is the card's
   colour, which changes under the pointer. Over the button, whose own markup gives it z-index 2: under it, the tick
   only showed through the grey chip and the accent one covered it (Kirill, 2026-10-25). */
li.wc-block-product > [data-block-name="woocommerce/product-button"]:has(> button.gp-in-cart)::after {
	content: "";
	position: absolute;
	top: 7px;
	right: -5px;
	z-index: 3;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gp-badge-tick); /* global.css */
	box-shadow: 0 0 0 2px #232323;
	transition: box-shadow var(--gp-hover-out) ease;
}

/* A product already in the cart: its button stays as it is under the pointer and after a tap, the grey chip with the
   tick (Kirill, 2026-10-25: "можно ничего не делать вообще по наведению с кнопкой, когда уже в корзине"). Only the
   keyboard's focus still lights it, so the focus shows; the tick then turns dark (global.css). */
li.wc-block-product [data-block-name="woocommerce/product-button"] button.wc-block-components-product-button__button.gp-in-cart:not(:focus-visible) {
	background: rgba(255, 255, 255, 0.1) !important; /* over the chip's !important accent on focus */
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #e7e7e7 !important;
}

li.wc-block-product > [data-block-name="woocommerce/product-button"]:has(> button.gp-in-cart:focus-visible)::after {
	background: var(--gp-badge-tick-on-accent);
}

@media (hover: hover) {
	li.wc-block-product:hover [data-block-name="woocommerce/product-button"] button.wc-block-components-product-button__button.gp-in-cart:not(:focus-visible) {
		background: rgba(255, 255, 255, 0.1) !important; /* over the card's hover accent */
		background-color: rgba(255, 255, 255, 0.1) !important;
		color: #e7e7e7 !important;
	}

	li.wc-block-product:hover > [data-block-name="woocommerce/product-button"]:has(> button.gp-in-cart)::after {
		box-shadow: 0 0 0 2px var(--gp-card-hover);
		transition-duration: var(--gp-hover-in);
	}
}


/* 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: var(--gp-card-hover);
		cursor: pointer;
	}

	li.wc-block-product:hover .wc-block-components-product-image::after,
	.cross-sells-product:hover .wc-block-components-product-image::after,
	.wc-block-grid__product:hover .wc-block-grid__product-image::after,
	.ctpl-car__track .ctpl-card:hover .ctpl-card__media::after {
		opacity: var(--gp-card-cover-hover);
	}

	li.wc-block-product:hover .wc-block-components-product-image img,
	.cross-sells-product:hover .wc-block-components-product-image img,
	.wc-block-grid__product:hover .wc-block-grid__product-image img,
	.ctpl-car__track .ctpl-card:hover .ctpl-card__media img {
		filter: var(--gp-card-cover-colour);
	}

	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: var(--gp-card-hover);
	}

	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 {
		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-price"] .wc-block-components-product-price {
		min-height: 34px;
	}
}

/* Phones: narrower insides, and no discount badge */
@media only screen and (max-width: 768px) {
	/* Titles 15px in every card on a phone (Kirill, 2026-10-24: 18px took two full lines of a 157-181px card).
	   !important over the blocks' font-size presets. */
	li.wc-block-product > .wp-block-post-title,
	li.wc-block-product > .wp-block-post-title a,
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title,
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title,
	.ctpl-car__track .ctpl-card__title {
		font-size: 15px !important;
	}

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

/* ── The cart page's cross-sells ("рекомендуемые товары"; the heading: cart-page.css) */

/* 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. */
/* Three to a row, at most 200px each, on the left, with the small card of the product page's rows (Kirill,
   2026-10-25): three across the cart's column (250px at 1440px) outweighed the cart's own lines, four (139-180px) were
   too narrow for their titles. Narrower where the column is (189px at 1024px). */
.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, 200px));
	gap: 14px;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	--gp-card-inset: 8px; /* the small card's, as the product page's six-column rows */
	--gp-card-chip: 34px;
	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: 10px;
	width: auto;
	margin: 0;
	padding: 0 0 var(--gp-card-inset);
	box-sizing: border-box;
	background: #232323;
	border-radius: var(--gp-card-radius);
	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;
}

/* No space of WooCommerce's under the picture and the title: 16px each (blocks/cart.css), with a div in the selector
   since WooCommerce 11, so it outweighed the margin: 0 below. The cards stood 32px taller than the catalogs', the
   price sunk in the space (Kirill, 2026-10-23: "вытянутость карточек"). This weighs as WooCommerce's and prints later. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div :is(.wc-block-components-product-image, .wc-block-components-product-title) {
	margin: 0;
}

.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: 0 0 var(--gp-card-inset);
}

.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: var(--gp-card-radius) var(--gp-card-radius) 0 0;
}

.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 var(--gp-card-inset);
	min-height: 2.5em;
	font-size: 15px;
	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;
}

/* The price as the cards' above: the old one (__regular) over the price (__value), at the card's foot. The div in the
   selector: WooCommerce's display: block for it has one too (blocks/cart.css), and a price without an old one stuck to
   the top of its room (Kirill, 2026-10-25) */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wc-block-components-product-price {
	grid-area: price;
	position: relative;
	bottom: 2px;
	align-self: end;
	justify-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0;
	min-height: 34px;
	margin: 0;
	padding: 12px 0 0 var(--gp-card-inset);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
}

.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;
	line-height: 1;
	opacity: 0.45;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price__value {
	order: 2;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
	grid-area: button;
	align-self: end;
	justify-content: flex-end;
	margin: 0 var(--gp-card-inset) 0 0;
	padding: 12px 0 0;
}

/* 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;
	}
}

/* ── 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 var(--gp-card-inset);
	box-sizing: border-box;
	border: 0;
	background: #232323;
	border-radius: var(--gp-card-radius);
	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: 0 0 var(--gp-card-inset);
}

.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: var(--gp-card-radius) var(--gp-card-radius) 0 0;
}

.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 var(--gp-card-inset);
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

/* The price as the cards' above: the old one over the price, at the card's foot */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
	grid-area: price;
	position: relative;
	bottom: 2px;
	align-self: end;
	justify-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0;
	min-height: 38px;
	margin: 0;
	padding: 12px 0 0 var(--gp-card-inset);
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price > :is(ins.discounted-price, .woocommerce-Price-amount) {
	order: 2;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price > del.base-price {
	order: 1;
	line-height: 1;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	grid-area: button;
	position: static;
	align-self: end;
	justify-content: flex-end;
	width: auto;
	margin: 0 var(--gp-card-inset) 0 0;
	padding: 12px 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 {
		column-gap: 10px;
	}

	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
		min-height: 34px;
		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-price .discount-badge {
		display: none;
	}
}

/* ── 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: var(--gp-card-inset);
	overflow: visible;
	background: #232323;
	border-radius: var(--gp-card-radius);
	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: 0 0 var(--gp-card-inset);
	aspect-ratio: 1 / 1;
	overflow: visible;
	background: none;
}

.ctpl-car__track .ctpl-card__media img {
	border-radius: var(--gp-card-radius) var(--gp-card-radius) 0 0;
}

/* 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: 0;
	left: 0;
	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 var(--gp-card-inset);
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

/* No cart button here: the price at the card's foot, the old one above, as on the cards above */
.ctpl-car__track .ctpl-card__price {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0;
	min-height: 38px;
	margin-top: auto;
	padding: 12px var(--gp-card-inset) 0;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.ctpl-car__track .ctpl-card__price > ins.discounted-price {
	order: 2;
}

.ctpl-car__track .ctpl-card__price > del.base-price {
	order: 1;
	line-height: 1;
}

.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: var(--gp-card-hover);
	}

	.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__price {
		min-height: 34px;
		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, 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__price .discount-badge {
		display: none;
	}
}

/* ── The product page's add-ons: shortcodes/addons-row ──────────────────────── */

/* The cards are a Product Collection's, the rules above. Wide screens: as many columns as "Рекомендуемые игры" under
   them, the cards the same size whatever their number: six over 1210px (Kirill, 2026-10-25: four were too big), four
   from 1024px. As many add-ons as columns or fewer: all of them; more: one card less, and in the last column the next
   one fading out to the right under "+N", a link to the full list. Narrower: a row swiped with a finger (two cards and
   the edge of a third on a phone), ten cards, then the eleventh's left part (--gp-addons-edge) fading out the same
   way. The module prints the cards, the link and a count for each layout only when there are more. */
.gp-addons {
	--gp-addons-gap: 14px;
	--gp-addons-columns: 6;
	--gp-addons-fade: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.05) 70%, transparent 88%);
}

.gp-addons .cross-sell-slider-header {
	margin: 0;
	font-family: var(--wp--preset--font-family--onest);
	font-size: 26px;
}

.gp-addons ul.gp-addons__cards {
	display: grid !important; /* over the collection's own responsive grid */
	grid-template-columns: repeat(var(--gp-addons-columns), minmax(0, 1fr));
	gap: var(--gp-addons-gap);
	margin: 20px 0 0; /* 28px by the letters under the heading, as "Рекомендуемые игры" (product.css) */
	padding: 0;
	container-type: inline-size;
}

.gp-addons ul.gp-addons__cards > li.wc-block-product:nth-child(n+7),
.gp-addons .gp-addons__count,
.gp-addons:not(.gp-addons--more-xl) .gp-addons__more {
	display: none;
}

.gp-addons .gp-addons__count--xl {
	display: inline;
}

/* The edge: the last column's card, fading out to the right, in the cell the link shares with it */
@media only screen and (min-width: 1211px) {
	.gp-addons--more-xl ul.gp-addons__cards > li.wc-block-product:nth-child(6) {
		grid-column: 6;
		grid-row: 1;
		overflow: hidden;
		-webkit-mask-image: var(--gp-addons-fade);
		mask-image: var(--gp-addons-fade);
		pointer-events: none;
	}

	/* The edge card is the next product's; its heart and cart button would sit under the fade */
	.gp-addons--more-xl ul.gp-addons__cards > li.wc-block-product:nth-child(6) :is(.woosw-btn, [data-block-name="woocommerce/product-button"]) {
		visibility: hidden;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1210px) {
	.gp-addons {
		--gp-addons-columns: 4;
	}

	.gp-addons ul.gp-addons__cards > li.wc-block-product:nth-child(n+5),
	.gp-addons .gp-addons__count--xl {
		display: none;
	}

	.gp-addons.gp-addons--more-wide .gp-addons__more {
		display: list-item;
	}

	.gp-addons .gp-addons__count--wide {
		display: inline;
	}

	.gp-addons--more-wide ul.gp-addons__cards > li.wc-block-product:nth-child(4) {
		grid-column: 4;
		grid-row: 1;
		overflow: hidden;
		-webkit-mask-image: var(--gp-addons-fade);
		mask-image: var(--gp-addons-fade);
		pointer-events: none;
	}

	.gp-addons--more-wide ul.gp-addons__cards > li.wc-block-product:nth-child(4) :is(.woosw-btn, [data-block-name="woocommerce/product-button"]) {
		visibility: hidden;
	}
}

.gp-addons__more {
	grid-column: var(--gp-addons-columns);
	grid-row: 1;
	position: relative;
	z-index: 3;
	list-style: none;
}

.gp-addons__more a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
	padding-right: 18px;
	box-sizing: border-box;
	color: var(--wp--preset--color--primary);
	text-decoration: none !important;
}

.gp-addons__count {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	transition: color var(--gp-hover-out) ease;
}

.gp-addons__arrow {
	width: 24px;
	height: 24px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-arrow-right) center / contain no-repeat; /* global.css */
	mask: var(--gp-icon-arrow-right) center / contain no-repeat;
	transition: background-color var(--gp-hover-out) ease;
}

@media (hover: hover) {
	.gp-addons__more a:hover .gp-addons__count {
		color: var(--wp--preset--color--accent);
	}

	.gp-addons__more a:hover .gp-addons__arrow {
		background-color: var(--wp--preset--color--accent);
	}
}

/* Tablets and phones: the swiped row, from the gutter to the screen's edges (--gp-phone-gutter, layout.css) */
@media only screen and (max-width: 1023px) {
	.gp-addons {
		--gp-addons-gap: 12px;
		--gp-addons-edge: 100px;
		--gp-addons-card: calc((100cqw - 2 * var(--gp-addons-gap)) / 3.3);
	}

	.gp-addons ul.gp-addons__cards {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gp-phone-gutter, 10px);
		padding-inline: var(--gp-phone-gutter, 10px);
		/* to the screen's edges; !important over WordPress's margin: auto !important in constrained groups */
		max-width: none;
		margin-left: calc(-1 * var(--gp-phone-gutter, 10px)) !important;
		margin-right: calc(-1 * var(--gp-phone-gutter, 10px)) !important;
		scrollbar-width: none;
	}

	.gp-addons ul.gp-addons__cards::-webkit-scrollbar {
		display: none;
	}

	.gp-addons ul.gp-addons__cards > li.wc-block-product:nth-child(n) {
		display: grid;
		flex: 0 0 var(--gp-addons-card);
		height: auto;
		scroll-snap-align: start;
	}

	.gp-addons ul.gp-addons__cards > li.wc-block-product:nth-child(n+12) {
		display: none;
	}

	/* What the wide row does with its last column's card, the swiped one does with the eleventh */
	.gp-addons--more-row ul.gp-addons__cards > li.wc-block-product:nth-child(11) {
		flex-basis: var(--gp-addons-edge);
		grid-template-columns: var(--gp-addons-card) 0;
		column-gap: 0;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.05) 62%, transparent 78%);
		mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.05) 62%, transparent 78%);
		scroll-snap-align: none;
		pointer-events: none;
	}

	.gp-addons--more-row ul.gp-addons__cards > li.wc-block-product:nth-child(11) :is(.woosw-btn, [data-block-name="woocommerce/product-button"]) {
		visibility: hidden;
	}

	.gp-addons__more {
		flex: 0 0 var(--gp-addons-edge);
		margin-left: calc(-1 * (var(--gp-addons-edge) + var(--gp-addons-gap))); /* over the edge card */
		scroll-snap-align: end;
	}

	.gp-addons.gp-addons--more-row .gp-addons__more {
		display: list-item;
	}

	.gp-addons:not(.gp-addons--more-row) .gp-addons__more {
		display: none;
	}

	.gp-addons__more a {
		padding-right: 14px;
	}

	.gp-addons .gp-addons__count--xl {
		display: none;
	}

	.gp-addons .gp-addons__count--row {
		display: inline;
		font-size: 26px;
	}
}

@media only screen and (max-width: 767px) {
	.gp-addons {
		--gp-addons-card: calc((100cqw - var(--gp-addons-gap)) / 2.3);
	}
}

/* ── The product page's rows: six to a row on wide screens ──────────────────── */

/* The add-ons and "Рекомендуемые игры" (the template's related collection, six products: tools/migrations/
   2026-10-25-related-six.php) six to a row over 1210px, four from 1024px, and the related ones four on a phone, two
   rows of two (Kirill, 2026-10-25). Six columns make a card about 197px wide: its price, button and spacing are the
   narrower screens' (see "Narrower screens"), or a sale price with its badge would not fit beside the button. */
@media only screen and (min-width: 1211px) {
	body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection > ul.wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 14px;
	}

	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) li.wc-block-product {
		--gp-card-inset: 8px; /* the small card's */
		--gp-card-chip: 34px;
		column-gap: 10px;
	}

	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price,
	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > .woocommerce-Price-amount,
	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price,
	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) 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;
	}

	:is(.gp-addons, body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection) li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price {
		min-height: 34px;
	}
}

@media only screen and (max-width: 1210px) {
	body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection > ul.wc-block-product-template > li.wc-block-product:nth-child(n+5) {
		display: none;
	}
}

/* The collection's own grid follows its six columns down to the phone breakpoint: four here */
@media only screen and (min-width: 768px) and (max-width: 1210px) {
	body.single-product .is-layout-constrained > .wp-block-woocommerce-product-collection > ul.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

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

/* In catalogs only (Kirill, 2026-10-24): there it helps pick a sale out of hundreds of products. On the other lists —
   the front page, a product page's lists, the cart, the landings — the price row already says it (the badge, the old
   price), and the picture took a corner of every cover. Catalogs, the shop and searches are archive pages. */
body:not(.archive) :is(li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card) :is(.wc-block-components-product-sale-badge, .wc-block-grid__product-onsale, .ctpl-card__sale, .onsale) {
	display: none !important;
}

.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;
	}
}