/*
 * Central Surplus - slide-in cart (Elementor Pro "Menu Cart" widget, side-cart mode).
 *
 * Loaded by wp-content/mu-plugins/side-cart-ui.php, which also puts this file and
 * the .elementor-menu-cart selectors on WP Rocket's Remove-Unused-CSS safelist.
 * That safelisting is not optional: everything inside the panel below the close
 * button (product rows, subtotal, footer buttons) is injected by the wc-fragments
 * AJAX call AFTER the page is served, so RUCSS analysed the served html, saw none
 * of those selectors, and stripped Elementor's own cart stylesheet. That is why
 * the two footer buttons rendered as identical grey blocks jammed together.
 *
 * On specificity: almost every rule in
 * elementor-pro/assets/css/widget-woocommerce-menu-cart.min.css is two classes,
 * so the prefix here is deliberately three
 * (.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main X) to win
 * outright rather than by source order, which WP Rocket is free to change. The
 * product row needs five plus !important, because the widget carries its own
 * `display:grid !important; grid-template-columns:28% auto !important` custom CSS
 * (Elementor element 86e75ff on header template 8560).
 */

.elementor-menu-cart__container {
	--cs-cart-green: #39b200;
	--cs-cart-green-dark: #2f9700;
	--cs-cart-ink: #3a3a3a;
	--cs-cart-muted: #6e7377;
	--cs-cart-line: #e6e8e9;
	--cs-cart-hairline: #f0f1f2;
	--cs-cart-wash: #f4f4f4;
	--cs-cart-footer-bg: #fafbfb;
	--cs-cart-pad: 24px;
}

/* ---------- 1. scrim ---------- */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
	background-color: rgba(20, 22, 24, .5);
}

