/*
 * The phone gutter: on screens up to 781px (where WordPress stacks columns) 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).
 *
 * 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 */
	body.archive.woocommerce .wp-site-blocks > .wp-block-template-part:not(header):not(footer) > .wp-block-group {
		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;
	}

	body.archive.woocommerce .aws-container {
		margin-left: 0;
		margin-right: 0;
	}

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

	/* ── Cart, checkout, account ─────────────────────────────────────────────── */

	/* The cart's title, items and totals ran to the screen edges; /digital/checkout/ sat at 32px. 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;
	}

	body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
		margin-left: 0;
	}
}