.woocommerce-page.woocommerce-cart {
	main {
		padding-left: var(--wp--preset--spacing--100);
		padding-right: var(--wp--preset--spacing--100);
	}

	.wp-block-post-title,
	main .woocommerce,
	.woocommerce {
		max-width: var(--wp--style--global--wide-size);
	}

	.woocommerce {
		color: #1B1B1D;

		.woocommerce-notices-wrapper {
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-bottom: var(--wp--preset--spacing--40);

			&:empty,
			&:not(:has(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner, .cart-empty, .wc-empty-cart-message)) {
				display: none;
				margin: 0;
			}
		}

		.woocommerce-info,
		.woocommerce-message,
		.woocommerce-error,
		.wc-block-components-notice-banner,
		.cart-empty.woocommerce-info {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px;
			margin: 0 0 var(--wp--preset--spacing--40);
			padding: 16px 20px;
			border: none;
			border-left: 4px solid #2B3439;
			border-radius: 16px;
			background: #DDE7ED;
			color: #1B1B1D;
			font-size: 1rem;
			line-height: 1.5;
			list-style: none;

			&::before,
			&::after {
				content: none;
				display: none;
			}

			.button,
			.wc-forward {
				float: none;
				margin: 0;
			}
		}

		.woocommerce-error {
			background: #F7EDED;
			border-left-color: #8A2B2B;
		}

		.wc-block-components-notice-banner {
			flex-wrap: nowrap;
			flex-direction: row;
			align-items: center;
			padding: 16px 20px !important;

			> svg {
				flex: 0 0 auto;
				width: 24px;
				height: 24px;
				min-width: 24px;
				padding: 2px;
				border-radius: 50%;
				background-color: #2B3439;
				fill: #DDE7ED;
			}

			> .wc-block-components-notice-banner__content {
				flex: 1 1 auto;
				flex-basis: auto;
				min-width: 0;
				align-self: center;
				padding: 0;
			}

			&.is-success,
			&.is-info,
			&.is-warning {
				background-color: #DDE7ED !important;
				border-color: #2B3439;
			}

			&.is-error {
				background-color: #F7EDED !important;
				border-color: #8A2B2B;

				> svg {
					background-color: #8A2B2B;
					fill: #F7EDED;
				}
			}
		}

		.wc-empty-cart-message {
			margin: 0 0 var(--wp--preset--spacing--40);

			.wc-block-components-notice-banner {
				margin: 0;
			}
		}

		&:has(.woocommerce-cart-form) {
			display: grid;
			grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
			align-items: start;
			gap: var(--wp--preset--spacing--50);
		}

		.woocommerce-notices-wrapper,
		.woocommerce-info,
		.woocommerce-message,
		.woocommerce-error {
			grid-column: 1 / -1;
		}

		.woocommerce-cart-form,
		.woocommerce-cart-form .shop_table.cart {
			grid-column: 1;
			min-width: 0;
			margin: 0;
		}

		.cart-collaterals {
			display: flex;
			flex-direction: column;
			grid-column: 2;
			float: none;
			width: auto;
			max-width: none;
			min-width: 0;
			margin: 0;

			&::before,
			&::after {
				content: none;
				display: none;
			}

			.cart_totals,
			.cross-sells,
			.shipping_calculator {
				float: none;
				width: 100%;
			}
		}

		table.shop_table.cart {
			width: 100%;
			margin: 0;
			border: none;
			border-collapse: separate;
			border-spacing: 0;
			border-radius: 16px;
			background: #e5e5e6;
			overflow: hidden;
			color: #1B1B1D;
			font-size: 1rem;

			th,
			td {
				padding: 16px 12px;
				border: none;
				border-top: 1px solid #fff;
				background: transparent;
				vertical-align: middle;
				line-height: 1.5;
				color: #1B1B1D;
			}

			thead th {
				padding-top: 16px;
				border-top: none;
				color: #5F6163;
				font-size: 0.875rem;
				font-weight: 600;
				text-align: start;
			}

			tbody tr:first-child {

				th,
				td {
					border-top: none;
				}
			}

			.product-remove {
				width: 48px;
				padding-inline-end: 16px;
			}

			.product-thumbnail {
				width: 80px;
				padding-inline-start: 16px;

				a {
					display: block;
					line-height: 0;
				}

				img {
					width: 64px;
					height: 64px;
					max-width: 64px;
					border-radius: 8px;
					object-fit: cover;
					box-shadow: none;
				}
			}

			.product-name {
				font-weight: 600;
				text-align: start;

				a {
					color: #1B1B1D;
					text-decoration: none;

					&:hover,
					&:focus {
						text-decoration: underline;
					}
				}

				.variation,
				.wc-item-meta {
					margin: 8px 0 0;
					padding: 0;
					list-style: none;
					color: #5F6163;
					font-size: 0.875rem;
					font-weight: 400;
				}
			}

			.product-price,
			.product-subtotal {
				white-space: nowrap;
			}

			.product-subtotal {
				font-weight: 600;
			}

			a.remove {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				border: none;
				border-radius: 999px;
				background: #2B3439;
				color: #F0F1F1 !important;
				font-size: 1.25rem;
				font-weight: 400;
				line-height: 1;
				text-decoration: none;

				&:hover,
				&:focus {
					background: #54636B;
					color: #F0F1F1 !important;
				}
			}

			.quantity {
				margin: 0;

				.qty {
					width: 4.5rem;
					margin: 0;
					text-align: center;
				}

				input[type="hidden"].qty {
					display: none;
				}
			}

			td.actions {
				padding: 16px;
				text-align: end;
				border-top: 1px solid #fff;

				.coupon {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 8px;
					float: none;
					margin: 0 auto 0 0;

					.input-text {
						float: none;
						width: 12rem;
						max-width: 100%;
						margin: 0;
					}
				}

				button {
					float: none;
					margin: 0;
				}

				.coupon + button {
					margin-inline-start: 8px;
				}
			}
		}

		&:not(:has(input.qty[type="number"])) {
			table.shop_table.cart {

				.product-quantity {
					display: none;
				}

				&:not(:has(.coupon)) {
					tr:has(> td.actions) {
						display: none;
					}
				}
			}
		}

		.cart_totals {
			position: sticky;
			top: calc(var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height, 0px));
			float: none;
			width: 100%;
			max-width: none;
			margin: 0;
			padding: 20px 24px;
			background: #DDE7ED;
			border: none;
			border-radius: 16px;
			color: #1B1B1D;

			h2 {
				margin-block-start: 0;
				margin-block-end: var(--wp--preset--spacing--40);
				color: #1B1B1D;
				font-size: var(--wp--preset--font-size--custom-10);
				font-weight: 600;
				line-height: 1.3;
			}

			table.shop_table {
				width: 100%;
				margin: 0;
				border: none;
				border-collapse: collapse;
				background: transparent;
				color: #1B1B1D;
				font-size: 1rem;

				th,
				td {
					padding: 12px 0;
					border: none;
					border-top: 1px solid #fff;
					background: transparent;
					vertical-align: middle;
					line-height: 1.5;
					font-weight: 400;
					color: #1B1B1D;
				}

				tr:first-child {

					th,
					td {
						padding-top: 0;
						border-top: none;
					}
				}

				th {
					color: #5F6163;
					font-weight: 400;
					text-align: start;
				}

				td {
					text-align: end;
				}

				.order-total th,
				.order-total td {
					color: #1B1B1D;
					font-size: var(--wp--preset--font-size--custom-5);
					font-weight: 600;
				}

				.woocommerce-remove-coupon {
					margin-left: 8px;
					color: #1B1B1D;
					font-size: 0.875rem;
					font-weight: 400;
				}
			}

			#shipping_method,
			.woocommerce-shipping-methods {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 8px;
				margin: 0;
				padding: 0;
				list-style: none;

				li {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: flex-end;
					gap: 8px;
					margin: 0;
					text-align: end;

					input {
						margin: 0;
					}

					label {
						margin: 0;
						color: #1B1B1D;
						font-size: 1rem;
						font-weight: 400;
						line-height: 1.4;
					}
				}
			}

			.woocommerce-shipping-destination,
			.woocommerce-shipping-calculator {
				margin-top: 8px;
				color: #5F6163;
				font-size: 0.875rem;
				font-weight: 400;
				text-align: end;
			}

			.wc-proceed-to-checkout {
				display: flex;
				flex-direction: column;
				gap: 12px;
				margin-block-start: var(--wp--preset--spacing--40);
				padding: 0;

				.checkout-button {
					width: 100%;
					margin: 0;
					font-size: 1rem;
					padding: var(--vinnshop-btn-padding);
				}

				.ppcp-messages,
				.ppc-button-wrapper,
				#ppc-button-ppcp-gateway {
					width: 100%;
					margin: 0;
				}
			}
		}

		.cross-sells {
			float: none;
			width: auto;
			margin-block-start: var(--wp--preset--spacing--50);

			h2 {
				margin-block-start: 0;
				margin-block-end: var(--wp--preset--spacing--40);
				color: #1B1B1D;
				font-size: var(--wp--preset--font-size--custom-10);
				font-weight: 600;
			}

			ul.products {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
				gap: var(--wp--preset--spacing--40);
				margin: 0;
				padding: 0;
				list-style: none;
				float: none;

				li {
					width: auto;
					float: none;
					margin: 0;
				}
			}
		}

		.return-to-shop {
			margin: 0;

			.button {
				margin: 0;
			}
		}
	}
}

