/*
 * BuildBarn Checkout / Cart / Account — v4.2 (2026-04-24)
 *   v4: 子主题 review-order 模板（.bb-checkout-* / .bb-order-total-stack）配套样式
 *   v4.1: 桌面 checkout 双栏 45% / 55%（左缩右扩，订单摘要更易读）
 *   v4.2: 左列 capped + 右列 flex 吃满剩余；订单表 fixed 布局保证价格列宽度
 *
 * Porto v1 checkout 真实 DOM 结构：
 *   form.checkout
 *     └── #customer_details.row          ← Bootstrap flex 行（非左列！）
 *         ├── .col-lg-7                  ← 左侧：账单 / 配送表单
 *         └── .col-lg-5                  ← 右侧：订单摘要
 *             └── .checkout-order-review
 *                 └── .featured-boxes
 *                     ├── h3#order_review_heading
 *                     └── #order_review.woocommerce-checkout-review-order
 *
 * 策略：不碰 form.checkout 的 display，让 Bootstrap row/col 继续负责分栏，
 *       我们只覆盖列宽比例 + 粘性 + 视觉样式。
 */

/* ─────────────── 1. 全局色板 ─────────────── */

html body.woocommerce-cart #main,
html body.woocommerce-checkout #main,
html body.woocommerce-account #main {
	background: var(--bb-bg-page, #f5f5f3) !important;
}