/* ---------- 2. panel shell ----------
   Padding comes off the panel and onto each section, so the product list can
   scroll edge to edge underneath a fixed title row and a fixed footer. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	width: min(400px, 100vw);
	max-width: 100%;
	padding: 0;
	background-color: #fff;
	border: 0;
	border-radius: 14px 0 0 14px;
	box-shadow: -10px 0 44px rgba(20, 22, 24, .22);
	overflow: hidden;
	font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	color: var(--cs-cart-ink);
}

/* ---------- 3. title row ----------
   The widget renders no heading at all, only a bare close button. The heading is
   a ::before on the flex column so it becomes the first row, and the close button
   is lifted out of the flow into the corner beside it. Both are CSS-only on
   purpose: no javascript touches this DOM, so there is nothing to re-apply after
   a wc-fragments refresh replaces the panel's contents. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before {
	content: "Your Cart";
	flex: 0 0 auto;
	padding: 22px 62px 16px var(--cs-cart-pad);
	border-bottom: 1px solid var(--cs-cart-line);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--cs-cart-ink);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button {
	position: absolute;
	top: 19px;
	right: 18px;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	background-color: var(--cs-cart-wash);
	transition: background-color .18s ease;
	z-index: 2;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button:hover {
	background-color: #e8eaeb;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button::after {
	left: 50%;
	width: 13px;
	height: 2px;
	margin: -1px 0 0 -6.5px;
	background: #55595c;
	border-radius: 2px;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button:hover::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button:hover::after {
	background: var(--cs-cart-ink);
}

/* ---------- 4. the three stacked sections ----------
   Elementor gives this wrapper height:100%, which overflows the panel once the
   title row above it exists. flex:1 + min-height:0 is what lets the list scroll
   instead of pushing the footer off the bottom. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	display: flex;
	flex-direction: column;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__products {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none !important; /* base sheet hard-codes calc(100vh - 250px) */
	margin: 0;
	padding: 4px var(--cs-cart-pad);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ---------- 5. product row ----------
   Two columns, with the right-hand gutter reserved by padding because the remove
   button is absolutely positioned (that is Elementor's own arrangement, kept). */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container .elementor-menu-cart__main .elementor-menu-cart__products .elementor-menu-cart__product {
	position: relative;
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr) !important;
	grid-template-rows: auto auto;
	grid-template-areas:
		"img name"
		"img price";
	column-gap: 14px;
	row-gap: 3px;
	align-items: start;
	margin: 0;
	padding: 16px 36px 16px 0;
	border-width: 0 0 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--cs-cart-hairline);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__products .elementor-menu-cart__product:last-child {
	border-bottom-width: 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-image {
	grid-area: img;
	width: 64px;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-image img {
	display: block;
	width: 64px;
	height: 64px;
	padding: 2px;
	background-color: #fff;
	border: 1px solid #edeeef;
	border-radius: 8px;
	object-fit: contain;
}

/* padding-inline-start:20px in the base sheet doubles up with the grid gap. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price {
	padding-inline-start: 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name {
	grid-area: name;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--cs-cart-ink);
	text-decoration: none;
	transition: color .16s ease;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name a:hover {
	color: var(--cs-cart-green);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price {
	grid-area: price;
	align-self: start;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cs-cart-muted);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price .product-quantity {
	font-weight: 600;
	color: var(--cs-cart-ink);
}

/* ---------- 6. remove ----------
   The glyph is drawn on the wrapper and the two anchors inside it are invisible
   full-size click targets (opacity:0 in the base sheet), so the wrapper is what
   gets styled. Both anchors are printed on every row and Elementor picks one via
   --remove-from-cart-button / --elementor-remove-from-cart-button; those two
   declarations live in the stylesheet RUCSS was stripping, and with them gone
   both anchors stacked. Pinned explicitly to the AJAX one. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove {
	position: absolute;
	top: 50%;
	bottom: auto;
	inset-inline-end: 0;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background-color: var(--cs-cart-wash);
	transform: translateY(-50%);
	transition: background-color .18s ease;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove::after {
	left: 7px;
	width: 12px;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: #7a7f83;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
	border: 0;
	background-color: #fde7e7;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::after {
	background: #d93025;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove > a.remove_from_cart_button {
	display: block;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove > a.elementor_remove_from_cart_button {
	display: none;
}

/* ---------- 7. subtotal ----------
   The base sheet draws a border on all four sides of this element; the widget
   zeroes left and right, which left a line above AND below the row. Only the one
   separating it from the product list is wanted. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 16px var(--cs-cart-pad) 0;
	border-width: 1px 0 0;
	border-top-style: solid;
	border-top-color: var(--cs-cart-line);
	background-color: var(--cs-cart-footer-bg);
	text-align: left;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-cart-muted);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--cs-cart-ink);
}

/* An unscoped `bdi:after{content:" /each"}` lives in the custom CSS of the
   "Product Slider Loop" template (elementor_library 9026), so it was appending
   "/each" to the cart total too. Right on a unit price, wrong on a sum.
   Suppressed here; that rule still wants scoping at the source. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal bdi::after {
	content: none !important;
}

/* ---------- 8. footer buttons ----------
   Was --cart-footer-layout:1fr 1fr: two identical grey blocks side by side with a
   10px gutter and no hierarchy. Now stacked full width, Checkout last so it lands
   under the thumb on a phone, and told apart by colour rather than by gap. */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	padding: 16px var(--cs-cart-pad) calc(20px + env(safe-area-inset-bottom));
	background-color: var(--cs-cart-footer-bg);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	height: auto;
	padding: 13px 18px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
	background-color: #fff;
	color: var(--cs-cart-ink);
	border: 1.5px solid #d7dadc;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
	background-color: var(--cs-cart-wash);
	border-color: #bfc4c7;
	color: var(--cs-cart-ink);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
	background-color: var(--cs-cart-green);
	color: #fff;
	border: 1.5px solid var(--cs-cart-green);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
	background-color: var(--cs-cart-green-dark);
	border-color: var(--cs-cart-green-dark);
	color: #fff;
}

/* ---------- 9. empty cart ---------- */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px var(--cs-cart-pad);
	font-size: 16px;
	color: var(--cs-cart-muted);
	text-align: center;
}

/* ---------- 10. phones ---------- */

@media (max-width: 767px) {
	.elementor-menu-cart__container {
		--cs-cart-pad: 20px;
	}

	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
		width: min(400px, calc(100vw - 32px));
	}

	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main::before {
		padding-top: 20px;
		padding-bottom: 14px;
		font-size: 20px;
	}

	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}
}

/* ---------- 11. floating launchers ----------
   The HubSpot chat bubble and the UserWay ADA button sit bottom-right at
   z-indexes nothing on this site can outrank (see mobile-floating-ui.php), which
   put them on top of the Checkout button. Faded out while the cart is open. */

html:has(.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown) .uwy,
html:has(.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown) #hubspot-messages-iframe-container {
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity .2s ease;
}

/* And the mobile header must not slide away from under an open cart. */
@media (max-width: 767px) {
	html.cs-hdr-hidden:has(.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown) .cs-hdr-sticky.elementor-sticky--active {
		top: 0 !important;
	}
}