@media (max-width: 768px) {
	.woocommerce-page.woocommerce-cart {
		.woocommerce {
			&:has(.woocommerce-cart-form) {
				grid-template-columns: 1fr;
			}

			.cart-collaterals,
			.cart_totals {
				grid-column: 1;
				position: static;
			}

			table.shop_table.cart {
				display: block;
				background: transparent;
				border-radius: 0;
				overflow: visible;

				thead {
					display: none;
				}

				tbody {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}

				tr.cart_item {
					display: grid;
					grid-template-columns: 64px minmax(0, 1fr) auto;
					align-items: center;
					column-gap: 12px;
					row-gap: 8px;
					margin: 0;
					padding: 16px;
					background: #e5e5e6;
					border-radius: 16px;
				}

				th,
				td {
					display: block;
					width: auto;
					padding: 0;
					border: none;
					text-align: start !important;
				}

				td::before {
					content: none;
					display: none;
				}

				.product-thumbnail {
					grid-column: 1;
					grid-row: 1 / -1;
					width: auto;

					img {
						width: 64px;
						height: 64px;
						max-width: 64px;
					}
				}

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

				.product-price {
					grid-column: 2;
					grid-row: 2;
					color: #5F6163;
				}

				.product-quantity {
					grid-column: 2;
					grid-row: 3;
				}

				.product-subtotal {
					grid-column: 3;
					grid-row: 1;
					padding: 0;
					text-align: end !important;
				}

				.product-remove {
					grid-column: 3;
					grid-row: 3;
					width: auto;
					padding: 0;
					justify-self: end;
					align-self: end;
				}

				tr:has(> td.actions) {
					display: block;
					padding: 0;
					background: transparent;
					border-radius: 0;
				}

				td.actions {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
					gap: 8px;
					padding: 8px 0 0;

					.coupon {
						flex: 1 1 100%;
						margin: 0;

						.input-text {
							flex: 1 1 auto;
							width: auto;
						}
					}
				}
			}

			.cart_totals table.shop_table {
				display: table;

				thead {
					display: table-header-group;
				}

				tr {
					display: table-row;
				}

				th,
				td {
					display: table-cell;
					text-align: start;
				}

				td {
					text-align: end !important;
				}

				td::before {
					content: none;
					display: none;
				}
			}
		}
	}
}

@media (max-width: 530px) {
	.woocommerce-page.woocommerce-cart {
		.woocommerce {
			table.shop_table.cart {
				tr.woocommerce-cart-form__cart-item.cart_item {
					position: relative;
					display: flex;
					flex-direction: column;
					gap: 8px;
				}

				.product-thumbnail {
					display: flex;
					justify-content: center;
					width: 100%;

					a {
						display: flex;
						justify-content: center;
						width: 100%;
					}

					.attachment-woocommerce_thumbnail {
						width: 100%;
						height: auto;
						max-width: 200px;
					}
				}

				.product-price,
				.product-subtotal {
					display: flex;
					justify-content: flex-end;
					width: 100%;
					text-align: right !important;
				}

				.product-remove {
					position: absolute;
					top: 16px;
					right: 16px;
					z-index: 1;
				}
			}
		}
	}
}