/**
 * The cart page.
 *
 * Elementor Pro's Cart widget renders WooCommerce's own cart templates, so what follows reshapes
 * that markup rather than replacing it: the table becomes a list of rows, the totals become a
 * card, and the quantity field becomes a stepper. Every value inside is still WooCommerce's.
 *
 * Colours and faces come from the Elementor Kit's globals, so the page follows the site's design
 * system rather than carrying one of its own. Everything is scoped under `.cart-page` (the page's
 * own container) so nothing here can reach another WooCommerce screen.
 *
 * Loaded only on the cart page.
 */

/* -- Icons ----------------------------------------------------------------- */

/* Inline SVG masks: no icon font is downloaded, and each icon takes the colour of whatever
   it is placed on. */
.cart-page {
	--cart-bin-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E" );
	--cart-arrow-left-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E" );
	--cart-arrow-right-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" );
	--cart-delivery-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E" );
	--cart-secure-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.2 8.6-7 10-3.8-1.4-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E" );
	--cart-support-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='2.5' y='13' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='13' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19.5 19v.6a2.4 2.4 0 0 1-2.4 2.4H13'/%3E%3C/svg%3E" );
	--cart-returns-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E" );
	--cart-trolley-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2h3.2l.9 3.6H22l-2.6 8.4H7.2L6.4 17H20v2H5.6a1.6 1.6 0 0 1-1.55-2L5.3 12 3 3H1z'/%3E%3C/svg%3E" );
	--cart-basket-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.6 10.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8 9L10.5 3M16 9L13.5 3'/%3E%3Cpath d='M10 13v4M14 13v4'/%3E%3C/svg%3E" );
}

/* -- The widget's own custom properties ------------------------------------ */

/*
 * Elementor Pro's Cart widget paints itself from these. Setting them is how the widget is meant
 * to be themed, and it reaches places a stylesheet cannot outrank - its link rule alone is six
 * classes deep. Everything here is a Kit global, so the cart follows the site.
 */
.cart-page .elementor-widget-woocommerce-cart {
	--links-normal-color: var( --e-global-color-primary );
	--links-hover-color: var( --e-global-color-accent );
	--product-link-normal-color: var( --e-global-color-primary );
	--product-link-hover-color: var( --e-global-color-accent );

	--order-summary-color: var( --e-global-color-primary );
	--order-summary-title-color: var( --e-global-color-primary );
	--order-summary-variations-color: var( --e-global-color-text );
	--order-summary-items-divider-color: transparent;
	--order-summary-items-divider-weight: 0px;
	--order-summary-remove-icon-normal-color: var( --e-global-color-secondary );
	--order-summary-remove-icon-hover-color: #B3261E;

	--sections-background-color: transparent;
	--sections-border-color: transparent;
	--sections-border-radius: 6px;
	--sections-descriptions-color: var( --e-global-color-text );
	--sections-margin: 0;
	--sections-padding: 0;

	--forms-fields-normal-color: var( --e-global-color-primary );
	--forms-fields-focus-border-color: var( --e-global-color-accent );
	--forms-fields-border-radius: 5px;

	--forms-buttons-normal-text-color: var( --e-global-color-primary );
	--forms-buttons-hover-text-color: var( --e-global-color-primary );
	--forms-buttons-border-color: var( --e-global-color-primary );
	--forms-buttons-hover-border-color: var( --e-global-color-accent );
	--forms-buttons-border-radius: 5px;

	--checkout-button-normal-text-color: var( --e-global-color-primary );
	--checkout-button-hover-text-color: #FFFFFF;
	--checkout-button-border-radius: 5px;
	--checkout-button-width: 100%;
}

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

/* The widget lays its two columns out as a grid whose own rule carries two classes; these carry
   three, so they win wherever the two stylesheets happen to land. */
.cart-page .elementor-widget-woocommerce-cart .e-cart__container {
	align-items: start;
	grid-template-columns: minmax( 0, 1fr ) 365px;
	grid-column-gap: 36px;
	grid-row-gap: 28px;
}

.cart-page .elementor-widget-woocommerce-cart .e-cart__column-start {
	min-width: 0;
}

.cart-page .cart-heading {
	margin: 0 0 18px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --e-global-color-primary );
}

