/*
 * Cart, checkout and the order confirmation.
 *
 * WooCommerce's Cart and Checkout blocks draw their own structure, and it is a
 * good structure — two columns, a sticky totals panel, a line per item. What is
 * missing under the stock styling is this shop's chrome: the rounded panels, the
 * hairline separators and the dark totals figure the approved design uses
 * everywhere else. So this file dresses their markup rather than replacing it.
 *
 * Enqueued only where `is_cart()`, `is_checkout()` — see functions.php.
 */

/* WooCommerce narrows `.woocommerce-cart main .woocommerce` to 1000 px, and
   the crumbs carry the class too: they and the title stood 120 px in from the
   1240 px cart on a wide screen (cart review, 29.09.2026). */
.woocommerce-cart main .gsl-crumbs.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* The two-column shape: lines on the left, totals on the right. Below 1080 px
   WooCommerce stacks them itself, and the panel stops being sticky with it. */
.wc-block-cart,
.wc-block-checkout {
	gap: var(--wp--preset--spacing--60);
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--40);
}

/* Totals and the order summary get the same panel as the filter rail: a border,
   a medium radius and inner padding. Stock WooCommerce leaves them flat, which
   reads as unfinished next to the product card. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-order-confirmation-totals {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-soft);
}

.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	letter-spacing: -0.028em;
}

/* One line per item, separated by a hairline rather than a full border — the
   same treatment the facet sections get. */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wc-block-cart-item__image img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 500;
}

.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--brand-text);
}

/* Article number and the per-piece line the plugin adds through
   `woocommerce_get_item_data`. Both are secondary to the name and both carry
   digits that stack down the column. */
.wc-block-components-product-metadata {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-components-product-price {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* The quantity stepper is described once, in style.css: the same control appears
   in the mini-cart drawer, which opens from the header on every page, and a rule
   living here would leave it bare everywhere except this screen. */

/* The minimum-order notice from Cart\MinimumOrder. It is the one message that
   stops an order, so it may not look like the rest of the notices. */
.wc-block-components-notice-banner.is-error {
	border-radius: var(--wp--custom--radius--medium);
}

.gsl-co .wc-block-components-form .wc-block-components-text-input input {
	border: 1.5px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
}

.gsl-co .wc-block-components-form .wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--brand);
}

/* Step headings in the checkout: the design numbers them, WooCommerce does not,
   so they get the facet heading's weight and tracking instead of a number. */
.wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1080px) {
	.wc-block-cart__sidebar,
	.wc-block-checkout__sidebar {
		position: static;
	}
}