/**
 * cart.css — Brand restyle of the classic [woocommerce_cart] page (build-guide/pages/cart.md).
 * Replaces the old block-targeting cart.css (backed up). Styles the real WooCommerce
 * classic cart markup; the live cart/totals/coupon/checkout flow is untouched.
 *
 * Scope: enqueued only on is_cart(). Tokens only. Pickup framing (Golden Rule #9).
 * DEFERRED per owner 2026-05-28: $150 deposit row (OQ-8/12 + docs/ideas-deposits.md),
 * free-delivery progress bar (no-shipping), Apple Pay/PayPal express (Helcim).
 */

/* ---- Page heading (aligned + same gutter as the cart below) ---- */
.woocommerce-cart .entry-title,
.woocommerce-cart h1 { font-family: var(--hfont); font-size: 30px; margin: 28px auto 20px; max-width: 1180px; padding: 0 28px; box-sizing: border-box; }

/* ---- Two-column layout: items (1fr) + sticky summary (360px) ---- */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
}
/* let grid children shrink (prevents min-content from forcing horizontal overflow) */
.woocommerce-cart .woocommerce > * { min-width: 0; max-width: 100%; }
.woocommerce-cart .woocommerce > .before-cart,
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: auto !important; float: none !important; }

/* ---- Line items: turn the responsive table into mockup-style rows ---- */
.woocommerce-cart table.cart { border: 0; margin: 0; display: block; }
.woocommerce-cart table.cart thead { display: none; }
.woocommerce-cart table.cart tbody { display: block; }
/* hide WooCommerce's responsive "Product:/Quantity:/Subtotal:" data-title labels (we use our own grid) */
.woocommerce-cart table.cart td::before { display: none !important; }
.woocommerce-cart table.cart tbody tr.cart_item {
	display: grid;
	grid-template-columns: 96px auto 1fr auto;
	grid-template-areas:
		"thumb name name   price"
		"thumb qty  remove price";
	column-gap: 16px; row-gap: 12px; align-items: start;
	padding: 20px 0; border-top: 1px solid var(--border);
}
/* the actions row (coupon + update) is also a tbody <tr> — keep it normal flow */
.woocommerce-cart table.cart tbody tr:not(.cart_item) { display: block; }
.woocommerce-cart table.cart tr.cart_item td { border: 0; padding: 0; }
.woocommerce-cart td.product-thumbnail { grid-area: thumb; width: 96px; height: 96px; border-radius: 12px; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.woocommerce-cart td.product-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.woocommerce-cart td.product-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; font-family: var(--hfont); font-size: 16px; line-height: 1.3; }
.woocommerce-cart td.product-name a { color: var(--ink); text-decoration: none; }
.woocommerce-cart td.product-name a:hover { color: var(--accent-strong); }
.woocommerce-cart td.product-name .wc-item-meta,
.woocommerce-cart td.product-name .variation { color: var(--muted); font-size: 13.5px; font-family: var(--bfont); margin: 4px 0 0; list-style: none; padding: 0; }
.woocommerce-cart td.product-price { display: none; } /* per-unit price hidden; line subtotal shown */
.woocommerce-cart td.product-quantity { grid-area: qty; align-self: center; }
.woocommerce-cart td.product-remove { grid-area: remove; justify-self: start; align-self: center; }
.woocommerce-cart td.product-remove a.remove {
	color: var(--muted) !important; font-weight: 700; font-size: 0 !important; text-decoration: none; width: auto !important; min-width: 0 !important; height: auto; line-height: 1; white-space: nowrap; display: inline-block;
}
.woocommerce-cart td.product-remove a.remove::before { content: ""; }
.woocommerce-cart td.product-remove a.remove::after { content: "Remove"; font-size: 13px; text-decoration: underline; white-space: nowrap; }
.woocommerce-cart td.product-remove a.remove:hover { color: var(--ink) !important; background: none !important; }
/* availability chip (peb-cart.php) under the product name */
.woocommerce-cart .product-name .peb-avail { display: block; color: var(--ok); font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.woocommerce-cart td.product-subtotal { grid-area: price; text-align: right; font-family: var(--hfont); font-weight: 900; font-size: 17px; white-space: nowrap; align-self: start; }

/* ---- Qty stepper (− input +) ---- */
/* hide the theme's native +/- (we add our own .peb-qbtn via js/peb-cart.js) */
.woocommerce-cart .product-quantity .quantity .action { display: none !important; }
.woocommerce-cart .product-quantity .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; height: 42px; width: max-content; }
.woocommerce-cart .product-quantity .quantity input.qty { order: 2; width: 40px; min-width: 0; text-align: center; border: 0; background: transparent; font-size: 15px; font-weight: 800; color: var(--ink); -moz-appearance: textfield; }
.woocommerce-cart .product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart .product-quantity .quantity .peb-qbtn { width: 38px; height: 40px; border: 0; background: var(--surface); font-size: 18px; font-weight: 800; color: var(--accent-strong); cursor: pointer; }
.woocommerce-cart .product-quantity .quantity .peb-qbtn:hover { background: var(--surface-2); }
.woocommerce-cart .product-quantity .quantity .peb-qbtn[data-dir="down"] { order: 1; }
.woocommerce-cart .product-quantity .quantity .peb-qbtn[data-dir="up"] { order: 3; }

