/* SMJ Marketplace — checkout + order pages. Reuses --smj-* tokens. */
.smj-checkout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 28px;
	align-items: start;
}
.smj-checkout__h {
	margin: 0 0 12px;
	font-size: 16px;
}
.smj-checkout__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}
.smj-f {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--smj-text, #111827);
}
.smj-f--full {
	grid-column: 1 / -1;
}
.smj-f input,
.smj-f textarea {
	padding: 9px 10px;
	border: 1px solid var(--smj-border, #e2e8f0);
	border-radius: var(--smj-radius-sm, 8px);
	font-weight: 400;
	font-size: 14px;
}
.smj-f--invalid input,
.smj-f--invalid {
	border-color: #dc2626;
}
.smj-checkout__pay {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.smj-pay {
	border: 1px solid var(--smj-border, #e2e8f0);
	border-radius: var(--smj-radius-sm, 8px);
	padding: 10px 12px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.smj-checkout__msg {
	color: #dc2626;
	font-size: 13px;
	margin: 12px 0 0;
}
.smj-checkout__summary {
	background: var(--smj-light-section, #f7f9fc);
	border: 1px solid var(--smj-border, #e2e8f0);
	border-radius: var(--smj-radius, 12px);
	padding: 18px;
	position: sticky;
	top: 20px;
}
.smj-checkout__items {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.smj-checkout__items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--smj-border, #e2e8f0);
	font-size: 14px;
}
.smj-checkout__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 12px 0 16px;
	font-size: 16px;
}
.smj-checkout__total strong {
	font-size: 20px;
	color: var(--smj-primary, #1e6eff);
}
.smj-checkout__place {
	width: 100%;
	text-align: center;
	padding: 12px;
	font-size: 15px;
}

/* Order received + status badges */
.smj-received__head h2 {
	margin: 0 0 4px;
}
.smj-received__meta {
	color: var(--smj-text-muted, #64748b);
	margin: 0 0 16px;
}
.smj-received__ship {
	margin-top: 14px;
	color: var(--smj-text, #111827);
}
.smj-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
.smj-badge--pending { background: #fef9c3; color: #854d0e; }
.smj-badge--processing { background: #dbeafe; color: #1e40af; }
.smj-badge--completed { background: #dcfce7; color: #166534; }
.smj-badge--cancelled { background: #fee2e2; color: #991b1b; }

.smj-orders__view {
	color: var(--smj-primary, #1e6eff);
	text-decoration: none;
	font-weight: 600;
}

@media (max-width: 768px) {
	.smj-checkout { grid-template-columns: 1fr; }
	.smj-checkout__summary { position: static; }
}
@media (max-width: 480px) {
	.smj-checkout__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.89 — Checkout v2 skin.
 * [smj_checkout] emits the "--v2" markup (numbered step cards, delivery &
 * payment option rows with sublabel/amount, thumbnail order summary), but
 * none of those classes were styled — only the base grid and fields were.
 * This section completes the design, on the same tokens as the cart and
 * single-product page.
 * ════════════════════════════════════════════════════════════════════════ */
.smj-checkout--v2{gap:24px}
.smj-checkout__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.smj-checkout__card{background:var(--smj-card-bg,#fff);border:1px solid var(--smj-border,#e8ebee);
  border-radius:var(--smj-radius,12px);padding:18px 20px;box-shadow:0 1px 6px rgba(15,23,42,.03)}
.smj-checkout__card .smj-checkout__grid{margin-bottom:0}
.smj-checkout--v2 .smj-checkout__h{display:flex;align-items:center;gap:10px;font-size:15px;
  font-weight:800;color:var(--smj-text,#111827);margin:0 0 14px}
.smj-checkout__step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--smj-primary,#1e6eff);color:#fff;font-size:12.5px;font-weight:800;flex:0 0 auto}
.smj-checkout__opt{font-size:12px;font-weight:600;font-style:normal;color:var(--smj-text-muted,#94a3b8)}
.smj-f input:focus,.smj-f textarea:focus{outline:none;border-color:var(--smj-primary,#1e6eff);
  box-shadow:0 0 0 3px rgba(30,110,255,.12)}
.smj-f--invalid input,.smj-f--invalid textarea{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.08)}
/* Per-field error line (added by JS) */
.smj-f__err{font-size:11.5px;font-weight:600;color:#dc2626;display:none}
.smj-f--invalid .smj-f__err{display:block}
/* Delivery & payment option rows */
.smj-checkout--v2 .smj-pay{display:flex;align-items:center;gap:12px;transition:border-color .12s,background .12s}
.smj-checkout--v2 .smj-pay:hover{border-color:var(--smj-primary,#1e6eff)}
.smj-checkout--v2 .smj-pay:has(input:checked){border-color:var(--smj-primary,#1e6eff);
  background:rgba(30,110,255,.045);box-shadow:inset 0 0 0 1px var(--smj-primary,#1e6eff)}
.smj-checkout--v2 .smj-pay input{accent-color:var(--smj-primary,#1e6eff);width:16px;height:16px;flex:0 0 auto;margin:0}
.smj-pay__body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.smj-pay__label{font-weight:700;font-size:14px;color:var(--smj-text,#111827)}
.smj-pay__sub{font-weight:500;font-size:12px;color:var(--smj-text-muted,#64748b)}
.smj-pay__amt{font-weight:700;font-size:13px;color:#166534;white-space:nowrap}
.smj-checkout--v2 .smj-checkout__msg{min-height:1em;font-weight:600}
.smj-checkout__msg.is-ok{color:#166534}
/* ── Sticky summary ── */
.smj-checkout--v2 .smj-checkout__summary{position:static;background:transparent;border:0;padding:0}
.smj-checkout__sumcard{position:sticky;top:calc(var(--smj-hf-header-height,72px) + 16px);
  background:var(--smj-card-bg,#fff);border:1px solid var(--smj-border,#e8ebee);
  border-radius:var(--smj-radius,12px);padding:18px;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.smj-checkout__h--sum{font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.smj-checkout--v2 .smj-checkout__items{max-height:290px;overflow:auto;-webkit-overflow-scrolling:touch}
.smj-checkout--v2 .smj-checkout__items li{align-items:center}
.smj-checkout__item-media{position:relative;width:48px;height:56px;border-radius:8px;overflow:hidden;
  background:var(--smj-light-section,#f5f7fa);flex:0 0 auto}
.smj-checkout__item-media img{width:100%;height:100%;object-fit:cover;display:block}
.smj-checkout__item-qty{position:absolute;top:-1px;right:-1px;min-width:18px;height:18px;padding:0 4px;
  border-radius:0 8px 0 8px;background:var(--smj-primary,#1e6eff);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.smj-checkout__item-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.smj-checkout__item-name{font-weight:600;font-size:13px;line-height:1.3;color:var(--smj-text,#111827);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smj-checkout__item-variant{font-size:11.5px;color:var(--smj-text-muted,#94a3b8)}
.smj-checkout__item-line{font-weight:700;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.smj-checkout--v2 .smj-checkout__total{margin:0;padding:8px 0 0;font-size:13.5px;color:var(--smj-text-muted,#475569)}
.smj-checkout--v2 .smj-checkout__total span:last-child,.smj-checkout--v2 .smj-checkout__total strong{
  font-variant-numeric:tabular-nums}
.smj-checkout__total--disc span:last-child{color:#166534}
.smj-checkout__total--disc code{background:#f0fdf4;color:#166534;border-radius:4px;padding:0 5px;font-size:11px}
.smj-checkout--v2 .smj-checkout__total--grand{margin-top:6px;padding-top:12px;
  border-top:1px dashed var(--smj-border,#e2e8f0);font-size:15px;font-weight:800;color:var(--smj-text,#111827)}
.smj-checkout__taxnote{font-size:11.5px;color:var(--smj-text-muted,#94a3b8);margin:2px 0 12px}
.smj-checkout--v2 .smj-checkout__place{border-radius:10px;padding:13px;font-size:15px;position:relative}
/* Loading spinner while the order AJAX runs */
.smj-checkout__place.is-loading{color:transparent!important;pointer-events:none}
.smj-checkout__place.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:smj-co-spin .7s linear infinite}
@keyframes smj-co-spin{to{transform:rotate(360deg)}}
.smj-checkout__secure{text-align:center;margin-top:10px;font-size:12px;color:var(--smj-text-muted,#94a3b8)}
@media (max-width:900px){
  .smj-checkout{grid-template-columns:1fr}
  .smj-checkout__sumcard{position:static}
}

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.94 — Theme Control bindings for Checkout AND Order Received.
 * --smj-checkout-* under body.smj-pg-checkout, --smj-order-* under
 * body.smj-pg-order. All values fall back to existing tokens.
 * ════════════════════════════════════════════════════════════════════════ */
body.smj-pg-checkout, body.smj-pg-order{
  background: var(--smj-checkout-page-bg, transparent);
  color: var(--smj-checkout-text, inherit);
  font-family: var(--smj-checkout-font, inherit);
  font-size: var(--smj-checkout-font-size, inherit);
  line-height: var(--smj-checkout-line-height, inherit);
  font-weight: var(--smj-checkout-body-weight, inherit); /* v6.20.138 */
}
body.smj-pg-order{
  background: var(--smj-order-page-bg, transparent);
  color: var(--smj-order-text, inherit);
  font-family: var(--smj-order-font, inherit);
  font-weight: var(--smj-order-body-weight, inherit); /* v6.20.138 */
}
body.smj-pg-checkout .smj-checkout--v2{ gap: var(--smj-checkout-gap, 24px); }
body.smj-pg-checkout .smj-checkout__card,
body.smj-pg-checkout .smj-checkout__sumcard{
  background: var(--smj-checkout-card-bg, var(--smj-card-bg,#fff));
  border-color: var(--smj-checkout-card-border, var(--smj-border,#e8ebee));
  border-radius: var(--smj-checkout-card-radius, var(--smj-radius,12px));
  box-shadow: var(--smj-checkout-card-shadow, 0 1px 6px rgba(15,23,42,.03));
}
body.smj-pg-checkout .smj-checkout__card{ padding: var(--smj-checkout-card-pad, 18px 20px); }
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__h,
body.smj-pg-checkout .smj-checkout__h--sum{
  color: var(--smj-checkout-heading, var(--smj-text,#111827));
  font-size: var(--smj-checkout-heading-size, inherit);
  font-weight: var(--smj-checkout-heading-weight, 800);
}
body.smj-pg-checkout .smj-checkout__step{ background: var(--smj-checkout-badge-bg, var(--smj-primary)); color: var(--smj-checkout-badge-text,#fff); }
body.smj-pg-checkout .smj-f label{ color: var(--smj-checkout-label-color, inherit); }
body.smj-pg-checkout .smj-f input,
body.smj-pg-checkout .smj-f textarea{
  background: var(--smj-checkout-input-bg, #fff);
  color: var(--smj-checkout-input-text, inherit);
  border-color: var(--smj-checkout-input-border, var(--smj-border));
  border-radius: var(--smj-checkout-input-radius, 8px);
}
body.smj-pg-checkout .smj-f input:focus,
body.smj-pg-checkout .smj-f textarea:focus{
  border-color: var(--smj-checkout-input-focus, var(--smj-primary));
  box-shadow: 0 0 0 3px rgba(var(--smj-checkout-input-focus-rgb, 30,110,255), .12);
}
body.smj-pg-checkout .smj-f input::placeholder,
body.smj-pg-checkout .smj-f textarea::placeholder{ color: var(--smj-checkout-placeholder, #9aa4b2); }
body.smj-pg-checkout .smj-checkout--v2 .smj-pay{
  background: var(--smj-checkout-pay-bg, #fff);
  border-color: var(--smj-checkout-pay-border, var(--smj-border));
}
body.smj-pg-checkout .smj-checkout--v2 .smj-pay:has(input:checked){
  background: var(--smj-checkout-pay-active-bg, rgba(30,110,255,.045));
  border-color: var(--smj-checkout-pay-active-border, var(--smj-primary));
  box-shadow: inset 0 0 0 1px var(--smj-checkout-pay-active-border, var(--smj-primary));
}
body.smj-pg-checkout .smj-pay__amt{ color: var(--smj-checkout-pay-amt-color, #166534); }
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__place{
  background: var(--smj-checkout-btn-bg, var(--smj-primary));
  color: var(--smj-checkout-btn-text, #fff);
  border-radius: var(--smj-checkout-btn-radius, 10px);
  padding: var(--smj-checkout-btn-pad-y, 13px);
  font-size: var(--smj-checkout-btn-size, 15px);
}
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__place:hover{
  background: var(--smj-checkout-btn-hover-bg, var(--smj-primary-dk, var(--smj-primary)));
  color: var(--smj-checkout-btn-hover-text, #fff);
}
body.smj-pg-checkout .smj-checkout__item-name{ color: var(--smj-checkout-info-value, var(--smj-text,#111827)); }
body.smj-pg-checkout .smj-checkout__item-variant{ color: var(--smj-checkout-muted, var(--smj-text-muted,#94a3b8)); }
body.smj-pg-checkout .smj-checkout__item-qty{ background: var(--smj-checkout-badge-bg, var(--smj-primary)); color: var(--smj-checkout-badge-text,#fff); }
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__total span:first-child{ color: var(--smj-checkout-sum-label, var(--smj-text-muted,#475569)); }
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__total span:last-child{ color: var(--smj-checkout-sum-value, inherit); }
body.smj-pg-checkout .smj-checkout--v2 .smj-checkout__total--grand{ color: var(--smj-checkout-sum-total, var(--smj-text,#111827)); }
body.smj-pg-checkout .smj-checkout__total--disc span:last-child{ color: var(--smj-checkout-discount-color, #166534); }
/* ── Order Received success banner ── */
body.smj-pg-order .smj-or__banner,
body.smj-pg-order .smj-order-received__success{
  background: var(--smj-order-ok-bg, #f0fdf4);
  color: var(--smj-order-ok-text, #166534);
  border-radius: var(--smj-order-ok-radius, 12px);
}
body.smj-pg-order .smj-or__icon{ color: var(--smj-order-ok-icon, #16a34a); }
body.smj-pg-order .smj-or__card,
body.smj-pg-order .smj-order-received__card{
  background: var(--smj-order-card-bg, var(--smj-card-bg,#fff));
  border-color: var(--smj-order-card-border, var(--smj-border));
  border-radius: var(--smj-order-card-radius, var(--smj-radius,12px));
  box-shadow: var(--smj-order-card-shadow, 0 2px 10px rgba(15,23,42,.04));
}

/* v6.20.99 — audit bindings. */
/* v6.20.136 AUDIT FIX — see smj-cart.css: layout var takes precedence. */
body.smj-pg-checkout .smj-checkout--v2{max-width:var(--smj-checkout-layout-w,var(--smj-checkout-container-w,none));margin-inline:auto}
body.smj-pg-checkout .smj-checkout__item-qty{border-radius:var(--smj-checkout-badge-radius,0 8px 0 8px)}
/* Order Received — typography, container, gap */
body.smj-pg-order{font-size:var(--smj-order-font-size,inherit);line-height:var(--smj-order-line-height,inherit)}
body.smj-pg-order :is(h1,h2,h3){color:var(--smj-order-heading,inherit);font-size:var(--smj-order-heading-size,revert-layer);font-weight:var(--smj-order-heading-weight,revert-layer)}
body.smj-pg-order :is(.smj-checkout__taxnote,small,.smj-or__muted){color:var(--smj-order-muted,var(--smj-text-muted,#94a3b8))}
body.smj-pg-order :is(.smj-or,.smj-order-received,.smj-checkout--v2){max-width:var(--smj-order-layout-w,var(--smj-order-container-w,none));margin-inline:auto}
body.smj-pg-order :is(.smj-or__card,.smj-order-received__card){padding:var(--smj-order-card-pad,18px)}
body.smj-pg-order :is(.smj-or__card + .smj-or__card,.smj-order-received__card + .smj-order-received__card){margin-top:var(--smj-order-gap,16px)}
body.smj-pg-checkout .smj-checkout__sumcard{background:var(--smj-checkout-sum-bg,var(--smj-checkout-card-bg,var(--smj-card-bg,#fff)));border-color:var(--smj-checkout-sum-border,var(--smj-checkout-card-border,var(--smj-border,#e8ebee)))}

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.142 — ORDER RECEIVED / THANK YOU page.
 *
 * Scope: this page only. Nothing here is loaded outside body.smj-pg-order,
 * so cart, checkout, product, account and theme styling are untouched.
 *
 * IMPORTANT — this also repairs a dead Theme Control tab. The "Order
 * Received" scope binds to .smj-or / .smj-or__banner / .smj-or__icon /
 * .smj-or__card / .smj-or__muted (see the bindings block above), but the
 * renderer emitted .smj-received / .smj-cart__table — classes those
 * selectors never matched, so EVERY control on that tab was inert. The new
 * markup adopts the class stack the bindings already expect, so the tab
 * starts working without touching the bindings themselves.
 *
 * Every colour, radius and shadow below resolves through an existing token
 * (--smj-primary, --smj-text, --smj-text-muted, --smj-border, --smj-card-bg,
 * --smj-radius) with the Order-scope Theme Control var taking precedence.
 * No new palette is introduced.
 * ════════════════════════════════════════════════════════════════════════ */

body.smj-pg-order .smj-or{ display:flex; flex-direction:column; gap:var(--smj-order-gap,16px); padding:8px 0 32px; }

/* ── Success banner ─────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__banner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 22px;
  border:1px solid color-mix(in srgb, var(--smj-order-ok-text,#166534) 16%, transparent);
}
body.smj-pg-order .smj-or__icon{ display:inline-flex; flex:0 0 auto; }
body.smj-pg-order .smj-or__bannertxt{ flex:1 1 240px; min-width:0; }
body.smj-pg-order .smj-or__bannertxt h2{ margin:0 0 3px; line-height:1.25; }
body.smj-pg-order .smj-or__bannertxt p{ margin:0; font-size:13px; }
body.smj-pg-order .smj-or__badge{ flex:0 0 auto; }

/* ── Cards ──────────────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__card{ border:1px solid var(--smj-border,#e8ebee); }
body.smj-pg-order .smj-or__cardtitle{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 14px; font-size:15px; font-weight:700; line-height:1.3;
}
body.smj-pg-order .smj-or__count{ font-size:12.5px; font-weight:500; }

/* ── Progress track ─────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__progress{ display:flex; gap:0; }
body.smj-pg-order .smj-or__step{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; font-size:12.5px;
}
/* Connector drawn as a pseudo-element so no extra markup is needed. */
body.smj-pg-order .smj-or__step::before{
  content:""; position:absolute; top:7px; left:-50%; width:100%; height:2px;
  background:var(--smj-border,#e2e8f0);
}
body.smj-pg-order .smj-or__step:first-child::before{ display:none; }
body.smj-pg-order .smj-or__step.is-done::before,
body.smj-pg-order .smj-or__step.is-now::before{ background:var(--smj-primary,#1e6eff); }
body.smj-pg-order .smj-or__dot{
  position:relative; z-index:1; width:16px; height:16px; border-radius:50%;
  background:var(--smj-card-bg,#fff); border:2px solid var(--smj-border,#cbd5e1);
}
body.smj-pg-order .smj-or__step.is-done .smj-or__dot,
body.smj-pg-order .smj-or__step.is-now .smj-or__dot{
  background:var(--smj-primary,#1e6eff); border-color:var(--smj-primary,#1e6eff);
}
body.smj-pg-order .smj-or__step.is-now .smj-or__dot{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--smj-primary,#1e6eff) 18%, transparent);
}
body.smj-pg-order .smj-or__step.is-next .smj-or__steplbl{ color:var(--smj-order-muted,var(--smj-text-muted,#94a3b8)); }
body.smj-pg-order .smj-or__step.is-now .smj-or__steplbl{ font-weight:700; }

/* ── Items ──────────────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__items{ list-style:none; margin:0; padding:0; }
body.smj-pg-order .smj-or__item{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-top:1px solid var(--smj-border,#eef1f4);
}
body.smj-pg-order .smj-or__item:first-child{ border-top:0; padding-top:0; }
body.smj-pg-order .smj-or__thumb{
  position:relative; flex:0 0 auto; width:64px; height:64px;
  border-radius:10px; overflow:hidden; background:var(--smj-light-section,#f4f6f8);
}
body.smj-pg-order .smj-or__thumbimg,
body.smj-pg-order .smj-or__thumbph{ width:100%; height:100%; object-fit:cover; display:block; }
body.smj-pg-order .smj-or__qty{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  border-radius:999px; font-size:11px; font-weight:700; line-height:1;
  background:var(--smj-primary,#1e6eff); color:#fff;
}
body.smj-pg-order .smj-or__itemtxt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
body.smj-pg-order .smj-or__itemname{
  font-size:14px; font-weight:600; line-height:1.35; text-decoration:none;
  color:var(--smj-order-text,var(--smj-text,#111827));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.smj-pg-order a.smj-or__itemname:hover{ color:var(--smj-primary,#1e6eff); }
body.smj-pg-order .smj-or__itemmeta{ font-size:12.5px; }
body.smj-pg-order .smj-or__itemline{
  flex:0 0 auto; margin-left:auto; text-align:right;
  font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ── Totals ─────────────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__totals{
  display:flex; flex-direction:column; gap:8px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--smj-border,#eef1f4);
}
body.smj-pg-order .smj-or__trow{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  width:100%; font-size:13.5px;
}
body.smj-pg-order .smj-or__trow > span:last-child{ margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
body.smj-pg-order .smj-or__trow--disc > span:last-child{ color:#166534; }
body.smj-pg-order .smj-or__trow--total{
  margin-top:4px; padding-top:10px; border-top:1px dashed var(--smj-border,#e2e8f0);
  font-size:15px; font-weight:800;
}
body.smj-pg-order .smj-or__trow--total > span:last-child{ font-size:19px; font-weight:800; color:var(--smj-primary,#1e6eff); }
body.smj-pg-order .smj-or__taxnote{ margin:2px 0 0; font-size:11.5px; }

/* ── Address / payment columns ──────────────────────────────────────── */
body.smj-pg-order .smj-or__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
body.smj-pg-order .smj-or__addr{ font-style:normal; font-size:13.5px; line-height:1.65; }
body.smj-pg-order .smj-or__pay{ margin:0; font-size:13.5px; font-weight:600; }
body.smj-pg-order .smj-or__confirm{ margin:6px 0 0; font-size:12.5px; }

/* ── Actions ────────────────────────────────────────────────────────── */
body.smj-pg-order .smj-or__actions{ display:flex; flex-wrap:wrap; gap:12px; }
body.smj-pg-order .smj-or__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  font-size:14px; font-weight:600; line-height:1; cursor:pointer; text-decoration:none;
}
body.smj-pg-order .smj-or__btn--primary{ background:var(--smj-primary,#1e6eff); color:#fff; }
body.smj-pg-order .smj-or__btn--ghost{
  background:transparent; color:var(--smj-text,#111827); border-color:var(--smj-border,#d5dae0);
}
body.smj-pg-order .smj-or__btn:hover{ filter:brightness(.96); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width:860px){
  body.smj-pg-order .smj-or__cols{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:600px){
  body.smj-pg-order .smj-or__banner{ padding:16px; gap:12px; }
  body.smj-pg-order .smj-or__badge{ order:3; }
  body.smj-pg-order .smj-or__thumb{ width:54px; height:54px; }
  body.smj-pg-order .smj-or__item{ gap:11px; }
  body.smj-pg-order .smj-or__itemname{ font-size:13.5px; }
  body.smj-pg-order .smj-or__itemline{ font-size:13.5px; }
  body.smj-pg-order .smj-or__steplbl{ font-size:11.5px; }
  body.smj-pg-order .smj-or__actions{ flex-direction:column; }
  body.smj-pg-order .smj-or__btn{ width:100%; }
}

/* ── Print (Print receipt button) ───────────────────────────────────── */
@media print{
  body.smj-pg-order .smj-or__actions,
  body.smj-pg-order .smj-or__progress{ display:none !important; }
  body.smj-pg-order .smj-or__card{ box-shadow:none !important; break-inside:avoid; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.143 — Order Received: final UI polish pass. Layout/spacing only.
 * No markup logic, no order data, no calculations, no payment involved.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Excessive whitespace between cards — it was applied TWICE ──────
   .smj-or is a flex column with `gap`, AND the Theme Control binding adds
   `.smj-or__card + .smj-or__card{margin-top:var(--smj-order-gap)}`. Flex gap
   and sibling margin are additive, so every card break rendered 16+16 = 32px.
   Neutralising the margin inside the flex context leaves the flex gap as the
   single spacer — the TC control still governs it, via the same variable, so
   the Order Gap setting keeps working and now maps 1:1 to what you see.
   Effective: 32px → 20px (−37.5%). */
body.smj-pg-order .smj-or{ gap:var(--smj-order-gap,20px) !important; padding:8px 0 28px; }
body.smj-pg-order .smj-or > .smj-or__card + .smj-or__card{ margin-top:0 !important; }

/* ── 6 + 8. Banner: order no., dynamic status, payment state, illustration ── */
body.smj-pg-order .smj-or__banner{ gap:16px; padding:20px 24px; }
body.smj-pg-order .smj-or__ordermeta{ margin:0 0 8px; }
body.smj-pg-order .smj-or__states{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; }
body.smj-pg-order .smj-or__paystate{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; line-height:1.6;
  background:color-mix(in srgb, var(--smj-order-ok-text,#166534) 10%, transparent);
  color:var(--smj-order-ok-text,#166534);
}
/* Decorative only — aria-hidden in markup, and dropped on small screens so it
   never competes with the message. */
body.smj-pg-order .smj-or__hero{
  flex:0 0 auto; width:104px; height:auto; margin-left:auto;
  opacity:.9; mix-blend-mode:multiply;
}

/* ── 2. Order Summary distinct from the product list ──────────────────
   The totals sat flush against the items on the same white surface. Lifting
   them onto the existing --smj-light-section token separates the two without
   introducing a new colour. */
body.smj-pg-order .smj-or__totals{
  margin:14px -4px 0; padding:14px 16px; border-top:0;
  background:var(--smj-light-section,#f6f8fa);
  border-radius:10px; gap:7px;
}
body.smj-pg-order .smj-or__items{ padding-bottom:2px; }
body.smj-pg-order .smj-or__item{ padding:11px 0; }
body.smj-pg-order .smj-or__trow--total{ margin-top:3px; padding-top:9px; }
body.smj-pg-order .smj-or__taxnote{ margin:1px 0 0; }

/* ── 3. Delivery / Payment cards: tighter, vertically balanced ────────
   Both columns now start from a shared baseline and use one rhythm, so the
   shorter Payment column no longer leaves the row looking lopsided. */
body.smj-pg-order .smj-or__cols{ gap:18px 32px; align-items:start; }
body.smj-pg-order .smj-or__cols .smj-or__cardtitle{ margin:0 0 8px; }
body.smj-pg-order .smj-or__addr{ line-height:1.5; }
body.smj-pg-order .smj-or__confirm{ margin:4px 0 0; line-height:1.5; }
body.smj-pg-order .smj-or__col{ display:flex; flex-direction:column; }

/* ── 4. Long names stay responsive; price never wraps or drifts ───────
   min-width:0 lets the flex text column actually shrink (flex items default
   to min-width:auto and refuse to go below content width — that is what
   pushes a price out of alignment); the price column is fixed and nowrap. */
body.smj-pg-order .smj-or__itemtxt{ flex:1 1 auto; min-width:0; }
body.smj-pg-order .smj-or__itemname{ overflow-wrap:anywhere; }
body.smj-pg-order .smj-or__itemline{
  flex:0 0 auto; min-width:84px; white-space:nowrap; align-self:center;
}

/* ── 5. Actions row with the third button ─────────────────────────────── */
body.smj-pg-order .smj-or__actions{ gap:10px; padding-top:2px; }

@media (max-width:600px){
  body.smj-pg-order .smj-or__hero{ display:none; }   /* message first on mobile */
  body.smj-pg-order .smj-or__totals{ margin-inline:0; padding:13px 14px; }
  body.smj-pg-order .smj-or__itemline{ min-width:0; }
}
@media print{
  body.smj-pg-order .smj-or__hero{ display:none !important; }
}