/*
 * The product page: gallery, title block, price, add-to-cart form, "compare prices" and editions buttons, wishlist
 * heart, tabs and attributes, similar products, the fixed add-to-cart bar on phones.
 *
 * Loaded on product pages, product categories/tags and product search: snippet 209 used to load wherever the URL
 * contained "product", and some of its rules (card titles, prices, the footer gap) reach the product lists of those
 * pages. Those are marked "also lists" and stay here: those pages' lists are the only ones they ever reached.
 * The cards themselves are cards.css, printed after this file as the card snippets were printed after 209.
 *
 * Moved here 2026-10-22, verbatim and in the order Fluent Snippets printed them, from snippets 57 "Gallery
 * Adjustments", 209 "product page mobile redesign", 65 "Add to cart button styles" (product page part),
 * 20 "Product Card" (product page part), 202 "wishlist product page" and 39 "Description in the product card";
 * with the catalog-cards group, the product page parts of 140 "bundles style" and 26 "Custom sale badge".
 * Checked with tools/style-fingerprint.js on five product pages (PS TR game, bundle, Xbox TR, /digital/, PS IN),
 * a category and product search, at 1024 and 390 px.
 */

/* ── Gallery (57) ───────────────────────────────────────────────────────────── */

.wc-block-next-previous-buttons {
	display: none !important;
}

.wc-block-woocommerce-product-gallery-large-image__image,
.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom {
	transform: none !important;  /* no zoom on hover */
	transition: none !important;
	cursor: zoom-in !important; /* opens the full-screen viewer, js/gallery-lightbox.js */
}

div.wc-block-product-gallery-large-image-next-previous-container button > svg {
	height: 50px;
	width: 50px;
}

div.wc-block-product-gallery-large-image-next-previous-container button > svg > path {
	stroke: var(--wp--preset--color--primary);
}

div.wc-block-product-gallery-large-image-next-previous-container button:hover > svg > path {
	stroke: var(--wp--preset--color--white);
}

.wc-block-product-gallery > div:first-child > div,
div[data-block-name="woocommerce/product-gallery-thumbnails"] {
	width: 100%;
}

/* ── Product page layout, phones first (209) ────────────────────────────────── */

.wc-block-components-product-price { /* also lists */
	justify-content: flex-start !important;
}

.similar-products-productblock {
	margin-block-start: 24px !important;
}

