/**
 * M M Sanidaz — Cart
 * ------------------------------------------------------------------
 * WooCommerce's own cart template ([woocommerce_cart] in page 252's
 * Elementor shortcode widget), restyled — no template override. Shared
 * pieces (heading, steps, buttons, fields, notices, totals) are in
 * commerce.css; markup additions in inc/cart.php + inc/commerce.php.
 *
 *   ≥1024px  items panel | Order Summary (sticky)
 *   <1024px  items, then summary; a "Total · Checkout" dock is pinned to the
 *            bottom (above the global bottom nav on phones) while the
 *            summary's own button is off screen (assets/js/cart.js)
 *   <600px   each line becomes its own card: image + name + options +
 *            price on top, Quantity | Subtotal on a divided footer strip
 *
 * The cart table keeps its real table markup (cart.js, the quantity
 * snippet and OceanWP's +/− buttons all rely on it) but is laid out with
 * CSS grid: table / tbody / rows become blocks, each line a grid. Legacy
 * Additional CSS `.cart { display: grid }` also matches this table, hence
 * the explicit `display` on it.
 */

/* =================================================================
   1. Layout
   ================================================================= */

body.mmsc-commerce--cart #content div.woocommerce:has(> form.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 24px 40px;
}

body.mmsc-commerce--cart #content div.woocommerce > .mmsc-commerce-head,
body.mmsc-commerce--cart #content div.woocommerce > .woocommerce-notices-wrapper,
body.mmsc-commerce--cart #content div.woocommerce > .cross-sells {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

body.mmsc-commerce--cart #content div.woocommerce > .woocommerce-notices-wrapper .woocommerce-message,
body.mmsc-commerce--cart #content div.woocommerce > .woocommerce-notices-wrapper .woocommerce-info,
body.mmsc-commerce--cart #content div.woocommerce > .woocommerce-notices-wrapper .woocommerce-error {
	margin-bottom: 0;
}

body.mmsc-commerce--cart #content form.woocommerce-cart-form {
	min-width: 0;
	margin: 0;
}

body.mmsc-commerce--cart #content .cart-collaterals {
	width: auto;
	min-width: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	body.mmsc-commerce--cart #content div.woocommerce:has(> form.woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: 32px;
	}
}

@media (min-width: 1200px) {
	body.mmsc-commerce--cart #content div.woocommerce:has(> form.woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 40px;
	}
}

/* =================================================================
   2. Items panel
   ================================================================= */

body.mmsc-commerce--cart #content table.shop_table.cart {
	display: block;
	width: 100%;
	margin: 0;
	border: 1px solid var(--mmsc-co-panel-border);
	border-radius: var(--mmsc-co-panel-radius);
	border-collapse: separate;
	background: var(--mmsc-co-panel-bg);
	overflow: hidden;
}

body.mmsc-commerce--cart #content table.shop_table.cart tbody {
	display: block;
}

/* Column headings are carried by each line's own labels (Price, Quantity,
   Subtotal), so the header row is kept for screen readers only. */
body.mmsc-commerce--cart #content table.shop_table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* One line */

body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto minmax(0, 1fr) 40px;
	grid-template-areas:
		"thumb name  name name remove"
		"thumb price qty  sub  sub";
	grid-template-rows: auto 1fr;
	column-gap: 22px;
	row-gap: 16px;
	padding: 24px var(--mmsc-co-panel-pad);
	border: 0;
	border-bottom: 1px solid var(--mmsc-color-border);
	background: none;
}

/* OceanWP's responsive-table rules (`.woocommerce-cart .woocommerce
   table.shop_table tr td { display: inline-block; width: 100%; text-align:
   right }` under 768px) and WooCommerce's `td::before` labels are replaced
   by the rules below at every width. */
