/* Seven Native WooCommerce — cart page: the line table and its columns, the
   collaterals/totals skin, the shipping calculator and the empty state shared
   with a Classic checkout that has nothing to check out. Head-enqueued blocking
   on those pages after the Theme layer sheet. */
@layer components {
	/*
	 * Cart-page table. The page wrapper drops `.st-prose` for the order flow, so
	 * the cart line table — which used to borrow the prose table skin — owns its
	 * full layout here: fixed thumbnail column, fluid product column, right-aligned
	 * money columns, and a stacked card layout on narrow viewports (the cells carry
	 * `data-title` labels for that). The `.shop_table` class is kept on the markup
	 * for WC JS hooks only; all visuals are theme-owned.
	 */

	/* Fixed, so the columns are sized from the header row and never re-read as
	   body rows stream in. Auto layout recomputed on every arriving row, and
	   declaring one column at a time only moved which one absorbed the change —
	   quantity, then the product name, then quantity again. Every column below
	   therefore carries a border-box width and the name takes the remainder.
	   Below 48em of available form width the rows become a grid, so this governs
	   the wide table only, which is where the shift was measured. */
	.woocommerce-cart-form {
		container: st-cart-lines / inline-size;
	}

	.st-cart__table {
		inline-size: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.st-cart__head th {
		padding-block: var(--st-space-3);
		padding-inline: var(--st-space-3);
		border-block-end: 1px solid var(--st-border);
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-semibold);
		color: var(--st-fg-muted);
		text-align: start;
	}

	/* Wide enough for both things that land here: the longest header label
	   ("Υποσύνολο", 78px) and the longest amount the storefront formats
	   ("1.234,56 €", 76px). In rem, not ch — the header is set a step smaller
	   than the body, so a ch here would reserve for the label's font and clip
	   the amount rendered below it in the row. */
	.st-cart__col--price,
	.st-cart__col--subtotal {
		inline-size: calc(5rem + 2 * var(--st-space-3));
		text-align: end;
	}

	/* The trash control, matching the width its cell already declares. */
	.st-cart__col--remove {
		inline-size: calc(2rem + 2 * var(--st-space-3));
	}

	/* Definite, because an auto table re-reads its column widths as rows stream
	   in: with only the header parsed the column was as wide as its label at
	   95px, and the first body row widened it to 142 — the whole row jumping
	   left, 0.00045 of shift on 3 loads in 10.

	   It has to be the stepper's exact width or the content wins anyway: an
	   auto table takes the LARGER of the declared width and what the cells
	   need. The stepper is two buttons and a value box, each button inset by
	   the wrapper's border on both sides, so the pair gives back two borders
	   overall — measured 118px, and 142 with this cell's padding. */
	.st-cart__col--qty {
		inline-size: calc(
			2 * var(--st-control-height-md)
			+ var(--st-quantity-value-w-md)
			- 2 * var(--st-field-border-width)
			+ 2 * var(--st-space-3)
		);
		text-align: center;
	}

	/* Product column takes the slack so the money columns stay compact. `auto`,
	   not `100%`: in a fixed table a percentage is measured against the table
	   itself, so 100% here would claim the whole width and leave the declared
	   columns fighting over what is left. */
	.st-cart__col--name {
		inline-size: auto;
	}

	.st-cart__cell {
		padding-block: var(--st-space-4);
		padding-inline: var(--st-space-3);
		border-block-end: 1px solid var(--st-border-subtle);
		vertical-align: middle;
	}

	.st-cart__cell--price,
	.st-cart__cell--subtotal {
		text-align: end;
		white-space: nowrap;
	}

	.st-cart__cell--qty {
		text-align: center;
	}

	/* fixed thumbnail column */
	.st-cart__col--thumb,
	.st-cart__cell--thumb {
		inline-size: 6rem;
	}

	/* The thumbnail link is an inline <a>; without block it collapses to 0
	   width and the reset's `max-inline-size: 100%` shrinks the image to 0. */
	.st-cart__cell--thumb a {
		display: block;
		inline-size: 4.5rem;
	}

	/* The definite max-inline-size overrides the reset's `max-inline-size: 100%`,
	   which in an auto-layout table resolves against a circular cell width and
	   collapses the image to 0. */
	.st-cart__cell--thumb img {
		display: block;
		inline-size: 4.5rem;
		max-inline-size: 4.5rem;
		block-size: 4.5rem;
		object-fit: contain;
		object-position: center;
		border-radius: var(--st-radius-sm);
	}

	/* A `woocommerce_cart_item_name` filter can re-wrap the product name in its
	   own anchor that drops the theme class, so target the cell's link directly. */
	.st-cart__cell--name > a {
		color: var(--st-fg);
		font-weight: var(--st-font-weight-medium);
		text-decoration: none;
	}

	.st-cart__cell--name > a:hover,
	.st-cart__cell--name > a:focus-visible {
		color: var(--st-accent-fg);
	}

	/* remove button */
	.st-cart__cell--remove {
		inline-size: 2rem;

		/* Match the narrow card's top alignment. The first parsed cell must not
		   recenter when the thumbnail or a longer product name grows the row. */
		vertical-align: top;
	}

	.st-cart__remove {
		--st-button-ghost-fg:        var(--st-fg-muted);
		--st-button-ghost-fg-hover:  var(--st-error-fg);
		--st-button-ghost-bg-hover:  var(--st-error-bg);
		--st-button-ghost-bg-active: color-mix(in srgb, currentcolor var(--st-state-pressed-opacity), var(--st-error-bg));
	}

	.st-cart__qty-locked {
		color: var(--st-fg-muted);
	}

	/* per-line meta (SKU / barcode / stock / savings) */
	.st-cart__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--st-space-1) var(--st-space-3);
		margin-block-start: var(--st-space-1);
		font-size: var(--st-font-size-sm);
		color: var(--st-fg-muted);
	}

	.st-cart__meta-item--stock.is-in-stock {
		color: var(--st-success-fg);
	}

	.st-cart__meta-item--stock.is-out-of-stock {
		color: var(--st-error-fg);
	}

	.st-cart__meta-item--saving {
		color: var(--st-accent-fg);
		font-weight: var(--st-font-weight-medium);
	}

	.st-cart__backorder {
		margin-block: var(--st-space-1) 0;
		font-size: var(--st-font-size-sm);
		color: var(--st-fg-muted);
	}


	/* coupon + update actions row */
	.st-cart__actions {
		padding-block: var(--st-space-4);
		padding-inline: var(--st-space-3);
	}

	.st-cart__coupon {
		display: flex;
		flex-wrap: wrap;
		gap: var(--st-space-2);
		margin-block-end: var(--st-space-3);
	}

	.st-cart__coupon-field {
		flex: 1 1 12rem;
		max-inline-size: 18rem;
	}

	/* Cart summary. WooCommerce emits a semantic two-column table; a fixed table
	   layout keeps every label/value pair on the same shared axis while long tax
	   and shipping notes wrap beneath the amount instead of pushing both columns
	   together. The card recipe lives outside the desktop query so the stacked
	   tablet/mobile summary does not lose its padding and surface. */
	.st-cart-collaterals {
		margin-block-start: var(--st-space-6);
	}

	.cart_totals {
		inline-size: 100%;
		max-inline-size: 30rem;
		margin-inline-start: auto;
		padding: var(--st-space-5);
		border: 1px solid var(--st-border);
		border-radius: var(--st-radius-lg);
		background: var(--st-bg-subtle);
	}

	.cart_totals > h2 {
		margin-block: 0 var(--st-space-4);
		font-size: var(--st-font-size-h5);
		font-weight: var(--st-font-weight-semibold);
		line-height: var(--st-line-height-snug);
	}

	.cart_totals table {
		inline-size: 100%;
		margin: 0;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.cart_totals :is(th, td) {
		padding-block: var(--st-space-3);
		vertical-align: top;
		border-block-end: 1px solid var(--st-border-subtle);
		line-height: var(--st-line-height-snug);
	}

	.cart_totals th {
		inline-size: 40%;
		padding-inline: 0 var(--st-space-3);
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-medium);
		text-align: start;
	}

	.cart_totals td {
		inline-size: 60%;
		padding-inline: var(--st-space-3) 0;
		color: var(--st-fg);
		text-align: end;
		overflow-wrap: anywhere;
	}

	.cart_totals td .amount {
		white-space: nowrap;
	}

	.cart_totals .order-total :is(th, td) {
		padding-block-start: var(--st-space-4);
		border-block-end: 0;
	}

	.cart_totals .order-total th {
		color: var(--st-fg);
		font-size: var(--st-font-size-md);
		font-weight: var(--st-font-weight-semibold);
	}

	.cart_totals .order-total strong {
		display: block;
		font-size: var(--st-font-size-lg);
		font-weight: var(--st-font-weight-bold);
		line-height: var(--st-line-height-snug);
	}

	.cart_totals .order-total small {
		display: block;
		margin-block-start: var(--st-space-1);
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-xs);
		font-weight: var(--st-font-weight-normal);
		line-height: var(--st-line-height-normal);
	}

	.cart_totals .woocommerce-shipping-methods {
		display: grid;
		gap: var(--st-space-2);
	}

	.cart_totals .woocommerce-shipping-methods li {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		gap: var(--st-space-2);
	}

	/*
	 * The row is packed at its end, so a radio that paints before its label has
	 * streamed sits at the row's edge and moves left by the label's width when
	 * the label arrives (0.000052 CLS on the live desktop cart). A row stays
	 * unpainted until the end marker the plugin prints on
	 * `woocommerce_after_shipping_rate` has streamed; a template that never fires
	 * that hook reveals its rows after the delay instead of hiding them.
	 */
	.cart_totals .woocommerce-shipping-methods li:not(:has(> template[data-st-rate-end])) {
		visibility: hidden;
		animation: st-shipping-rate-reveal 0s 4s forwards;
	}

	@keyframes st-shipping-rate-reveal {
		to {
			visibility: visible;
		}
	}

	.cart_totals .woocommerce-shipping-methods input {
		flex: 0 0 auto;
		margin-block-start: 0.2em;
	}

	.cart_totals .woocommerce-shipping-destination {
		margin-block: var(--st-space-2) 0;
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
		line-height: var(--st-line-height-normal);
	}

	.cart_totals [aria-controls="shipping-calculator-form"] {
		display: inline-block;
		margin-block-start: var(--st-space-2);
	}

	.cart_totals .shipping-calculator-form {
		margin-block-start: var(--st-space-3);
		text-align: start;
	}

	.cart_totals .wc-proceed-to-checkout {
		margin-block-start: var(--st-space-4);
	}

	.cart_totals .wc-proceed-to-checkout .checkout-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		text-align: center;
	}

	@media (width >= 52.5em) {
		.st-cart-layout--sidebar {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 24rem;
			gap: var(--st-space-10);
			align-items: start;
		}

		.st-cart-layout--sidebar .st-cart-collaterals {
			margin-block-start: 0;
			position: sticky;
			inset-block-start: var(--st-space-6);
		}

		.st-cart-layout--sidebar .cart_totals {
			max-inline-size: none;
		}
	}

	@media (width <= 30em) {
		.cart_totals {
			padding: var(--st-space-4);
		}
	}

	/* The form's available width owns this transition: a sidebar can leave the
	   cart narrow even on a wide viewport. Each cell keeps its data-title label. */
	@container st-cart-lines (width < 48em) {
		/* Desktop column reservations must not size the mobile card grid.
		   Removing the columns alone still lets fixed layout divide each card
		   into six anonymous columns, so both parts of the table model change. */
		.st-cart__table {
			table-layout: auto;
		}

		.st-cart__table > colgroup {
			display: none;
		}

		.st-cart__head {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		.st-cart__row {
			display: grid;
			grid-template-columns: 4.5rem 1fr auto;
			gap: var(--st-space-1) var(--st-space-3);
			align-items: center;
			padding-block: var(--st-space-4);
			border-block-end: 1px solid var(--st-border-subtle);
		}

		.st-cart__cell {
			padding: 0;
			border: 0;
		}

		/* Pinned to the top of the card, not centred in the first track. It is
		   the row's first cell and for a moment its only one, so centring
		   measured it against a track the product name had not filled yet and
		   dropped it 26px once the rest of the row arrived. The track's height
		   is the title's, which no reservation can predict. */
		.st-cart__cell--remove {
			grid-column: 3;
			grid-row: 1;
			place-self: start end;
		}

		.st-cart__cell--thumb {
			grid-column: 1;
			grid-row: 1 / span 2;
			inline-size: 4.5rem;
		}

		.st-cart__cell--name {
			grid-column: 2;
			grid-row: 1;
		}

		.st-cart__cell--price,
		.st-cart__cell--qty,
		.st-cart__cell--subtotal {
			grid-column: 2 / -1;
			text-align: start;
		}

		/* label : value rows, label sourced from the cell's data-title */
		.st-cart__cell--price::before,
		.st-cart__cell--qty::before,
		.st-cart__cell--subtotal::before {
			content: attr(data-title) ": ";
			color: var(--st-fg-muted);
			font-size: var(--st-font-size-sm);
		}
	}
}

@layer components {
	.st-cart-empty {
		display: grid;
		justify-items: center;
		gap: var(--st-space-md);
		padding-block: var(--st-space-xl);
		text-align: center;
		color: var(--st-fg-muted);
	}

	.st-cart-empty__icon {
		color: var(--st-fg-subtle);
	}
}