/*
 * The PS Plus page (/playstation-plus/) and the India front page, which is built from the same blocks: the
 * "Тарифы Ps Plus" picker (#psplussubblock: period pills over a list of tariff tiles per period), the
 * Essential / Extra / Deluxe blocks with their "В корзину", the lists of games in the subscription, "Как это работает"
 * and the questions. Loaded where snippet 128 "PS Plus Page" is, which still holds the rest of these pages' styles.
 *
 * Kirill, 2026-10-23: since the one product card (cards.css) the page looked broken on a phone: the tariff tiles too
 * narrow for their price and cart, the pills at the screen edges with wide gaps between them, the blocks at the
 * edges, the blocks' button WooCommerce's own. Tidied, not redesigned. Left as they are on purpose: the games'
 * "Оформить подписку", shown on hovering the card (snippet 128).
 */

/* No wishlist heart on the tariff tiles: they are a choice of plan, not product cards, and on a phone the heart covered
   the plan's name on the tile (Kirill, 2026-10-23). storefront.php gives every card list its hearts; subscriptions in
   other lists keep theirs. */
#psplussubblock .woosw-btn {
	display: none;
}

/* The cards' covers with the cards' top corners (cards.css): snippet 128 rounds the pictures of #psplussub's lists all
   round, 12px, with an id, and on the cover running to the card's edges they showed in its corners */
#psplussub li.wc-block-product .wc-block-components-product-image img {
	border-radius: var(--gp-card-radius) var(--gp-card-radius) 0 0;
}

/* ── Essential / Extra / Deluxe ─────────────────────────────────────────────── */

/* One card: the coloured head joined to the list, both had all four corners rounded and stood one on the other
   (Kirill, 2026-10-23: either apart or joined) */
.wp-block-column:has(> .wp-block-group > .psplusproduct) > .wp-block-group:first-child {
	border-bottom-left-radius: 0 !important; /* the group's own setting, inline */
	border-bottom-right-radius: 0 !important;
}

.wp-block-group:has(> .psplusproduct) {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	padding-bottom: 32px !important; /* was the block's spacing-80 (81px) under the button's 24 and its wrapper's 12 */
}

/* The button as the page's other buttons: snippet 128 shaped it for an <a>, WooCommerce now renders a <button>, and
   the theme's ".woocommerce button.button" made it a square upper-case outline */
.psplusproduct .psplusbutton {
	margin-bottom: 0;
}

.psplusproduct .psplusbutton .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 50px;
	margin-bottom: 0 !important; /* the block's own setting, inline */
	padding: 0 24px;
	border: none;
	border-radius: 50px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--secondary);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 781px) {

	/* ── The tariff picker ─────────────────────────────────────────────────────── */

	/* The pills: one row inside the gutter, three equal parts (they were sized to their words, centred with 24px
	   between them, the outer ones 2-4px from the screen edges). The same height whichever is chosen: the page's script
	   draws the chosen one's frame as a 2px border, which made it 4px taller than the others. */
	#psplussubblock .psplusbuttonblock {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px !important; /* snippet 128: 15px !important up to 390px */
		margin-left: var(--gp-phone-gutter) !important; /* WordPress's constrained layout: auto !important */
		margin-right: var(--gp-phone-gutter) !important;
	}

	#psplussubblock .psplusbuttonblock > .pssub {
		height: 44px;
		margin: 0;
		box-sizing: border-box;
	}

	#psplussubblock .psplusbuttonblock > .pssub > .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0 !important; /* the block's own setting, inline */
		box-sizing: border-box;
		white-space: nowrap;
	}

	/* The tiles as rows, the cart's and the wishlist's (Kirill, 2026-10-23): picture 96px on the left, the name at the
	   top, the price and the cart along the picture's bottom edge. Three to a row they were 117px wide on a 393px
	   phone, the cart over the price and the name cut to "Подписка PlayStatio…". */
	#psplussubblock #psplussub ul.wc-block-product-template { /* over snippet 128's three columns, #psplussub too */
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	#psplussubblock li.wc-block-product {
		grid-template-columns: 96px minmax(0, 1fr) auto;
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"image title title"
			"image price button";
		column-gap: 12px;
		padding: 8px !important; /* cards.css: 12px !important at the bottom */
	}

	#psplussubblock li.wc-block-product .wc-block-components-product-image {
		padding: 0;
	}

	/* A row's picture rounded all round, as before the cards' covers ran to their edges (cards.css) */
	#psplussubblock li.wc-block-product .wc-block-components-product-image img {
		border-radius: 12px;
	}

	#psplussubblock li.wc-block-product > .wp-block-post-title {
		min-height: 0;
		padding: 2px 0 0 !important; /* 2px lower, for the picture's rounded corners, as the lists' names (cart-common.css) */
	}

	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] {
		align-self: end;
		padding: 0 !important;
	}

	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price,
	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > .woocommerce-Price-amount,
	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price,
	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > ins.discounted-price .woocommerce-Price-amount {
		font-size: 20px !important; /* the lists' price on a phone; cards.css: 18px !important */
	}

	/* A sale's old price over the price, as in the lists; a column up to 781px (cards.css makes it one up to 768px) */
	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price {
		flex-direction: column !important;
		align-items: flex-start;
		gap: 2px;
	}

	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-price"] .wc-block-components-product-price > del.base-price {
		order: 0;
	}

	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-button"] {
		align-self: end;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* No 12px over the button here: the cart's tick (cards.css) on its corner */
	#psplussubblock li.wc-block-product > [data-block-name="woocommerce/product-button"]:has(> button.gp-in-cart)::after {
		top: -5px;
	}

	/* ── The gutter ────────────────────────────────────────────────────────────── */

	/* The blocks, their lead paragraphs, the subscription badges over the games, "Как это работает" and the questions
	   ran to the screen edges. The cover behind "Что такое PS Plus?" stays full width. */
	.wp-site-blocks > .wp-block-group:is(:has(.psplusproduct), :has(.subgamelist), :has(.hiwblock), :has(.faqdetails)) {
		padding-left: var(--gp-phone-gutter) !important;
		padding-right: var(--gp-phone-gutter) !important;
	}

	/* The games' lists inside it: their own 10px (layout.css) goes */
	.wp-site-blocks > .wp-block-group:has(.subgamelist) ul.wc-block-product-template__responsive {
		margin-left: 0;
		margin-right: 0;
	}

	/* The two badges side by side ("DELUXE", "EXTRA"): snippet 128's 15em each was wider than their columns */
	.pssubtypeincolumn > .pssubtypegroup {
		width: 100%;
		max-width: 15em;
	}
}

/* A long link in an answer (https://t.me/GamePropagandaCare in "Мне не отвечают в боте") ran 54px past a phone's
   edge, cut off: it breaks where it has to */
.faqdetails {
	overflow-wrap: anywhere;
}