/* -- The item list --------------------------------------------------------- */

/* WooCommerce's table becomes a panel of rows: the header keeps the column names, each row is a
   grid, and the cells keep their own meaning for assistive technology. */
/* The rows are a grid, so the table must stop measuring its own columns - left as a table it
   sizes the cells first and the grid then has nothing left to divide. */
.cart-page .woocommerce-cart-form__contents,
.cart-page .woocommerce-cart-form__contents thead,
.cart-page .woocommerce-cart-form__contents tbody {
	display: block;
}

.cart-page .woocommerce-cart-form__contents {
	width: 100%;
	margin: 0;
	border: 1px solid var( --e-global-color-border );
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
	background-color: #FFFFFF;
	overflow: hidden;
}

.cart-page .woocommerce-cart-form__contents thead th {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid var( --e-global-color-border );
	background-color: var( --e-global-color-surface );
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	color: var( --e-global-color-text );
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.cart-page .woocommerce-cart-form__contents thead th.product-remove,
.cart-page .woocommerce-cart-form__contents thead th.product-thumbnail {
	width: 0;
	padding-right: 0;
	padding-left: 0;
}

/*
 * WooCommerce prints the cells as remove, picture, name, price, quantity, line total. The design
 * ends the row with the remove control instead of opening with it, so the row becomes a grid and
 * each cell is given its place. Every cell keeps its own element and its data-title, so the table
 * still reads correctly to assistive technology.
 */
.cart-page .woocommerce-cart-form__contents thead tr,
.cart-page .woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 96px minmax( 0, 1fr ) 110px 132px 110px 52px;
	align-items: center;
}

.cart-page .woocommerce-cart-form__contents thead th.product-remove,
.cart-page .woocommerce-cart-form__cart-item td.product-remove {
	order: 6;
}

.cart-page .woocommerce-cart-form__contents thead th.product-thumbnail,
.cart-page .woocommerce-cart-form__cart-item td.product-thumbnail {
	order: 1;
}

.cart-page .woocommerce-cart-form__contents thead th.product-name,
.cart-page .woocommerce-cart-form__cart-item td.product-name {
	order: 2;
}

.cart-page .woocommerce-cart-form__contents thead th.product-price,
.cart-page .woocommerce-cart-form__cart-item td.product-price {
	order: 3;
}

.cart-page .woocommerce-cart-form__contents thead th.product-quantity,
.cart-page .woocommerce-cart-form__cart-item td.product-quantity {
	order: 4;
}

.cart-page .woocommerce-cart-form__contents thead th.product-subtotal,
.cart-page .woocommerce-cart-form__cart-item td.product-subtotal {
	order: 5;
}

/* The actions row spans the whole grid rather than taking one cell of it. */
.cart-page .woocommerce-cart-form__contents tbody tr:has( td.actions ) {
	display: block;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item {
	border-top: 1px solid var( --e-global-color-border );
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__contents tbody tr:first-child {
	border-top: 0;
}

.cart-page .woocommerce-cart-form__cart-item td {
	padding: 18px 10px;
	border: 0;
	vertical-align: middle;
	background-color: transparent;
}

.cart-page .woocommerce-cart-form__cart-item td.product-thumbnail {
	padding-left: 20px;
}

.cart-page .woocommerce-cart-form__cart-item td.product-thumbnail img {
	display: block;
	width: 72px;
	height: 72px;
	max-width: none;
	object-fit: contain;
}

/* Brand, name, facts, availability - in that order, whatever order WooCommerce printed them. */
.cart-page .woocommerce-cart-form__cart-item td.product-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: 24px;
}

.cart-page .woocommerce-cart-form__cart-item td.product-name .cart-item-brand {
	order: 0;
}

.cart-page .woocommerce-cart-form__cart-item td.product-name > a {
	order: 1;
}

.cart-page .woocommerce-cart-form__cart-item td.product-name .variation {
	order: 2;
}

.cart-page .woocommerce-cart-form__cart-item td.product-name .cart-item-stock {
	order: 3;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-price,
.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-subtotal {
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	white-space: nowrap;
}



.cart-page .woocommerce-cart-form__cart-item td.product-remove {
	padding-right: 20px;
	text-align: right;
}

/* -- One product ----------------------------------------------------------- */

.cart-page .cart-item-brand {
	display: block;
	margin-bottom: 3px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --e-global-color-secondary );
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-name > a {
	display: inline-block;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --e-global-color-primary );
	text-decoration: none;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-name > a:hover,
.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-name > a:focus-visible {
	color: var( --e-global-color-accent );
}

/* WooCommerce prints the item data as a definition list; the design reads it as one line. */
.cart-page .woocommerce-cart-form__cart-item .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 4px 0 0;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var( --e-global-color-text );
}

.cart-page .woocommerce-cart-form__cart-item .variation dt {
	margin: 0;
	font-weight: 400;
}

.cart-page .woocommerce-cart-form__cart-item .variation dd {
	margin: 0;
}

.cart-page .woocommerce-cart-form__cart-item .variation dd,
.cart-page .woocommerce-cart-form__cart-item .variation dd p {
	margin: 0;
	color: var( --e-global-color-text );
}

/* A separator between one fact and the next, but not before the first. */
.cart-page .woocommerce-cart-form__cart-item .variation dt:not(:first-of-type)::before {
	content: "|";
	margin-right: 6px;
	color: var( --e-global-color-border );
}

.cart-page .cart-item-stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 7px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.cart-page .cart-item-stock__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}

