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

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

/* The gallery's groups across its whole width, so the picture's square (WooCommerce's aspect-ratio on its list item)
   stands before the picture arrives. The gallery is a flex column whose items are centred (WordPress's
   .is-layout-flex), so its first group took the width of what was in it: the picture, nothing until it loaded. The
   square was 0 x 0 and the page came up without it, the title under the breadcrumbs, then jumped down as the picture
   came (Kirill's iPhone, 2026-10-25, /ps-games-india/; reproduced in Safari with the picture held back). */
.wc-block-product-gallery > div:first-child,
.wc-block-product-gallery > div:first-child > div,
div[data-block-name="woocommerce/product-gallery-thumbnails"] {
	width: 100%;
}

/* ── Editions: "выбрать издание" and its list (64) ──────────────────────────── */

/* The list's card, rows and the button's chevron are css/dropdown.css's, in its light look; here the button and the
   rows' insides. Moved 2026-10-23 from snippet 64 "Game Editions List", whose script js/dropdown.js replaced (the
   chevron was two rotated strokes left of the words). */
.editions-container {
	display: inline-block;
	margin-left: 12px;
	vertical-align: top;
}

button#toggleEditionsList {
	justify-content: center;
	width: 220px;
	height: 50px;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 50px;
	background-color: var(--wp--preset--color--secbackground);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--onest);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500 !important;
}

#editionsList {
	width: 350px;
}

#editionsList li {
	display: flex;
	align-items: center;
}

#editionsList li:not(:last-child) {
	margin-bottom: 6px;
}

#editionsList li:not(.all-editions-link) a.gp-dropdown__item {
	width: 100%;
	padding: 6px 10px 6px 6px;
}

.edition-image {
	width: 60px;
	height: auto;
	margin-right: 16px;
	border-radius: 6px;
	object-fit: cover;
}

.edition-info-container {
	flex: 1;
	overflow: hidden;
}

.edition-name {
	margin-bottom: 3px;
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#editionsList li.all-editions-link {
	justify-content: center;
	margin-top: 12px;
}

.all-editions-link a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	border-radius: 20px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--gp-hover-out);
}

@media (hover: hover) {
	.all-editions-link a:hover {
		background-color: var(--wp--preset--color--primary);
	}
}

.all-editions-link svg {
	position: relative;
	top: -4px;
	width: 10px;
	height: 10px;
}

@media (max-width: 1008px) {
	.editions-container {
		margin-top: 6px;
		margin-left: 0;
	}
}

/* A product out of stock has no add-to-cart button: the list stands under WooCommerce's "Нет в наличии", a child of
   the form block, and starts where the text starts. It stood 16px in on wide screens (Kirill, 2026-10-27): the 12px
   left is the gap to the button, and WooCommerce gives every child of the form after the first 4px each side
   (:where(.wp-block-woocommerce-add-to-cart-form > * + *)). */
.wp-block-woocommerce-add-to-cart-form > .editions-container {
	margin-left: 0;
	padding-inline: 0;
}

@media (max-width: 768px) {
	#editionsList {
		width: 300px;
	}

	.edition-image {
		width: 45px;
		margin-right: 8px;
	}
}

@media (max-width: 360px) {
	#editionsList {
		width: 220px;
	}
}

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

/* Sections under the product: the add-ons ([cross_sell_slider]) and "Рекомендуемые игры", in this order on every
   site's template (tools/migrations/2026-10-24-product-page-tail.php). As in the cart: 51px by the letters from the
   text above to a section's heading, 28px from the heading to its cards (gp-docs design/interface.md, "Группировка").
   The space is measured from the product's columns, which end where their content does: the description's last
   paragraph and its tab panel lose their bottom margins (WooCommerce's 2em; it left the gap under the text, and a
   gallery longer than the text, or the sticky one scrolled to the column's foot, came up against the heading, Kirill,
   2026-10-25). The columns then end 9px under the text's last baseline, and 42px of them is the gap to the heading's
   capitals: 51px from the text. */
