/**
 * Cart page (classic [woocommerce_cart], also inside an Elementor container): one neutral dark look
 * shared by LuksPlayZ and 3D PrintXpress. Layout and typography only - WooCommerce keeps every field,
 * button, price and total; button colours stay Customizer-controlled. Loaded only on the cart page.
 *
 * Desktop (1200px+): table left, totals card right (sticky). Below: totals under the table.
 * Phones (below 768px): every product is a card - thumbnail, name + details, remove button, then
 * price / quantity / subtotal rows with WooCommerce's own Croatian labels.
 */

/* ------------------------------------------------------------- Layout */

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

/* The cart page's Elementor box (1140px) may grow to the site's own container width (Customizer, the
   header's width), so the product column gets room. Elementor's other settings stay as they are. */
body.woocommerce-cart .elementor .e-con-boxed > .e-con-inner:has(form.woocommerce-cart-form),
body.woocommerce-cart .elementor .elementor-section-boxed > .elementor-container:has(form.woocommerce-cart-form) {
	max-width: min(100%, var(--ast-normal-container-width, 1280px));
}

@media (min-width: 1200px) {
	/* Named areas (automatic placement put the totals under the table). Column gap only: an empty
	   notices row must not add space. */
	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
		grid-template-areas:
			"notices notices"
			"form    totals"
			"cross   totals";
		grid-template-rows: auto auto 1fr;
		column-gap: var(--lpz-space-5);
		align-items: start;
	}

	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .woocommerce-notices-wrapper {
		grid-area: notices;
	}

	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > form.woocommerce-cart-form {
		grid-area: form;
	}

	/* The collaterals box only groups totals and cross-sells: let both join the grid. */
	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals {
		display: contents;
	}

	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals .cart_totals {
		position: sticky;
		top: calc(var(--lpz-space-8) + var(--lpz-space-5));
		grid-area: totals;
	}

	body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals .cross-sells {
		grid-area: cross;
		margin-top: var(--lpz-space-6);
	}
}

body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) and (max-width: 1199px) {
	body.woocommerce-cart .cart-collaterals {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: var(--lpz-space-6);
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: 480px;
	}
}

/* ------------------------------------------------------------- Product table */

body.woocommerce-cart table.shop_table.cart {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.woocommerce-cart table.shop_table.cart thead th {
	padding: var(--lpz-space-3) var(--lpz-space-4);
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.woocommerce-cart table.shop_table.cart td {
	padding: var(--lpz-space-4);
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table.cart td.product-remove {
	width: calc(var(--lpz-touch) + var(--lpz-space-3));
	padding-right: 0;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
	width: calc(64px + var(--lpz-space-5));
	padding-right: var(--lpz-space-2);
}

/* Product photos have light studio backgrounds: light tile, uncropped. */
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	object-fit: contain;
	background-color: #f5f5f7;
	border-radius: var(--lpz-radius-sm);
}

/* The product column takes all remaining width (the other columns shrink to their content). Text wraps
   between words only: "anywhere" let the table squeeze this column to a single letter's width. */
body.woocommerce-cart table.shop_table.cart td.product-name {
	width: 100%;
	min-width: 15rem;
	line-height: var(--lpz-leading-snug);
}

body.woocommerce-cart table.shop_table.cart td.product-name > a {
	color: var(--lpz-text);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: break-word;
}

body.woocommerce-cart table.shop_table.cart td.product-name > a:hover {
	color: var(--lpz-accent-hover);
}

/* Personalisation and variation details: label : value rows, long notes wrap. */
body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 2px var(--lpz-space-3);
	max-width: 46rem;
	margin: var(--lpz-space-2) 0 0;
	padding: 0;
	font-size: var(--lpz-text-xs);
	line-height: 1.5;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
	color: var(--lpz-text-muted);
	font-weight: 500;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
	min-width: 0;
	color: var(--lpz-text);
	overflow-wrap: break-word;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
	margin: 0;
}

body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart td.product-quantity,
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart td.product-quantity {
	padding-inline: var(--lpz-space-3);
}

body.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-weight: 600;
}