.cart-page .cart-item-stock--in-stock {
	color: #1B8C4B;
}

.cart-page .cart-item-stock--on-backorder {
	color: #C57F00;
}

.cart-page .cart-item-stock--out-of-stock {
	color: #B3261E;
}

/* -- Quantity -------------------------------------------------------------- */

.cart-page .woocommerce-cart-form__cart-item .quantity {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var( --e-global-color-border );
	border-radius: 5px;
	background-color: #FFFFFF;
}

/* WooCommerce pins `.qty` to a two-pixel padding, which leaves a target too small to tap. */
.cart-page .woocommerce-cart-form__cart-item .quantity input.qty {
	width: 46px;
	height: 40px;
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cart-page .woocommerce-cart-form__cart-item .quantity input.qty::-webkit-outer-spin-button,
.cart-page .woocommerce-cart-form__cart-item .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.cart-page .cart-quantity__button {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 40px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var( --e-global-color-text );
	cursor: pointer;
}

.cart-page .cart-quantity__button:hover,
.cart-page .cart-quantity__button:focus-visible {
	background-color: var( --e-global-color-surface );
	color: var( --e-global-color-primary );
}

/* The signs are drawn rather than typed, so they sit on the optical centre at any font size. */
.cart-page .cart-quantity__button::before,
.cart-page .cart-quantity__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate( -50%, -50% );
}

.cart-page .cart-quantity__button::before {
	width: 11px;
	height: 1.5px;
}

.cart-page .cart-quantity__button--increase::after {
	width: 1.5px;
	height: 11px;
}

/* -- Remove ---------------------------------------------------------------- */

/* WooCommerce prints a × character; the design asks for a bin. The link keeps its href,
   its nonce and its aria-label - only what it looks like changes. */
.cart-page .woocommerce-cart-form__cart-item td.product-remove a.remove {
	display: inline-block;
	width: 34px;
	height: 34px;
	font-size: 0;
	line-height: 0;
	color: transparent !important;
	background-color: var( --e-global-color-secondary ) !important;
	-webkit-mask-image: var( --cart-bin-icon );
	mask-image: var( --cart-bin-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
}

.cart-page .woocommerce-cart-form__cart-item td.product-remove a.remove:hover,
.cart-page .woocommerce-cart-form__cart-item td.product-remove a.remove:focus-visible {
	background-color: #B3261E !important;
}

/* -- Actions under the table ----------------------------------------------- */

.cart-page .woocommerce-cart-form__contents td.actions {
	padding: 0;
	border: 0;
	background-color: transparent;
}

.cart-page .elementor-widget-woocommerce-cart .cart-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

.cart-page a.cart-actions__continue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14.5px;
	color: var( --e-global-color-primary );
	text-decoration: none;
}

.cart-page a.cart-actions__continue:hover,
.cart-page a.cart-actions__continue:focus-visible {
	color: var( --e-global-color-accent );
}

