/* ------------------------------------------------------------------
   Cart page. Loaded on the cart page only, after checkout.css, which
   provides the step chips, cards, totals rows and the finance card.
   ------------------------------------------------------------------ */

/* WooCommerce prints its empty-cart message as a notice; the card below replaces it */
.pim-cart .cart-empty.woocommerce-info {
	display: none;
}

.pim-cart .woocommerce-notices-wrapper {
	margin-bottom: 24px;
}

.pim-cart__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.pim-cart__side {
	display: flex;
	flex: 0 0 500px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

@media (max-width: 1279px) {
	.pim-cart__side {
		flex-basis: 400px;
	}
}

/* ------------------------------------------------------------ Items */
.pim-cart-items__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pim-cart-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--grey-20);
}

.pim-cart-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.pim-cart-item__thumb {
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--bg-grey);
}

.woocommerce .pim-cart-item__thumb img,
.pim-cart-item__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.pim-cart-item__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pim-cart-item__name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--black);
}

.pim-cart-item__name a:hover {
	color: var(--purple-700);
}

.pim-cart-item__name .variation,
.pim-cart-item__name .backorder_notification {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--grey-60);
}

.pim-cart-item__price {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	color: var(--grey-70);
}

.pim-cart-item__controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.pim-cart-item__subtotal {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: var(--black);
}

.pim-cart-item__subtotal .woocommerce-Price-amount {
	font: inherit;
}

.woocommerce .pim-cart-item .product-remove a.remove,
.pim-cart-item__remove {
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: right;
	text-decoration: underline;
	color: var(--grey-60);
	border-radius: 0;
}

.woocommerce .pim-cart-item .product-remove a.remove:hover,
.pim-cart-item__remove:hover {
	background: none;
	color: #B42318;
}

/* ------------------------------------------------------------ Actions */
.pim-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.pim-cart-actions__coupon {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.woocommerce .pim-cart-actions__coupon .pim-field__input {
	width: 180px;
	max-width: 100%;
	height: 56px;
	padding: 0 20px;
	border-radius: 56px;
}

.pim-cart-actions .btn {
	height: 56px;
}

/* WooCommerce prints an invalid-coupon message inside .coupon; give it the full row in red */
.pim-cart .woocommerce-cart-form .coupon .coupon-error-notice,
.woocommerce .pim-cart-actions__coupon .coupon-error-notice {
	flex-basis: 100%;
	width: auto;
	float: none;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #B42318;
}

.woocommerce .pim-cart-actions__coupon .pim-field__input.has-error {
	border-color: #B42318;
}

.pim-cart-actions .btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* ------------------------------------------------------------ Totals */
/* WooCommerce floats .cart_totals at 48% width; the sidebar sets the width instead */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
	width: auto;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.pim-cart-totals {
	float: none;
	width: 100%;
}

.pim-cart-totals {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pim-cart-totals .pim-totals__row--grand .woocommerce-Price-amount {
	font: inherit;
}

.pim-cart-totals .pim-totals__row--grand small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--grey-60);
}

.pim-cart-totals__checkout {
	display: flex;
	flex-direction: column;
}

/* WooCommerce styles .wc-proceed-to-checkout a.checkout-button as a block with 1em padding; restore the pill */
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce .pim-cart-totals__checkout {
	margin: 0;
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .pim-cart-totals__checkout a.checkout-button,
.pim-cart-totals__checkout .btn {
	display: inline-flex;
	width: 100%;
	margin: 0;
	padding: 0 32px;
	font-size: 20px;
	line-height: 27px;
}

/* Coupon removal link in the totals rows */
.pim-cart-totals .woocommerce-remove-coupon {
	margin-left: 6px;
	font-size: 14px;
	text-decoration: underline;
	color: var(--grey-60);
}

/* ------------------------------------------------------------ Empty cart */
.pim-cart-empty {
	align-items: flex-start;
}

.pim-cart-empty .return-to-shop {
	margin: 0;
}

/* ------------------------------------------------------------ Responsive */
/* One column: items, totals, then the finance card */
@media (max-width: 1023px) {
	.pim-cart__columns {
		flex-direction: column;
		align-items: stretch;
	}

	.pim-cart__main,
	.pim-cart__side {
		flex: none;
		width: 100%;
	}
}

@media (max-width: 599px) {
	.pim-cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px 16px;
	}

	.pim-cart-item__thumb {
		width: 72px;
		height: 72px;
	}

	.pim-cart-item__controls {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.pim-cart-item__controls .product-remove {
		flex-basis: 100%;
	}

	.pim-cart-item__remove,
	.woocommerce .pim-cart-item .product-remove a.remove {
		text-align: left;
	}

	.pim-cart-actions,
	.pim-cart-actions__coupon {
		flex: none;
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce .pim-cart-actions__coupon .pim-field__input {
		width: 100%;
	}

	.pim-cart-actions .btn {
		width: 100%;
	}
}