html body.woocommerce-cart .page-top,
html body.woocommerce-checkout .page-top,
html body.woocommerce-account .page-top {
	background: var(--bb-bg-card, #ffffff) !important;
	border-bottom: 1px solid var(--bb-border-soft, #d9d6d2) !important;
}

html body.woocommerce-cart #main .main-content,
html body.woocommerce-checkout #main .main-content,
html body.woocommerce-account #main .main-content,
html body.woocommerce-cart .woocommerce,
html body.woocommerce-checkout .woocommerce,
html body.woocommerce-account .woocommerce {
	color: var(--bb-text-primary, #241f1a) !important;
}

/* ─────────────── 2. 卡片壳 ─────────────── */

html body.woocommerce-cart .shop_table,
html body.woocommerce-account .woocommerce-MyAccount-content,
html body.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--bb-bg-card, #ffffff) !important;
	border: 1px solid var(--bb-border-soft, #d9d6d2) !important;
	border-radius: var(--bb-radius-lg, 18px) !important;
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(95, 70, 50, 0.05)) !important;
}

/*
 * form.checkout 本身作为外层卡片壳，但 display 保持 block（不改成 grid/flex）
 * 让 Porto Bootstrap row 继续在内部分栏。
 */
html body.woocommerce-checkout form.checkout {
	display: block !important;
	background: var(--bb-bg-card, #ffffff) !important;
	border: 1px solid var(--bb-border-soft, #d9d6d2) !important;
	border-radius: var(--bb-radius-lg, 18px) !important;
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(95, 70, 50, 0.05)) !important;
	padding: clamp(1rem, 2vw, 1.5rem) !important;
	box-sizing: border-box !important;
}

/* ─────────────── 3. 表单输入 ─────────────── */

html body.woocommerce-cart input,
html body.woocommerce-checkout input,
html body.woocommerce-checkout select,
html body.woocommerce-checkout textarea,
html body.woocommerce-account input,
html body.woocommerce-account select,
html body.woocommerce-account textarea {
	border: 1px solid var(--bb-border-soft, #d9d6d2) !important;
	border-radius: var(--bb-radius-sm, 10px) !important;
	background: var(--bb-bg-card, #ffffff) !important;
	color: var(--bb-text-primary, #241f1a) !important;
}

/* ─────────────── 4. 按钮 ─────────────── */

html body.woocommerce-cart .button,
html body.woocommerce-checkout .button,
html body.woocommerce-account .button,
html body.woocommerce-cart button.button,
html body.woocommerce-checkout button.button,
html body.woocommerce-account button.button {
	border-radius: var(--bb-radius-sm, 10px) !important;
	border: 1px solid rgba(122, 91, 63, 0.2) !important;
	background: var(--bb-action-primary-bg, linear-gradient(135deg, #5f5953 0%, #7a5b3f 100%)) !important;
	color: var(--bb-action-primary-text, #ffffff) !important;
	box-shadow: 0 10px 22px rgba(95, 70, 50, 0.16) !important;
}

html body.woocommerce-cart .button:hover,
html body.woocommerce-checkout .button:hover,
html body.woocommerce-account .button:hover {
	filter: brightness(1.04) !important;
}

/* 子主题 review-order 模板：全断点（含移动单列） */
html body.woocommerce-checkout #order_review .bb-checkout-review-order-table-wrap {
	min-width: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

html body.woocommerce-checkout #order_review .shop_table tr.order-total td.bb-order-total-cell {
	white-space: normal !important;
}

html body.woocommerce-checkout #order_review .shop_table .bb-order-total-stack {
	display: block !important;
	text-align: right !important;
	white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

/* ─────────────── 5. 桌面双栏布局（≥992px） ─────────────── */
/*
 * Porto v1：#customer_details 就是 Bootstrap .row，
 *   内部 .col-lg-7（左）和 .col-lg-5（右）由 Bootstrap flex 分栏。
 * 我们直接覆盖列宽比例，完全不动 form.checkout 的 display。
 */
@media (min-width: 992px) {

	/* Porto 外层容器偶发 overflow:hidden，导致右栏表格/支付区被裁切 */
	html body.woocommerce-checkout #main .main-content,
	html body.woocommerce-checkout #main .container,
	html body.woocommerce-checkout .woocommerce-checkout {
		overflow-x: visible !important;
	}

	/* 确保 row 是 flex 且不换行 */
	html body.woocommerce-checkout form.checkout #customer_details.row {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 14px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 左列：表单上限约 40%，可略缩；不抢满宽 */
	html body.woocommerce-checkout form.checkout #customer_details > .col-lg-7 {
		flex: 0 1 40% !important;
		max-width: 40% !important;
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		float: none !important;
		min-width: 0 !important;
	}

	/* 右列：占满剩余宽度（不设 max-width），避免订单表/支付区被挤窄裁切 */
	html body.woocommerce-checkout form.checkout #customer_details > .col-lg-5 {
		flex: 1 1 0% !important;
		max-width: none !important;
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		float: none !important;
		min-width: 0 !important;
		position: sticky !important;
		top: clamp(16px, 2vw, 28px) !important;
		align-self: flex-start !important;
	}

	/* 右列内部：checkout-order-review + featured-boxes 撑满列宽 */
	html body.woocommerce-checkout #customer_details > .col-lg-5 .checkout-order-review,
	html body.woocommerce-checkout #customer_details > .col-lg-5 .box-content,
	html body.woocommerce-checkout #customer_details > .col-lg-5 .featured-boxes {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		min-width: 0 !important;
		overflow: visible !important;
	}

	/* .featured-box（Porto 卡片层）— 撑满右列且不裁切价格列 */
	html body.woocommerce-checkout #customer_details > .col-lg-5 .featured-box {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		min-width: 0 !important;
		overflow: visible !important;
	}

	/* #order_review 根节点：防止父主题在订单回顾根上裁切 */
	html body.woocommerce-checkout #customer_details > .col-lg-5 #order_review.woocommerce-checkout-review-order,
	html body.woocommerce-checkout #customer_details > .col-lg-5 #order_review {
		overflow: visible !important;
		overflow-x: visible !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* 订单汇总标题 */
	html body.woocommerce-checkout #order_review_heading {
		font-size: clamp(1rem, 0.9rem + 0.25vw, 1.15rem) !important;
		font-weight: 700 !important;
		letter-spacing: -0.01em !important;
		margin: 0 0 12px !important;
	}

	/* 订单明细表格：fixed 布局 + 列宽比例，保证右侧价格列始终有足够像素，避免只剩「$」 */
	html body.woocommerce-checkout #order_review .shop_table,
	html body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
		table-layout: fixed !important;
		width: 100% !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
	}

	html body.woocommerce-checkout #order_review .shop_table th.product-name,
	html body.woocommerce-checkout #order_review .shop_table td.product-name {
		width: 52% !important;
	}

	html body.woocommerce-checkout #order_review .shop_table th.product-total,
	html body.woocommerce-checkout #order_review .shop_table td.product-total {
		width: 48% !important;
		min-width: 6.5rem !important;
	}

	/* 子主题自定义 review-order 模板：外层包裹，窄栏 flex 子项可收缩 */
	html body.woocommerce-checkout #order_review .bb-checkout-review-order-table-wrap {
		min-width: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: visible !important;
	}

	html body.woocommerce-checkout #order_review .shop_table th,
	html body.woocommerce-checkout #order_review .shop_table td {
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		white-space: normal !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name,
	html body.woocommerce-checkout #order_review .shop_table td.product-name * {
		min-width: 0 !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name {
		padding-right: 10px !important;
		overflow: visible !important;
		vertical-align: top !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name a {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		line-height: 1.35 !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name .wc-item-meta,
	html body.woocommerce-checkout #order_review .shop_table td.product-name dl.variation,
	html body.woocommerce-checkout #order_review .shop_table td.product-name .product-name,
	html body.woocommerce-checkout #order_review .shop_table td.product-name .product-item-name {
		display: block !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name .product-quantity {
		display: block !important;
		float: none !important;
		margin-top: 6px !important;
	}
	html body.woocommerce-checkout #order_review .shop_table td.product-name .quantity,
	html body.woocommerce-checkout #order_review .shop_table td.product-name .quantity.buttons_added {
		display: inline-flex !important;
		float: none !important;
		clear: both !important;
		margin-top: 8px !important;
		max-width: 100% !important;
	}

	/* 价格列右对齐：购物车行 + 表头（.product-total），避免对任意 td:last-child 一律 nowrap */
	html body.woocommerce-checkout #order_review .shop_table th.product-total,
	html body.woocommerce-checkout #order_review .shop_table td.product-total {
		text-align: right !important;
		white-space: nowrap !important;
		width: 1% !important;
	}

	/* tfoot：右列与表头第二列对齐（fixed 表宽下由列定义继承）；默认允许换行 */
	html body.woocommerce-checkout #order_review .shop_table tfoot td {
		text-align: right !important;
		white-space: normal !important;
	}

	html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal td,
	html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount td,
	html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee td,
	html body.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate td,
	html body.woocommerce-checkout #order_review .shop_table tfoot tr.tax-total td {
		white-space: nowrap !important;
	}

	/* 总计行：含税说明等可换行（模板 .bb-order-total-stack） */
	html body.woocommerce-checkout #order_review .shop_table tr.order-total td.bb-order-total-cell {
		white-space: normal !important;
	}

	html body.woocommerce-checkout #order_review .shop_table .bb-order-total-stack {
		display: block !important;
		text-align: right !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}

	/* 支付插件（Stripe / Klarna 等）不溢出右列 */
	html body.woocommerce-checkout #order_review .woocommerce-checkout-payment,
	html body.woocommerce-checkout #order_review #payment,
	html body.woocommerce-checkout #order_review [class*="stripe"],
	html body.woocommerce-checkout #order_review [id*="stripe"],
	html body.woocommerce-checkout #order_review .StripeElement,
	html body.woocommerce-checkout #order_review [class*="klarna"],
	html body.woocommerce-checkout #order_review [class*="payment-request"] {
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
}

