/*
 * The checkout's order lines with a quantity switch (storefront/checkout-items.php), on every classic checkout: the
 * dark panel of /digital/, /retro/ and the main site's /checkout/ (dark since 2026-11-13, checkout.css) and of the card
 * checkouts (body.gp-card-checkout-shell). Sizes settled on 2026-11-13 from sketches with Kirill, for the phone's 375px:
 * picture 64px, name 14px in two lines at most, price 16px, switch 28px. Two lines of the name and the switch fill the
 * picture's height exactly, so the line height of the name (1.2) is part of that sum.
 *
 * The price sits level with the middle of the switch's figure, not its foot: on its foot a 16px price next to a 14px
 * figure looked dropped. It is placed by the figures' baseline (flex baseline alignment, the switch's baseline being
 * its number's) and moved down by half the difference of the two cap heights, worked out by the browser from the two
 * font sizes below: 0.5cap * (1 - figure / price). Change a size and the price follows. A browser without the cap unit
 * drops the shift and keeps the baseline, a pixel off.
 */

.woocommerce-checkout-review-order-table {
	--gp-co-picture: 64px;
	--gp-co-name-size: 14;
	--gp-co-price-size: 16;
	--gp-co-figure-size: 14;
	--gp-co-switch: 28px;
	/* the cart's switch on the dark storefront (css/cart-common.css) */
	--gp-co-switch-bg: #333;
	--gp-co-switch-border: rgba(231, 231, 231, 0.3);
	--gp-co-press: rgba(255, 255, 255, 0.08);
}

/* "Товар / Подытог" over one column of lines says nothing */
.woocommerce-checkout-review-order-table:has(tr.gp-co-items) thead {
	display: none;
}

.woocommerce-checkout-review-order-table tr.gp-co-items > td {
	flex: 1 1 100%; /* the theme (blur) makes the table's rows flex and their cells blocks, and the cell shrank to its
	                   content: on a wide screen the switch stopped 59px short of the totals' right edge */
	padding-top: 4px;
	padding-bottom: 8px;
}

/* On a card checkout the gift card block under the lines (its cards' pictures, its text) stands 4px inside the table,
   and the lines' pictures 12.8px in looked indented next to it (Kirill, 2026-11-13: «отступ больше у картинки игры
   слева»): the same 4px here */
body.gp-card-checkout-shell .woocommerce-checkout-review-order-table tr.gp-co-items > td {
	padding-left: 4px;
	padding-right: 4px;
}

.gp-co-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-co-item {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	margin: 0;
}

.gp-co-picture {
	flex: none;
	width: var(--gp-co-picture);
	height: var(--gp-co-picture);
	border-radius: 10px;
	overflow: hidden;
}

.gp-co-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.gp-co-body {
	flex: 1;
	min-width: 0;
	height: var(--gp-co-picture);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#order_review .gp-co-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px; /* below the picture's top, which its rounded corners make look lower (design/interface.md) */
	font-size: calc(var(--gp-co-name-size) * 1px) !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: inherit;
}

#order_review .gp-co-name a {
	color: inherit;
	text-decoration: none;
}

.gp-co-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

/* every element of the price: checkout.css sizes WooCommerce's price span in the order review at 14px */
#order_review .gp-co-price,
#order_review .gp-co-price * {
	font-size: calc(var(--gp-co-price-size) * 1px) !important;
	font-weight: 500 !important;
	line-height: 1;
	color: inherit;
	white-space: nowrap;
}

#order_review .gp-co-price {
	position: relative;
	top: calc(0.5cap * (1 - var(--gp-co-figure-size) / var(--gp-co-price-size)));
}

/* The switch: bin or minus, the number, plus; as in the cart, the minus is a bin while the quantity is one */
.gp-co-qty {
	flex: none;
	display: flex;
	height: var(--gp-co-switch);
	box-sizing: border-box;
	border: 1px solid var(--gp-co-switch-border);
	border-radius: 8px;
	background: var(--gp-co-switch-bg);
	overflow: hidden;
}