body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item td {
	display: block;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

/* Laptop widths (1024–1199), where the items column is narrowest beside the
   summary: price gets its own line, quantity + subtotal share the next. */
@media (min-width: 1024px) and (max-width: 1199px) {
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
		grid-template-columns: 92px minmax(0, 1fr) auto 36px;
		grid-template-areas:
			"thumb name  name remove"
			"thumb price price price"
			"thumb qty   sub  sub";
		grid-template-rows: auto auto 1fr;
		column-gap: 18px;
		row-gap: 14px;
	}

	body.mmsc-commerce--cart #content .mmsc-line-price__off {
		flex-basis: auto;
	}
}

body.mmsc-commerce--cart #content table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
body.mmsc-commerce--cart #content table.shop_table.cart td.product-name      { grid-area: name; }
body.mmsc-commerce--cart #content table.shop_table.cart td.product-price     { grid-area: price; }
body.mmsc-commerce--cart #content table.shop_table.cart td.product-quantity  { grid-area: qty; }
body.mmsc-commerce--cart #content table.shop_table.cart td.product-subtotal  { grid-area: sub; text-align: right; }
body.mmsc-commerce--cart #content table.shop_table.cart td.product-remove    { grid-area: remove; justify-self: end; }

/* Labels — WooCommerce's own data-title ("Price", "Quantity", "Subtotal"). */
body.mmsc-commerce--cart #content table.shop_table.cart td.product-price::before,
body.mmsc-commerce--cart #content table.shop_table.cart td.product-quantity::before,
body.mmsc-commerce--cart #content table.shop_table.cart td.product-subtotal::before {
	content: attr(data-title);
	display: block;
	float: none;
	margin: 0 0 8px;
	color: var(--mmsc-color-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.mmsc-commerce--cart #content table.shop_table.cart td.product-name::before,
body.mmsc-commerce--cart #content table.shop_table.cart td.product-thumbnail::before,
body.mmsc-commerce--cart #content table.shop_table.cart td.product-remove::before {
	display: none;
}

/* Image */

body.mmsc-commerce--cart #content td.product-thumbnail a,
body.mmsc-commerce--cart #content td.product-thumbnail > img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-bg);
	overflow: hidden;
}

body.mmsc-commerce--cart #content td.product-thumbnail img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

body.mmsc-commerce--cart #content td.product-thumbnail a:hover img {
	transform: scale(1.03);
}

/* Name + selected options */

body.mmsc-commerce--cart #content td.product-name > a {
	display: inline;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-heading);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

body.mmsc-commerce--cart #content td.product-name > a:hover {
	color: var(--mmsc-color-primary);
}

body.mmsc-commerce--cart #content td.product-name dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 3px 8px;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	line-height: 1.45;
}

body.mmsc-commerce--cart #content td.product-name dl.variation dt,
body.mmsc-commerce--cart #content td.product-name dl.variation dd {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}

body.mmsc-commerce--cart #content td.product-name dl.variation dt {
	color: var(--mmsc-color-text-muted);
	font-weight: 400;
}

body.mmsc-commerce--cart #content td.product-name dl.variation dd,
body.mmsc-commerce--cart #content td.product-name dl.variation dd p {
	margin: 0;
	color: var(--mmsc-color-text) !important; /* legacy p colour */
	font-weight: 500;
}

body.mmsc-commerce--cart #content td.product-name .backorder_notification {
	margin: 8px 0 0;
	color: var(--mmsc-color-sale) !important; /* legacy p colour */
	font-size: 12.5px;
}

/* Price: selling price, MRP struck through, % off */

body.mmsc-commerce--cart #content .mmsc-line-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	line-height: 1.35;
}

body.mmsc-commerce--cart #content .mmsc-line-price ins,
body.mmsc-commerce--cart #content .mmsc-line-price > .amount {
	color: var(--mmsc-color-text);
	font-size: 15px;
	font-weight: 600;
}

body.mmsc-commerce--cart #content .mmsc-line-price del {
	font-size: 13px;
}

body.mmsc-commerce--cart #content .mmsc-line-price__off {
	flex-basis: 100%;
	color: var(--mmsc-color-sale);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Subtotal */