@media (max-width: 480px) {
	footer .footer-copyright { /* also lists: room for the fixed add-to-cart bar */
		margin-bottom: 70px !important;
	}

	p.stock.in-stock {
		color: #e7e7e7 !important;
		margin-left: 4px;
	}

	.woocommerce .wp-block-group.product-card-info {
		background-color: transparent !important;
		border: none;
		margin: 0;
		color: #e7e7e7;
		padding: 0 !important;
	}

	.product .wp-block-columns {
		gap: 10px;
	}

	.wp-block-woocommerce-product-gallery.wc-block-product-gallery .wp-block-group {
		gap: 10px;
	}

	.product-card-info .wp-block-spacer {
		height: 8px !important;
	}

	.product .wc-block-store-notices.wp-block-woocommerce-store-notices {
		margin-top: 10px;
	}

	/* The block's own class (productcardprice) sat on both the wrapper and the price element in WooCommerce 10.x;
	   11 keeps it on the wrapper only, so the price element is matched either way */
	:is(.wc-block-components-product-price.productcardprice, .productcardprice > .wc-block-components-product-price) {
		display: flex !important;
		font-variant-numeric: tabular-nums;
		flex-wrap: nowrap;
		margin-bottom: 16px !important;
		color: #e7e7e7 !important;
		flex-direction: row;
		justify-content: flex-start !important;
	}

	.productcardprice .wc-block-components-product-price ins.discounted-price {
		color: #e7e7e7 !important;
		order: 1;
	}

	.productcardprice .wp-block-woocommerce-product-price del.base-price {
		text-decoration: line-through !important;
		font-size: 16px;
		order: 2;
	}

	del.base-price span { /* also lists */
		text-decoration: none;
		font-size: 16px;
	}

	:is(.wc-block-components-product-price.productcardprice, .productcardprice > .wc-block-components-product-price) del {
		text-decoration: none;
	}

	/* Fixed add-to-cart button over a bar at the bottom of the screen, on the page's 10px. Its left was left to where the
	   form stood in the page (15% only up to 390px): with no editions the empty form goes last in its row (below), and on
	   Kirill's 393px iPhone the button followed it half off the screen (2026-10-22). */
	.woocommerce div.product form.cart .button {
		position: fixed;
		bottom: 12px;
		left: var(--gp-phone-gutter, 10px);
		width: auto;
		z-index: 999;
		background-color: #c5ff00 !important;
		color: #121212 !important;
	}

	.addtocart-baseline-product {
		position: fixed;
		background-color: #232323;
		width: 100%;
		height: 74px;
		bottom: 0;
		z-index: 998;
	}

	.product .wp-block-post-title { /* also lists: product cards carry the class "product" */
		display: flex;
		font-size: 18px !important;
		font-weight: 400;
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: center !important;
	}

	.psplusextra-button {
		display: none !important;
	}

	/* "Выбрать издание" and "В Индии за …" share the row in two equal halves 10px apart (Kirill, 2026-10-22: they
	   were 140-165px each with 24px between and the rest of the row empty). The add-to-cart button of the same form is
	   the sticky bar at the bottom of the screen. */
	.product-card-info .wp-block-group.add-tocartbtn-product-card { /* over the group's own 24px and the wide screens' 16px below */
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
	}

	.add-tocartbtn-product-card > * {
		flex: 0 0 calc(50% - 5px); /* a half even alone: full width, its chevron sat far from its words */
		min-width: 0;
	}

	/* A product with no editions: the add-to-cart form holds only the fixed bar, and its empty half stood before
	   "В Турции за …", which sat on the right (Kirill, 2026-10-22). It goes last, with no width. */
	.add-tocartbtn-product-card > :not(:has(#toggleEditionsList, a.external-catalog-link)) {
		order: 1;
		flex-basis: 0;
	}

	.add-tocartbtn-product-card .editions-container {
		display: block;
		width: 100%;
		margin: 0;
	}

	.compare-prices-button a.external-catalog-link,
	button#toggleEditionsList {
		width: 100% !important;
	}

	.compare-prices-button a.external-catalog-link img {
		display: none;
	}

	.compare-prices-button a.external-catalog-link {
		height: 42px !important;
		border: 1px solid #e7e7e7 !important;
		color: #e7e7e7;
		font-size: 12px !important;
		padding-left: 8px;
		padding-right: 8px;
	}

	.line-productpage {
		display: none;
	}

	.compare-prices-button::before {
		display: none;
	}

	button#toggleEditionsList {
		height: 42px !important;
		font-size: 12px !important;
		cursor: pointer;
		position: relative;
		border-radius: 50px;
		border: 1px solid #fff !important;
		background-color: #f6f6f600 !important;
		color: #efefef !important;
	}

	/* The chevron's two strokes, 5px apart as in snippet 64's own: as percentages of the button they drew apart
	   on a full-width one (a product with no other region's offer: two dashes, Kirill 2026-10-22) */
	button#toggleEditionsList::before {
		content: '';
		position: absolute;
		top: 52%;
		left: 21px !important;
		width: 9px;
		height: 2px;
		background-color: var(--wp--preset--color--primary) !important;
	}

	button#toggleEditionsList::after {
		content: '';
		position: absolute;
		top: 52%;
		left: 16px !important;
		width: 9px;
		height: 2px;
		background-color: var(--wp--preset--color--primary) !important;
	}

	.wp-block-woocommerce-product-meta {
		display: none;
	}

	#sale-timer-shortcode { /* discount countdown bar */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-inline: 0 !important;
		margin-top: -6px;
		position: relative;
		height: 25px;
		border: 2px solid transparent;
		border-radius: 20px;
		background-color: #232323;
		margin-bottom: 16px;
	}

	.xbox-product-page-spacer,
	.services-product-page-spacer {
		display: none;
	}
}

/* ── Add-to-cart button (65) ─────────────────────────────────────────────────── */

form.cart button.single_add_to_cart_button {
	color: var(--wp--preset--color--primary) !important;
	display: inline-flex !important;
	align-items: center;
	background-color: var(--wp--preset--color--background) !important;
	border: 2px solid transparent !important;
	box-shadow: 0 0 0 transparent !important;
	width: 220px;
	height: 50px;
	font-weight: 500 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	text-transform: lowercase !important;
	transition: all var(--gp-hover-out) ease !important; /* in: below */
	margin-bottom: 0 !important;
}

div.wc-block-add-to-cart-form form.cart {
	display: flex;
}

