/* ==========================================================================
   BA Liquidation commerce: cart, checkout, order confirmation.
   Reuses the design tokens defined on :root in main.css.
   ========================================================================== */

/* ---------- shared bits ---------- */
.cart-loading { color: var(--muted); padding: 24px 0; }
.co-quote-err { color: var(--muted); font-size: 14px; padding: 10px 0; }

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: start;
}
.cart-lines { min-width: 0; }

.cart-line {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	margin-bottom: 14px;
}
.cart-line-top {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 16px;
	align-items: center;
}
.cart-line-img {
	width: 96px; height: 96px;
	background: var(--bg-2);
	border-radius: var(--radius-sm);
	display: grid; place-items: center;
	overflow: hidden; padding: 8px;
}
.cart-line-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-line-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-line-brand { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.cart-line-title { font-family: var(--sans); font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.32; }
.cart-line-title:hover { color: var(--navy); }
.cart-line-cond { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--navy); background: var(--bg-3); padding: 2px 8px; border-radius: 999px; }
.cart-line-unit { color: var(--muted); font-size: 13px; }

.cart-line-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-line-total { font-family: var(--sans); font-weight: 800; color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.cart-line-remove { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.cart-line-remove:hover { color: var(--sale); }

/* qty stepper */
.qty-stepper {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.qty-btn {
	width: 34px; height: 34px;
	border: 0; background: #fff; cursor: pointer;
	font-size: 18px; line-height: 1; color: var(--navy);
	display: grid; place-items: center;
}
.qty-btn:hover { background: var(--bg-2); }
.qty-input {
	width: 40px; height: 34px; border: 0; text-align: center;
	font: inherit; font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.qty-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,59,128,.15); border-radius: 6px; }

/* cart summary */
.cart-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	position: sticky;
	top: 90px;
	box-shadow: var(--shadow-sm);
}
.cart-summary-h { font-size: 18px; margin-bottom: 14px; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.cart-summary-val { font-family: var(--sans); font-weight: 800; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-summary-note { color: var(--muted); font-size: 13px; margin: 12px 0 18px; }

/* empty cart */
.cart-empty { text-align: center; padding: 50px 20px; }
.cart-empty-ic { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); }
.cart-empty h2 { font-size: 22px; }
.cart-empty p { color: var(--muted); margin: 8px 0 22px; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.co-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 30px;
	align-items: start;
}
.co-main { min-width: 0; }

.co-block {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	margin: 0 0 18px;
	background: #fff;
}
.co-block legend {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 8px;
}
.co-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.co-three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 16px; }
.co-block .field:last-child { margin-bottom: 0; }

/* delivery method toggle */
.co-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-toggle-opt {
	position: relative;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px 16px 14px 44px;
	cursor: pointer;
	display: block;
	transition: .15s;
}
.co-toggle-opt input { position: absolute; left: 16px; top: 16px; accent-color: var(--navy); width: 18px; height: 18px; }
.co-toggle-opt.is-active { border-color: var(--navy); background: var(--bg-2); box-shadow: 0 0 0 1px var(--navy) inset; }
.co-toggle-t { display: block; font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: 15px; }
.co-toggle-s { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.co-deliv-msg { margin: 14px 0 0; font-size: 13px; color: var(--body); min-height: 1em; }
/* Out-of-zone notice: larger and prominent, since it replaces the pay button. */
.co-deliv-msg.co-deliv-out {
	font-size: 16.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--ink);
	background: var(--sale-bg);
	border: 1px solid #E7B7AE;
	border-radius: 12px;
	padding: 16px 18px;
	margin-top: 16px;
}
.co-pickup-note legend { color: var(--muted); }

/* condition acknowledgment box (good tint) */
.co-ack {
	background: var(--good-bg);
	border: 1.5px solid var(--good);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin: 0 0 18px;
}
.co-ack-label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.co-ack-label input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--good); }
.co-ack-label span { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.co-ack-label strong { color: var(--good); }
.co-ack-intro { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 0 0 12px; }
.co-ack-intro strong { color: var(--good); }
.co-ack-list { display: flex; flex-direction: column; gap: 10px; }
.co-ack-item {
	display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
	background: #fff; border: 1.5px solid var(--good); border-radius: var(--radius-sm);
	padding: 11px 13px; transition: border-color .15s, background .15s;
}
.co-ack-item input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--good); cursor: pointer; }
.co-ack-item span { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.co-ack-item.co-ack-missing { border-color: var(--sale); background: var(--sale-bg); }
.co-ack-flash { animation: coAckFlash 1s ease; }
@keyframes coAckFlash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(30,122,84,0); }
	30% { box-shadow: 0 0 0 4px rgba(30,122,84,.28); }
}