body.mmsc-commerce--cart #content td.product-subtotal > .amount,
body.mmsc-commerce--cart #content td.product-subtotal > .woocommerce-Price-amount {
	color: var(--mmsc-color-text);
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
}

body.mmsc-commerce--cart #content td.product-subtotal .tax_label {
	display: block;
	color: var(--mmsc-color-text-muted);
	font-size: 12px;
}

/* =================================================================
   3. Quantity stepper
   Legacy Additional CSS (all !important): `.quantity { display: flex;
   justify-content: center; align-items: center; padding-top: 10px; color:
   black }`, `.minus, .plus, .input-text { font-size: 20px; color: #000 }` —
   matched with !important below. OceanWP injects the a.minus / a.plus
   buttons and triggers `change` on the input; the Code Snippets auto-update
   then submits the cart.
   ================================================================= */

body.mmsc-commerce--cart #content td.product-quantity div.quantity {
	display: inline-flex !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	float: none; /* OceanWP floats it right below 768px */
	height: 42px;
	margin: 0;
	padding: 0 !important;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	overflow: hidden;
	transition: border-color var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity:hover {
	border-color: #cbbfb4;
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity:focus-within {
	border-color: var(--mmsc-color-dark);
	box-shadow: var(--mmsc-co-focus-ring);
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity a.minus,
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mmsc-color-text) !important;
	font-size: 0 !important; /* the glyph is replaced by an icon, below */
	font-weight: 400;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

/* OceanWP's "-" / "+" text glyphs → matched line icons. */
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.minus::before,
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity a.minus:hover,
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus:hover {
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-primary) !important;
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity .qty {
	width: 44px;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text) !important;
	font-family: var(--mmsc-font-body);
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity .qty:focus {
	border: 0;
	box-shadow: none;
}

body.mmsc-commerce--cart #content td.product-quantity div.quantity .qty::-webkit-outer-spin-button,
body.mmsc-commerce--cart #content td.product-quantity div.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Sold-individually lines render a hidden input and no stepper. */
body.mmsc-commerce--cart #content td.product-quantity div.quantity:has(input[type="hidden"]) {
	border: 0;
	background: none;
}

/* =================================================================
   4. Remove (trash)
   Legacy: `.remove { background: #E53935; font-size: 20px !important;
   color: white !important }`. The real <a class="remove"> (href,
   aria-label, cart.js AJAX removal) is untouched; its "×" glyph is
   replaced by a line icon drawn as a mask.
   ================================================================= */

body.mmsc-commerce--cart #content td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px 0 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0;
	text-indent: 0;
	transition: background-color var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content td.product-remove a.remove::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	background-color: var(--mmsc-color-text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16M9.5 6.5V4.8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.7M6.2 6.5l.9 12.4a1.6 1.6 0 0 0 1.6 1.5h6.6a1.6 1.6 0 0 0 1.6-1.5l.9-12.4M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16M9.5 6.5V4.8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.7M6.2 6.5l.9 12.4a1.6 1.6 0 0 0 1.6 1.5h6.6a1.6 1.6 0 0 0 1.6-1.5l.9-12.4M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content td.product-remove a.remove:hover {
	background: rgba(179, 65, 61, 0.07) !important;
}

body.mmsc-commerce--cart #content td.product-remove a.remove:hover::before {
	background-color: var(--mmsc-color-error);
}

/* =================================================================
   5. Panel footer: coupon (+ Update cart fallback)
   ================================================================= */

body.mmsc-commerce--cart #content table.shop_table.cart tr:has(> td.actions) {
	display: block;
	border: 0;
	background: none;
}

body.mmsc-commerce--cart #content table.shop_table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	width: auto;
	padding: 20px var(--mmsc-co-panel-pad) 24px;
	border: 0;
	background: #fcfbf8;
	text-align: left;
	text-transform: none;
}

body.mmsc-commerce--cart #content td.actions .coupon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 10px;
	flex: 1 1 320px;
	max-width: 440px;
	margin: 0;
	padding: 0;
	float: none;
}