@media (max-width: 1008px) {
	div.wc-block-add-to-cart-form form.cart {
		flex-direction: column;
	}
}

/* Hover only where there is a pointer: on a touch screen :hover sticks after a tap, and the purple frame stayed on
   the button the customer had just pressed */
@media (hover: hover) {
	form.cart button.single_add_to_cart_button:hover {
		color: var(--wp--preset--color--primary) !important;
		font-weight: 500 !important;
		opacity: 1 !important;
		background-color: var(--wp--preset--color--background) !important;
		box-shadow: 0 0 10px 0px var(--wp--preset--color--custom-accent-purple) !important;
		border: 2px solid var(--wp--preset--color--custom-accent-purple) !important;
		transition-duration: var(--gp-hover-in) !important; /* its own !important outweighed global.css's */
	}
}

/* ── Product page (20) ───────────────────────────────────────────────────────── */

.wp-block-group.add-tocartbtn-product-card {
	display: flex;
	align-items: flex-end;
	gap: 16px; /* 8px each side of the divider below (the group's own 24px looked like a gap, Kirill 2026-10-22) */
}

.compare-prices-button {
	position: relative;
}

.compare-prices-button a.external-catalog-link {
	height: 50px;
	width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 50px;
}

@media (hover: hover) { /* same as the cart button: no sticky purple frame after a tap */
	.compare-prices-button a.external-catalog-link:hover {
		box-shadow: 0 0 10px 0px var(--wp--preset--color--custom-accent-purple);
		border: 2px solid var(--wp--preset--color--custom-accent-purple);
	}
}

.compare-prices-button a.external-catalog-link img {
	width: 20px;
	height: auto;
	vertical-align: middle;
	margin-right: 5px;
}

/* Divider between "add to cart" and "compare prices": vertical, horizontal on narrow screens */
.compare-prices-button::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 25px;
	transform: translateY(-50%);
	width: 2px;
	border-radius: 50px;
	height: 35px;
	background: var(--wp--preset--color--secondary);
}

@media (max-width: 1260px) {
	.compare-prices-button::before {
		background: var(--wp--preset--color--secondary);
		width: 180px;
		height: 1.4px;
		border-radius: 50px;
		top: -9px;
		left: 50%;
		transform: translateX(-50%);
	}
}

p.stock.in-stock {
	color: #121212;
}

@media only screen and (min-width: 320px) and (max-width: 760px) {
	.wp-block-group.has-secbackground-background-color.has-background.is-layout-constrained.wp-block-group-is-layout-constrained {
		padding-top: 25px;
		padding-right: 15px;
		padding-left: 15px;
		padding-bottom: 0;
	}
}

.woocommerce div.product form.cart .button {
	border-radius: 50px;
}

.wc-block-product-gallery-large-image img {
	border-radius: 20px;
}

.wc-block-product-gallery-thumbnails img {
	border-radius: 20px;
}

.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel p {
	font-size: 16px;
}

.woocommerce-Tabs-panel h2,
.related.products > h2,
.up-sells.upsells.products h2 {
	display: none;
}

.woocommerce button.button.alt {
	color: white;
	background: #000000;
	padding-left: 30px;
	padding-right: 30px;
}

.woocommerce button.button.alt :hover {
	background: #232323;
}

.wp-block-post-terms__prefix {
	color: #A4A4A4;
}

.wp-block-woocommerce-product-meta {
	margin-top: 0 !important;
}

/* Arrow after the "similar games" and cross-sell headings */
h2.similar-games-header a,
h2.cross-sell-slider-header a {
	position: relative;
	padding-right: 0.3%;
}

h2.similar-games-header a::after,
h2.similar-games-header a::before,
h2.cross-sell-slider-header a::after,
h2.cross-sell-slider-header a::before {
	content: '';
	position: absolute;
	top: 46%;
	left: 100%;
	width: 14px;
	height: 4px;
	background-color: var(--wp--preset--color--primary);
	transition: all var(--gp-hover-out) ease;
}

h2.similar-games-header a::after,
h2.cross-sell-slider-header a::after {
	transform-origin: top right;
	transform: rotate(-45deg);
}

h2.similar-games-header a::before,
h2.cross-sell-slider-header a::before {
	top: 50%;
	transform-origin: bottom right;
	transform: rotate(45deg);
}

h2.similar-games-header a:hover::after,
h2.similar-games-header a:hover::before,
h2.cross-sell-slider-header a:hover::after,
h2.cross-sell-slider-header a:hover::before {
	background-color: var(--wp--preset--color--accent);
}

