/*
 * The gutter: a page's content keeps 10px from the screen edges, the gap the catalog's product cards have always had
 * (Kirill, 2026-10-22). Before this, pages ranged from 0 (the cart, the catalog's title and search) to 33px (the
 * product page). Three parts:
 *  - up to 781px (where WordPress stacks columns), each kind of page by its own rules (below);
 *  - 782-1271px, one rule for every page: up to the content's widest (the catalog's 1252px) it touched both edges
 *    while the header kept its 10px (2026-10-23);
 *  - the cart, the checkout and the account at every width (the end of this file).
 *
 * The theme has no page-wide padding (no root padding, no has-global-padding), so each kind of page sets its own;
 * --gp-phone-gutter is the one number they share. giftcard-checkout/views/giftcard-checkout/giftcard-checkout-page.css
 * and shortcodes/gp-woof/gp-woof.css read it too. Covers, banners and other full-width backgrounds stay full width.
 *
 * !important only where the value replaced is the block's own setting (an inline style) or WordPress's
 * !important margin of constrained layouts.
 */

:root {
	--gp-phone-gutter: 10px;
}

@media (max-width: 781px) {

	/* ── Lists of product cards ──────────────────────────────────────────────── */

	/* Snippet 60 "Styles for mobile version" gives every card list this margin on phones, but inside a constrained
	   group WordPress's own "margin: auto !important" wins and the cards touched the screen edges (the PS Plus
	   tariffs on the India front page and on /playstation-plus/) */
	.is-layout-constrained > ul.wc-block-product-template__responsive {
		margin-left: var(--gp-phone-gutter) !important;
		margin-right: var(--gp-phone-gutter) !important;
	}

	/* Front page carousels (cb-carousel .mpsproductslide): the slide carries the gutter, so the cards line up with
	   the catalog's (they were at 5px); the group around the carousel adds none of its own */
	.wp-block-group:has(> .mpsproductslide) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.wp-block-cb-carousel.mpsproductslide .wp-block-cb-slide.slick-slide { /* over a snippet's 4.5px on .wp-block-cb-carousel .slick-slide */
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	.mpsproductslide ul.wc-block-product-template {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ── Catalogs: shop, categories, search, on every site ───────────────────── */

	/* The page's own group carries the gutter; the cards keep their place (snippet 60's margin goes), the
	   breadcrumbs, title, chips, search and result count move from 0-6px to it. The main site's and Xbox's
	   catalogs wrap it in a template part; PS IN's, /digital/'s and the searches put the group (alignfull) straight
	   under .wp-site-blocks, and were left at 0 for an afternoon (Kirill, 2026-10-22). */
	body.archive.woocommerce .wp-site-blocks > .wp-block-template-part:not(header):not(footer) > .wp-block-group,
	body.archive.woocommerce .wp-site-blocks > .wp-block-group.alignfull {
		padding-left: var(--gp-phone-gutter) !important;
		padding-right: var(--gp-phone-gutter) !important;
	}

	body.archive.woocommerce .wp-block-column,
	body.archive.woocommerce .wp-block-group.is-content-justification-space-between {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* The catalog's own search field: the header's magnifier opens the same search (Kirill, 2026-10-22). The header's
	   field (.searchblock) stays. The row of the count and the sorting under it loses its 20px top padding, which
	   stood it off the field: without the field it left a hole under the chips (same day). */
	body.archive.woocommerce .aws-container:not(.searchblock .aws-container) {
		display: none;
	}

	body.archive.woocommerce .wp-block-column > .wp-block-group.is-content-justification-space-between:has(+ .wp-block-woocommerce-product-collection) {
		padding-top: 0 !important;
	}

	body.archive.woocommerce ul.wc-block-product-template {
		margin-left: 0;
		margin-right: 0;
	}

	/* The banner slides have 5px of padding each side: the pictures meet the gutter */
	body.archive.woocommerce .top-banners {
		margin-left: -5px !important;
		margin-right: -5px !important;
	}

	/* ── Product page ────────────────────────────────────────────────────────── */

	/* Was 33px (the group's own padding); the recommended cards sat 10px further in */
	body.single-product .wp-site-blocks > .wp-block-group.product > .wp-block-group {
		padding-left: var(--gp-phone-gutter) !important;
		padding-right: var(--gp-phone-gutter) !important;
	}

	body.single-product ul.wc-block-product-template {
		margin-left: 0;
		margin-right: 0;
	}

	/* ── Landing pages: snippet 225 ──────────────────────────────────────────── */

	/* /ps-account-tr/ and the other landing templates ran their banner and carousel to the screen edges and set
	   their account tariffs at 16px. The carousel runs to the edges and starts on the gutter, as the product page's
	   add-ons do (snippet 302). */
	.ctpl-landing {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	.ctpl-landing .ctpl-plans {
		padding-left: 0;
		padding-right: 0;
	}

	.ctpl-landing .ctpl-car {
		margin-left: calc(-1 * var(--gp-phone-gutter));
		margin-right: calc(-1 * var(--gp-phone-gutter));
	}

	.ctpl-landing .ctpl-car .ctpl-car__track {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
		scroll-padding-inline: var(--gp-phone-gutter);
	}

	/* ── The wishlist page ───────────────────────────────────────────────────── */

	/* Its list (wishlist.css) ran to the screen edges; the page title above it is centred. The main site's page sets
	   it 33px in from each side as well (its template's group): the list stood at 43px, the other sites' at 10. */
	.woosw-list {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	.wp-site-blocks > .wp-block-group:has(.woosw-list) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── The cart and the wishlist: the top ──────────────────────────────────── */

	/* The title 24px under the header and the content 16px under the title, on every site (Kirill, 2026-10-22: the
	   cart as the wishlist). They were 24-84px and 16-24px: a 60px spacer under the header (the main site's cart and
	   wishlist), the content wrapper's 24px and the title's 24px (PS IN's and Xbox's carts), spacers inside the
	   wrapper (the wishlists). */
	:is(body.woocommerce-cart, body:has(.woosw-list)) .wp-site-blocks > header.wp-block-template-part + .wp-block-spacer,
	:is(body.woocommerce-cart, body:has(.woosw-list)) main > .wp-block-group:first-child > .wp-block-spacer {
		display: none;
	}

	:is(body.woocommerce-cart, body:has(.woosw-list)) .wp-site-blocks > header.wp-block-template-part + :is(main, .wp-block-group),
	:is(body.woocommerce-cart, body:has(.woosw-list)) .wp-site-blocks > header.wp-block-template-part + .wp-block-spacer + :is(main, .wp-block-group) {
		padding-top: 24px !important;
	}

	:is(body.woocommerce-cart, body:has(.woosw-list)) :is(h1, .wp-block-post-title) {
		margin-top: 0 !important;
	}

	:is(body.woocommerce-cart, body:has(.woosw-list)) .wp-block-post-content {
		margin-top: 16px !important;
	}
}

/* ── Every page between a phone and the content's widest ─────────────────────── */

/* 782-1271px: wider than the phone rules above, narrower than the catalog's 1252px content and 10px either side. The
   page's top-level containers keep 10px, and the full-width blocks in them (backgrounds, covers, banners, the
   PS Plus hero), down three levels and through template parts, reach back out to the edges with their content 10px in,
   as WordPress's root padding would do it (useRootPaddingAwareAlignments; the theme has none). Their own padding,
   where a block sets one, stays; where the template sets it to 0, it is the 10px. One rule rather than one per kind of
   page, since the content's width differs from page to page (800px, 1170px, 1252px). Wider than 1271px it moves
   nothing; the phone rules stay as they are.
   Not the product page: it keeps 33px of its own and touched no edge (measured at 1024px). */
@media (min-width: 782px) and (max-width: 1271px) {
	body:not(.single-product) .wp-site-blocks > :not(header, footer) {
		padding-left: var(--gp-phone-gutter) !important;
		padding-right: var(--gp-phone-gutter) !important;
	}

	body:not(.single-product) :is(
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull)
	) {
		max-width: none !important;
		width: auto;
		margin-left: calc(-1 * var(--gp-phone-gutter)) !important;
		margin-right: calc(-1 * var(--gp-phone-gutter)) !important;
	}

	body:not(.single-product) :is(
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull)
	):is(:not([style*="padding-left"]), [style*="padding-left:0;"], [style$="padding-left:0"]) {
		padding-left: var(--gp-phone-gutter) !important;
	}

	body:not(.single-product) :is(
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull),
		.wp-site-blocks > :not(header, footer) > :is(.alignfull, .wp-block-template-part > .alignfull, main > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull) > :is(.alignfull, .wp-block-template-part > .alignfull)
	):is(:not([style*="padding-right"]), [style*="padding-right:0;"], [style$="padding-right:0"]) {
		padding-right: var(--gp-phone-gutter) !important;
	}
}

/* ── Cart, checkout, account: at every width ─────────────────────────────────── */

/* The cart's title, items and totals ran to the screen edges; /digital/checkout/ sat at 32px. Not only on phones: up
   to the content's 1170px (782-1189px screens) the cart touched both edges while the header kept its 10px
   (2026-10-23); wider, the content is narrower than the screen and this moves nothing. The card checkout
   (gp-card-checkout-shell) has its own wrapper: giftcard-checkout-page.css */
:is(body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account):not(.gp-card-checkout-shell) .wp-site-blocks > .wp-block-group {
	padding-left: var(--gp-phone-gutter) !important;
	padding-right: var(--gp-phone-gutter) !important;
}