/* ─────────────── 6. 移动端（<992px）单列 ─────────────── */
@media (max-width: 991px) {
	html body.woocommerce-checkout form.checkout #customer_details.row {
		display: block !important;
	}

	html body.woocommerce-checkout form.checkout #customer_details > .col-lg-7,
	html body.woocommerce-checkout form.checkout #customer_details > .col-lg-5 {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		position: static !important;
	}
}

/* ─────────────── 7. 右栏订单明细 — 数量控件 ─────────────── */
/*
 * Porto 默认把 checkout order review 里的数量输入宽度固定为 38px，
 * 两位及以上数字（10、100…）会被截断显示不完整。
 * 覆盖为 56px，同时保持 -/+ 按钮高度一致。
 */
html body.woocommerce-checkout .checkout-order-review .quantity input.qty,
html body.woocommerce-checkout .featured-box .shop_table .quantity input.qty,
html body.woocommerce-checkout #order_review .quantity input.qty {
	width: 56px !important;
	min-width: 56px !important;
	text-align: center !important;
	padding: 0 6px !important;
}

html body.woocommerce-checkout .checkout-order-review .quantity .minus,
html body.woocommerce-checkout .checkout-order-review .quantity .plus,
html body.woocommerce-checkout .featured-box .shop_table .quantity .minus,
html body.woocommerce-checkout .featured-box .shop_table .quantity .plus {
	width: 32px !important;
	min-width: 32px !important;
}

/* ─────────────── 8. 右栏卡片 + 购物车 totals ─────────────── */

html body.woocommerce-checkout .woocommerce-checkout-review-order,
html body.woocommerce-cart .cart-collaterals .cart_totals {
	border: 1px solid var(--bb-border-soft, #d9d6d2) !important;
	border-radius: var(--bb-radius-lg, 18px) !important;
	background: var(--bb-bg-card, #ffffff) !important;
	padding: clamp(0.85rem, 1.7vw, 1.25rem) !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* ─────────────── 8. 手机端顶栏不注入 meta ─────────────── */
/*
 * 2026-04-18 注：buildbarn-header-meta 在 cart/checkout 的手机端
 * 已由 buildbarn-header-porto-812.css 统一管理，此处不再强制 flex。
 */