/* LUMEN Phase 6d (continued) — Cart & Checkout composition.
   Loaded only on the real Cart/Checkout pages (see
   class-lumen-cart-checkout.php). Values are written literally and scoped
   to body.woocommerce-cart / body.woocommerce-checkout, the same
   established pattern as checkout-guard.css, so nothing here can reach
   any other page. */

/* ── Shared "commerce action" button ───────────────────────────────────
   One consistent outlined/framed treatment for every real action button
   on these two pages, replacing Phase 6a's sitewide solid-gold-pill
   default (still correct as a fallback everywhere else) with something
   deliberately designed for a checkout flow: quiet secondary actions
   (Apply Coupon / Update Cart) vs. a stronger primary commit action
   (Proceed to Checkout / Place Order). */
body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce-cart button[name="update_cart"] {
	background: transparent !important;
	border: 1px solid rgba(217, 164, 65, 0.35) !important;
	color: #d9a441 !important;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	font-family: 'Space Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.woocommerce-cart button[name="apply_coupon"]:hover:not(:disabled),
body.woocommerce-cart button[name="update_cart"]:hover:not(:disabled) {
	background: rgba(217, 164, 65, 0.1) !important;
	border-color: #d9a441 !important;
	color: #f3dfa8 !important;
}

body.woocommerce-cart .checkout-button.button.alt,
body.woocommerce-checkout #place_order {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: rgba(217, 164, 65, 0.1) !important;
	border: 1px solid rgba(217, 164, 65, 0.5) !important;
	color: #e8c766 !important;
	border-radius: 0 !important;
	padding: 16px 28px !important;
	font-family: 'Space Mono', monospace !important;
	font-size: 12px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body.woocommerce-cart .checkout-button.button.alt:hover:not(:disabled),
body.woocommerce-checkout #place_order:hover:not(:disabled) {
	background: rgba(217, 164, 65, 0.2) !important;
	border-color: #e8c766 !important;
	color: #f3dfa8 !important;
	transform: translateY(-2px);
}

/* Quantity stepper — replaces the theme's default red input border
   (confirmed live: a plain rgb(230,0,0) border with no actual validation
   error present) with the neutral LUMEN input treatment. */
body.woocommerce-cart input.qty,
body.woocommerce-checkout input.qty {
	background: #0a0a0b !important;
	border: 1px solid rgba(217, 164, 65, 0.35) !important;
	color: #ece7da !important;
	border-radius: 0 !important;
}
body.woocommerce-cart input.qty:focus,
body.woocommerce-checkout input.qty:focus {
	outline: none !important;
	border-color: #d9a441 !important;
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18) !important;
}

/* ── Cart table ─────────────────────────────────────────────────────── */
body.woocommerce-cart table.shop_table.cart {
	border: 1px solid rgba(217, 164, 65, 0.2);
	border-collapse: collapse;
}
body.woocommerce-cart table.shop_table.cart thead th {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #a99f88;
	border-bottom: 1px solid rgba(217, 164, 65, 0.25);
}
body.woocommerce-cart table.shop_table.cart td {
	border-bottom: 1px solid rgba(217, 164, 65, 0.1);
}
body.woocommerce-cart table.shop_table.cart .product-name a {
	color: #e8c766;
}

/* ── Cart totals / order review panels ─────────────────────────────────
   Same framed, corner-ticked panel language used across LUMEN. */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review {
	position: relative;
	padding: 26px;
	background: #101216;
	border: 1px solid rgba(217, 164, 65, 0.25);
}
body.woocommerce-cart .cart_totals::before,
body.woocommerce-cart .cart_totals::after,
body.woocommerce-checkout #order_review::before,
body.woocommerce-checkout #order_review::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	pointer-events: none;
	border-color: #d9a441;
}
body.woocommerce-cart .cart_totals::before,
body.woocommerce-checkout #order_review::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid;
	border-left: 2px solid;
}
body.woocommerce-cart .cart_totals::after,
body.woocommerce-checkout #order_review::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid;
	border-right: 2px solid;
}
body.woocommerce-cart .cart_totals > h2,
body.woocommerce-checkout #order_review_heading {
	font-family: 'Cinzel', serif;
	color: #ece7da;
	font-weight: 600;
}
body.woocommerce-cart .cart_totals .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .amount {
	color: #e8c766;
	font-family: 'Cinzel', serif;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border-collapse: collapse;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	border-bottom: 1px solid rgba(217, 164, 65, 0.15);
}