body.single-product .wp-block-columns .wp-block-woocommerce-product-details :is(.woocommerce-Tabs-panel, .woocommerce-Tabs-panel > :last-child) {
	margin-bottom: 0;
}

body.single-product .wp-block-columns + :is(.gp-addons, .wp-block-woocommerce-product-collection) {
	margin-block-start: 35px;
}

/* Side by side, the gallery (sticky: scrolled, it comes down to its column's foot) keeps 9px under it, so it stands
   51px from the heading as the text does, not 42px (Kirill, 2026-10-25). Stacked, the product's information follows
   the gallery and the template's gap stays. */
@media (min-width: 782px) {
	body.single-product .is-layout-constrained > .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
		margin-bottom: 9px;
	}
}

body.single-product .gp-addons + .wp-block-woocommerce-product-collection {
	margin-block-start: 44px;
}

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

@media (max-width: 480px) {
	footer .footer-copyright { /* also lists: room for the round buttons at the bottom of the screen */
		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;
	}

	/* The add-to-cart button: an accent pill across the screen in a row over the tab bar, "В корзину · 2 390 ₽"
	   (Kirill, 2026-10-23: the tab bar as in an app; its row and the grey under it: tabbar.css; the price:
	   js/tabbar.js). Before it the button was a round one in the bottom left corner, and before that a big
	   "добавить в корзину" on a bar. Fixed on the screen with its left set: left to where the form stood in the page, it
	   followed the empty form half off a 393px screen (2026-10-22). The button's own words stay in it for screen
	   readers, at size 0; the label is drawn. */
	.woocommerce div.product form.cart .button {
		position: fixed;
		bottom: calc(var(--gp-tabbar-height, 58px) + 2px); /* tabbar.css */
		left: var(--gp-phone-gutter, 10px); /* layout.css */
		z-index: 999;
		background-color: #c5ff00 !important;
		color: #121212 !important;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button {
		justify-content: center;
		width: calc(100% - 2 * var(--gp-phone-gutter, 10px)); /* a button's auto width is its content's, left and right set or not */
		height: 48px;
		padding: 0;
		border-radius: 48px;
		font-size: 0 !important; /* over the button's own !important size */
		line-height: 0;
		text-transform: none !important;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button::before,
	.woocommerce div.product form.cart button.single_add_to_cart_button::after {
		transition: opacity 0.2s ease;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button::before {
		content: "В корзину";
		font-size: 17px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button[data-gp-price]::before {
		content: "В корзину · " attr(data-gp-price);
	}

	/* While the product is being added (js/add-to-cart.js marks the button loading), the label gives way to a turning
	   ring, as the wishlist heart's (wishlist.css). WooCommerce's own loading look, the button at a quarter of its
	   opacity with its icon font's spinner on the right, is overridden. */
	.woocommerce div.product form.cart button.single_add_to_cart_button::after {
		content: "";
		position: absolute;
		top: 50%;
		right: auto;
		left: 50%;
		width: 18px;
		height: 18px;
		margin: -9px 0 0 -9px;
		box-sizing: border-box;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		opacity: 0;
		animation: gp-add-to-cart-ring 1s linear infinite;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button.loading {
		opacity: 1;
		padding: 0;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button.loading::before {
		opacity: 0;
	}

	.woocommerce div.product form.cart button.single_add_to_cart_button.loading::after {
		opacity: 1;
	}

	@keyframes gp-add-to-cart-ring {
		to {
			transform: rotate(360deg);
		}
	}

	/* The product's own title. Not the cards': they carry the class "product" too, and this centred a one-line card
	   title in its two lines' room and set it 18px (Kirill's iPhone, 2026-10-24); cards.css sets theirs. */
	.product .wp-block-post-title:not(li.wc-block-product > *) {
		display: flex;
		font-size: 18px !important;
		font-weight: 400;
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: center !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, p.stock.out-of-stock)) {
		order: 1;
		flex-basis: 0;
	}

	/* A product out of stock has no bar: its form holds only WooCommerce's "Нет в наличии", which takes a line of its
	   own over the row. In the no-width last place it stood a letter a line, 182px tall (2026-10-25, every site). */
	.product-card-info .wp-block-group.add-tocartbtn-product-card:has(p.stock.out-of-stock) {
		flex-wrap: wrap;
	}

	.add-tocartbtn-product-card > :has(p.stock.out-of-stock) {
		order: -1;
		flex-basis: 100%;
	}

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

	/* Out of stock it has the line under "Нет в наличии" to itself and is still a half, as in the row it shares when
	   the product is in stock (it was the full width) */
	.add-tocartbtn-product-card .wp-block-woocommerce-add-to-cart-form > .editions-container {
		width: calc(50% - 5px);
	}

	.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;
		border-radius: 50px;
		border: 1px solid #fff !important;
		background-color: #f6f6f600 !important;
		color: #efefef !important;
	}

	/* The chevron to the 12px words */
	.editions-container {
		--gp-dropdown-chevron: 16px;
		--gp-dropdown-gap: 6px;
	}

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

/* ── "Бесплатно с подпиской …" (wc-product-hooks/subscription-offer.php) ───────── */

/* A plate under the price and its timer, as wide as the timer, closer to them than to the buttons below: the
   subscription as a second way to get the game (Kirill, 2026-10-26). The subscription's logo, the arrow of the
   storefront's icon set at the end. */
.gp-sub-offer {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 50%; /* the sale timer's */
	margin: -4px 0 12px;
	margin-inline: 0 !important; /* as the timer: the card's constrained layout centres its children with !important */
	padding: 10px 12px;
	border-radius: 12px;
	background-color: rgba(18, 18, 18, 0.05);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--gp-hover-out);
}

.gp-sub-offer img {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
}

.gp-sub-offer--light-logo img { /* EA's white logo on the light card */
	filter: invert(1);
}

.gp-sub-offer::after {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	margin-left: auto;
	background-color: #7a7a7a;
	-webkit-mask: var(--gp-icon-arrow-right) center / 18px no-repeat;
	mask: var(--gp-icon-arrow-right) center / 18px no-repeat;
}

/* The blocks' link colour (.wp-elements-N a:where(…), 0-1-1) outweighed a bare .gp-sub-offer: on phones the words
   came out dark on the dark page (2026-10-26) */
.product-card-info a.gp-sub-offer:is(*, :hover, :focus) {
	color: #121212;
	text-decoration: none;
}

@media (hover: hover) {
	.gp-sub-offer:hover {
		background-color: rgba(18, 18, 18, 0.09);
	}
}

@media (max-width: 480px) {
	.gp-sub-offer {
		width: 100%;
		margin-bottom: 16px;
		background-color: rgba(255, 255, 255, 0.07);
	}

	.product-card-info a.gp-sub-offer:is(*, :hover, :focus) {
		color: #e7e7e7;
	}

	.gp-sub-offer--light-logo img { /* the page is dark here */
		filter: none;
	}

	.gp-sub-offer::after {
		background-color: #a4a4a4;
	}
}

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

@media (hover: hover) {
	.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);
}

@media (hover: hover) {
	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;
	}
}



/* ── The title's room for the wishlist heart (202; the heart itself: wishlist.css) ── */

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

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

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

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

/* The tabs in a row, at every width. Snippets 60 and 68 made the list a flex row up to 1210px and left it inline
   blocks wider than that, with a space character between the tabs; one look now (2026-10-27). */
ul.tabs.wc-tabs {
	display: flex;
}

/* On a phone WooCommerce's "minimal" tabs become a column with the active one's bar on the left (under 768px): 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;
}