/* WooCommerce's visually-hidden "Coupon:" label, relabelled "Have a
   coupon?" (inc/cart.php) and shown. Position !important: core/OceanWP
   `.screen-reader-text { position: absolute !important }`. */
body.mmsc-commerce--cart #content td.actions .coupon label.screen-reader-text {
	grid-column: 1 / -1;
	display: block;
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	color: var(--mmsc-color-text);
	font-size: 13px;
	font-weight: 600;
	white-space: normal;
	word-wrap: normal;
}

body.mmsc-commerce--cart #content td.actions .coupon .input-text {
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	float: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.mmsc-commerce--cart #content td.actions .coupon .coupon-error-notice {
	grid-column: 1 / -1;
	margin: 0;
}

body.mmsc-commerce--cart #content td.actions .coupon .input-text::placeholder {
	text-transform: none;
	letter-spacing: 0;
}

/* Quantity changes submit the cart automatically (Code Snippets "ajax auto
   update"), so "Update cart" only shows in the moment it's actually needed
   (enabled) — e.g. if that snippet is ever switched off. */
body.mmsc-commerce--cart #content td.actions button[name="update_cart"] {
	min-height: var(--mmsc-co-field-h);
	margin: 0 0 0 auto;
	padding: 0 4px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--mmsc-color-text) !important;
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-primary);
	text-underline-offset: 4px;
	cursor: pointer;
}

body.mmsc-commerce--cart #content td.actions button[name="update_cart"]:disabled {
	display: none;
}

/* =================================================================
   6. Order Summary
   OceanWP: `.woocommerce .cart-collaterals .cart_totals { float: right;
   width: 48%; border … }` — the #content scope outranks it.
   ================================================================= */

body.mmsc-commerce--cart #content .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	margin: 0;
	padding: var(--mmsc-co-panel-pad);
	border: 1px solid var(--mmsc-co-panel-border);
	border-radius: var(--mmsc-co-panel-radius);
	background: var(--mmsc-co-panel-bg);
}

@media (min-width: 1024px) {
	/* Clears the fixed header (88px) and, when shown, the admin bar. */
	body.mmsc-commerce--cart #content .cart-collaterals .cart_totals {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px);
	}
}

body.mmsc-commerce--cart #content .cart_totals h2 {
	margin: 0 0 16px;
	padding: 0 0 16px;
	border: 0;
	border-bottom: 1px solid var(--mmsc-color-border);
	background: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: none;
}

body.mmsc-commerce--cart #content .cart_totals table.shop_table,
body.mmsc-commerce--cart #content .cart_totals table.shop_table tbody {
	display: table;
	width: 100%;
}

body.mmsc-commerce--cart #content .cart_totals table.shop_table tbody {
	display: table-row-group;
}

body.mmsc-commerce--cart #content .cart_totals table.shop_table tr {
	display: table-row;
	border: 0;
}

body.mmsc-commerce--cart #content .cart_totals table.shop_table th,
body.mmsc-commerce--cart #content .cart_totals table.shop_table td {
	display: table-cell;
	width: auto;
}

body.mmsc-commerce--cart #content .cart_totals tr.mmsc-savings td {
	text-align: left;
}

/* Shipping calculator ("Change address") */

body.mmsc-commerce--cart #content .woocommerce-shipping-calculator {
	margin: 4px 0 0;
	text-align: right;
}

body.mmsc-commerce--cart #content .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mmsc-color-primary);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

body.mmsc-commerce--cart #content .shipping-calculator-button::after {
	display: none;
}

body.mmsc-commerce--cart #content .shipping-calculator-button:hover {
	color: var(--mmsc-color-primary);
	text-decoration-color: currentColor;
}

body.mmsc-commerce--cart #content .shipping-calculator-form {
	display: grid;
	gap: 12px;
	margin: 14px 0 4px;
	padding: 16px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: #fcfbf8;
	text-align: left;
}

body.mmsc-commerce--cart #content .shipping-calculator-form .form-row {
	width: auto;
	margin: 0;
	float: none;
}

