/**
 * Cart page (/ostukorv/) — styles the classic [woocommerce_cart] shortcode.
 *
 * Layout measured from the mockup /ostukorv at 1440px: a two-column grid,
 * flexible line-item list on the left, a 320px totals aside on the right,
 * 56px column gap. Line items are a hairline-ruled list with a 96px sand
 * media tile. Every value is a token or a page-local custom property derived
 * from a mockup measurement (declared once, below).
 *
 * WooCommerce's own stylesheets (woocommerce.css, -layout, -smallscreen)
 * load before this file; rules here override only where Woo's default look
 * fights the token layer (borders, radii, zebra striping, floats). Buttons
 * and .input-text fields are already globally styled in components.css.
 *
 * @package CreativeCanvas
 */

.woocommerce-cart {
	/* Mockup measurements, declared once. */
	--cc-cart-aside: 20rem;                                    /* 320px totals column */
	--cc-cart-gap: calc(var(--cc-space-8) + var(--cc-space-6)); /* 56px column gap */
	--cc-cart-thumb: 6rem;                                     /* 96px media tile */
}

/* The page template wraps shortcode content in .cc-prose; the cart is a
 * two-column commerce layout, not prose — lift the measure cap. */
.woocommerce-cart .cc-prose {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Two-column shell: line items | totals aside, stacked below lg.
 * ------------------------------------------------------------------------ */

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-space-8);
}

.woocommerce-cart .woocommerce-notices-wrapper:empty {
	display: none;
}

@media (min-width: 64rem) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) var(--cc-cart-aside);
		column-gap: var(--cc-cart-gap);
		align-items: start;
	}

	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart .wc-empty-cart-message,
	.woocommerce-cart .return-to-shop {
		grid-column: 1 / -1;
	}
}

/* Notices are styled site-wide in components.css. */

/* The .button Woo puts inside notices is styled as a plain link site-wide in
 * components.css; nothing cart-specific remains. */

/* ---------------------------------------------------------------------------
 * Line items — a hairline-ruled list, not a bordered data table.
 * ------------------------------------------------------------------------ */

.woocommerce-cart table.shop_table.cart {
	border: 0;
	border-top: var(--cc-border);
	border-radius: var(--cc-radius);
	margin: 0;
	width: 100%;
}

/* The column headers add nothing the cells don't say; keep them for
 * assistive tech, hide them visually (mockup shows a plain list). */
.woocommerce-cart table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce-cart table.cart td {
	border: 0;
	border-bottom: var(--cc-border);
	padding: var(--cc-space-4) var(--cc-space-4) var(--cc-space-4) 0;
	vertical-align: middle;
	background-color: transparent;
	line-height: var(--cc-leading-body);
}

.woocommerce-cart table.cart td:last-child {
	padding-inline-end: 0;
}

/* Media tile: fixed square on sand, like the product-card media block. */
.woocommerce-cart table.cart td.product-thumbnail {
	width: var(--cc-cart-thumb);
}

.woocommerce-cart table.cart td.product-thumbnail a {
	display: block;
	width: var(--cc-cart-thumb);
	background-color: var(--cc-color-sand);
	border-radius: var(--cc-radius);
	overflow: hidden;
}

.woocommerce-cart table.cart td.product-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0;
}

/* Name column absorbs the free width; numbers cluster on the right. */
.woocommerce-cart table.cart td.product-name {
	width: 100%;
}

