/*
 * The cart page: the Cart block. Loaded only where is_cart() is true. The line items and totals it shares with the
 * mini cart drawer are in cart-common.css; the cross-sells and the empty cart's "Новинка в магазине" are product
 * cards (cards.css), the promo code field is in inline-forms.css.
 *
 * Moved here 2026-10-22 from Fluent Snippets 70 "Cart Page Styles" (loaded wherever the URL contained "cart")
 * and 102 "Cart page".
 */

.wp-block-woocommerce-cart a {
	text-decoration: none;
}

main[data-page="cart"] h1 {
	display: flex;
	justify-content: space-around;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-container a {
	color: black;
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices .price.wc-block-components-product-price {
	display: flex !important;
	justify-content: flex-start;
}

/* Narrow layouts, where the totals go under the items: the total and its button straight after the items, the
   cross-sells after them. WooCommerce puts the cross-sells in the items' column, between the two; snippet 60 moved
   them out of the flow, 400px down (position: absolute; bottom: -400px), which fit only a cart of one length. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout:is(.is-mobile, .is-small, .is-medium) > .wc-block-cart__main {
	display: contents;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout:is(.is-mobile, .is-small, .is-medium) > .wc-block-cart__main > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* Full width by the layout's class: WooCommerce widens it by the screen's (up to 919px), and with the page's 10px a side
   is-medium lasts to 940px, where the totals stood 360px wide under full-width lines */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout:is(.is-mobile, .is-small, .is-medium) > .wc-block-cart__sidebar {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout:is(.is-mobile, .is-small, .is-medium) .wp-block-woocommerce-cart-cross-sells-block {
	order: 2;
}

/* No "Перейти к оформлению заказа" pinned to the bottom of a phone's screen on a plate with a blurred shadow up the page
   (Kirill, 2026-10-23: "уберем залипание кнопки в корзине и появление плашки с блюром"). WooCommerce pins the button
   itself, not a copy: the sticky class goes on the one button while its place under the total is out of view, so it
   stays in that place instead. Hiding the class hid the only button. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky {
	position: static;
	width: auto;
	padding: 0;
	background: none;
	z-index: auto;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky::before {
	content: none;
}

/* The 400px spacer the cart page's template has under the cart (cart-interval) held the room snippet 60's
   cross-sells took, 400px down out of the flow. They are in the flow now, and it was a giant empty band under the cart
   (Kirill, 2026-10-22). Its old rule (wide screens only) looked for it inside the Cart block, where it is not. */
.wp-block-spacer.cart-interval {
	display: none;
}

/* ── The wide table (is-large) ───────────────────────────────────────────────── */

/* Its lines as the mini cart's (cart-common.css), larger, and the line's total in a column of its own (Kirill,
   2026-10-23: "по аналогии с миникорзиной, но учитывая большую ширину и вообще размеры и наличие итого"): the picture
   112px; beside it the name at the top, 22px, in two lines at most; the price and the quantity along the
   picture's bottom edge, an old price above the price, the badge after it; the total at the right, on the price's
   line. They were WooCommerce's: the price, then the quantity stacked under the name, the total 50px down from the
   top, level with nothing, and a line between every two items.
   The sizes are Kirill's pick of six (2026-10-23): with a 128px picture and an 18px name a one-line name left a hole
   down to the price; 112px with a 24px name and a 32px price did not fit a two-line name over an old price (the old
   price 5.6px under the name, closer than to its price, and the price 4px below the picture). Here a two-line name
   keeps 10px over an old price. */
.wp-block-woocommerce-cart .is-large {
	--gp-line-picture: 112px;
	--gp-line-price: 28px;
	--gp-line-old-price: 16px;
	--gp-line-old-price-pull: -4px; /* 6.5px between the glyphs, the gap growing with the price (cart-common.css) */
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items td.wc-block-cart-item__image {
	width: calc(var(--gp-line-picture) + 20px);
	padding-right: 20px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items td.wc-block-cart-item__image img {
	width: var(--gp-line-picture);
	height: var(--gp-line-picture);
	object-fit: cover;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items td.wc-block-cart-item__product .wc-block-cart-item__wrap > .wc-block-components-product-name {
	font-size: 22px;
	line-height: 28px;
}

/* 32px clear of the quantity: the total is the column's, not one more thing in the line */
.wp-block-woocommerce-cart .is-large table.wc-block-cart-items td.wc-block-cart-item__total {
	display: table-cell; /* WooCommerce's flex took it out of the row's height, so it could not sit at the bottom */
	padding-left: 32px;
	vertical-align: bottom;
}

/* The price's size and line, so the two amounts share a baseline. The column as wide as a 6-digit total ("100 700 ₽"
   is 143px at 28px), whatever the totals are: sized by its widest total, it grew and shrank as a quantity changed,
   and the quantity selector beside it moved (Kirill, 2026-10-23). The threshold below was measured with it. */
.wp-block-woocommerce-cart .is-large table.wc-block-cart-items td.wc-block-cart-item__total .wc-block-components-product-price {
	min-width: 144px;
	justify-content: flex-end;
	font-size: var(--gp-line-price);
	line-height: 36px;
	white-space: nowrap;
}

/* No line between the items, as in the mini cart and the wishlist: the air parts them. The line under the header
   stays, level with the totals' line beside it; the one under the last item went too (Kirill, 2026-10-23: a heading
   and air part the items from the cross-sells better). */
.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row + tr.wc-block-cart-items__row td {
	border-top: 0;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items {
	border-bottom: 0;
}

/* A bundle's products (cart-common.css, "Bundles"), larger here: a 64px picture at the end of the picture column, the
   bundle's, so their text starts where the bundle's does; the name 16px, the price 18px, no total of their own (the
   bundle's line has it). */
.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled {
	--gp-line-picture: 64px;
	--gp-line-price: 18px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled td {
	padding-top: 0;
	padding-bottom: 12px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundles:has(+ .woosb-bundled) td {
	padding-bottom: 12px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled:not(:has(+ .woosb-bundled)) td {
	padding-bottom: 20px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled td.wc-block-cart-item__image > a {
	width: var(--gp-line-picture);
	margin-left: auto;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled td.wc-block-cart-item__product .wc-block-cart-item__wrap > .wc-block-components-product-name {
	font-size: 16px;
	line-height: 21px;
}

.wp-block-woocommerce-cart .is-large table.wc-block-cart-items tr.wc-block-cart-items__row.woosb-bundled td.wc-block-cart-item__total > * {
	visibility: hidden;
}

/* The total only where its column leaves the line room for the price, the badge and the quantity: from a
   672px items column (a 1100px screen), where a 5-digit price with a badge keeps 36px before the quantity selector
   beside a 6-digit total (16px from a 1060px block, none from 1040px; measured 2026-10-23 with the bin still beside
   the selector, 44px more since it took the minus's place). Narrower, as on a 1024px
   iPad lying down, the lines are the mini cart's without it, as
   is-medium's; the order's total is beside them. The query is on the Cart block, the container WooCommerce 11 lays
   the cart out by (is-large from 920px): its items column is the block less the totals' 360px and the 48px gap. A
   container of our own inside it would answer WooCommerce's queries instead. */
@container (max-width: 1079px) {
	.wp-block-woocommerce-cart .is-large table.wc-block-cart-items :is(th.wc-block-cart-items__header-total, td.wc-block-cart-item__total) {
		display: none;
	}
}

/* ── "рекомендуемые товары" (the cross-sells) ──────────────────────────────────────── */

/* Their heading as the product page's section headings ("рекомендуемые игры", "дополнения"): 26px, bold, lowercase. It
   was 20px or 30px by the site (the heading block's own font size, which the theme sets with !important) under a line
   (Kirill, 2026-10-23: "убрать разделительную полосу, лучше норм заголовок и отступ"). The words are the cart page's
   content (tools/migrations/2026-10-23-cross-sells-heading.php); the cards: cards.css. */
/* Between the glyphs, 51px from the last line's picture and 28px to the cards: closer to its cards than to the cart
   (the proximity rule, gp-docs design/interface.md; 31px and 28px without the 20px on top) */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > .wp-block-heading {
	margin: 20px 0 24px;
	font-size: 26px !important;
	font-weight: 700;
	line-height: 33px;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	/* No sides of its own: the page's 10px (layout.css) is the cart's, as the wishlist's (Kirill, 2026-10-22: the
	   lines stood 19px in, the wishlist's 10) */
	.wp-block-woocommerce-cart :is(.is-small, .is-mobile).wc-block-components-sidebar-layout {
		padding: 0 0 16px !important;
	}
}