body.mmsc-commerce--cart #content .shipping-calculator-form button.button {
	width: 100%;
	min-height: 44px;
	margin: 0;
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* CTA group */

body.mmsc-commerce--cart #content .wc-proceed-to-checkout {
	margin: 22px 0 0;
	padding: 0;
}

body.mmsc-commerce--cart #content .wc-proceed-to-checkout a.checkout-button {
	margin-bottom: 0;
	font-size: 14px;
}

body.mmsc-commerce--cart #content .wc-proceed-to-checkout a.checkout-button::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content .wc-proceed-to-checkout a.checkout-button:hover::after {
	transform: translateX(3px);
}

body.mmsc-commerce--cart #content .mmsc-continue-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	margin: 8px 0 0;
	color: var(--mmsc-color-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.mmsc-commerce--cart #content .mmsc-continue-link span {
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 5px;
	transition: text-decoration-color var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content .mmsc-continue-link:hover span {
	text-decoration-color: currentColor;
}

body.mmsc-commerce--cart #content .wc-proceed-to-checkout .mmsc-secure-note {
	margin-top: 6px;
}

/* =================================================================
   7. "Total · Checkout" dock (<1024px)
   ================================================================= */

body.mmsc-commerce--cart #content .mmsc-cart-dock {
	display: none;
}

