/*
 * Site-wide rules: ones that came with a group but reach beyond it (kept exactly as they were until each is checked
 * where it applies; then it moves to its group or goes), and ones that every checkout shares.
 */

/* The storefront's icons: lucide's (lucide.dev), 24px boxes with 2px round strokes, the set of the support chat's
   cross. One set, so the icons beside each other weigh alike (Kirill, 2026-10-22: the cards' cart and the bin were
   from different sets, the bin the heavier). Drawn as masks in the text colour:
   mask: var(--gp-icon-x) center / 20px no-repeat; background-color: currentColor. */
:root {
	--gp-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	--gp-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
	--gp-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
	--gp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
	--gp-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	/* The accent tick badge of "in the cart" (the wishlist's rows, the cards' cart button): a background, lucide's check */
	--gp-badge-tick: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
	/* The same badge over a button lit in the accent (only the keyboard's focus lights a button already in the cart):
	   dark, the tick in the accent, or it melts into the button */
	--gp-badge-tick-on-accent: #121212 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5ff00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
	--gp-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--gp-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	--gp-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
	--gp-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
	--gp-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--gp-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
	--gp-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H3'/%3E%3Cpath d='M12 19H3'/%3E%3Cpath d='M14 3v4'/%3E%3Cpath d='M16 17v4'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M21 19h-5'/%3E%3Cpath d='M21 5h-7'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M8 12H3'/%3E%3C/svg%3E");
	--gp-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
	--gp-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E");
	--gp-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E");
	--gp-icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3C/svg%3E");
}

/* A badge in a line of text (DLC after a product's name, and any chip set in a title or a sentence): one rule for all,
   so the markup, not per-place nudges, decides how it sits (Kirill, 2026-10-22: "универсальное правило выравнивания";
   2026-10-26: the middle of the capitals, variant 3 of the Safari mock-ups). Its size is a share of the text it sits in
   (--gp-badge-scale); its box is trimmed to its capitals with even padding, so the box's middle is the middle of its
   own capitals; it is raised by the difference between half the text's capitals and half its own. A badge that is
   printed by code outside this repo adopts the rule by its own class here (.dlc-mark: Fluent snippet 160). */
:is(.gp-text-badge, .dlc-mark) {
	--gp-badge-scale: 0.6;
	display: inline-block;
	font-size: calc(var(--gp-badge-scale) * 1em);
	line-height: 1;
	padding: 0.4em 0.5em;
	border-radius: 0.35em;
	text-box: trim-both cap alphabetic;
	vertical-align: calc(0.5cap * (1 / var(--gp-badge-scale) - 1));
	white-space: nowrap;
}

/* Without text-box (Firefox, so far) the box keeps the font's ascent and descent: the DLC mark's earlier padding and
   raise, which put its middle within half a pixel of the capitals' on 34px and 18px titles (2026-10-22) */
@supports not (text-box: trim-both cap alphabetic) {
	:is(.gp-text-badge, .dlc-mark) {
		line-height: 1.2;
		padding-block: 0.2em;
		vertical-align: 0.25em;
	}
}

/* Hover: in almost at once, out slowly (Kirill, 2026-10-22: quick to answer the pointer, and no jerk as it leaves). The
   storefront's transitions run --gp-hover-out; under the pointer they run --gp-hover-in: on the element itself, and on
   everything inside a card, a link or a button the pointer is over (a card's cart button turns the accent with the
   card). A transition takes the duration of the state it goes to, so the two ends get their own. */
:root {
	--gp-hover-in: 0.12s;
	--gp-hover-out: 0.3s;
}

/* The list lines' sizes (the cart's, the mini cart's, the wishlist's): the picture, the price paid, the old price and
   the quantity selector, as at 393px and wider, and smaller with the screen below it, down to 360px (Kirill,
   2026-10-23). At 360px a 5-digit price broke onto two lines beside the quantity selector; now it keeps 23px before
   it. Wider than a phone the lines set their own: the price 26px in the mini cart's drawer, the cart page's narrow
   lines (cart-common.css) and the wishlist (wishlist.css); the cart page's wide table 128px pictures and 28px prices
   (cart-page.css). */