/* ---- Item group sections (eBikes / Accessories), injected by js/peb-cart.js ---- */
.woocommerce-cart table.cart tbody tr.peb-grp-head { padding: 4px 0 0; }
.woocommerce-cart table.cart tbody tr.peb-grp-head-acc { padding-top: 26px; margin-top: 10px; border-top: 1px solid var(--border); }
.woocommerce-cart .peb-grp-head td { display: block; padding: 0; border: 0; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 800; color: var(--muted); }
/* the first item right under a section label shouldn't carry its own top rule */
.woocommerce-cart table.cart tbody tr.peb-grp-head + tr.cart_item { border-top: 0; }
.woocommerce-cart table.cart tbody tr.peb-grp-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; }
.woocommerce-cart .peb-grp-sub td { display: block; padding: 0; border: 0; }
.woocommerce-cart .peb-grp-sub td:first-child { color: var(--muted); font-weight: 600; font-size: 14px; }
.woocommerce-cart .peb-grp-sub .peb-grp-sub-amt { font-family: var(--hfont); font-weight: 900; font-size: 16px; white-space: nowrap; }

/* ---- Cart actions row (coupon + update) ---- */
.woocommerce-cart .woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px 0 0; border-top: 1px solid var(--border); margin-top: 4px; }
.woocommerce-cart .woocommerce-cart-form .coupon { display: flex; gap: 8px; flex: 1 1 auto; }
.woocommerce-cart .coupon input.input-text { flex: 1; max-width: 220px; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; font-family: var(--bfont); }
.woocommerce-cart .coupon button { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 0 16px; font-weight: 700; cursor: pointer; color: var(--ink); }
.woocommerce-cart .woocommerce-cart-form .actions > button[name="update_cart"] {
	border: 1.5px solid var(--border); background: var(--surface); border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; color: var(--ink);
}
.woocommerce-cart .woocommerce-cart-form .actions > button[name="update_cart"]:disabled { opacity: .5; }