@media (max-width: 1023px) {
	/* `html body` outranks bottom-nav.css's own body rule; below 768px
	   --mmsc-bnav-offset is the nav bar + safe area, on tablets just the
	   safe area. Chaty, Woomotiv and back-to-top follow --mmsc-float-offset. */
	html body.mmsc-commerce--cart.mmsc-cart-has-dock {
		--mmsc-cart-dock-h: 68px;
		--mmsc-float-offset: calc(var(--mmsc-bnav-offset, env(safe-area-inset-bottom, 0px)) + var(--mmsc-cart-dock-h));
		padding-bottom: var(--mmsc-float-offset);
	}

	body.mmsc-commerce--cart.mmsc-cart-has-dock .chaty-widget {
		bottom: calc(var(--mmsc-float-offset) + 12px - var(--mmsc-chaty-legacy, 0px)) !important;
	}

	body.mmsc-commerce--cart.mmsc-cart-has-dock .chaty-widget .on-hover-text {
		display: none;
	}

	body.mmsc-commerce--cart.mmsc-cart-has-dock #scroll-top {
		display: none !important;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock {
		position: fixed;
		right: 0;
		bottom: var(--mmsc-bnav-offset, 0px);
		left: 0;
		z-index: 8990;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: var(--mmsc-cart-dock-h, 68px);
		padding: 10px max(16px, calc((100vw - 720px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--mmsc-color-border);
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 -8px 24px rgba(45, 38, 35, 0.07);
		transition: transform var(--mmsc-transition-base), visibility var(--mmsc-transition-base), opacity var(--mmsc-transition-base);
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock.is-hidden,
	html.mmsc-kb-open body.mmsc-commerce--cart #content .mmsc-cart-dock {
		visibility: hidden;
		opacity: 0;
		transform: translateY(calc(100% + var(--mmsc-bnav-offset, 0px)));
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__total {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.2;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__label {
		color: var(--mmsc-color-text-muted);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__amount,
	body.mmsc-commerce--cart #content .mmsc-cart-dock__amount strong {
		color: var(--mmsc-color-text) !important; /* legacy strong */
		font-family: var(--mmsc-font-heading);
		font-size: 20px;
		font-weight: 600 !important;
		white-space: nowrap;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__amount .includes_tax {
		display: none;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		flex: 0 1 220px;
		min-height: 48px;
		padding: 0 22px;
		border-radius: var(--mmsc-radius-sm);
		background: var(--mmsc-color-dark);
		color: var(--mmsc-color-surface) !important;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__cta:hover {
		background: var(--mmsc-color-dark-hover);
		color: var(--mmsc-color-surface) !important;
	}
}

/* Phones: the dock sits flush on the bottom nav — one two-tier surface, as
   on the wholesale page. */
@media (max-width: 767px) {
	body.mmsc-commerce--cart.mmsc-cart-has-dock #mmsc-bnav.mmsc-bnav {
		box-shadow: none;
	}

	/* The nav below already clears the safe area. */
	body.mmsc-commerce--cart.mmsc-has-bnav #content .mmsc-cart-dock {
		padding-bottom: 10px;
	}

	/* The total keeps its full width and the CTA takes what is left, so a
	   long amount never runs under the button. */
	body.mmsc-commerce--cart #content .mmsc-cart-dock {
		gap: 24px;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__total {
		flex: 0 0 auto;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__cta {
		flex: 1 1 auto;
		max-width: 220px;
		min-width: 0;
		padding: 0 16px;
	}
}

@media (max-width: 374px) {
	body.mmsc-commerce--cart #content .mmsc-cart-dock {
		gap: 16px;
	}

	body.mmsc-commerce--cart #content .mmsc-cart-dock__amount,
	body.mmsc-commerce--cart #content .mmsc-cart-dock__amount strong {
		font-size: 18px;
	}
}

/* =================================================================
   8. Phones: one card per line
   ================================================================= */

@media (max-width: 599px) {
	body.mmsc-commerce--cart #content div.woocommerce:has(> form.woocommerce-cart-form) {
		row-gap: 16px;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart {
		display: grid;
		gap: 12px;
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart tbody {
		display: grid;
		gap: 12px;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
		grid-template-columns: 88px minmax(0, 1fr) auto 32px;
		grid-template-areas:
			"thumb name  name  remove"
			"thumb price price price"
			"qty   qty   sub   sub";
		grid-template-rows: auto 1fr auto;
		column-gap: 14px;
		row-gap: 10px;
		padding: 16px;
		border: 1px solid var(--mmsc-co-panel-border);
		border-radius: var(--mmsc-co-panel-radius);
		background: var(--mmsc-co-panel-bg);
	}

	/* Divider above the Quantity | Subtotal strip. */
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item::after {
		content: "";
		grid-row: 3;
		grid-column: 1 / -1;
		align-self: start;
		height: 1px;
		background: var(--mmsc-color-border);
	}

	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item td.product-quantity,
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item td.product-subtotal {
		padding-top: 14px;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart td.product-quantity::before,
	body.mmsc-commerce--cart #content table.shop_table.cart td.product-subtotal::before {
		margin-bottom: 6px;
	}

	/* Subtotal value sits level with the stepper's centre line. */
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item td.product-subtotal > .amount,
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item td.product-subtotal > .woocommerce-Price-amount {
		display: inline-block;
		line-height: 44px;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart td.product-price {
		align-self: end;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart td.product-price::before {
		margin-bottom: 4px;
	}

	body.mmsc-commerce--cart #content td.product-name > a {
		font-size: 16.5px;
	}

	body.mmsc-commerce--cart #content td.product-name dl.variation {
		margin-top: 6px;
		font-size: 12.5px;
	}

	body.mmsc-commerce--cart #content .mmsc-line-price__off {
		flex-basis: auto;
	}

	body.mmsc-commerce--cart #content td.product-remove a.remove {
		width: 44px;
		height: 44px;
		margin: -12px -12px 0 0;
	}

	body.mmsc-commerce--cart #content td.product-quantity div.quantity {
		height: 44px;
	}

	body.mmsc-commerce--cart #content td.product-quantity div.quantity a.minus,
	body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus {
		width: 44px;
	}

	body.mmsc-commerce--cart #content td.product-quantity div.quantity .qty {
		width: 38px;
	}

	body.mmsc-commerce--cart #content td.product-subtotal > .amount,
	body.mmsc-commerce--cart #content td.product-subtotal > .woocommerce-Price-amount {
		font-size: 16px;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart tr:has(> td.actions) {
		border: 1px solid var(--mmsc-co-panel-border);
		border-radius: var(--mmsc-co-panel-radius);
		background: var(--mmsc-co-panel-bg);
		overflow: hidden;
	}

	body.mmsc-commerce--cart #content table.shop_table.cart td.actions {
		padding: 16px;
		background: var(--mmsc-co-panel-bg);
	}

	body.mmsc-commerce--cart #content td.actions .coupon {
		flex-basis: 100%;
		max-width: none;
	}
}

