/**
 * Cart UI — Lovable layout.
 * IMPORTANT: header is position:sticky (in flow) → tiny top padding only.
 * Scale bumped for readability on desktop.
 */

body.woocommerce-cart {
	--mk-bg: hsl(0 0% 99%);
	--mk-fg: hsl(25 30% 20%);
	--mk-muted: hsl(25 15% 45%);
	--mk-border: hsl(35 30% 88%);
	--mk-card: hsl(0 0% 100%);
	--mk-warm-gold: hsl(28 41% 54%);
	--mk-warm-gold-hover: hsl(28 41% 48%);
	--mk-blue-gray: hsl(207 17% 58%);
	--mk-blue-gray-10: hsl(207 17% 58% / 0.1);
	--mk-destructive: hsl(0 72% 60%);
	--mk-radius: 14px;
	--mk-shadow-card: 0 4px 18px hsl(25 30% 20% / 0.07);
	background: var(--mk-bg) !important;
	color: var(--mk-fg);
}

html {
	background: hsl(0 0% 99%) !important;
}

/* sticky header is IN FLOW — do not add header-height padding */
body.woocommerce-cart #brx-content,
body.woocommerce-cart #bricks-content {
	padding-top: 4px !important;
	box-sizing: border-box !important;
	background: var(--mk-bg) !important;
}

body.woocommerce-cart #brx-content > .brxe-section,
body.woocommerce-cart #bricks-content > .brxe-section {
	padding: 0 0 48px !important;
	margin: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
}

body.woocommerce-cart #brx-content > .brxe-section > .brxe-container,
body.woocommerce-cart #bricks-content > .brxe-section > .brxe-container {
	max-width: 1280px !important;
	width: min(1280px, calc(100% - 48px)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.woocommerce-cart:has([data-mk-cart-app]) .wp-block-woocommerce-cart,
body.woocommerce-cart:has([data-mk-cart-app]) .wc-block-cart,
body.woocommerce-cart:has([data-mk-cart-app]) .wp-block-woocommerce-filled-cart-block,
body.woocommerce-cart:has([data-mk-cart-app]) .woocommerce-cart-form,
body.woocommerce-cart:has([data-mk-cart-app]) .mk-cart-continue,
body.woocommerce-cart:has([data-mk-cart-app]) .mk-cart-heading,
body.woocommerce-cart:has([data-mk-cart-app]) .mk-cart-heading__count,
body.woocommerce-cart:has([data-mk-cart-app]) #brx-content h1.brxe-heading,
body.woocommerce-cart:has([data-mk-cart-app]) #bricks-content h1.brxe-heading {
	display: none !important;
}

body.woocommerce-cart #brx-footer {
	margin-top: auto;
	margin-bottom: 0 !important;
	background: hsl(35 40% 98%) !important;
}

.mk-cart-app {
	width: 100%;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	color: var(--mk-fg);
}

.mk-cart-app__container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 0 24px;
	box-sizing: border-box;
}

.mk-cart-app__header {
	margin: 0 0 28px;
}

.mk-cart-app__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}

.mk-cart-app__title-badge {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--mk-blue-gray-10);
	color: var(--mk-blue-gray);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mk-cart-app__title-badge svg {
	width: 30px;
	height: 30px;
}

.mk-cart-app__title {
	margin: 0 !important;
	font-size: 2.5rem !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	font-style: normal !important;
	color: var(--mk-fg) !important;
	letter-spacing: -0.02em;
}

.mk-cart-app__count {
	margin: 0;
	padding-left: 80px;
	color: var(--mk-muted);
	font-size: 1.2rem;
	line-height: 1.4;
}

.mk-cart-app__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
	gap: 32px;
	align-items: start;
}

.mk-cart-app__items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mk-cart-app__card {
	background: var(--mk-card);
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-card);
	overflow: hidden;
}

.mk-cart-app__card-inner {
	display: flex;
	gap: 22px;
	padding: 26px 28px;
	align-items: stretch;
	min-height: 148px;
}

.mk-cart-app__thumb {
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	border-radius: 14px;
	overflow: hidden;
	background: hsl(35 25% 92%);
	display: block;
	align-self: center;
}

.mk-cart-app__thumb img,
.mk-cart-app__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mk-cart-app__img-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: hsl(35 25% 92%);
}