/* Product name: display face, underline only on hover (card-title rule). */
.woocommerce-cart table.cart td.product-name a {
	font-family: var(--cc-font-body); /* the card's name style: Inter */
	font-weight: var(--cc-weight-medium);
	font-size: var(--cc-text-ui);
	letter-spacing: 0;
	color: var(--cc-color-ink);
	text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover,
.woocommerce-cart table.cart td.product-name a:focus-visible {
	color: var(--cc-color-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Variation meta under the name (size, colour). */
.woocommerce-cart table.cart td.product-name .variation {
	margin: var(--cc-space-1) 0 0;
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	font-size: var(--cc-text-ui);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-cart table.cart td.product-price {
	color: var(--cc-color-muted);
}

/* Quantity: the global .input-text look, centred, compact. */
.woocommerce-cart table.cart .quantity .qty {
	width: var(--cc-space-16);
	text-align: center;
}

/* Remove: a quiet text link (visible text comes from the cart.php fork). */
.woocommerce-cart table.cart td.product-remove {
	text-align: end;
	white-space: nowrap;
}

.woocommerce-cart table.cart a.remove {
	display: inline;
	width: auto;
	height: auto;
	font-size: var(--cc-text-footnote);
	font-weight: var(--cc-weight-regular);
	line-height: var(--cc-leading-body);
	/* !important only to counter Woo's own `color: red !important`. */
	color: var(--cc-color-muted) !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	border-radius: var(--cc-radius);
}

.woocommerce-cart table.cart a.remove:hover,
.woocommerce-cart table.cart a.remove:focus-visible {
	background-color: transparent;
	color: var(--cc-color-ink) !important;
}

/* ---------------------------------------------------------------------------
 * Actions row — coupon (quiet) + update cart.
 * ------------------------------------------------------------------------ */

/* Stays a real table-cell on desktop: display:flex here would void the
 * colspan via anonymous-cell fixup. Woo's own float layout (coupon left,
 * update right) is kept and only restyled. */
.woocommerce-cart table.cart td.actions {
	border-bottom: 0;
	padding: var(--cc-space-4) 0 0;
}

.woocommerce-cart table.cart td.actions .coupon {
	/* Floats blockify inline-flex and shrink-to-fit misjudges wrappable flex
	 * rows; nowrap keeps the pair on one line (the stacked view re-wraps). */
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--cc-space-2);
	float: left;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	/* Woo hardcodes 80px; a coupon code needs room to be legible. */
	flex: 0 1 var(--cc-cart-aside);
	width: var(--cc-cart-aside);
	min-width: 0;
	min-height: var(--cc-btn-height);
}

/* Coupon apply + update cart are secondary actions: surface fill with the
 * always-visible 1px ring, per the button spec (components.css owns the
 * primary mapping; this only flips the variant). */
/* Coupon apply + update cart: the handoff's outlined pill in the action colour. */
.woocommerce-cart table.cart td.actions .button:not(:disabled) {
	background-color: transparent;
	border-color: var(--cc-color-action);
	color: var(--cc-color-action);
	box-shadow: none;
}

.woocommerce-cart table.cart td.actions .button:not(:disabled):hover {
	background-color: var(--cc-color-accent-soft);
	border-color: var(--cc-color-action);
	color: var(--cc-color-action-hover);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Totals — a surface card with a hairline border.
 * ------------------------------------------------------------------------ */

.woocommerce-cart .cart-collaterals {
	width: auto;
}

.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after {
	display: none;
}

/* Cross-sells are out of scope for this page; the clean removal is
 * remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' )
 * in a theme hooks file — flagged, since this bead owns no shared PHP. */

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background-color: var(--cc-color-surface);
	border: var(--cc-border);
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow);
	padding: var(--cc-space-5);
}

/* Aside heading as a micro eyebrow, per the mockup's summary asides. */
.woocommerce-cart .cart_totals h2 {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-micro);
	font-weight: var(--cc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wider);
	line-height: var(--cc-leading-tight);
	margin: 0 0 var(--cc-space-4);
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: var(--cc-radius);
	margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	border: 0;
	padding: var(--cc-space-2) 0;
	background-color: transparent;
	font-size: var(--cc-text-ui);
	font-weight: var(--cc-weight-regular);
	line-height: var(--cc-leading-body);
	vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table th {
	width: auto;
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* Grand total: hairline above, one size up — the mockup's total row. */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: var(--cc-border);
	padding-top: var(--cc-space-3);
	font-size: var(--cc-text-lg);
}

.woocommerce-cart .cart_totals .order-total strong {
	font-weight: var(--cc-weight-semibold);
}

/* The VAT share WooCommerce appends to an inclusive total — its own line,
 * small and muted, so it neither widens the table nor shouts. See the same
 * rule in checkout.css. */
.woocommerce-cart .cart_totals .order-total td {
	white-space: normal;
}

.woocommerce-cart .cart_totals .order-total .includes_tax {
	display: block;
	font-size: var(--cc-text-small);
	font-weight: var(--cc-weight-regular);
	color: var(--cc-color-muted);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
	margin-block-start: var(--cc-space-5);
}

.woocommerce-cart .wc-proceed-to-checkout::before,
.woocommerce-cart .wc-proceed-to-checkout::after {
	display: none;
}

/* Full-width primary button. Colours restated because Woo paints
 * `a.button.alt` in its own purple at higher specificity than the shared
 * button mapping in components.css. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	font-size: var(--cc-btn-text);
	padding: var(--cc-space-2) var(--cc-btn-pad-inline);
	background-color: var(--cc-color-action);
	border-color: var(--cc-color-action);
	color: var(--cc-color-ground);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background-color: var(--cc-color-action-hover);
	border-color: var(--cc-color-action-hover);
	color: var(--cc-color-ground);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Empty cart — centred message + a secondary "back to shop" button.
 * ------------------------------------------------------------------------ */

.woocommerce-cart .wc-empty-cart-message .cart-empty {
	text-align: center;
	background-color: transparent;
	border: 0;
	padding: var(--cc-space-16) var(--cc-space-4) 0;
	font-size: var(--cc-text-lg);
}

.woocommerce-cart .return-to-shop {
	text-align: center;
	padding-block-end: var(--cc-space-16);
	margin: 0;
}

/* "Back to shop": the handoff's filled primary pill — it is the one action
 * on an empty cart. */
.woocommerce-cart .return-to-shop a.button {
	background-color: var(--cc-color-action);
	border-color: var(--cc-color-action);
	color: var(--cc-color-ground);
	box-shadow: none;
}

.woocommerce-cart .return-to-shop a.button:hover,
.woocommerce-cart .return-to-shop a.button:focus-visible {
	background-color: var(--cc-color-action-hover);
	border-color: var(--cc-color-action-hover);
	color: var(--cc-color-ground);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Stacked view — refine Woo's smallscreen stacking (its breakpoint is a
 * max-width 768px media attribute on woocommerce-smallscreen.css; mirror it
 * exactly so the two layers switch together).
 * ------------------------------------------------------------------------ */

@media (max-width: 768px) {
	/* Kill Woo's zebra striping (same specificity as its rule, later file). */
	.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
		background-color: transparent;
	}

	/* Each line item becomes a small grid: sand tile left, details right. */
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: var(--cc-cart-thumb) minmax(0, 1fr);
		column-gap: var(--cc-space-4);
		align-items: start;
		padding-block: var(--cc-space-4);
		border-bottom: var(--cc-border);
	}

	.woocommerce-cart table.cart tr.cart_item td {
		border: 0;
		padding: 0 0 var(--cc-space-2);
		grid-column: 2;
	}

	.woocommerce-cart table.cart tr.cart_item td:last-child {
		padding-block-end: 0;
	}

	/* Re-show the thumbnail Woo hides on small screens; span the rows. */
	.woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 5;
		padding: 0;
	}

	/* Woo forces text-align: right !important on stacked cells; the name
	 * reads better leading the block. !important is required to win. */
	.woocommerce-cart table.cart tr.cart_item td.product-name {
		text-align: start !important;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-name::before,
	.woocommerce-cart table.cart tr.cart_item td.product-thumbnail::before {
		/* No data-title on these cells; Woo's attr() label would render a
		 * bare ": ". */
		display: none;
	}

	/* data-title labels, styled like quiet field labels. */
	.woocommerce-cart table.cart tr.cart_item td::before {
		font-size: var(--cc-text-footnote);
		font-weight: var(--cc-weight-regular);
		color: var(--cc-color-muted);
	}

	.woocommerce-cart table.cart .quantity .qty {
		width: var(--cc-space-16);
	}

	/* Actions stack full width; the coupon field takes the row. */
	.woocommerce-cart table.cart td.actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		width: 100%;
		flex-wrap: wrap;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce-cart table.cart td.actions .coupon .button {
		flex: 1 1 100%;
		width: 100%;
	}

	.woocommerce-cart table.cart td.actions > .button {
		width: 100%;
	}
}