/* Remove: a 40px target around a 32px circle. */
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--lpz-touch) - 4px);
	height: calc(var(--lpz-touch) - 4px);
	margin: 0;
	border: 0;
	border-radius: var(--lpz-radius-pill);
	background: transparent;
	color: #c5cad3 !important; /* Between text and muted: clearly visible. WooCommerce sets it with !important. */
	font-size: 1.25rem;
	line-height: 1;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgb(156 163 175 / 0.75);
	border-radius: var(--lpz-radius-pill);
	background-color: rgb(255 255 255 / 0.04);
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove svg {
	width: 18px;
	height: 18px;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover,
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:focus-visible {
	background: transparent;
	color: var(--lpz-danger) !important;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover::after,
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:focus-visible::after {
	border-color: var(--lpz-danger);
}

/* Quantity: the field (and Astra's -/+ buttons when enabled) at touch height. */
body.woocommerce-cart table.shop_table.cart .quantity {
	display: inline-flex;
	align-items: stretch;
}

body.woocommerce-cart table.shop_table.cart .quantity .qty {
	width: 3.25rem;
	min-height: var(--lpz-touch);
	padding: 0 var(--lpz-space-2);
	border: 1px solid var(--lpz-border-strong);
	border-radius: var(--lpz-radius-sm);
	background-color: var(--lpz-bg);
	color: var(--lpz-text);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

body.woocommerce-cart table.shop_table.cart .quantity .minus,
body.woocommerce-cart table.shop_table.cart .quantity .plus {
	min-width: 32px;
	padding-inline: 0;
	min-height: var(--lpz-touch);
	border-color: var(--lpz-border-strong);
	background-color: var(--lpz-surface-raised);
	color: var(--lpz-text);
}

/* Coupon + update row. */
body.woocommerce-cart table.shop_table.cart td.actions {
	padding: var(--lpz-space-4);
	border-top: 1px solid var(--lpz-border);
	background-color: transparent;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--lpz-space-2);
	align-items: stretch;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
	width: 14rem;
	min-height: var(--lpz-touch);
	margin: 0;
	border-color: var(--lpz-border-strong);
	border-radius: var(--lpz-radius-sm);
	background-color: var(--lpz-bg);
	color: var(--lpz-text);
}

body.woocommerce-cart table.shop_table.cart td.actions .button {
	min-height: var(--lpz-touch);
	margin: 0;
}

/* ------------------------------------------------------------- Totals */

body.woocommerce-cart .cart-collaterals .cart_totals {
	padding: var(--lpz-space-5);
	border: 1px solid var(--lpz-border);
	border-radius: var(--lpz-radius-lg);
	background-color: var(--lpz-surface);
}

body.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin: 0 0 var(--lpz-space-3);
	padding: 0;
	border: 0;
	color: var(--lpz-text);
	font-size: var(--lpz-text-xl);
	letter-spacing: var(--lpz-tracking-tight);
	line-height: var(--lpz-leading-snug);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	margin: 0 0 var(--lpz-space-4);
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	padding: var(--lpz-space-3) 0;
	border-top: 1px solid var(--lpz-border);
	background: transparent;
	vertical-align: top;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
	width: 40%;
	color: var(--lpz-text-muted);
	font-weight: 500;
}

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

body.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-calculator {
	margin: var(--lpz-space-2) 0 0;
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-xs);
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td {
	color: var(--lpz-text);
	font-size: var(--lpz-text-lg);
	font-weight: 700;
}

body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	padding: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0 0 var(--lpz-space-3);
	font-size: var(--lpz-text-base);
}

/* ------------------------------------------------------------- Phones: product cards */

@media (max-width: 767px) {
	body.woocommerce-cart table.shop_table.cart,
	body.woocommerce-cart table.shop_table.cart tbody {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) calc(var(--lpz-touch) - 4px);
		column-gap: var(--lpz-space-3);
		padding: var(--lpz-space-4) var(--lpz-space-3);
		border-bottom: 1px solid var(--lpz-border);
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1;
		width: auto;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img {
		width: 56px;
		height: 56px;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		min-width: 0; /* The desktop table's minimum width does not apply to the card. */
		text-align: left !important; /* WooCommerce right-aligns responsive cells with !important. */
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail::before {
		content: none;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		margin-top: -6px;
		text-align: right !important;
	}

	/* Price, quantity and subtotal: full-width rows with WooCommerce's labels (Cijena, Količina, Međuzbroj). */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		display: flex;
		grid-column: 1 / -1;
		align-items: center;
		justify-content: space-between;
		gap: var(--lpz-space-3);
		padding-top: var(--lpz-space-2);
		white-space: normal;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price {
		margin-top: var(--lpz-space-3);
		border-top: 1px solid var(--lpz-border);
		padding-top: var(--lpz-space-3);
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal::before {
		float: none;
		color: var(--lpz-text-muted);
		font-weight: 500;
	}

	body.woocommerce-cart table.shop_table.cart tr:not(.cart_item),
	body.woocommerce-cart table.shop_table.cart td.actions {
		display: block;
	}

	/* Coupon field and buttons stacked at full width (WooCommerce's phone rules use #content). */
	body.woocommerce-cart #content table.shop_table.cart td.actions .coupon,
	body.woocommerce-cart table.shop_table.cart td.actions .coupon {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		margin-bottom: var(--lpz-space-3);
	}

	body.woocommerce-cart #content table.shop_table.cart td.actions .coupon .input-text,
	body.woocommerce-cart #content table.shop_table.cart td.actions .button,
	body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text,
	body.woocommerce-cart table.shop_table.cart td.actions .button {
		float: none;
		width: 100%;
		margin: 0;
	}

	/* Details: "Label: value", one pair per line, long notes across the card's width. */
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
		display: block;
	}

	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd,
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
		display: inline;
	}

	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
		margin-right: 0.3em;
	}

	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd::after {
		content: "\A";
		white-space: pre;
	}

	body.woocommerce-cart .cart-collaterals {
		margin-top: var(--lpz-space-5);
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		padding: var(--lpz-space-4);
	}

	/* WooCommerce hides the row headings here and repeats them as the cell's label: label left, amount right. */
	body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--lpz-space-1) var(--lpz-space-3);
		text-align: right !important;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child td {
		border-top: 0;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td::before {
		float: none;
		color: var(--lpz-text-muted);
		font-weight: 500;
		text-align: left;
	}
}