/*
 * REACH Supply cart mobile identity and notice polish.
 *
 * RS-DS-017: AJAX-refreshed cart cards keep a contained media tile, a clean
 * product-information column, a precisely centered remove affordance, and
 * centered action-free notices on mobile. This layer is presentation-only and
 * remains scoped to the WooCommerce cart route.
 */

/* The remove cell and icon remain optically centered after every AJAX refresh. */
body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart .product-remove {
	align-items: center !important;
	align-self: start !important;
	display: grid !important;
	height: 2.125rem !important;
	justify-items: center !important;
	justify-self: end !important;
	margin: 0 !important;
	max-height: 2.125rem !important;
	max-width: 2.125rem !important;
	min-height: 2.125rem !important;
	min-width: 2.125rem !important;
	padding: 0 !important;
	place-items: center !important;
	width: 2.125rem !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart .product-remove > a.remove {
	align-content: center !important;
	align-items: center !important;
	display: grid !important;
	justify-content: center !important;
	justify-items: center !important;
	overflow: hidden !important;
	place-items: center !important;
	position: relative !important;
	text-indent: 0 !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart .product-remove > a.remove::before {
	inset: auto !important;
	left: 50% !important;
	margin: 0 !important;
	position: absolute !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}

body.reach-design-system.woocommerce-cart
.woocommerce-cart-form table.shop_table.cart .product-remove > a.remove::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 767px) {
	/* Action-free notices are confirmation cards, not left-aligned form rows. */
	body.reach-design-system.woocommerce-cart
	.woocommerce-notices-wrapper > :where(
		.woocommerce-message,
		.woocommerce-info
	):not(:has(.restore-item)):not(:has(.button)):not(:has(a)) {
		align-items: center !important;
		display: grid !important;
		gap: 0 !important;
		grid-template-columns: minmax(0, 1fr) !important;
		justify-content: center !important;
		justify-items: center !important;
		min-height: 4.25rem !important;
		padding: 0.875rem 1rem !important;
		place-items: center !important;
		text-align: center !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-notices-wrapper > :where(
		.woocommerce-message,
		.woocommerce-info
	):not(:has(.restore-item)):not(:has(.button)):not(:has(a))
	> .reach-cart-notice-icon-v21 {
		display: none !important;
	}

	/* Keep the media tile inside its own column so it cannot cover the title,
	 * availability copy, metadata, or any responsive cell divider. */
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2 {
		align-items: start !important;
		grid-template-areas:
			"thumb details remove"
			"purchase purchase purchase" !important;
		grid-template-columns:
			var(--rs-cart-media-size)
			minmax(0, 1fr)
			2.125rem !important;
		isolation: isolate !important;
		overflow: hidden !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-thumbnail {
		align-self: start !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		grid-area: thumb !important;
		height: var(--rs-cart-media-size) !important;
		isolation: isolate !important;
		margin: 0 !important;
		max-height: var(--rs-cart-media-size) !important;
		max-width: var(--rs-cart-media-size) !important;
		min-height: var(--rs-cart-media-size) !important;
		min-width: var(--rs-cart-media-size) !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: relative !important;
		width: var(--rs-cart-media-size) !important;
		z-index: 1 !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-thumbnail > a {
		align-items: center !important;
		background: var(--rs-color-surface) !important;
		border: var(--rs-border-default) !important;
		border-radius: var(--rs-radius-sm) !important;
		box-shadow: none !important;
		display: grid !important;
		height: 100% !important;
		justify-items: center !important;
		margin: 0 !important;
		max-height: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		min-width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		place-items: center !important;
		width: 100% !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-thumbnail img {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		display: block !important;
		height: 100% !important;
		margin: 0 !important;
		max-height: 100% !important;
		max-width: 100% !important;
		object-fit: contain !important;
		padding: 0.375rem !important;
		width: 100% !important;
	}

	/* Product identity stays in one clean column. WooCommerce responsive table
	 * borders and pseudo labels may not draw a line beneath or through it. */
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name {
		align-items: flex-start !important;
		align-self: start !important;
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-bottom: 0 !important;
		border-top: 0 !important;
		box-shadow: none !important;
		display: flex !important;
		flex-direction: column !important;
		grid-area: details !important;
		margin: 0 !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: relative !important;
		width: 100% !important;
		z-index: 2 !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name::before,
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name::after,
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name > a::before,
	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name > a::after {
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		content: none !important;
		display: none !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name > a {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
		display: -webkit-box !important;
		margin: 0 0 0.375rem !important;
		max-width: 100% !important;
		overflow: hidden !important;
		padding: 0 !important;
		text-decoration: none !important;
		width: 100% !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 3 !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name :where(
		dl.variation,
		.wc-item-meta,
		p,
		small
	) {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-bottom: 0 !important;
		border-top: 0 !important;
		box-shadow: none !important;
		margin: 0.3125rem 0 0 !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name dl.variation {
		display: grid !important;
		gap: 0.25rem 0.5rem !important;
		grid-template-columns: max-content minmax(0, 1fr) !important;
	}

	body.reach-design-system.woocommerce-cart
	.woocommerce-cart-form table.shop_table.cart tr.cart_item.rs-cart-item-v2
	.product-name dl.variation :where(dt, dd) {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		float: none !important;
		margin: 0 !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		width: auto !important;
	}
}