#order_review .gp-co-qty-number {
	/* the switch's baseline, and with it the price's: the only item aligned by baseline */
	align-self: baseline;
	min-width: 18px;
	line-height: calc(var(--gp-co-switch) - 2px);
	text-align: center;
	font-size: calc(var(--gp-co-figure-size) * 1px) !important;
	font-weight: 400 !important;
	font-variant-numeric: tabular-nums;
	color: inherit;
}

.gp-co-step,
.gp-co-bin {
	all: unset;
	position: relative;
	align-self: center;
	box-sizing: border-box;
	width: var(--gp-co-switch);
	height: calc(var(--gp-co-switch) - 2px);
	cursor: pointer;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	/* out slowly; in at once under the pointer, below (design/interface.md, "Наведение"); all: unset took the theme's */
	transition: background-color var(--gp-hover-out);
}

/* the storefront's icons as masks in the text colour (css/global.css) */
.gp-co-step::before,
.gp-co-bin::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-plus, none) center / 16px no-repeat;
	mask: var(--gp-icon-plus, none) center / 16px no-repeat;
	transition: opacity var(--gp-hover-in); /* only opacity: see "Waiting" below */
}

.gp-co-step--minus::before {
	-webkit-mask-image: var(--gp-icon-minus);
	mask-image: var(--gp-icon-minus);
}

.gp-co-step--remove::before,
.gp-co-bin::before {
	-webkit-mask-image: var(--gp-icon-trash);
	mask-image: var(--gp-icon-trash);
	-webkit-mask-size: 15px;
	mask-size: 15px;
}

/* sold one at a time: a grey bin where the switch would be. The bin has no figures to share a baseline with (an empty
   button's baseline is its bottom edge), so the price is centred on it instead, unshifted */
.gp-co-bin {
	opacity: 0.55;
	height: var(--gp-co-switch);
	border-radius: 8px;
}

.gp-co-line:has(> .gp-co-bin) {
	align-items: center;
}

#order_review .gp-co-line:has(> .gp-co-bin) .gp-co-price {
	top: 0;
}

.gp-co-step:disabled {
	cursor: default;
	opacity: 0.3;
}

.gp-co-step:focus-visible,
.gp-co-bin:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: 6px;
}

@media (hover: hover) {
	.gp-co-step:not(:disabled):hover,
	.gp-co-bin:hover {
		background-color: var(--gp-co-press);
		transition-duration: var(--gp-hover-in);
	}
}

/* Waiting: a turning ring in the icon's place (design/interface.md, "Ожидание"); the rest of the list waits too */
.gp-co-list.is-busy {
	pointer-events: none;
}

/* The ring is a layer of its own in the button's middle, and the icon flows into it by opacity alone. It used to take
   the icon's own ::before to the middle: under the pointer global.css gives a button's ::before the hover's 0.12s for
   every property, and the ring slid in from the button's corner (Kirill, 2026-11-13: «кольцо прилетало анимацией
   слева»). */
.gp-co-step::after,
.gp-co-bin::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	animation: gp-ring 1s linear infinite; /* global.css */
	transition: opacity var(--gp-hover-in);
}

.gp-co-step.is-busy::before,
.gp-co-bin.is-busy::before {
	opacity: 0;
}

.gp-co-step.is-busy::after,
.gp-co-bin.is-busy::after {
	opacity: 1;
}

/* "× 3": a line whose quantity is fixed here (an imported cart, a bundle's product) or that has only the bin (a card
   checkout), next to the bin */
#order_review .gp-co-count {
	flex: none;
	font-size: 14px !important;
	opacity: 0.6;
	white-space: nowrap;
}

.gp-co-line > .gp-co-count:has(+ .gp-co-bin) {
	margin-left: auto;
}

/* A bundle's own products: small lines under the bundle, starting where its name does */
.gp-co-item--bundled {
	padding: 0 0 4px calc(var(--gp-co-picture) + 12px);
	justify-content: space-between;
	align-items: baseline;
}

#order_review .gp-co-item--bundled .gp-co-name {
	margin: 0;
	font-size: 12px !important;
	opacity: 0.7;
}

#order_review .gp-co-item--bundled .gp-co-count {
	font-size: 12px !important;
}