@media (max-width: 374px) {
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
		grid-template-columns: 76px minmax(0, 1fr) auto 32px;
		column-gap: 12px;
		padding: 14px;
	}
}

/* =================================================================
   9. Empty cart
   ================================================================= */

body.mmsc-commerce--cart #content div.woocommerce:has(.mmsc-cart-empty) {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 560px;
	margin: 24px auto 0;
	padding: 56px 32px 48px;
	border: 1px solid var(--mmsc-co-panel-border);
	border-radius: var(--mmsc-co-panel-radius);
	background: var(--mmsc-co-panel-bg);
	text-align: center;
}

body.mmsc-commerce--cart #content div.woocommerce:has(.mmsc-cart-empty) > .woocommerce-notices-wrapper {
	align-self: stretch;
	margin-bottom: 28px;
	text-align: left;
}

body.mmsc-commerce--cart #content div.woocommerce:has(.mmsc-cart-empty) > .woocommerce-notices-wrapper > :last-child {
	margin-bottom: 0;
}

/* OceanWP's icon-font chevron → the same arrow as the other links. */
body.mmsc-commerce--cart #content p.return-to-shop .button::before {
	content: "";
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: currentColor;
	font-family: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.mmsc-commerce--cart #content .mmsc-cart-empty,
body.mmsc-commerce--cart #content .mmsc-cart-empty__inner {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

body.mmsc-commerce--cart #content .mmsc-cart-empty__inner::before {
	display: none;
}

body.mmsc-commerce--cart #content .mmsc-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 0 22px;
	border-radius: 50%;
	background: var(--mmsc-co-rose-tint);
	color: var(--mmsc-color-primary);
}

body.mmsc-commerce--cart #content .mmsc-cart-empty__text {
	max-width: 380px;
	margin: 12px auto 0;
	color: var(--mmsc-color-text-muted) !important; /* legacy p colour */
	font-size: 15px;
	line-height: 1.6;
}

body.mmsc-commerce--cart #content p.return-to-shop {
	width: 100%;
	max-width: 280px;
	margin: 28px 0 0;
}

@media (max-width: 599px) {
	body.mmsc-commerce--cart #content div.woocommerce:has(.mmsc-cart-empty) {
		margin-top: 8px;
		padding: 40px 20px 32px;
	}
}

/* =================================================================
   10. Recommended for You (inc/cart.php)
   -----------------------------------------------------------------
   Below everything else, across both columns. The cards are the Shop's
   (product-card.css, body.mmsc-cards) — only the section and its column
   count are set here: four across from 768px, the Shop's two-up grid on
   phones. Quieter than the cart above: no panel, a hairline and a smaller
   heading.
   ================================================================= */

body.mmsc-commerce--cart #content div.woocommerce > .mmsc-recs {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 40px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--mmsc-color-border);
}

body.mmsc-commerce--cart #content .mmsc-recs__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

body.mmsc-commerce--cart #content .mmsc-recs__title {
	margin: 0;
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-xl);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--mmsc-color-text);
}

body.mmsc-commerce--cart #content a.mmsc-recs__all {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 4px;
}

body.mmsc-commerce--cart #content a.mmsc-recs__all:hover {
	text-decoration-color: currentColor;
}

body.mmsc-cards.mmsc-commerce--cart #content .mmsc-recs ul.products.oceanwp-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

@media (min-width: 768px) {
	body.mmsc-cards.mmsc-commerce--cart #content .mmsc-recs ul.products.oceanwp-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--mmsc-space-4);
	}
}

