/*
 * 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 ──────────────────────────────────────────────── */

	/* Every card list keeps the gutter itself, where the page around it has none (snippet 60 "Styles for mobile
	   version" until 2026-10-27). The rules below take it away where the page's group carries the gutter. */
	.wc-block-product-template__responsive {
		margin-left: var(--gp-phone-gutter);
		margin-right: var(--gp-phone-gutter);
	}

	/* Inside a constrained group WordPress's own "margin: auto !important" wins over that, 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 (the lists' own 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 head of a catalog, compact (Kirill, 2026-10-26): 16px from the breadcrumbs to the banners and from the
	   banners to the title, the region's line right under the title, 12px to the section chips and to the filters'
	   row, 16px to the cards (they were 24, 24, 16, 16, 24). */
	body.archive.woocommerce .wp-block-template-part:has(> .wp-block-group > .top-banners),
	body.archive.woocommerce .wp-product-category-with-sidebar:has(.archive-title) {
		margin-top: 16px !important;
	}

	body.archive.woocommerce .archive-title h1 {
		line-height: 1.15;
	}

	body.archive.woocommerce .wp-product-category-with-sidebar + .wp-product-category-with-sidebar {
		margin-top: 12px !important;
		gap: 12px !important;
	}

	body.archive.woocommerce .wp-block-woocommerce-product-collection .wc-block-components-notices:not(:has(*)) + .wc-block-product-template {
		margin-block-start: 16px;
	}

	/* The breadcrumbs (catalogs and product pages) with no margin of their own under them on a phone (snippet 60):
	   the spacing is the blocks' that follow */
	nav.woocommerce-breadcrumb {
		margin-bottom: 0 !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;
	}

	/* ── Front pages: the main site's and PS IN's ────────────────────────────── */

	/* Their sections set no side padding of their own, so whatever is not a card list ran to the screen edges
	   (Kirill, 2026-10-26: the catalog and the product page had the gutter, the front page did not). Each block
	   below takes it itself; the covers behind them stay full width. */

	/* The heroes' buttons (the cover right under the header): "Каталог Sony Индия" and "Каталог Xbox" stood 6px
	   from the edges, PS IN's "Оформить подписку" and "Купить игру" 4px on a 360px screen. At the gutter their 24px
	   side padding (the theme's) no longer fits two in a row on a 375px screen (PS IN's: 360px); 20px does. Only
	   the heroes': the account sections' buttons further down stand one under the other and keep the 24px every
	   other button has. */
	body.home :is(header + .wp-block-group, header + .wp-block-template-part > .wp-block-group > .wp-block-group:first-child) > .wp-block-cover .wp-block-buttons {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	body.home :is(header + .wp-block-group, header + .wp-block-template-part > .wp-block-group > .wp-block-group:first-child) > .wp-block-cover .wp-block-button__link {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The banners as the catalog's (Kirill, 2026-10-26): the row starts on the gutter and is as wide as the
	   catalog's, two whole and the edge of the third. The hero's inner cover sets them 22px in (its own padding);
	   their template part reaches back out to the gutter on both sides, so the row's own edge math (Promo banners,
	   the end of this file) holds. 16px under the header, as the catalog's head is spaced, not the template's 58px. */
	body.home .banners_block {
		margin-left: calc(50% - 50vw + var(--gp-phone-gutter)) !important;
		margin-right: calc(50% - 50vw + var(--gp-phone-gutter)) !important;
	}

	body.home .wp-block-spacer:has(+ .banners_block) {
		height: 16px !important; /* the block's inline 58px */
	}

	/* The main site's hero, gathered (Kirill, 2026-10-26: a hole over the buttons). Its two covers' min-heights (805px
	   inline, 430px for the inner one) left 106px between the lead paragraph and the buttons and stretched the
	   block under the icons. Now: banners, 24px, the title, 12px, the paragraph, 24px, the buttons 8px apart (as the
	   banners), 32px, the icons, 24px to the cover's rounded bottom. The values replaced are the blocks' inline ones. */
	body.home .wp-block-cover.alignfull:has(.banners_block),
	body.home .wp-block-cover:has(> .wp-block-cover__inner-container > .banners_block) {
		min-height: 0 !important;
	}

	body.home .banners_block + .wp-block-group {
		margin-top: 24px !important;
	}

	body.home .banners_block + .wp-block-group + .wp-block-group {
		margin-top: 12px !important;
	}

	body.home .catalogs_block {
		margin-top: 24px !important;
	}

	body.home .catalogs_block > .wp-block-buttons {
		gap: 8px;
	}

	body.home .all_product_icons_block {
		margin-top: 32px !important;
		margin-bottom: 24px !important;
	}

	/* Centred section titles: their sections have no padding, so a title whose line fills the screen stood at 1-2px
	   ("Покупай любую валюту для любимых игр" on a 390px screen, "Мы создали сервис" on 375px); which titles do
	   depends on the width */
	body.home :is(h1, h2, h3).wp-block-heading.has-text-align-center {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	/* The main site's section titles (h2.mobilemain, 28px; the accounts' subtitles h2.mobilemain2, 22px) and one
	   distance from a title to its section: 24px (Kirill, 2026-10-26: the same thing, the same spacing). It ranged
	   from 0 ("Нас часто упоминают") through 8, 18 and 35 (the product lists) to 68 and 83 (the account sections).
	   Snippet 103 used to hold these titles' sizes with margin-bottom: 0 !important; their blocks set 48px and margins of
	   0-42px inline, hence the !important here. The hero's title keeps its 12px to the lead paragraph (a title and its
	   lead, not a section). What each section put between its title and its content goes:
	   - the product lists: the slide's group padding (spacing-30) and the list's own 24px;
	   - "Пополнение сервисов": an 18px spacer;
	   - the account sections: their title cover's 430px min-height and 20rem height (it held the title, not
	     the content), its bottom padding and the next group's 20px. */
	body.home h2.wp-block-heading.mobilemain {
		font-size: 28px !important;
	}

	body.home h2.wp-block-heading.mobilemain2 {
		font-size: 22px !important;
	}

	/* Two sizes, one per level (Kirill, 2026-10-26): a section's title 28px, a title inside a section 22px.
	   "Что говорят о нас" is a section's title, though its block made it mobilemain2 (22px); the steps of "Как это
	   работает?" ("Оплати", "Перейди"…) are titles inside a section, and their 30px inline stood over the section's
	   own 28px. */
	body.home .reviews_block h2.wp-block-heading.mobilemain2 {
		font-size: 28px !important;
	}

	body.home .wp-block-template-part .hiwblock h2.wp-block-heading {
		font-size: 22px !important;
	}

	body.home h2.wp-block-heading.mobilemain:not(.wp-block-cover:has(.banners_block) h2) {
		margin-bottom: 24px !important;
	}

	body.home .mpsproductslide .wp-block-cb-slide > .wp-block-group {
		padding-top: 0 !important;
	}

	body.home .mpsproductslide ul.wc-block-product-template {
		margin-block-start: 0;
	}

	body.home .top_up_balance_block h2.mobilemain + .wp-block-spacer {
		display: none;
	}

	body.home .mpmobilenetblock {
		height: auto;
	}

	body.home .mpmobilenetblock > .wp-block-cover {
		min-height: 0 !important;
		padding-bottom: 0 !important;
	}

	body.home .mpmobilenetblock + .wp-block-group {
		margin-top: 0 !important;
	}

	/* PS IN's hero: the row of its points ("Никакого VPN", "Онлайн-режим") at 3px */
	body.home .wp-block-cover .wp-block-group.is-layout-flex:has(> .wp-block-group.is-nowrap > .wp-block-image) {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	/* "Пополнение баланса": three columns of 100px icons, 24px apart, centred — 348px, at 6px from the edges of a
	   360px screen. The gaps give way to the gutter (down to 8px) before the row wraps. */
	body.home .top_up_balance_block .services-icons {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
		column-gap: clamp(8px, (100% - 300px) / 2, 24px);
	}

	/* The account sections' pictures (media & text on the purple covers) ran edge to edge; their text keeps the
	   block's own 30px */
	body.home .mpimgbackground .wp-block-media-text__media {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	/* "Как это работает?": the pictures at 0, the steps' text at 2-5px. PS IN's is a group of its own under
	   .wp-site-blocks and has the gutter already (ps-plus.css). */
	body.home .wp-block-template-part .wp-block-group:has(> .wp-block-columns > .hiw1col) {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	/* "Мы создали сервис, которым пользуемся сами" with its tiles (the main site's) and "Наши гарантии" (PS IN's):
	   at 0-5px */
	body.home .wp-block-cover:has(#fortnitegroup) > .wp-block-cover__inner-container,
	body.home .wp-site-blocks > .wp-block-group:has(> #fortnitegroup) {
		padding-left: var(--gp-phone-gutter);
		padding-right: var(--gp-phone-gutter);
	}

	/* "Нас часто упоминают в интернетах": a 2 x 2 grid, the four at once (Kirill, 2026-10-26: one big photo a screen
	   gave no sign of the others). storefront.php keeps slick off it here and names it .gp-mentions. Each card is
	   the photo (3:4, it was 382 x 516 with a 364px spacer in it) with the avatar and the name at its foot over a dark
	   fade; the block's own cover dim layer carries the fade. The values replaced are the blocks' inline ones. */
	.gp-mentions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 0 var(--gp-phone-gutter);
	}

	.gp-mentions > .wp-block-cb-slide {
		min-width: 0;
	}

	.gp-mentions > .wp-block-cb-slide > .wp-block-group {
		overflow: hidden;
		border-radius: 16px !important;
	}

	.gp-mentions .wp-block-cover {
		align-items: flex-end;
		min-height: 0 !important;
		aspect-ratio: 3 / 4 !important;
		padding: 8px !important;
		border-radius: 16px !important;
	}

	.gp-mentions .wp-block-cover__background {
		opacity: 1 !important;
		background: linear-gradient(to top, rgb(0 0 0 / 70%), transparent 45%) !important;
	}

	.gp-mentions .wp-block-spacer {
		display: none;
	}

	.gp-mentions .wp-block-cover__inner-container > .wp-block-group {
		justify-content: flex-start;
		gap: 6px;
		min-width: 0;
		margin-top: 0 !important;
	}

	.gp-mentions figure {
		flex: none;
		margin: 0;
	}

	.gp-mentions figure img {
		width: 28px !important;
		height: 28px !important;
		border-radius: 50%;
		object-fit: cover;
	}

	.gp-mentions p {
		min-width: 0;
		overflow: hidden;
		font-size: 13px !important;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	/* ── Landing pages: their phone classes (snippet 60) ─────────────────────── */

	/* Classes the landing pages' blocks carry for their phone look; !important over the blocks' own sizes and
	   margins (inline styles). /gift-certificate/: the headings 55 and 44px → 26, the steps' pictures go and
	   their texts stand side by side. */
	.mobilefontsize32 {
		font-size: 32px !important;
	}

	.mobileflexcenter {
		justify-content: center;
	}

	.giftcertiheading {
		font-size: 26px !important;
	}

	.cetificate-hiw-image {
		display: none;
	}

	.gifthiwblock {
		margin-top: 0 !important;
	}

	.certificatehiw-title {
		margin-bottom: 10px !important;
	}

	.gifthiwsting {
		display: flex;
		justify-content: space-around;
		align-content: center;
		padding-left: 30px;
	}

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

/* ── The front page's banners wider than a phone ──────────────────────────────── */

/* As wide as the catalog's: min(1252px, the screen less the gutters) (Kirill, 2026-10-26). They stood in the hero's
   inner cover, held to 1205px with core's 1em padding (24px here): 1157px at 142px from the edges of a 1440px screen
   where the catalog's are 1252px at 94px. The cover may be 1252px wide and the row reaches out through its padding;
   1em is the cover's own font size, which the row inherits. The title and the paragraph keep their own widths
   (800px, 495px). No vw: with a classic scrollbar 100vw is wider than the page. */
@media (min-width: 782px) {
	body.home .wp-block-cover:has(> .wp-block-cover__inner-container > .banners_block) {
		max-width: 1252px;
	}

	body.home .banners_block {
		margin-left: -1em !important;
		margin-right: -1em !important;
	}
}

/* ── The front page's background grid ─────────────────────────────────────────── */

/* The grid behind the hero and behind the account sections' titles fades out to the sides and the bottom, with no edge
   (Kirill, 2026-10-26). It was a picture (2410 x 880, white 2px lines at 11%, wp-image-115100) as a cover's background,
   cropped to that cover, and its own fade stopped at 9/255 on the sides and went back up to 28/255 at the bottom:
   - the hero: on its inner cover (1252 x 590 on a 1440px screen in a 1440 x 975 hero), hard edges left and right and a
     band under the lead paragraph;
   - the account sections ("Мы собрали все для Sony PlayStation…", "…и провернули тоже самое для Xbox"): their title's
     cover (1170 x 430 at the top of a 1170 x 2029 card), a band under the title.
   Now the grid is drawn in CSS under the content, and one elliptical mask takes it to nothing at the sides and the
   bottom of its box: the whole hero (the inner container, isolated, carries it as ::before over the hero's gradient),
   an account section's title cover (isolated itself; its own dim layer is transparent). Lines 1px at 15% (the
   picture's 2px at 11%, shown at about 0.67), cells 116px, 80px on phones, the same in both. The picture is hidden,
   so it is not loaded either (it was a lazy img).
   The top edge too: the first horizontal line lay on the box's top, right under the header's 1px border (a double line
   on a phone, Kirill, 2026-10-26) and on an account card's rounded top. So the lines start half a cell down, and a
   second mask layer, intersected with the ellipse, brings the grid in over its first cell. */
body.home :is(.wp-block-cover.alignfull:has(.banners_block) > .wp-block-cover__inner-container, .mpmobilenetblock > .wp-block-cover) {
	isolation: isolate;
	--gp-grid-cell: 116px;
}

body.home :is(.wp-block-cover.alignfull:has(.banners_block) > .wp-block-cover__inner-container, .mpmobilenetblock > .wp-block-cover)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 15%) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 15%) 1px, transparent 1px);
	background-size: var(--gp-grid-cell) var(--gp-grid-cell);
	background-position: center calc(var(--gp-grid-cell) / 2);
	-webkit-mask-image:
		radial-gradient(ellipse 50% 65% at 50% 35%, #000 35%, transparent 100%),
		linear-gradient(to bottom, transparent, #000 var(--gp-grid-cell));
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(ellipse 50% 65% at 50% 35%, #000 35%, transparent 100%),
		linear-gradient(to bottom, transparent, #000 var(--gp-grid-cell));
	mask-composite: intersect;
}

body.home :is(.wp-block-cover:has(> .wp-block-cover__inner-container > .banners_block), .mpmobilenetblock > .wp-block-cover) > .wp-block-cover__image-background {
	display: none;
}

@media (max-width: 781px) {
	body.home :is(.wp-block-cover.alignfull:has(.banners_block) > .wp-block-cover__inner-container, .mpmobilenetblock > .wp-block-cover) {
		--gp-grid-cell: 80px;
	}
}

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

/* ── Promo banners (the catalog's head, the front page) ─────────────────────── */

/* A plain row, not a slider (Kirill, 2026-10-26: "тогда и слайдер не особо нужен"): on a computer all four stand in
   it, edge to edge with the content, 8px apart; on a phone it is a row the finger scrolls, as the section chips, two
   whole and the edge of the third, no dots. Slick never starts on them (storefront.php drops the carousel's class
   before the plugin's init script), so the row is there from the first paint and nothing jumps when scripts load;
   each picture keeps its 1080 x 645 while it loads (promo-banners-admin.php prints it), its corners the 12px snippet
   126 gave it once loaded. */
.top-banners:not(.slick-initialized) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

/* The figure (WordPress makes an aligncenter one display: table) and the link round the picture (inline-block) both
   shrink to their content, so the picture's width: 100% resolved to 0, and a lazy one never loaded: banners stood
   blank (2026-10-26) */
.top-banners:not(.slick-initialized) figure,
.top-banners:not(.slick-initialized) figure > a {
	display: block;
	width: 100%;
	margin: 0;
}

.top-banners:not(.slick-initialized) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1080 / 645;
	border-radius: 12px;
}

@media (max-width: 781px) {
	/* from the gutter to the screen's edge, whatever the page's own padding */
	.top-banners:not(.slick-initialized) {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: 0 !important;
		margin-right: calc(50% - 50vw) !important;
		padding-right: calc(50vw - 50%);
	}

	.top-banners:not(.slick-initialized)::-webkit-scrollbar {
		display: none;
	}

	.top-banners:not(.slick-initialized) > .wp-block-cb-slide {
		flex: 0 0 calc((100% - 16px) / 2.15);
		min-width: 0;
	}
}