:root {
	--gp-line-picture: clamp(80px, 24.43vw, 96px);
	--gp-line-quantity: clamp(80px, 24.43vw, 96px);
	--gp-line-price: clamp(18px, 5.09vw, 20px);
	--gp-line-old-price: clamp(13px, 3.56vw, 14px);
	/* the old price's pull towards the price under it: a smaller price in the same 36px line leaves more air above it.
	   4.5px between their glyphs at 360px and 393px, up to 5.7px between them, where the fractional sizes land on
	   the pixel grid; a fixed -8px gave up to 5.9px. */
	--gp-line-old-price-pull: calc(-8px - (20px - var(--gp-line-price)) * 0.65);
}

a {
	transition-duration: var(--gp-hover-out); /* the theme's 0.5s, both ways */
}

/* A link's accent under the pointer: the blur theme's, which had no media query and stuck on a tapped link on a phone
   (storefront.php drops it from the global styles). The same selector, so the same weight against the rest. */
@media (hover: hover) {
	:root :where(a:where(:not(.wp-element-button)):hover) {
		color: var(--wp--preset--color--accent);
	}
}

@media (hover: hover) {
	:is(a, button, [role="button"], li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card, .woosw-copy-url, .woosw-item--remove span):hover,
	:is(a, button, [role="button"], li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card, .woosw-copy-url, .woosw-item--remove span):hover::before,
	:is(a, button, [role="button"], li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card, .woosw-copy-url, .woosw-item--remove span):hover::after,
	:is(a, button, [role="button"], li.wc-block-product, .cross-sells-product, .wc-block-grid__product, .ctpl-card):hover :is(*, *::before, *::after) {
		transition-duration: var(--gp-hover-in) !important; /* over the components' own durations */
	}
}

/* From snippet 57 "Gallery Adjustments" (2026-10-22). Not in the static HTML of any page checked (5 product pages,
   category, fronts, search, /media/): probably the gallery dialog's full-size image, but wp_get_attachment_image()
   gives this class to any full-size image, blog posts included. */
img.attachment-full {
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}

/* From snippet 64 "Game Editions List" (2026-10-23), where it hid the editions list. That list uses the hidden
   attribute now and no page checked has the class in its HTML (fronts, catalogs, a product page, the cart, /media/),
   but the name is generic enough for someone's script to add it. */
.hidden {
	display: none;
}

/* Focus rings for the keyboard only, on every control at once (Kirill, 2026-10-22: one rule, not one per button).
   WooCommerce's blocks, the theme and some of our older rules draw rings on :focus, so a tap or a click left one on
   the drawer's cross, the add-to-cart button, the sorting dropdown. Browsers set :focus-visible for keyboard focus
   only, and outline and box-shadow are what the rings are drawn with; the ring a keyboard user needs stays. Not text
   fields: they match :focus-visible however they got focus, and show it by their border (inline-forms.css). */
:where(a, button, select, summary, [role="button"], [tabindex], input[type="checkbox"], input[type="radio"]):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Link underlines one device pixel thick, the thinnest a screen draws: a third of a CSS pixel on a 3x phone, rounded
   up to a whole device pixel on 2x and 1x screens (the theme's are 1px; Kirill, 2026-10-22: lighter, in the product
   tabs and everywhere; 0.5px was still heavy) */
a {
	text-decoration-thickness: 0.34px;
}

/* The theme spaces out the letters of WooCommerce's buttons on hover and focus (letter-spacing: 1px on
   .woocommerce a.button and its kin), so a button grew under the pointer: "Просмотр корзины" in a notice (Kirill,
   2026-10-22: off everywhere). Block buttons (.wp-block-button__link) have that spacing in every state and keep it. */
.woocommerce :is(a, button, input).button:not(.wp-block-button__link):is(:hover, :focus) {
	letter-spacing: normal;
}

/* "Подтвердить заказ" on every checkout (classic, /digital/, card-checkout, retro): the blur theme gives .button.alt
   80px on each side, so on a phone the label broke into two lines inside a 290-300px button. One line, the 50px
   height of the other buttons, and the label as written (the theme upper-cased it on /digital/ only). */
.woocommerce #payment #place_order {
	padding-left: 24px;
	padding-right: 24px;
	min-height: 50px;
	text-transform: none;
}