.cart-page .cart-actions__arrow {
	width: 16px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask-image: var( --cart-arrow-left-icon );
	mask-image: var( --cart-arrow-left-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cart-page .cart-actions__empty {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 5px;
	background-color: #FFFFFF;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14.5px;
	color: var( --e-global-color-primary );
	cursor: pointer;
}

.cart-page .cart-actions__empty:hover,
.cart-page .cart-actions__empty:focus-visible {
	border-color: #B3261E;
	color: #B3261E;
}

.cart-page .cart-actions__bin {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: var( --cart-bin-icon );
	mask-image: var( --cart-bin-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* The widget updates the cart as soon as a quantity changes, so WooCommerce's own Update Cart
   button has nothing left to do. It stays in the markup, and out of sight, because the form still
   submits through it when a keyboard user presses Enter. */
.cart-page .woocommerce-cart-form__contents td.actions button[name="update_cart"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* -- Coupon ---------------------------------------------------------------- */

/* The reference has no coupon field, but the shop has coupons switched on and removing a working
   feature to match a picture would cost a customer their discount. It is kept, quietly, on the
   same row as the other actions. */
.cart-page .coupon.e-cart-section {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	float: none;
	margin: 18px 0 0;
	padding: 16px 20px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 6px;
	background-color: #FFFFFF;
}

.cart-page .coupon.e-cart-section label {
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14px;
	color: var( --e-global-color-text );
}

.cart-page .coupon.e-cart-section input.input-text {
	flex: 1 1 180px;
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 5px;
	background-color: #FFFFFF;
	font-size: 14.5px;
	color: var( --e-global-color-primary );
}

.cart-page .coupon.e-cart-section input.input-text:focus-visible {
	border-color: var( --e-global-color-accent );
	outline: none;
}

.cart-page .coupon.e-cart-section button {
	height: 42px;
	padding: 0 20px;
	border: 1px solid var( --e-global-color-primary );
	border-radius: 5px;
	background-color: transparent;
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	cursor: pointer;
}

.cart-page .coupon.e-cart-section button:hover,
.cart-page .coupon.e-cart-section button:focus-visible {
	border-color: var( --e-global-color-accent );
	background-color: var( --e-global-color-accent );
}

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

.cart-page .cart_totals {
	width: 100%;
	overflow: hidden;
	padding: 26px 28px 28px;
	border-radius: 6px;
	background-color: var( --e-global-color-surface );
}

.cart-page .cart_totals h2 {
	margin: 0 0 18px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 18.5px;
	font-weight: 600;
	color: var( --e-global-color-primary );
}

.cart-page .cart_totals table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background-color: transparent;
}

.cart-page .cart_totals table.shop_table tr {
	display: block;
}

/*
 * The widget draws each label from the value cell's own ::before and leaves the header cell to be
 * hidden. That is its design, and it holds at every width, so the page follows it: the header
 * cell goes, and the value cell becomes the line - label at one end, figure at the other.
 */
.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table th {
	display: none;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 7px 0;
	border: 0;
	background-color: transparent;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --e-global-color-primary );
	text-align: right;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td::before {
	float: none;
	margin: 0;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	color: var( --e-global-color-text );
	text-align: left;
	white-space: nowrap;
}

/* -- The order total ------------------------------------------------------- */

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var( --e-global-color-border );
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td::before {
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 18.5px;
	font-weight: 600;
	color: var( --e-global-color-primary );
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td strong {
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary );
}

/* "including VAT" and the like: WooCommerce prints these only when the shop charges tax. */
.cart-page .cart_totals table.shop_table .includes_tax,
.cart-page .cart_totals table.shop_table small {
	display: block;
	width: 100%;
	margin-top: 2px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	color: var( --e-global-color-secondary );
	text-align: right;
}

/* -- Shipping -------------------------------------------------------------- */

/*
 * The one row where a label and a figure will not share a line: the choices carry a method name,
 * a price and sometimes a carrier's mark, so the word goes above and they take the full width.
 */
.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
	display: block;
	text-align: left;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td::before {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	white-space: normal;
}

.cart-page .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-page .cart_totals ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
}

.cart-page .cart_totals ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.cart-page .cart_totals ul#shipping_method input[type="radio"] {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

.cart-page .elementor-widget-woocommerce-cart .woocommerce .cart_totals ul#shipping_method label {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var( --e-global-color-primary );
	white-space: normal;
}

.cart-page .cart_totals ul#shipping_method .amount {
	font-weight: 600;
}

/* A carrier's mark stays the size of the line it sits on. */
.cart-page .cart_totals ul#shipping_method img,
.cart-page .cart_totals ul#shipping_method svg {
	max-width: 46px;
	height: auto;
}