.woocommerce div.product form.cart div.quantity {
	display: none;
}

.woocommerce div.product form.cart {
	margin-bottom: 0;
}

div[data-block-name="woocommerce/product-price"][data-is-descendent-of-single-product-template="true"] {
	margin-bottom: 12px !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
	border-top: 1px solid #7A7A7A;
}


.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	text-transform: none !important;
}

/* The flag next to the activation region */
img.product-info-region-flag {
	position: absolute;
	top: 2px;
	right: -22px;
}

span.product-info-region-text {
	position: relative;
}

/* Attributes table ("Детали"). The names' column fits the longest name on one line on wide screens, "Русский язык.
   Озвучка" (176px), with 24px to the values: at 105px it broke most names in two or three (Kirill, 2026-10-22).
   Phones: 170px at 14px (below). */
.woocommerce table.shop_attributes th {
	width: 200px;
	font-size: 16px;
	color: #A4A4A4;
	font-family: var(--wp--preset--font-family--onest);
}

.woocommerce table.shop_attributes td {
	font-style: normal;
	border: none;
	border-color: transparent;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 5px 0;
}

/* WooCommerce 11 stacks this table on screens up to 768px (woocommerce-smallscreen.css: rows and cells become
   blocks, its own padding, no line under the name). Keep it a table there too, with the same selectors. */
@media only screen and (max-width: 768px) {
	.woocommerce table.shop_attributes tr {
		display: table-row;
	}

	.woocommerce table.shop_attributes tr th,
	.woocommerce table.shop_attributes tr td {
		display: table-cell;
		max-width: none;
		padding: 5px 0;
	}

	/* 14px and a 170px names' column: each name on one line, "Русский язык. Озвучка" too (at 105px and 16px most broke
	   in two or three; Kirill, 2026-10-22) */
	.woocommerce table.shop_attributes tr th {
		width: 170px;
		border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
	}

	.woocommerce table.shop_attributes tr :is(th, td, td p, td a) {
		font-size: 14px;
	}
}



/* ── Wishlist heart next to the title (202) ──────────────────────────────────── */

/* Selectors carry .wishlist-button twice over on purpose: snippet 195 "Wishlist" styles .wishlist-button
   span.woosw-btn-icon (white, 22px) at the same specificity and is printed after this file, so the
   product page's rules have to outweigh it rather than come later. */

/* The title takes the whole row, so the heart sits in the card's corner (cards.css's flex rule for the title did it
   until 2026-10-22; without it the heart stood right after the title's text) */
.product-page-title.wp-block-post-title {
	display: block !important;
	flex-grow: 1;
	position: relative;   /* anchor for the button */
	padding-right: 48px;  /* room for it */
}

.wishlist-button.wishlist-button--desktop {
	background: none !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	margin-left: 0;
}

.product .wishlist-button--source:not(.wishlist-button--desktop):not(.wishlist-button--mobile) {
	display: none;
}

.wishlist-button.wishlist-button--desktop a.woosw-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: inline-flex !important;
	align-items: center;
	line-height: 1;
}

.wishlist-button.wishlist-button--desktop span.woosw-btn-icon {
	font-size: 28px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: #000;
	text-shadow: none; /* wishlist.css's shadow is for the white heart on pictures; on the light card it smudged */
}

.wishlist-button.wishlist-button--desktop a.woosw-added span.woosw-btn-icon.woosw-icon-8 {
	color: #9100FF !important;
	text-shadow: none;
}

/* On phones the heart sits on the cover image (below 768px, snippet 198's script), and the title needs no room for it:
   the DLC mark after the title wrapped onto a line of its own for those 48px */
@media (max-width: 767px) {
	.product-page-title.wp-block-post-title {
		padding-right: 0;
	}
}

.wishlist-button.wishlist-button--mobile {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 2;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.3);
	padding: 8px;
	display: inline-flex !important;
	align-items: center;
	height: auto;
}

.wishlist-button.wishlist-button--mobile a.woosw-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: inline-flex !important;
	align-items: center;
	line-height: 1;
}