/* ---- Order summary (right column, sticky) ---- */
.woocommerce-cart .cart_totals {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 22px; position: sticky; top: 84px; box-shadow: var(--shadow-sm);
}
.woocommerce-cart .cart_totals > h2 { font-size: 18px; margin: 0 0 14px; }
.woocommerce-cart .cart_totals table { width: 100%; border: 0; margin: 0; }
.woocommerce-cart .cart_totals table tr { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border: 0; }
.woocommerce-cart .cart_totals table th { font-weight: 600; color: var(--muted); font-size: 14.5px; text-align: left; padding: 0; border: 0; }
.woocommerce-cart .cart_totals table td { font-weight: 700; font-size: 14.5px; text-align: right; padding: 0; border: 0; }
.woocommerce-cart .cart_totals .order-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.woocommerce-cart .cart_totals .order-total th { color: var(--ink); font-family: var(--hfont); font-weight: 900; font-size: 17px; }
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total .amount { font-family: var(--hfont); font-weight: 900; font-size: 19px; }
/* Pickup row injected via PHP (peb-cart.php) */
.woocommerce-cart .cart_totals .peb-pickup-row td,
.woocommerce-cart .peb-pickup-free { color: var(--ok); font-weight: 700; }
/* hide the shipping calculator / "calculate shipping" — pickup only */
.woocommerce-cart .cart_totals .shipping .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .cart-subtotal .includes_tax { display: none; }
/* Refundable deposit (pre-auth, NOT charged — display only) */
.woocommerce-cart .cart_totals .peb-deposit-row th { color: var(--muted); font-weight: 600; }
.woocommerce-cart .cart_totals .peb-deposit-row td { color: var(--muted); font-weight: 700; }
.woocommerce-cart .cart_totals .peb-deposit-row .peb-dep-sub { display: block; font-weight: 500; font-size: 11px; }
.woocommerce-cart .cart_totals .peb-deposit-note { display: block; padding: 0; }
.woocommerce-cart .cart_totals .peb-deposit-note td { display: block; text-align: left; font-size: 11.5px; line-height: 1.45; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 9px 11px; margin-top: 8px; }

/* ---- Checkout button + trust ---- */
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 8px; padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex; width: 100%; justify-content: center; align-items: center;
	background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
	font-weight: 800; font-size: 16px; padding: 15px 24px; text-decoration: none; transition: filter .12s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.06); }
.peb-cart-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.peb-cart-trust div { display: flex; gap: 7px; align-items: center; }
.peb-cart-trust .ic { color: var(--ok); font-weight: 900; }

/* ---- "Pairs well with" cross-sell (peb-cart.php, after the form) ---- */
.peb-cart-xsell { grid-column: 1; margin-top: 8px; }
.peb-cart-xsell h2 { font-size: 18px; margin: 0 0 4px; }
.peb-cart-xsell .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.peb-cart-xsell .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.peb-cart-xsell .mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.peb-cart-xsell .mini .pic { aspect-ratio: 1/1; background: #fff; overflow: hidden; }
.peb-cart-xsell .mini .pic img { width: 100%; height: 100%; object-fit: contain; }
.peb-cart-xsell .mini .b { padding: 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.peb-cart-xsell .mini h3 { font-size: 13.5px; line-height: 1.25; margin: 0; }
.peb-cart-xsell .mini h3 a { color: var(--ink); text-decoration: none; }
.peb-cart-xsell .mini .pr { font-family: var(--hfont); font-weight: 900; font-size: 15px; margin: 0; }
.peb-cart-xsell .mini .btn { margin-top: auto; }

/* ---- Empty cart ---- */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .wc-empty-cart-message { text-align: center; font-size: 22px; font-family: var(--hfont); border: 0; background: none; padding: 40px 0 8px; color: var(--ink); }
.woocommerce-cart .cart-empty.woocommerce-info::before { display: none; }
.woocommerce-cart .return-to-shop { text-align: center; padding-bottom: 40px; }
.woocommerce-cart .return-to-shop .button {
	display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink);
	border-radius: 999px; font-weight: 800; padding: 13px 26px; text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-cart .cart-collaterals { grid-column: 1; }
	.woocommerce-cart .cart_totals { position: static; }
	.peb-cart-xsell .mini-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-cart .entry-title,
	.woocommerce-cart h1 { padding-left: 18px; padding-right: 18px; }
	.woocommerce-cart table.cart tbody tr.cart_item { grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb name price" "thumb qty remove"; column-gap: 12px; }
	.woocommerce-cart td.product-thumbnail { width: 72px; height: 72px; }
	.woocommerce-cart td.product-subtotal { grid-area: price; text-align: right; align-self: start; margin-top: 0; font-size: 16px; }
	.woocommerce-cart td.product-remove { justify-self: end; }
	.peb-cart-xsell .mini-grid { grid-template-columns: 1fr 1fr; }
	.woocommerce-cart .coupon input.input-text { max-width: none; }
}