.cart-page .cart_totals .woocommerce-shipping-destination,
.cart-page .cart_totals .shipping-calculator-button {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --e-global-color-secondary );
}

.cart-page .cart_totals .shipping-calculator-form {
	margin-top: 10px;
	text-align: left;
}

.cart-page .cart_totals .shipping-calculator-form p {
	margin: 0 0 8px;
}

.cart-page .cart_totals .shipping-calculator-form label {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	color: var( --e-global-color-text );
}

.cart-page .cart_totals .shipping-calculator-form input.input-text,
.cart-page .cart_totals .shipping-calculator-form select,
.cart-page .cart_totals .shipping-calculator-form .select2-container {
	width: 100%;
	max-width: 100%;
}

.cart-page .cart_totals .shipping-calculator-form button.button {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var( --e-global-color-primary );
	border-radius: 5px;
	background-color: transparent;
	font-size: 14px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	cursor: pointer;
}
/* -- Checkout button ------------------------------------------------------- */

.cart-page .wc-proceed-to-checkout {
	margin: 20px 0 0;
	padding: 0;
}

.cart-page .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.cart-page .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 5px;
	background-color: var( --e-global-color-accent );
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	text-align: center;
	text-decoration: none;
}

.cart-page .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
	content: "";
	width: 16px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask-image: var( --cart-arrow-right-icon );
	mask-image: var( --cart-arrow-right-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cart-page .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.cart-page .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background-color: var( --e-global-color-primary );
	color: #FFFFFF;
}

/* -- Reassurance ----------------------------------------------------------- */

.cart-page .cart-reassurance {
	margin: 24px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var( --e-global-color-border );
	list-style: none;
}

.cart-page .cart-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 18px;
}

.cart-page .cart-reassurance__item:last-child {
	margin-bottom: 0;
}

.cart-page .cart-reassurance__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background-color: var( --e-global-color-primary );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cart-page .cart-reassurance__icon--delivery {
	-webkit-mask-image: var( --cart-delivery-icon );
	mask-image: var( --cart-delivery-icon );
}

.cart-page .cart-reassurance__icon--secure {
	-webkit-mask-image: var( --cart-secure-icon );
	mask-image: var( --cart-secure-icon );
}

.cart-page .cart-reassurance__icon--support {
	-webkit-mask-image: var( --cart-support-icon );
	mask-image: var( --cart-support-icon );
}

.cart-page .cart-reassurance__icon--returns {
	-webkit-mask-image: var( --cart-returns-icon );
	mask-image: var( --cart-returns-icon );
}

.cart-page .cart-reassurance__text {
	display: block;
}

.cart-page .cart-reassurance__title {
	display: block;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --e-global-color-primary );
}

.cart-page .cart-reassurance__note {
	display: block;
	margin-top: 1px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var( --e-global-color-secondary );
}

/* -- Empty cart ------------------------------------------------------------ */

.cart-page .empty-cart-state {
	max-width: 520px;
	margin: 0 auto;
	padding: 52px 28px 56px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 6px;
	background-color: #FFFFFF;
	text-align: center;
}