/* test mode note (amber pill) */
.co-testnote {
	background: #FDF2E2;
	border: 1px solid #E9C89A;
	color: #8A5A12;
	font-size: 13.5px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 999px;
	margin-bottom: 18px;
	display: inline-block;
}

/* error box */
.co-error {
	background: var(--sale-bg);
	border: 1px solid var(--sale);
	color: var(--sale);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 16px;
}

/* pay button */
.co-pay { margin-top: 4px; }
.co-pay.is-busy { opacity: .7; cursor: progress; }
.co-secure { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 12px; }

/* order summary (right column) */
.co-summary-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	position: sticky;
	top: 90px;
	box-shadow: var(--shadow-sm);
}
.co-summary-h { font-size: 18px; margin-bottom: 14px; }
.co-summary-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.co-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.co-item-img { width: 52px; height: 52px; background: var(--bg-2); border-radius: 8px; display: grid; place-items: center; overflow: hidden; padding: 5px; }
.co-item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.co-item-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-item-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-item-qty { font-size: 12px; color: var(--muted); }
.co-item-price { font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }

.co-summary-totals { border-top: 1px solid var(--line); padding-top: 14px; }
.co-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--body); margin-bottom: 10px; }
.co-sum-row span:last-child { font-variant-numeric: tabular-nums; }
.co-sum-total { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; margin-bottom: 0; }
.co-sum-total span { font-family: var(--sans); font-weight: 800; color: var(--ink); font-size: 20px; }
.co-summary-edit { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--navy); font-weight: 600; }

/* ==========================================================================
   Order confirmation
   ========================================================================== */
.order-hero {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}
.order-check {
	flex: none;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: var(--good-bg);
	color: var(--good);
	display: grid; place-items: center;
}
.order-hero h1 { font-size: clamp(24px, 3.4vw, 32px); }

.order-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.order-side { display: flex; flex-direction: column; gap: 24px; }

.order-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
}
.order-card-h { font-size: 17px; margin-bottom: 16px; }

.order-line { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.order-line:first-of-type { padding-top: 0; }
.order-line-img { width: 70px; height: 70px; background: var(--bg-2); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; padding: 6px; }
.order-line-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.order-line-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.order-line-brand { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.order-line-title { font-family: var(--sans); font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.32; }
.order-line-meta { font-size: 12.5px; color: var(--muted); }
.order-line-price { font-family: var(--sans); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

.order-ack { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.order-ack-h { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--good); margin: 0 0 4px; }
.order-ack-sub { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.order-ack-list { margin: 0; padding-left: 18px; }
.order-ack-list li { font-size: 13px; color: var(--body); line-height: 1.5; margin: 0 0 6px; }

.order-totals { margin-top: 16px; }

.order-steps { margin: 0; padding-left: 20px; color: var(--body); font-size: 14px; }
.order-steps li { margin-bottom: 8px; }
.order-next .order-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.order-help > span { display: block; font-family: var(--sans); font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.order-help-addr { color: var(--muted); font-size: 12.5px; margin-top: 12px; text-align: center; }

/* not found */
.order-notfound { text-align: center; max-width: 560px; margin: 20px auto; padding: 40px 20px; }
.order-notfound h1 { font-size: 26px; }
.order-notfound p { color: var(--muted); margin: 12px 0 22px; }
.order-nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.cart-layout,
	.co-layout,
	.order-grid { grid-template-columns: 1fr; }
	.cart-summary,
	.co-summary-card { position: static; }
}
@media (max-width: 560px) {
	.cart-line { grid-template-columns: 72px 1fr; }
	.cart-line-img { width: 72px; height: 72px; }
	.cart-line-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line-2); }
	.co-two,
	.co-three,
	.co-toggle { grid-template-columns: 1fr; }
	.order-hero { flex-direction: column; }
	.order-line { grid-template-columns: 56px 1fr; }
	.order-line-price { grid-column: 2; text-align: right; }
}


/* ==== Order page: extended warranty block ================================ */
.order-warranty{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.order-warr-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.order-warr-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px}
.order-warr-num{font-family:var(--sans);font-weight:800;color:var(--navy);letter-spacing:.02em;font-size:15px}
.order-warr-prod{flex:1;min-width:160px;color:var(--ink);font-size:14px}
.order-warr-dates{color:var(--muted);font-size:12.5px;white-space:nowrap}

/* ==== Stripe Payment Element ============================================= */
#coPayBlock .co-stripe-el{min-height:44px}
#coPayBlock #coPayLoading{color:var(--muted);font-size:14px;padding:8px 0}
.co-pay.is-busy{opacity:.85;cursor:progress}