/* ============================================================
 * Flyout Cart — Cart Page (v1.7.10)
 * CLEAN REWRITE based on the v1.7.6 known-working baseline.
 * No body background overrides. No Avada wrapper transparency
 * hacks. No :has() selectors. No experimental "coupon-moved"
 * features. Just the colorful cart styling that worked.
 * ============================================================ */

/* Version is in PHP (Version: 1.7.11) and CSS file URL ?ver=1.7.11.
 * Check via DevTools Network tab if you ever need to verify. */

/* ---------- TYPOGRAPHY (scoped to cart elements only) ---------- */
.woocommerce-cart-form,
.woocommerce-cart-form *,
.cart_totals,
.cart_totals *,
.flyout-cart-page__hero,
.flyout-cart-page__hero * {
	font-family: 'Lexend Deca', 'Noto Sans Marchen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---------- HIDE Update Cart button (global on cart page) ---------- */
body.woocommerce-cart [name="update_cart"] {
	display: none !important;
	visibility: hidden !important;
}

/* ---------- HIDE Avada's "Have A Promotional Code" row ----------
 * Avada renders the coupon area as tr.avada-cart-actions and styles
 * it via CSS to look like a separate "Have A Promotional Code" box.
 * JS moves the input + button into cart_totals; this CSS hides the
 * row immediately so there's no flash before JS runs. */
body.woocommerce-cart tr.avada-cart-actions {
	display: none !important;
}

/* ---------- HIDE per-unit price column ---------- */
.woocommerce-cart-form td.product-price {
	display: none !important;
}

/* ============================================================
 * HERO BANNER — gradient with white text
 * ============================================================ */
.flyout-cart-page__hero {
	border-radius: 20px;
	overflow: hidden;
	margin: 0 0 28px;
	box-shadow: 0 12px 32px rgba(35, 65, 145, 0.18);
	background: linear-gradient(135deg, #006cfa 0%, #234191 50%, #a8007e 100%);
	position: relative;
}

.flyout-cart-page__hero::before,
.flyout-cart-page__hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.flyout-cart-page__hero::before {
	width: 200px;
	height: 200px;
	top: -80px;
	right: -40px;
}

.flyout-cart-page__hero::after {
	width: 140px;
	height: 140px;
	bottom: -60px;
	right: 180px;
}

.flyout-cart-page__hero-stripe {
	display: none;
}

.flyout-cart-page__hero-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 36px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.flyout-cart-page__hero-left {
	flex: 1 1 340px;
	min-width: 0;
	color: #fff;
}

.flyout-cart-page__hero-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.flyout-cart-page__hero-title {
	font-size: 26px;
	font-weight: 800;
	color: #fff !important;
	letter-spacing: -0.6px;
	line-height: 1.2;
	margin: 0;
}

.flyout-cart-page__hero-title .hero-count {
	color: #fff;
	font-weight: 800;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.flyout-cart-page__hero-right {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.flyout-cart-page__hero-right .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.95);
	color: #1a3a8a;
	font-size: 12px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.flyout-cart-page__hero-right .hero-badge-icon {
	font-size: 14px;
	line-height: 1;
}

/* ============================================================
 * CART ITEMS — rotating pastel backgrounds + numbered badges
 * ============================================================ */

.woocommerce-cart-form table.shop_table thead {
	display: none;
}

.woocommerce-cart-form table.shop_table tbody {
	counter-reset: cart-item;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item {
	counter-increment: cart-item;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
	border: 1px solid rgba(35, 65, 145, 0.08) !important;
	border-radius: 18px !important;
	box-shadow: 0 4px 12px rgba(35, 65, 145, 0.06);
	padding: 26px 28px 26px 60px !important;
	margin: 18px 0 !important;
	position: relative !important;
	overflow: visible !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: 100% !important;
	box-sizing: border-box !important;
	background: #fff !important;
}

/* Rotating pastels */
.woocommerce-cart-form table.shop_table tbody tr.cart_item:nth-of-type(5n+1) {
	background: linear-gradient(120deg, #ecfdf5 0%, #d1fae5 18%, #fff 60%) !important;
	border-color: rgba(16, 185, 129, 0.15) !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item:nth-of-type(5n+2) {
	background: linear-gradient(120deg, #eff6ff 0%, #dbeafe 18%, #fff 60%) !important;
	border-color: rgba(59, 130, 246, 0.15) !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item:nth-of-type(5n+3) {
	background: linear-gradient(120deg, #f5f3ff 0%, #ede9fe 18%, #fff 60%) !important;
	border-color: rgba(139, 92, 246, 0.15) !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item:nth-of-type(5n+4) {
	background: linear-gradient(120deg, #fdf2f8 0%, #fce7f3 18%, #fff 60%) !important;
	border-color: rgba(236, 72, 153, 0.18) !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item:nth-of-type(5n+5) {
	background: linear-gradient(120deg, #fefce8 0%, #fef3c7 18%, #fff 60%) !important;
	border-color: rgba(245, 158, 11, 0.18) !important;
}

/* Numbered rank badge */
.woocommerce-cart-form table.shop_table tbody tr.cart_item::before {
	content: '#' counter(cart-item) !important;
	position: absolute !important;
	top: -12px !important;
	left: 22px !important;
	background: #f59e0b !important;
	color: #fff !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.4px !important;
	box-shadow: 0 6px 14px rgba(245, 158, 11, 0.4) !important;
	z-index: 3 !important;
	border: 2px solid #fff !important;
	font-family: 'Lexend Deca', sans-serif !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(35, 65, 145, 0.14) !important;
}

.woocommerce-cart-form table.shop_table tbody tr.cart_item td {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Image */
.woocommerce-cart-form td.product-thumbnail {
	order: 1;
	flex: 0 0 auto;
	width: 110px !important;
}

.woocommerce-cart-form .product-thumbnail img {
	width: 110px !important;
	height: 110px !important;
	max-width: 110px !important;
	object-fit: cover;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: #fff;
	display: block;
	box-shadow: 0 6px 16px rgba(35, 65, 145, 0.1);
}

/* Name */
.woocommerce-cart-form td.product-name {
	order: 2;
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce-cart-form .product-name a {
	color: #1a3a8a !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	letter-spacing: -0.4px;
}

.woocommerce-cart-form .product-name a:hover {
	color: #a8007e !important;
}

/* Variation pill */
.woocommerce-cart-form .product-name dl.variation {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	background: rgba(255, 255, 255, 0.85) !important;
	color: #234191 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	margin: 10px 0 0 !important;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border: 1px solid rgba(35, 65, 145, 0.1);
}

.woocommerce-cart-form .product-name dl.variation dt,
.woocommerce-cart-form .product-name dl.variation dd {
	display: inline !important;
	margin: 0 4px 0 0 !important;
}

/* Quantity */
.woocommerce-cart-form td.product-quantity {
	order: 3;
	flex: 0 0 auto;
}

.woocommerce-cart-form .quantity {
	display: inline-flex !important;
	align-items: center;
	border: 1.5px solid rgba(35, 65, 145, 0.15);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	height: 44px;
}

.woocommerce-cart-form .quantity .minus,
.woocommerce-cart-form .quantity .plus,
.woocommerce-cart-form .quantity button {
	background: #fff !important;
	border: 0 !important;
	width: 40px !important;
	height: 42px !important;
	cursor: pointer;
	color: #234191 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-cart-form .quantity .minus:hover,
.woocommerce-cart-form .quantity .plus:hover {
	background: #006cfa !important;
	color: #fff !important;
}

.woocommerce-cart-form .quantity input.qty {
	width: 48px !important;
	height: 42px !important;
	padding: 0 !important;
	text-align: center;
	border: 0 !important;
	border-left: 1.5px solid rgba(35, 65, 145, 0.15) !important;
	border-right: 1.5px solid rgba(35, 65, 145, 0.15) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #234191 !important;
	background: #fff !important;
}

/* Subtotal — magenta */
.woocommerce-cart-form td.product-subtotal {
	order: 4;
	flex: 0 0 auto;
	min-width: 110px;
	text-align: right;
	color: #c2185b !important;
	font-weight: 800 !important;
	font-size: 24px !important;
	letter-spacing: -0.5px;
	white-space: nowrap;
}

.woocommerce-cart-form td.product-subtotal .amount,
.woocommerce-cart-form td.product-subtotal .woocommerce-Price-amount {
	color: #c2185b !important;
	font-weight: 800 !important;
	font-size: 24px !important;
}

/* Remove × — top right */
.woocommerce-cart-form td.product-remove {
	order: 5;
	position: absolute !important;
	top: 14px !important;
	right: 16px !important;
	width: 28px !important;
}

.woocommerce-cart-form a.remove {
	color: #b0b6c8 !important;
	font-size: 18px !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 26px !important;
	background: rgba(255, 255, 255, 0.7) !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
}

.woocommerce-cart-form a.remove:hover {
	color: #a8007e !important;
	background: #fce5f3 !important;
}

/* ============================================================
 * CART TOTALS
 * ============================================================ */

/* Center cart_totals now that the coupon column is hidden.
 * Override Avada's two-column layout so cart_totals isn't pinned
 * to one side with empty space next to it. */
@media (min-width: 769px) {
	body.woocommerce-cart .cart-collaterals {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		float: none !important;
		clear: both !important;
		display: block !important;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals,
	body.woocommerce-cart .cart_totals {
		width: 100% !important;
		max-width: 520px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}

	/* Coupon notice — match cart_totals width and centering so it
	 * stacks visually above the totals card */
	body.woocommerce-cart .woocommerce-notices-wrapper[data-flyout-coupon-notice="1"] {
		width: 100% !important;
		max-width: 520px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 14px !important;
	}
}

/* Mobile coupon notice — full width with side margins */
@media (max-width: 768px) {
	body.woocommerce-cart .woocommerce-notices-wrapper[data-flyout-coupon-notice="1"] {
		margin-bottom: 14px !important;
	}
}

.cart_totals {
	background: #fff !important;
	border-radius: 18px !important;
	border: 1px solid rgba(35, 65, 145, 0.1) !important;
	box-shadow: 0 16px 36px rgba(35, 65, 145, 0.12) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.cart_totals::before {
	content: '';
	display: block;
	width: 100%;
	height: 6px;
	background: linear-gradient(90deg, #488c00 0%, #006cfa 50%, #a8007e 100%);
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart_totals > h2 {
	color: #1a3a8a !important;
	font-weight: 800 !important;
	font-size: 24px !important;
	padding: 26px 32px 20px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e5e8f0 !important;
	letter-spacing: -0.5px !important;
	text-transform: none !important;
}

body.woocommerce-cart .cart_totals table.shop_table_responsive,
body.woocommerce-cart .cart_totals table.shop_table {
	margin: 0 !important;
	padding: 18px 32px !important;
	background: transparent !important;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Per-cell horizontal padding — belt-and-suspenders against Avada's
 * table styles overriding the table-level padding. */
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.cart_totals table th,
.cart_totals table td {
	padding: 14px 0 !important;
	border-bottom: 1px solid #f0f2f7 !important;
	background: transparent !important;
	color: #234191 !important;
	font-size: 16px !important;
	border-top: 0 !important;
}

.cart_totals table th {
	color: #6b7290 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	width: 50% !important;
}

.cart_totals table td {
	font-weight: 700 !important;
	text-align: right !important;
	font-size: 17px !important;
}

.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td {
	border-bottom: 0 !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	font-size: 19px !important;
	font-weight: 800 !important;
	color: #234191 !important;
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	border-top: 2px solid #e5e8f0 !important;
}

/* Total — magenta */
.cart_totals .order-total td .amount,
.cart_totals .order-total .amount {
	color: #c2185b !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	letter-spacing: -0.6px;
}

.cart_totals .woocommerce-shipping-destination {
	font-size: 12px !important;
	color: #6b7290 !important;
	margin-top: 6px !important;
}

.cart_totals .klarna-placement,
.cart_totals .affirm-as-low-as {
	padding: 0 32px !important;
	margin: 14px 0 0 !important;
}

.cart_totals .wc-proceed-to-checkout {
	padding: 22px 32px 0 !important;
	margin: 0 !important;
}

.cart_totals .wc-proceed-to-checkout .checkout-button,
.cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center !important;
	background: linear-gradient(135deg, #006cfa 0%, #234191 100%) !important;
	color: #fff !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: 0 8px 24px rgba(0, 108, 250, 0.35) !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box;
	float: none !important;
}

.cart_totals .wc-proceed-to-checkout .checkout-button:hover {
	background: linear-gradient(135deg, #234191 0%, #1a3a8a 100%) !important;
	box-shadow: 0 12px 28px rgba(35, 65, 145, 0.4) !important;
}

.cart_totals .wc-proceed-to-checkout .checkout-button::after {
	content: '→';
	font-size: 18px;
	font-weight: 700;
}

.cart_totals .gpay-button-fill,
.cart_totals .gpay-button,
.cart_totals .wc_payment_buttons {
	margin: 12px 36px 0 !important;
}

/* ---------- TRUST SIGNALS (PHP-injected) ---------- */
.flyout-cart-page__trust {
	border-top: 1px solid #e5e8f0;
	padding: 22px 32px 26px;
	margin: 22px 0 0;
	background: linear-gradient(180deg, #fafbff 0%, #f0f4ff 100%);
}

.flyout-cart-page__trust-title {
	color: #234191;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 12px;
}

.flyout-cart-page__trust ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.flyout-cart-page__trust li {
	display: flex !important;
	align-items: center;
	gap: 10px;
	color: #234191 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 6px 0 !important;
	margin: 0 !important;
}

.flyout-cart-page__trust li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #488c00;
}

/* ---------- STICKY ON DESKTOP ---------- */
@media (min-width: 992px) {
	.cart_totals {
		position: sticky;
		top: 100px;
	}
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
	.cart_totals {
		position: static !important;
	}

	/* Hero — compact stack on mobile. Without this fix, justify-content:
	 * space-between from desktop pushes the trust pills to the bottom of
	 * an oversized parent container, creating a tall empty hero. */
	.flyout-cart-page__hero {
		margin: 0 0 20px;
		min-height: 0 !important;
		height: auto !important;
	}

	.flyout-cart-page__hero-grid {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start !important;
		padding: 22px 22px 20px !important;
		gap: 16px !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.flyout-cart-page__hero-left {
		flex: 0 0 auto !important;
		width: 100%;
	}

	.flyout-cart-page__hero-pill {
		margin-bottom: 10px;
	}

	.flyout-cart-page__hero-title {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}

	/* Trust pills — horizontal scroll if needed instead of stacking
	 * full-width which created a wall of pills on mobile */
	.flyout-cart-page__hero-right {
		flex: 0 0 auto !important;
		width: 100%;
		gap: 6px !important;
	}

	.flyout-cart-page__hero-right .hero-badge {
		font-size: 11px !important;
		padding: 7px 11px !important;
		flex: 1 1 auto;
		justify-content: center;
	}

	.woocommerce-cart-form table.shop_table tbody tr.cart_item {
		flex-wrap: wrap;
		padding: 22px 18px 18px 22px !important;
		gap: 14px;
	}

	.woocommerce-cart-form td.product-thumbnail {
		width: 80px !important;
	}

	.woocommerce-cart-form .product-thumbnail img {
		width: 80px !important;
		height: 80px !important;
		max-width: 80px !important;
	}

	.woocommerce-cart-form td.product-name {
		flex: 1 1 calc(100% - 100px) !important;
	}

	.woocommerce-cart-form .product-name a {
		font-size: 16px !important;
	}

	.woocommerce-cart-form td.product-quantity {
		flex: 1 1 auto !important;
		order: 4 !important;
	}

	.woocommerce-cart-form td.product-subtotal {
		flex: 1 1 auto !important;
		order: 5 !important;
		text-align: right !important;
		font-size: 22px !important;
	}

	.cart_totals h2 {
		font-size: 20px !important;
		padding: 18px 20px 14px !important;
	}

	.cart_totals .order-total td .amount {
		font-size: 24px !important;
	}

	/* Mobile cart_totals — slightly tighter padding */
	body.woocommerce-cart .cart_totals table.shop_table_responsive,
	body.woocommerce-cart .cart_totals table.shop_table {
		padding: 0 20px !important;
	}

	body.woocommerce-cart .cart_totals .wc-proceed-to-checkout,
	body.woocommerce-cart .cart_totals .flyout-cart-page__coupon-moved,
	body.woocommerce-cart .cart_totals .flyout-cart-page__trust {
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
}

/* ============================================================
 * COUPON BOX styling (v1.7.13)
 * JS now MOVES the coupon form into the cart_totals card and
 * wraps it in .flyout-cart-page__coupon-moved with a small
 * magenta-dashed accent. The original "Have A Promotional Code"
 * container gets hidden by JS. Cleaner than fighting Avada's
 * column widths.
 * ============================================================ */

/* The moved coupon section — sits inside cart_totals, just
 * before the Proceed to Checkout button */
.flyout-cart-page__coupon-moved {
	margin: 14px 32px 8px !important;
	padding: 14px 16px !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
	border: 1px dashed rgba(168, 0, 126, 0.35) !important;
	position: relative;
}

.flyout-cart-page__coupon-header {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	color: #a8007e;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-family: 'Lexend Deca', sans-serif !important;
}

.flyout-cart-page__coupon-icon {
	font-size: 14px;
	line-height: 1;
}

/* The moved form — strip any inherited card styling */
.flyout-cart-page__coupon-moved form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	position: static !important;
}

.flyout-cart-page__coupon-moved form::before,
.flyout-cart-page__coupon-moved form::after {
	display: none !important;
}

/* Inline layout for input + button — container is `.flyout-cart-page__coupon-bare` */
.flyout-cart-page__coupon-moved .flyout-cart-page__coupon-bare,
.flyout-cart-page__coupon-moved .coupon,
.flyout-cart-page__coupon-moved form > div {
	display: flex !important;
	gap: 14px !important;
	align-items: stretch;
	width: 100%;
}

.flyout-cart-page__coupon-moved label {
	display: none !important;
}

.flyout-cart-page__coupon-moved input[name="coupon_code"] {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	border: 1.5px solid rgba(168, 0, 126, 0.2) !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
	font-size: 13px !important;
	color: #234191 !important;
	background: #fff !important;
	font-family: 'Lexend Deca', sans-serif !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.flyout-cart-page__coupon-moved input[name="coupon_code"]:focus {
	border-color: #a8007e !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(168, 0, 126, 0.12) !important;
}

.flyout-cart-page__coupon-moved button[name="apply_coupon"],
.flyout-cart-page__coupon-moved input[name="apply_coupon"] {
	flex: 0 0 auto !important;
	width: auto !important;
	padding: 8px 14px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	border-radius: 8px !important;
	background: linear-gradient(135deg, #a8007e 0%, #c2185b 100%) !important;
	color: #fff !important;
	border: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(168, 0, 126, 0.25) !important;
	font-family: 'Lexend Deca', sans-serif !important;
	margin: 0 !important;
	white-space: nowrap;
	height: auto !important;
	line-height: 1.2 !important;
}

.flyout-cart-page__coupon-moved button[name="apply_coupon"]:hover,
.flyout-cart-page__coupon-moved input[name="apply_coupon"]:hover {
	background: linear-gradient(135deg, #c2185b 0%, #a8007e 100%) !important;
	box-shadow: 0 6px 16px rgba(168, 0, 126, 0.35) !important;
}

/* Mobile: stack input above button, both full-width */
@media (max-width: 600px) {
	.flyout-cart-page__coupon-moved .flyout-cart-page__coupon-bare,
	.flyout-cart-page__coupon-moved .coupon,
	.flyout-cart-page__coupon-moved form > div {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.flyout-cart-page__coupon-moved button[name="apply_coupon"],
	.flyout-cart-page__coupon-moved input[name="apply_coupon"] {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 12px !important;
	}
}

/* Coupon input fallback styling (in case JS move fails and
 * the form stays in its original location) */
input[name="coupon_code"] {
	border: 1.5px solid rgba(35, 65, 145, 0.15);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 13px;
	color: #234191;
	background: #fafbff;
	font-family: 'Lexend Deca', sans-serif;
}

input[name="coupon_code"]:focus {
	border-color: #a8007e !important;
	background: #fff !important;
	outline: none !important;
}

button[name="apply_coupon"]:not(.flyout-cart-page__coupon-moved button),
input[name="apply_coupon"]:not(.flyout-cart-page__coupon-moved input) {
	background: linear-gradient(135deg, #a8007e 0%, #c2185b 100%) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 11px 18px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	font-family: 'Lexend Deca', sans-serif !important;
	cursor: pointer !important;
	box-shadow: 0 6px 16px rgba(168, 0, 126, 0.3) !important;
	float: none !important;
}

/* ============================================================
 * WC NOTICES — restyled to match cart aesthetic (v1.7.25)
 * Covers BOTH classic notices (.woocommerce-message, .woocommerce-info,
 * .woocommerce-error) AND block-based notices (.wc-block-components-notice-banner).
 * Block-based is what WC uses for "X removed. Undo" in modern installs.
 * ============================================================ */

/* Move notices to top of cart area for visibility, with a slide-in animation
 * so the user notices them appearing. */
body.woocommerce-cart .woocommerce-notices-wrapper {
	margin: 0 0 18px 0 !important;
}

body.woocommerce-cart .woocommerce-notices-wrapper:empty {
	display: none !important;
}

@keyframes flyoutNoticeSlideIn {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info:not(.cart-empty),
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-message,
body.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-info:not(.cart-empty),
body.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-error,
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-cart .woocommerce-notices-wrapper > .wc-block-components-notice-banner {
	background: #ffffff !important;
	border: 1px solid rgba(35, 65, 145, 0.12) !important;
	border-left: 4px solid #006cfa !important;
	border-radius: 12px !important;
	padding: 14px 18px 14px 22px !important;
	box-shadow: 0 6px 20px rgba(35, 65, 145, 0.06) !important;
	color: #234191 !important;
	font-family: 'Lexend Deca', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin: 0 0 18px 0 !important;
	list-style: none !important;
	line-height: 1.5 !important;
	animation: flyoutNoticeSlideIn 0.32s ease-out;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .wc-block-components-notice-banner.is-success,
body.woocommerce-cart .wc-block-components-notice-banner.is-info {
	border-left-color: #488c00 !important;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wc-block-components-notice-banner.is-error {
	border-left-color: #dc2626 !important;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info:not(.cart-empty)::before {
	color: #006cfa !important;
	margin-right: 6px !important;
	top: 14px !important;
	left: 18px !important;
}

body.woocommerce-cart .woocommerce-message::before {
	color: #488c00 !important;
}

body.woocommerce-cart .woocommerce-error::before {
	color: #dc2626 !important;
}

/* Block-notice icon — make our own bold colored dot since their default
 * SVG renders differently across versions */
body.woocommerce-cart .wc-block-components-notice-banner > svg {
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0 !important;
	fill: #488c00 !important;
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error > svg {
	fill: #dc2626 !important;
}

body.woocommerce-cart .wc-block-components-notice-banner__content {
	flex: 1 1 auto !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: #234191 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: 'Lexend Deca', sans-serif !important;
	animation: none !important;
}

body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-cart .wc-block-components-notice-banner a {
	color: #a8007e !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button {
	background: linear-gradient(135deg, #006cfa 0%, #0050d4 100%) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	float: right !important;
	margin-top: -4px !important;
	box-shadow: 0 4px 12px rgba(0, 108, 250, 0.25) !important;
}

/* ============================================================
 * EMPTY CART STATE (v1.7.19)
 * Custom empty state replacing WC's plain "Your cart is empty"
 * ============================================================ */

/* Hide WC's default empty cart text + button */
body.woocommerce-cart p.cart-empty.woocommerce-info,
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop {
	display: none !important;
}

.flyout-cart-page__empty {
	text-align: center;
	padding: 60px 32px 64px;
	max-width: 560px;
	margin: 32px auto;
	background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
	border-radius: 24px;
	border: 1px solid rgba(35, 65, 145, 0.08);
	box-shadow: 0 16px 40px rgba(35, 65, 145, 0.08);
	position: relative;
	overflow: hidden;
}

.flyout-cart-page__empty::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(90deg, #488c00 0%, #006cfa 50%, #a8007e 100%);
}

.flyout-cart-page__empty-icon-wrap {
	width: 96px;
	height: 96px;
	margin: 0 auto 24px;
	background: linear-gradient(135deg, #f0f4ff 0%, #fce7f3 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #006cfa;
}

.flyout-cart-page__empty-icon {
	width: 44px;
	height: 44px;
}

.flyout-cart-page__empty-title {
	color: #1a3a8a !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	margin: 0 0 12px 0 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.2 !important;
	font-family: 'Lexend Deca', sans-serif !important;
	padding: 0 !important;
	border: 0 !important;
}

.flyout-cart-page__empty-text {
	color: #6b7290 !important;
	font-size: 16px !important;
	margin: 0 auto 28px auto !important;
	max-width: 380px !important;
	line-height: 1.55 !important;
	font-family: 'Lexend Deca', sans-serif !important;
}

.flyout-cart-page__empty-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.flyout-cart-page__empty-btn {
	padding: 13px 24px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Lexend Deca', sans-serif;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
}

.flyout-cart-page__empty-btn-primary {
	background: linear-gradient(135deg, #006cfa 0%, #0050d4 100%);
	color: #ffffff !important;
	box-shadow: 0 8px 22px rgba(0, 108, 250, 0.3);
}

.flyout-cart-page__empty-btn-primary:hover {
	background: linear-gradient(135deg, #0050d4 0%, #003fa8 100%);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(0, 108, 250, 0.4);
	color: #ffffff !important;
}

.flyout-cart-page__empty-btn-secondary {
	background: #ffffff;
	color: #1a3a8a !important;
	border: 1.5px solid rgba(35, 65, 145, 0.2);
}

.flyout-cart-page__empty-btn-secondary:hover {
	background: #f8faff;
	border-color: rgba(35, 65, 145, 0.3);
	color: #1a3a8a !important;
}

/* Hide WC's empty cart message div if it's empty (Avada/WC sometimes
 * leaves this div in the DOM with no content, creating a visual artifact) */
/* Hide WC's default "Your cart is currently empty" message — covers both
 * the empty wrapper case AND the populated-but-clipped case. We have our
 * own .flyout-cart-page__empty UI; this WC default is always redundant. */
body.woocommerce-cart .wc-empty-cart-message {
	display: none !important;
}

/* Also hide any empty <p> tags that WC leaves behind on the cart page
 * (e.g. the wrapper that previously held the "Return to shop" link
 * after we hid the link itself) */
body.woocommerce-cart .woocommerce > p:empty,
body.woocommerce-cart .woocommerce-cart-form + p:empty,
body.woocommerce-cart .flyout-cart-page__empty + p:empty {
	display: none !important;
}

/* ============================================================
 * GENERATE QUOTE BUTTON (cart page, above checkout button)
 * For schools that need admin/bookkeeper approval first
 * ============================================================ */

/* AGGRESSIVE Affirm/Klarna/BNPL messaging visibility — these messaging
 * widgets render via Stripe/Affirm/Klarna JS and often have constrained
 * heights that clip their multi-line messages on mobile. Force them all
 * to auto-height with overflow visible, and give modest margin-bottom
 * so they don't crowd the buttons below. */
body.woocommerce-cart [class*="affirm" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="klarna" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="bnpl" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="payment-message" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="payment_message" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="installment" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [class*="as-low-as" i]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart [data-bnpl]:not(button):not(input):not(.flyout-generate-quote-btn),
body.woocommerce-cart .stripe-payment-element-container,
body.woocommerce-cart .wc-stripe-bnpl-messaging,
body.woocommerce-cart .wc-stripe-payment-message-container,
body.woocommerce-cart [data-stripe-bnpl-messaging] {
	overflow: visible !important;
	max-height: none !important;
	height: auto !important;
	line-height: 1.5 !important;
	display: block !important;
	clear: both !important;
	margin-bottom: 12px !important;
}

/* Iframe-based messaging widgets — give just enough room for 2 lines */
body.woocommerce-cart iframe[src*="affirm" i],
body.woocommerce-cart iframe[src*="klarna" i],
body.woocommerce-cart iframe[name*="affirm" i],
body.woocommerce-cart iframe[name*="klarna" i] {
	width: 100% !important;
	min-height: 60px !important;
	height: auto !important;
	max-height: none !important;
}

/* Ensure all the cart totals containers don't clip overflow */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .woocommerce-shipping-totals,
body.woocommerce-cart .order-total,
body.woocommerce-cart .cross-sells {
	overflow: visible !important;
}

/* Modest margin between BNPL widget and Proceed to Checkout */
body.woocommerce-cart .wc-proceed-to-checkout {
	position: relative !important;
	z-index: 5;
	clear: both !important;
	margin-top: 18px !important;
}

body.woocommerce-cart .wc-proceed-to-checkout > a.checkout-button {
	margin-top: 0 !important;
	position: relative !important;
	z-index: 5 !important;
}

body.woocommerce-cart .flyout-generate-quote-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(135deg, #488c00 0%, #2d6500 100%);
	color: #ffffff !important;
	border: 0;
	border-radius: 12px;
	padding: 16px 22px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	font-family: 'Lexend Deca', sans-serif;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 18px;
	margin-bottom: 10px;
	box-shadow: 0 8px 20px rgba(72, 140, 0, 0.25);
	position: relative;
	z-index: 5;
	clear: both;
}

body.woocommerce-cart .flyout-generate-quote-btn:hover {
	background: linear-gradient(135deg, #2d6500 0%, #1f4500 100%);
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(72, 140, 0, 0.35);
}

body.woocommerce-cart .flyout-generate-quote-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	stroke: currentColor;
}

body.woocommerce-cart .flyout-generate-quote-hint {
	font-size: 11px;
	color: #6b7290;
	text-align: center;
	margin: 0 0 18px 0;
	padding: 0 12px;
	line-height: 1.5;
	font-weight: 500;
	font-family: 'Lexend Deca', sans-serif;
}

/* Mobile: BNPL messaging widget — modest spacing, ensures 2-line message
 * isn't clipped but doesn't leave a giant empty gap. */
@media (max-width: 600px) {
	body.woocommerce-cart [class*="affirm" i]:not(button):not(input):not(.flyout-generate-quote-btn),
	body.woocommerce-cart [class*="klarna" i]:not(button):not(input):not(.flyout-generate-quote-btn),
	body.woocommerce-cart [class*="bnpl" i]:not(button):not(input):not(.flyout-generate-quote-btn),
	body.woocommerce-cart [class*="as-low-as" i]:not(button):not(input):not(.flyout-generate-quote-btn) {
		margin-bottom: 14px !important;
		font-size: 13px !important;
	}
	body.woocommerce-cart iframe[src*="affirm" i],
	body.woocommerce-cart iframe[src*="klarna" i] {
		min-height: 70px !important;
	}
	body.woocommerce-cart .wc-proceed-to-checkout {
		margin-top: 22px !important;
	}
	body.woocommerce-cart .flyout-generate-quote-btn {
		padding: 14px 16px;
		font-size: 12px;
		letter-spacing: 0.4px;
		gap: 8px;
		margin-top: 16px;
	}
	body.woocommerce-cart .flyout-generate-quote-btn svg {
		width: 16px;
		height: 16px;
	}
	body.woocommerce-cart .flyout-generate-quote-hint {
		font-size: 10px;
		padding: 0 8px;
	}
}