.wb-context-art,
.wb-context-mixed {
	--wb-context-border: #ef2b2d;
	--wb-context-panel: rgba(255, 255, 255, 0.58);
	--wb-context-text: #172833;
}

.wb-context-art.woocommerce-cart,
.wb-context-art.woocommerce-checkout,
.wb-context-art.woocommerce-account,
.wb-context-art.woocommerce-order-received {
	background-color: #f7f9f9;
	background-image: none;
}

/* Keep every framed commerce surface in the art palette. Event orders retain
 * the blue defaults from the child theme because they never receive this class. */
body.wb-context-art.woocommerce-cart,
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received),
body.wb-context-art.woocommerce-order-received {
	/* This variable is consumed by the child-theme frame stylesheet. Keep the
	 * URL root-relative so it cannot be resolved against that theme file. */
	--wbp-frame-bg-image: url("/wp-content/plugins/wp-photo-downloads/assets/images/wb-canvas-art-red.png");
	--wbp-frame-surface: linear-gradient(180deg, rgba(255, 248, 246, 0.92), rgba(255, 232, 226, 0.8));
	--wbp-frame-shadow: 0 24px 68px rgba(153, 62, 52, 0.17);
	--wbp-frame-toolbar-bg: rgba(255, 238, 233, 0.9);
	--wbp-frame-toolbar-bg-hover: rgba(255, 248, 246, 0.96);
	--wbp-frame-toolbar-border: #d99a91;
	--wbp-frame-toolbar-shadow: 0 10px 26px rgba(104, 51, 43, 0.11);
	--wbp-frame-panel-bg: rgba(255, 242, 238, 0.8);
	--wbp-frame-panel-bg-strong: rgba(255, 232, 226, 0.9);
	--wbp-frame-panel-bg-soft: rgba(255, 249, 247, 0.76);
}

body.wb-context-art.woocommerce-cart {
	--wbp-off-white: rgba(255, 249, 247, 0.84);
	--wbp-warm: rgba(255, 238, 233, 0.8);
	--wbp-border: rgba(217, 154, 145, 0.58);
	--wbp-divider: rgba(217, 154, 145, 0.34);
	--wbp-muted: #795f59;
	--wbp-label: #604943;
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) {
	--wbp-checkout-sub: #795f59;
	--wbp-checkout-border: rgba(217, 154, 145, 0.58);
	--wbp-checkout-bg: rgba(255, 242, 238, 0.76);
	--wbp-checkout-white: rgba(255, 249, 247, 0.88);
	--wbp-checkout-field-bg: linear-gradient(180deg, rgba(255, 253, 252, 0.98), rgba(255, 246, 243, 0.92));
	--wbp-checkout-field-bg-focus: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 241, 237, 0.95));
	--wbp-checkout-field-border: rgba(217, 154, 145, 0.76);
	--wbp-checkout-field-shadow: 0 10px 22px rgba(153, 62, 52, 0.08);
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-terms-and-conditions-wrapper,
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #payment,
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) .wc_payment_method,
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table {
	background-color: rgba(255, 242, 238, 0.8) !important;
	border-color: rgba(217, 154, 145, 0.72) !important;
}

body.wb-context-art.woocommerce-order-received {
	--wbp-off-white: rgba(255, 249, 247, 0.84);
	--wbp-warm: rgba(255, 238, 233, 0.8);
	--wbp-border: rgba(217, 154, 145, 0.58);
	--wbp-blue-line: #d99a91;
	--wbp-blue-line-soft: rgba(217, 154, 145, 0.34);
	--wbp-muted: #795f59;
}

.wb-context-mixed.woocommerce-cart,
.wb-context-mixed.woocommerce-checkout,
.wb-context-mixed.woocommerce-account,
.wb-context-mixed.woocommerce-order-received {
	background-color: #f8fbfb;
	background-image: none;
}

.wb-context-mixed {
	--wb-context-border: #8c6e84;
}

body.wb-context-mixed.woocommerce-cart,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received),
body.wb-context-mixed.woocommerce-order-received {
	--wbp-frame-bg-image: url("/wp-content/plugins/wp-photo-downloads/assets/images/wb-canvas-mixed-seamless.png");
	--wbp-frame-surface: linear-gradient(135deg, rgba(255, 239, 238, 0.82), rgba(232, 247, 250, 0.84));
	--wbp-frame-shadow: 0 24px 68px rgba(91, 74, 87, 0.16);
	--wbp-frame-toolbar-bg: rgba(241, 234, 239, 0.9);
	--wbp-frame-toolbar-bg-hover: rgba(249, 244, 247, 0.96);
	--wbp-frame-toolbar-border: #9b7e91;
	--wbp-frame-panel-bg: rgba(244, 237, 242, 0.78);
	--wbp-frame-panel-bg-strong: rgba(238, 226, 234, 0.88);
	--wbp-frame-panel-bg-soft: rgba(249, 246, 248, 0.76);
	--wbp-border: rgba(155, 126, 145, 0.58);
	--wbp-divider: rgba(155, 126, 145, 0.34);
	--wbp-checkout-border: rgba(155, 126, 145, 0.58);
	--wbp-checkout-bg: rgba(244, 237, 242, 0.76);
	--wbp-checkout-white: rgba(249, 246, 248, 0.88);
}

/* Use one portrait canvas across the complete commerce frame. This keeps the
 * existing white wash unchanged and avoids visible horizontal tile seams. */
body.wb-context-mixed.woocommerce-cart .x-main,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) .x-main,
body.wb-context-mixed.woocommerce-order-received .x-main {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.58)),
		var(--wbp-frame-bg-image) center top / 100% 100% no-repeat !important;
}

/* Long art specifications must wrap inside the same 300px order card that is
 * used for event orders. Without a fixed table layout WooCommerce lets the
 * total column enlarge the table beyond its rounded frame. */
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review {
	overflow: hidden;
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table {
	table-layout: fixed;
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table .wbp-checkout-order-col--subtotal,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table .wbp-checkout-order-col--subtotal {
	width: 104px;
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table th,
body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table td,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table th,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review .shop_table td {
	overflow-wrap: anywhere;
}

body.wb-context-art.woocommerce-checkout:not(.woocommerce-order-received) #order_review .order-total .amount,
body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) #order_review .order-total .amount {
	font-size: clamp(24px, 2.8vw, 30px) !important;
}

.wb-order-group-label {
	display: block;
	margin: 0 0 12px;
	padding: 7px 10px;
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.wb-order-group-label--art {
	color: #b51f2b;
}

.wb-order-group-label--event {
	color: #2e819e;
}

.wb-art-order-details {
	display: grid;
	gap: 3px;
	margin: 8px 0 0;
	font-size: 13px;
}

.wb-art-order-details div {
	display: flex;
	gap: 8px;
}

.wb-art-order-details dt {
	font-weight: 700;
}

.wb-art-order-details dd {
	margin: 0;
}

@media (max-width: 700px) {
	body.wb-context-mixed.woocommerce-cart,
	body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received),
	body.wb-context-mixed.woocommerce-order-received {
		--wbp-frame-bg-image: url("/wp-content/plugins/wp-photo-downloads/assets/images/wb-canvas-mixed-seamless.png");
	}

	body.wb-context-mixed.woocommerce-cart .x-main,
	body.wb-context-mixed.woocommerce-checkout:not(.woocommerce-order-received) .x-main,
	body.wb-context-mixed.woocommerce-order-received .x-main {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
			var(--wbp-frame-bg-image) center top / 100% 100% no-repeat !important;
	}
}