.cart-page .empty-cart-state__icon {
	display: inline-block;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	background-color: var( --e-global-color-border );
	-webkit-mask-image: var( --cart-basket-icon );
	mask-image: var( --cart-basket-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cart-page .empty-cart-state__title {
	margin: 0 0 8px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 21px;
	font-weight: 600;
	color: var( --e-global-color-primary );
}

.cart-page .empty-cart-state__text {
	margin: 0 0 22px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var( --e-global-color-text );
}

.cart-page a.empty-cart-state__button {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 5px;
	background-color: var( --e-global-color-accent );
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	text-decoration: none;
}

.cart-page a.empty-cart-state__button:hover,
.cart-page a.empty-cart-state__button:focus-visible {
	background-color: var( --e-global-color-primary );
	color: #FFFFFF;
}

/* WooCommerce's own empty-cart paragraph and return link are replaced by the panel above. */
.cart-page .cart-empty,
.cart-page .return-to-shop {
	display: none;
}

/* -- Recommendations ------------------------------------------------------- */

.cart-page .cart-recommendations {
	margin-top: 56px;
}

.cart-page .cart-recommendations__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 23px;
	font-weight: 600;
	color: var( --e-global-color-primary );
}

.cart-page .cart-recommendations__title::before {
	content: "";
	width: 28px;
	height: 3px;
	background-color: var( --e-global-color-accent );
}

.cart-page .cart-recommendations ul.products {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-page .cart-recommendations ul.products::before,
.cart-page .cart-recommendations ul.products::after {
	content: none;
}

.cart-page .cart-recommendations ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0 0 16px;
	overflow: hidden;
	border: 1px solid var( --e-global-color-border );
	border-radius: 6px;
	background-color: #FFFFFF;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-page .cart-recommendations ul.products li.product:hover {
	border-color: var( --e-global-color-accent );
	box-shadow: 0 8px 24px rgba( 22, 33, 46, 0.09 );
}

.cart-page .cart-recommendations ul.products li.product a img {
	display: block;
	width: 100%;
	height: 150px;
	margin: 0 0 12px;
	padding: 14px;
	object-fit: contain;
}

.cart-page .cart-recommendations .product-brand {
	display: block;
	margin: 0 14px 3px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --e-global-color-secondary );
}

.cart-page .cart-recommendations ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 14px 8px;
	padding: 0;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --e-global-color-primary );
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cart-page .cart-recommendations ul.products li.product .price {
	margin: 0 14px 12px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var( --e-global-color-primary );
}

.cart-page .cart-recommendations ul.products li.product .price del {
	margin-right: 6px;
	font-size: 0.8em;
	font-weight: 400;
	color: var( --e-global-color-secondary );
}

.cart-page .cart-recommendations ul.products li.product .price ins {
	text-decoration: none;
}

.cart-page .cart-recommendations ul.products li.product .star-rating {
	display: none;
}

/* The button sits at the foot of every card, whatever the title's length. */
.cart-page .cart-recommendations ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: auto 14px 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 4px;
	background-color: var( --e-global-color-accent );
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --e-global-color-primary );
	text-align: center;
	text-decoration: none;
}

.cart-page .cart-recommendations ul.products li.product .button::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-image: var( --cart-trolley-icon );
	mask-image: var( --cart-trolley-icon );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.cart-page .cart-recommendations ul.products li.product .button:hover,
.cart-page .cart-recommendations ul.products li.product .button:focus-visible {
	background-color: var( --e-global-color-primary );
	color: #FFFFFF;
}

.cart-page .cart-recommendations ul.products li.product .added_to_cart {
	display: none;
}

/* -- Notices --------------------------------------------------------------- */

.cart-page .woocommerce-message,
.cart-page .woocommerce-error,
.cart-page .woocommerce-info {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var( --e-global-color-border );
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 3px solid var( --e-global-color-accent );
	border-radius: 4px;
	background-color: var( --e-global-color-surface );
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	color: var( --e-global-color-primary );
}

.cart-page .woocommerce-error {
	border-left-color: #B3261E;
	list-style: none;
}

.cart-page .woocommerce-message::before,
.cart-page .woocommerce-error::before,
.cart-page .woocommerce-info::before {
	content: none;
}

.cart-page .woocommerce-message .button,
.cart-page .woocommerce-error .button,
.cart-page .woocommerce-info .button {
	float: right;
	margin-left: 12px;
	padding: 6px 14px;
	border-radius: 4px;
	background-color: var( --e-global-color-primary );
	font-size: 13.5px;
	color: #FFFFFF;
}

/* -- Focus ----------------------------------------------------------------- */

.cart-page a:focus-visible,
.cart-page button:focus-visible,
.cart-page input:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Two narrow columns would cramp both; the summary moves under the items. The desktop rule
	   is ungated and three classes deep, so this one has to match it to be heard. */
	.cart-page .elementor-widget-woocommerce-cart .e-cart__container {
		grid-template-columns: minmax( 0, 1fr );
		grid-row-gap: 28px;
	}

	.cart-page .elementor-widget-woocommerce-cart .e-cart__column-end {
		width: 100%;
		max-width: 100%;
	}

	/* The row gives the name more of the width once the columns stack. */
	.cart-page .woocommerce-cart-form__contents thead tr,
	.cart-page .woocommerce-cart-form__cart-item {
		grid-template-columns: 92px minmax( 0, 1fr ) 104px 124px 104px 48px;
	}

	.cart-page .cart-recommendations ul.products {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

}