/* ── Express pay (WooCommerce Stripe Express Checkout Element) ─────────
   The Stripe-hosted buttons themselves (StripeElement iframes) are never
   touched — only spacing and a small technical-label divider on the
   wrapper WooCommerce/Stripe already renders, so the row reads as a
   deliberate "or pay instantly" moment instead of an unexplained black
   bar under the Proceed to Checkout button. */
body.woocommerce-cart #wc-stripe-express-checkout-element,
body.woocommerce-checkout #wc-stripe-express-checkout-element {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(217, 164, 65, 0.15);
}
body.woocommerce-cart #wc-stripe-express-checkout-element::before,
body.woocommerce-checkout #wc-stripe-express-checkout-element::before {
	content: 'Or Pay Instantly With';
	display: block;
	margin: 0 0 10px;
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a99f88;
}

/* ── Checkout billing/shipping fields ──────────────────────────────── */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout #order_review_heading {
	font-family: 'Cinzel', serif;
	color: #ece7da;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ── Payment methods list ──────────────────────────────────────────── */
body.woocommerce-checkout ul.wc_payment_methods {
	border: 1px solid rgba(217, 164, 65, 0.2);
	background: #101216;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border-bottom: 1px solid rgba(217, 164, 65, 0.12);
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	color: #ece7da;
}

/* ── Deposet "Payment Options" box ─────────────────────────────────────
   Deposet's own real container (.deposet-options / .deposet-option) —
   confirmed live — was rendering as a plain white box on an otherwise
   dark checkout page. Colors only; the deposit/full-amount radio inputs,
   their values, and Deposet's own JS/PHP logic are completely untouched. */
body.woocommerce-checkout .deposet-options {
	background: #101216 !important;
	border: 1px solid rgba(217, 164, 65, 0.3) !important;
	color: #ece7da !important;
	padding: 18px 20px !important;
}
body.woocommerce-checkout .deposet-options,
body.woocommerce-checkout .deposet-options * {
	color: #ece7da !important;
}
body.woocommerce-checkout .deposet-options .deposet-deposit-amount {
	color: #e8c766 !important;
}

@media (max-width: 480px) {
	body.woocommerce-cart .cart_totals,
	body.woocommerce-checkout #order_review {
		padding: 18px;
	}
}

/* v0.43.0 — LOW-RISK MOBILE CART READABILITY. Real Samsung Galaxy S22
   Ultra testing showed session line-item metadata (package labels such
   as "Signature Story") wrapping awkwardly / crowding the row on narrow
   screens. Layout/spacing only — no WooCommerce cart markup, totals
   logic, or desktop presentation is touched; this entire block is scoped
   to body.woocommerce-cart at <= 640px, same isolation pattern as every
   other rule in this file. */
@media (max-width: 640px) {
	body.woocommerce-cart table.shop_table.cart,
	body.woocommerce-cart table.shop_table.cart tbody,
	body.woocommerce-cart table.shop_table.cart tr,
	body.woocommerce-cart table.shop_table.cart td {
		max-width: 100%;
	}
	body.woocommerce-cart table.shop_table.cart td.product-name,
	body.woocommerce-cart table.shop_table.cart td.product-name > a,
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation,
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd,
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
		min-width: 0;
		max-width: 100%;
		word-break: normal;
		overflow-wrap: break-word;
	}
	body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 6px;
		margin: 6px 0 0;
	}
	body.woocommerce-cart table.shop_table.cart td.product-quantity {
		min-width: 0;
	}
	body.woocommerce-cart table.shop_table.cart td.product-quantity input.qty {
		width: 100%;
		max-width: 64px;
	}
	body.woocommerce-cart table.shop_table.cart td.product-remove,
	body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
		min-width: 30px;
		text-align: center;
	}
	body.woocommerce-cart table.shop_table.cart td.product-price,
	body.woocommerce-cart table.shop_table.cart td.product-subtotal {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-cart .checkout-button.button.alt,
	body.woocommerce-checkout #place_order,
	body.woocommerce-cart button[name="apply_coupon"],
	body.woocommerce-cart button[name="update_cart"] {
		transition: none !important;
	}
	body.woocommerce-cart .checkout-button.button.alt:hover:not(:disabled),
	body.woocommerce-checkout #place_order:hover:not(:disabled) {
		transform: none;
	}
}