.wishlist-button.wishlist-button--mobile span.woosw-btn-icon {
	font-size: 22px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wishlist-button.wishlist-button--mobile a.woosw-added span.woosw-btn-icon.woosw-icon-8 {
	color: #9100FF !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Tabs (39) ───────────────────────────────────────────────────────────────── */

.woocommerce.woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
	font-family: 'Onest';
}

/* On a phone WooCommerce's "minimal" tabs become a column with the active one's bar on the left (under 768px), and
   snippet 60 puts them back in a row (display: flex): the bar stood left of "Описание" (Kirill, 2026-10-22). In a row
   the bar goes under the active tab, as on wide screens. Same weight as WooCommerce's rule, printed after it. */
@media only screen and (max-width: 768px) {
	html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {
		display: inline-block;
		margin-bottom: 0;
		border-left-width: 0;
		border-bottom-width: 2px;
	}
}

/* "Детали" starts as high as "Описание": the attributes table's dotted top border, its first row's padding, the
   browser's 2px between cells and its taller lines (24px for 16px text, the description's are about 20) put its first
   line 8px lower */
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
	border-top: 0;
	border-spacing: 0;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes :is(th, td) {
	line-height: normal;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:first-child > :is(th, td) {
	padding-top: 0;
}

/* ── Bundle contents (140) ─────────────────────────────────────────────────── */

.woosb-products .woosb-product .woosb-title .woosb-name a {
	color: var(--wp--preset--color--background) !important;
}

/* ── No sale badge over the gallery image (26) ──────────────────────────────── */

.wc-block-product-gallery-large-image__inner-blocks {
	display: none !important;
}


/* ── Full-screen picture viewer (js/gallery-lightbox.js) ──────────────────────────── */

/* Every site, phones included: the big picture used to take no taps on phones (pointer-events: none), and the full
   screen view was WooCommerce's own dialog, on only where a template asked for it (India). Kirill, 2026-10-22. */

dialog.gp-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--primary);
	overflow: hidden;
	/* No pinch or double-tap zoom of the page under it, and no scrolling through it (iOS did both, Kirill
	   2026-10-22); the swipe between pictures is the script's own touch handling */
	touch-action: none;
	overscroll-behavior: contain;
}

/* The dialog takes the focus when it opens (the script); a ring round the whole screen says nothing */
dialog.gp-lightbox:focus {
	outline: none;
}

dialog.gp-lightbox::backdrop {
	background: rgba(18, 18, 18, 0.6);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.gp-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 96px;
	box-sizing: border-box;
}

.gp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
	user-select: none;
	-webkit-user-select: none;
}

.gp-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(35, 35, 35, 0.85);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: color var(--gp-hover-out) ease;
}

.gp-lightbox__btn svg {
	width: 24px;
	height: 24px;
}

@media (hover: hover) {
	.gp-lightbox__btn:hover {
		color: var(--wp--preset--color--accent);
	}
}

.gp-lightbox__btn:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
}

/* The common cross (css/overlays.css), where the chat has its own */
.gp-lightbox__close {
	top: 10px;
	right: 14px;
}

.gp-lightbox__prev,
.gp-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.gp-lightbox__prev {
	left: 24px;
}

.gp-lightbox__next {
	right: 24px;
}

.gp-lightbox__count {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 12px;
	border-radius: 20px;
	background: rgba(35, 35, 35, 0.85);
	color: #A4A4A4;
	font: 500 14px/1.2 Onest, sans-serif;
	font-variant-numeric: tabular-nums;
}

.gp-lightbox--single :is(.gp-lightbox__prev, .gp-lightbox__next, .gp-lightbox__count) {
	display: none;
}

@media (max-width: 781px) {
	.gp-lightbox__stage {
		padding: 72px var(--gp-phone-gutter, 10px) 88px;
	}

	/* thumbs reach the bottom corners more easily than the middle of the edges */
	.gp-lightbox__prev,
	.gp-lightbox__next {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.gp-lightbox__prev {
		left: 16px;
	}

	.gp-lightbox__next {
		right: 16px;
	}

	.gp-lightbox__count {
		bottom: 28px;
	}
}


/* ── Product card alignment (Kirill, 2026-10-22) ─────────────────────────────────── */

/* The info card's column carries padding-top: 4px in the template (inline): the card's top stood 4px below the
   picture's */
body.single-product .wp-block-column:has(> .wp-block-columns .product-card-info) {
	padding-top: 0 !important;
}

/* WooCommerce 11 pads every add-to-cart form part after the first by 4px on each side
   (:where(.wp-block-woocommerce-add-to-cart-form > * + *)): the buttons stood 4px right of the card's text */
.wp-block-woocommerce-add-to-cart-form form.cart {
	padding-left: 0;
	padding-right: 0;
}