/* -- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * WooCommerce's small-screen stylesheet turns every row into a block and prints the column
	 * name in front of each value. That is undone here in favour of a card: the picture beside
	 * the name, then price, quantity and line total on one row underneath.
	 */
	.cart-page .woocommerce-cart-form__contents,
	.cart-page .woocommerce-cart-form__contents tbody,
	.cart-page .woocommerce-cart-form__contents tr,
	.cart-page .woocommerce-cart-form__contents td {
		display: block;
		width: auto;
	}

	.cart-page .woocommerce-cart-form__contents thead {
		display: none;
	}

	/*
	 * Each cell gets an area of its own: the picture beside the name and the remove control, the
	 * unit price under the name, then the quantity and the line total on their own line.
	 */
	.cart-page .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 72px minmax( 0, 1fr ) auto;
		grid-template-areas:
			"thumbnail name     remove"
			"thumbnail price    price"
			"thumbnail quantity subtotal";
		align-items: start;
		gap: 6px 14px;
		padding: 16px;
		border-top: 1px solid var( --e-global-color-border );
	}

	.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__contents tbody tr:first-child {
		border-top: 0;
	}

	.cart-page .woocommerce-cart-form__cart-item td {
		padding: 0;
		border: 0;
	}

	/* The column names WooCommerce prints in front of each value are not wanted here. */
	.cart-page .woocommerce-cart-form__cart-item td::before {
		content: none !important;
	}

	.cart-page .woocommerce-cart-form__cart-item td.product-thumbnail {
		display: block;
		grid-area: thumbnail;
		width: 72px;
		padding: 0;
	}

	.cart-page .woocommerce-cart-form__cart-item td.product-name {
		grid-area: name;
		padding-right: 0;
		text-align: left !important;
	}

	.cart-page .woocommerce-cart-form__cart-item td.product-remove {
		grid-area: remove;
		width: auto;
		padding: 0;
		text-align: right;
	}

	.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-price {
		grid-area: price;
		width: auto;
		margin-top: 2px;
		/* Outranks woocommerce-smallscreen.css, which forces every cell right with !important. */
		text-align: left !important;
		color: var( --e-global-color-text );
		font-weight: 400;
	}

	.cart-page .woocommerce-cart-form__cart-item td.product-quantity {
		grid-area: quantity;
		width: auto;
		justify-self: start;
		margin-top: 10px;
	}

	.cart-page .elementor-widget-woocommerce-cart .woocommerce-cart-form__cart-item td.product-subtotal {
		grid-area: subtotal;
		width: auto;
		justify-self: end;
		align-self: center;
		margin-top: 10px;
		font-size: 16px;
	}
	.cart-page .cart-heading {
		font-size: 21px;
	}

	.cart-page .cart-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cart-page .cart-actions__empty,
	.cart-page a.cart-actions__continue {
		justify-content: center;
	}

	.cart-page .coupon.e-cart-section {
		flex-direction: column;
		align-items: stretch;
	}

	.cart-page .coupon.e-cart-section input.input-text,
	.cart-page .coupon.e-cart-section button {
		width: 100%;
	}

	.cart-page .cart_totals {
		padding: 22px 20px 24px;
	}

	/* A bigger target for a thumb. */
	.cart-page .cart-quantity__button {
		width: 44px;
		height: 44px;
	}

	.cart-page .woocommerce-cart-form__cart-item .quantity input.qty {
		height: 44px;
	}

	.cart-page .woocommerce-cart-form__cart-item td.product-remove a.remove {
		width: 40px;
		height: 40px;
	}

	.cart-page .cart-recommendations {
		margin-top: 40px;
	}

	.cart-page .cart-recommendations__title {
		font-size: 19px;
	}

	.cart-page .cart-recommendations ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.cart-page .cart-recommendations ul.products li.product a img {
		height: 128px;
	}
}