.mk-cart-app__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 8px;
}

.mk-cart-app__name {
	margin: 0 0 8px !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	font-family: inherit !important;
	color: var(--mk-fg) !important;
}

.mk-cart-app__name a {
	color: inherit !important;
	text-decoration: none !important;
}

.mk-cart-app__blurb {
	margin: 0 0 10px;
	font-size: 1.1rem;
	color: var(--mk-muted);
	line-height: 1.45;
}

.mk-cart-app__author {
	margin: 0;
	font-size: 1rem;
	color: var(--mk-muted);
}

.mk-cart-app__side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	min-width: 148px;
	padding: 2px 0;
}

.mk-cart-app__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	color: var(--mk-destructive);
	text-decoration: none;
	background: transparent;
	border: 0;
}

.mk-cart-app__remove svg {
	width: 20px;
	height: 20px;
}

.mk-cart-app__remove:hover {
	background: hsl(0 72% 60% / 0.08);
}

.mk-cart-app__side-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.mk-cart-app__price {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--mk-fg);
	text-align: right;
	white-space: nowrap;
	line-height: 1.2;
}

.mk-cart-app__price .woocommerce-Price-amount,
.mk-cart-app__row-val .woocommerce-Price-amount {
	font-weight: inherit;
}

.mk-cart-app__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--mk-card);
	height: 44px;
}

.mk-cart-app__qty-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--mk-fg);
	box-sizing: border-box;
}

.mk-cart-app__qty-val {
	min-width: 40px;
	padding: 0 6px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--mk-fg);
	line-height: 44px;
	border-left: 1px solid var(--mk-border);
	border-right: 1px solid var(--mk-border);
}

.mk-cart-app__summary {
	position: sticky;
	top: calc(var(--mk-sticky-header-height, 121px) + 12px);
}

.mk-cart-app__summary-inner {
	background: var(--mk-card);
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-card);
	padding: 32px 28px 28px;
}

.mk-cart-app__summary-title {
	margin: 0 0 22px !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	color: var(--mk-fg) !important;
}

.mk-cart-app__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}

.mk-cart-app__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 1.15rem;
	color: var(--mk-muted);
}

.mk-cart-app__row-val {
	font-weight: 600;
	color: var(--mk-fg);
	font-size: 1.2rem;
}

.mk-cart-app__divider {
	height: 1px;
	background: var(--mk-border);
	margin: 6px 0;
}

.mk-cart-app__row--total {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--mk-fg);
	align-items: baseline;
}

.mk-cart-app__row-val--gold {
	color: var(--mk-warm-gold) !important;
	font-weight: 800;
	font-size: 1.85rem;
	line-height: 1.1;
}

.mk-cart-app__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border-radius: 12px;
	background: var(--mk-warm-gold);
	color: #fff !important;
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none !important;
	border: 0;
	box-sizing: border-box;
}

.mk-cart-app__checkout:hover {
	background: var(--mk-warm-gold-hover);
}

.mk-cart-app__continue {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin-top: 12px;
	padding: 0 18px;
	border-radius: 12px;
	border: 1px solid var(--mk-border);
	background: var(--mk-card);
	color: var(--mk-fg) !important;
	font-weight: 600;
	font-size: 1.1rem;
	text-decoration: none !important;
	box-sizing: border-box;
}

.mk-cart-app__continue:hover {
	background: hsl(35 25% 97%);
}

@media (max-width: 1023px) {
	.mk-cart-app__grid {
		grid-template-columns: 1fr;
	}
	.mk-cart-app__summary {
		position: static;
	}
	.mk-cart-app__count {
		padding-left: 0;
	}
	.mk-cart-app__title {
		font-size: 2rem !important;
	}
}

@media (max-width: 640px) {
	body.woocommerce-cart #brx-content > .brxe-section > .brxe-container,
	body.woocommerce-cart #bricks-content > .brxe-section > .brxe-container {
		width: min(1280px, calc(100% - 24px)) !important;
	}
	.mk-cart-app__card-inner {
		flex-wrap: wrap;
		padding: 18px;
	}
	.mk-cart-app__thumb {
		width: 96px;
		height: 96px;
	}
	.mk-cart-app__side {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
	}
	.mk-cart-app__side-bottom {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
}
