/*
 * The product card, one design for every product list: catalogs, search, front page collections, subscription
 * tiles, "recommended games" on product pages. 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.
 *
 * 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-Price-amount {
	letter-spacing: -0.02em;
}

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

.discount-badge {
	padding-top: 0.042em; /* компенсация особенностей шрифта для выравнивания по высоте */
	padding-left: 0.5em;
	padding-right: 0.65em;
	line-height: 2em;
	height: 2em;
	background: var(--wp--preset--color--custom-accent-purple);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	justify-content: center;
	font-size: clamp(14px, 0.75em, 16px);
	border-radius: 0.25em;
	white-space: nowrap; /* Prevents new line inside badge */
}

.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 next to the product
   page title and stays hidden in links */
.dlc-mark {
	margin-left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	min-height: 40px;
	width: 120px;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--wp--preset--color--custom-accent-purple);
	color: var(--wp--preset--color--primary);
	font-size: 20px;
	font-weight: 700;
}

div.product-card-info h1.wp-block-post-title {
	display: flex;
	flex-grow: 1;
	justify-content: space-between;
	align-items: flex-start;
}

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

@media screen and (max-width: 1280px) {
	div.product-card-info h1.wp-block-post-title {
		flex-direction: column;
	}

	.dlc-mark {
		margin-left: 0;
		margin-top: 6px;
		width: 90px;
		min-height: 30px;
	}
}

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

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

.wc-block-components-product-image {
	padding: 8px;
}

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

li.wc-block-product > [data-block-name="woocommerce/product-price"] .discount-badge {
	display: inline-flex !important;
	flex-shrink: 0;
	align-items: center;
	font-size: 16px !important;
	line-height: 1.2 !important;
	height: auto !important;
	padding: 0.1em 0.35em 0.1em 0.3em !important;
	border-radius: 0.25em;
}

/* 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 {
	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 0.2s ease, color 0.2s 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 {
	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 {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6h15l-1.5 9h-12L6 6z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='17' cy='20' r='1.5' fill='black'/%3E%3Cpath d='M6 6L5 3H2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6h15l-1.5 9h-12L6 6z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='17' cy='20' r='1.5' fill='black'/%3E%3Cpath d='M6 6L5 3H2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 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 */

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

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

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

/* ── 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, and the classic grid of the empty cart's "new products" block */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	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 {
		width: 120px !important;
		height: 60px !important;
	}
}