@media (min-width: 1080px) {
	body.mmsc-commerce--cart #content .mmsc-recs__title {
		font-size: var(--mmsc-text-2xl);
	}

	body.mmsc-cards.mmsc-commerce--cart #content .mmsc-recs ul.products.oceanwp-row {
		column-gap: var(--mmsc-space-5);
	}
}

/* After a Quick Add the card marks its button `.added` and (on the Shop)
   swaps in WooCommerce's "View cart" link — which WooCommerce never adds on
   the Cart page itself. The item appears in the cart right above, so the
   card keeps its + Quick Add (another size, another piece). */
body.mmsc-cards.mmsc-commerce--cart #content .mmsc-recs li.product .product-inner a.add_to_cart_button.added {
	display: inline-flex;
}

/* The funnel's link reset (`body.mmsc-commerce #content a`, commerce.css)
   outranks the card's own name-link hover colour. */
body.mmsc-cards.mmsc-commerce--cart #content .mmsc-recs li.product .title a:hover {
	color: var(--mmsc-color-sale);
}

@media (max-width: 767px) {
	body.mmsc-commerce--cart #content div.woocommerce > .mmsc-recs {
		margin-top: 32px;
		padding-top: 32px;
	}

	body.mmsc-commerce--cart #content .mmsc-recs__head {
		margin-bottom: 18px;
	}

	/* One line beside "Shop all" down to 360px. */
	body.mmsc-commerce--cart #content .mmsc-recs__title {
		font-size: 21px;
	}
}

/* =================================================================
   Instant quantities (assets/js/cart.js §4)
   Quantities and prices change on the tap; WooCommerce confirms in the
   background and only changed cells are re-drawn.
   ================================================================= */

/* Figures keep their width as digits change, so neighbours don't shift. */
body.mmsc-commerce--cart #content td.product-subtotal,
body.mmsc-commerce--cart #content td.product-quantity .qty,
body.mmsc-commerce--cart #content .cart_totals td,
body.mmsc-commerce--cart #content .mmsc-cart-dock__amount {
	font-variant-numeric: tabular-nums;
}

/* Rapid taps on − / + never zoom the page on phones. */
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.minus,
body.mmsc-commerce--cart #content td.product-quantity div.quantity a.plus {
	touch-action: manipulation;
}

/* A line on its way out (Remove, or quantity 0), then gone. */
body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
	transition: opacity var(--mmsc-transition-fast);
}

body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item.is-removing {
	opacity: 0.4;
	pointer-events: none;
}

body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item.is-gone {
	opacity: 0;
}

/* With a coupon, fee or tax in the totals, the total and savings are only
   an estimate until WooCommerce answers: shown slightly quieter. */
body.mmsc-commerce--cart #content .cart_totals.mmsc-is-estimating tr.order-total td,
body.mmsc-commerce--cart #content .cart_totals.mmsc-is-estimating .mmsc-savings__amount,
body.mmsc-commerce--cart #content .cart_totals.mmsc-is-estimating .mmsc-cart-dock__amount {
	opacity: 0.6;
	transition: opacity var(--mmsc-transition-fast);
}

/* Checkout links wait for a pending change to reach the cart. */
body.mmsc-commerce--cart #content .wc-proceed-to-checkout a.is-busy,
body.mmsc-commerce--cart #content .mmsc-cart-dock a.is-busy {
	cursor: progress;
	opacity: 0.8;
}

/* WooCommerce's own full updates (a coupon, Undo, a Quick Add from the row
   below) still block the cart while they run — the veil now only appears
   if the update takes a moment, instead of flashing on every one (the
   animation outranks blockUI's inline opacity; cart.js turns off its own
   fades). */
body.mmsc-commerce--cart #content .blockUI.blockOverlay {
	animation: mmsc-cart-veil 200ms ease 350ms both;
}

@keyframes mmsc-cart-veil {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mmsc-commerce--cart #content table.shop_table.cart tr.cart_item {
		transition: none;
	}

	body.mmsc-commerce--cart #content .blockUI.blockOverlay {
		animation-duration: 1ms;
	}
}