/* SMJ Marketplace — cart UI. Reuses existing --smj-* theme tokens. */

/* Add to Cart buttons */
.smj-atc {
	display: inline-block;
	background: var(--smj-primary, #1e6eff);
	color: #fff;
	border: 0;
	border-radius: var(--smj-radius-sm, 8px);
	padding: 9px 16px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: filter .15s ease, background .15s ease;
}

.smj-atc:hover {
	filter: brightness(.95);
}

/* v6.20.93 — REQUIRED, not cosmetic. The card Add-to-Cart button is injected
   into .smj-card__body (class-ui-render.php:863), but the rule that lifts
   elements above the invisible full-card permalink overlay only covers
   `.smj-card__fav, .smj-card__footer .smj-btn` (smj-marketplace-ui.css:242).
   .smj-atc--card matched neither, so .smj-card__permalink (inset:0; z-index:1)
   sat on top of it and every click navigated to the product page instead of
   adding to the cart. */
.smj-card .smj-atc--card {
	position: relative;
	z-index: 2;
}

.smj-atc.is-added {
	background: var(--smj-success, #2e7d32);
}

/* v6.20.92 — Persistent in-cart state on cards. Distinct from the transient
   "Added ✓" flash: this stays for the whole session so a shopper can scan the
   grid and see what is already in their bag. Outlined rather than solid so it
   reads as a status, not a primary action, and clicking it goes to the cart. */
.smj-atc[data-incart] {
	background: transparent !important;
	color: var(--smj-success, #2e7d32) !important;
	border: 1.5px solid var(--smj-success, #2e7d32) !important;
	box-shadow: none !important;
}
.smj-atc[data-incart]:hover {
	background: rgba(46, 125, 50, .07) !important;
	filter: none;
}
.smj-atc[data-incart] svg {
	stroke: var(--smj-success, #2e7d32);
}

.smj-atc[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.smj-atc--card {
	margin-top: 8px;
	width: 100%;
	text-align: center;
}

/* Buy box (single page) */
.smj-buybox {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0;
}

.smj-buybox__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--smj-border, #e2e8f0);
	border-radius: var(--smj-radius-sm, 8px);
	overflow: hidden;
}

.smj-buybox__qty button {
	background: var(--smj-light-section, #f5f7fa);
	border: 0;
	width: 36px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--smj-text, #111827);
}

.smj-buybox__qty button:hover {
	background: var(--smj-border, #e2e8f0);
}

.smj-buybox__qty .smj-qty-input {
	width: 48px;
	border: 0;
	border-left: 1px solid var(--smj-border, #e2e8f0);
	border-right: 1px solid var(--smj-border, #e2e8f0);
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
}

.smj-buybox__qty .smj-qty-input::-webkit-outer-spin-button,
.smj-buybox__qty .smj-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.smj-buybox__view {
	font-size: 13px;
	color: var(--smj-primary, #1e6eff);
	text-decoration: none;
}

.smj-buybox__view:hover {
	text-decoration: underline;
}

/* Mini cart */
.smj-mini-cart {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--smj-text, #111827);
	font-weight: 600;
}

.smj-mini-cart__count {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--smj-primary, #1e6eff);
	color: #fff;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}

.smj-mini-cart__count.is-bumped {
	transform: scale(1.35);
}

/* Cart page */
.smj-cart__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}

.smj-cart__table th,
.smj-cart__table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--smj-border, #e2e8f0);
	text-align: left;
	vertical-align: middle;
}

.smj-cart__table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--smj-text-muted, #64748b);
}

.smj-cart__prod {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--smj-text, #111827);
	font-weight: 600;
}

.smj-cart__thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--smj-radius-sm, 8px);
}

.smj-cart__remove {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--smj-text-muted, #94a3b8);
	cursor: pointer;
}

.smj-cart__remove:hover {
	color: #dc2626;
}

.smj-cart__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

.smj-cart__totals {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 16px;
}

.smj-cart__subtotal {
	font-weight: 700;
	font-size: 20px;
	color: var(--smj-primary, #1e6eff);
}

.smj-cart__checkout {
	padding: 11px 22px;
	font-size: 15px;
}

.smj-cart-empty {
	text-align: center;
	padding: 40px 16px;
	color: var(--smj-text-muted, #64748b);
}

.smj-cart-empty .smj-atc {
	margin-top: 12px;
}

/* Responsive: stack cart rows on small screens */
@media (max-width: 600px) {
	.smj-cart__table thead {
		display: none;
	}
	.smj-cart__table,
	.smj-cart__table tbody,
	.smj-cart__row,
	.smj-cart__table td {
		display: block;
		width: 100%;
	}
	.smj-cart__row {
		border: 1px solid var(--smj-border, #e2e8f0);
		border-radius: var(--smj-radius-sm, 8px);
		margin-bottom: 12px;
		padding: 6px 10px;
	}
	.smj-cart__table td {
		border: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 7px 0;
	}
	.smj-cart__table td::before {
		content: attr(data-label);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--smj-text-muted, #64748b);
	}
	.smj-cart__col-prod::before {
		display: none;
	}
	.smj-cart__col-rm {
		justify-content: flex-end;
	}
}

/* Coupons + totals (Phase 4) */
.smj-cart__foot {
	flex-direction: column;
	align-items: stretch;
	max-width: 360px;
	margin-left: auto;
}
.smj-cart__coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.smj-coupon-input {
	flex: 1;
	min-width: 120px;
	padding: 8px 10px;
	border: 1px solid var(--smj-border, #e2e8f0);
	border-radius: var(--smj-radius-sm, 8px);
}
.smj-atc--ghost {
	background: transparent;
	color: var(--smj-primary, #1e6eff);
	border: 1px solid var(--smj-primary, #1e6eff);
}
.smj-coupon-remove {
	background: none;
	border: 0;
	color: #dc2626;
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
}
/* v6.20.110 — coupon apply feedback. Empty by default (no box), becomes a
   subtle banner only when a message is present. */
.smj-coupon-msg { flex-basis: 100%; font-size: 13px; font-weight: 600; margin-top: 8px; }
.smj-coupon-msg:empty { display: none; }
.smj-coupon-msg.is-ok,
.smj-coupon-msg.is-err {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 9px; line-height: 1.3;
}
.smj-coupon-msg.is-ok {
  color: #166534; background: #dcfce7; border: 1px solid #bbf7d0;
}
.smj-coupon-msg.is-ok::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.smj-coupon-msg.is-err {
  color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca;
}
.smj-coupon-msg.is-err::before {
  content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: #dc2626; color: #fff; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.smj-cart__trow {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 15px;
}
.smj-cart__trow--total {
	border-top: 1px solid var(--smj-border, #e2e8f0);
	margin-top: 4px;
	padding-top: 10px;
	font-weight: 700;
	font-size: 18px;
}
.smj-cart__total { color: var(--smj-primary, #1e6eff); }
.smj-checkout__total--grand {
	border-top: 1px solid var(--smj-border, #e2e8f0);
	padding-top: 10px;
	margin-top: 4px;
}
.smj-checkout__total--grand strong { font-size: 20px; color: var(--smj-primary, #1e6eff); }

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.89 — Cart v2 layout.
 * The [smj_cart] shortcode has emitted the "--v2" markup (media row, aside
 * summary, coupon, totals) for a while, but every v2 class below was
 * UNSTYLED — only the legacy table classes were covered, so the page
 * rendered as bare stacked divs. This section is the missing skin.
 * Tokens mirror the single-product page (--smj-card-bg/border/radius,
 * --smj-text*, --smj-primary) so the design language matches site-wide.
 * ════════════════════════════════════════════════════════════════════════ */
.smj-cart--v2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.smj-cart--v2 .smj-cart__items{background:var(--smj-card-bg,#fff);border:1px solid var(--smj-border,#e8ebee);
  border-radius:var(--smj-radius,12px);padding:6px 18px 4px}
.smj-cart__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 0 12px;border-bottom:1px solid var(--smj-border,#eef1f4)}
.smj-cart__title{margin:0;font-size:19px;font-weight:800;color:var(--smj-text,#111827)}
.smj-cart__count{font-size:13px;color:var(--smj-text-muted,#94a3b8);font-weight:600}
.smj-cart--v2 .smj-cart__row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;
  align-items:start;padding:16px 0;border-bottom:1px solid var(--smj-border,#eef1f4)}
.smj-cart--v2 .smj-cart__row:last-child{border-bottom:0}
.smj-cart__media{display:block;width:88px;height:104px;border-radius:10px;overflow:hidden;
  background:var(--smj-light-section,#f5f7fa);flex:0 0 auto}
.smj-cart--v2 .smj-cart__thumb{width:100%;height:100%;object-fit:cover;display:block}
.smj-cart__thumb--ph{display:flex;align-items:center;justify-content:center;font-size:26px}
.smj-cart__info{display:flex;flex-direction:column;gap:5px;min-width:0}
.smj-cart__name{font-weight:700;font-size:14.5px;line-height:1.35;color:var(--smj-text,#111827);
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smj-cart__name:hover{color:var(--smj-primary,#1e6eff)}
.smj-cart__variant{font-size:12.5px;color:var(--smj-text-muted,#64748b)}
.smj-cart__unit{font-size:13.5px;font-weight:700;color:var(--smj-text,#111827)}
.smj-cart__ctrl{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.smj-cart__qty{transform:scale(.92);transform-origin:left center}
.smj-cart--v2 .smj-cart__remove{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  padding:4px 0;font-size:13px;font-weight:600;color:var(--smj-text-muted,#64748b);cursor:pointer}
.smj-cart--v2 .smj-cart__remove:hover{color:#dc2626}
.smj-cart__lineblock{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:84px}
.smj-cart__linelbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--smj-text-muted,#94a3b8)}
.smj-cart__line{font-size:15.5px;font-weight:800;color:var(--smj-text,#111827);font-variant-numeric:tabular-nums}
/* Aside / summary */
.smj-cart__aside{position:sticky;top:calc(var(--smj-hf-header-height,72px) + 16px)}
.smj-cart__summary{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-cart__sumtitle{margin:0 0 14px;font-size:15px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--smj-text,#111827)}
.smj-cart--v2 .smj-cart__coupon{margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px}
.smj-cart__couponrow{display:flex;gap:8px;width:100%}
.smj-cart--v2 .smj-coupon-input{flex:1 1 auto;min-width:0;padding:9px 11px;font-size:13.5px;
  border:1px solid var(--smj-border,#e2e8f0);border-radius:var(--smj-radius-sm,8px)}
.smj-cart--v2 .smj-coupon-input:focus{outline:none;border-color:var(--smj-primary,#1e6eff);
  box-shadow:0 0 0 3px rgba(30,110,255,.12)}
.smj-cart--v2 .smj-cart__totals{display:flex;flex-direction:column;gap:9px;padding-top:12px;
  border-top:1px solid var(--smj-border,#eef1f4)}
.smj-cart--v2 .smj-cart__trow{display:flex;justify-content:space-between;font-size:13.5px;
  color:var(--smj-text-muted,#475569);padding:0;border:0;margin:0}
.smj-cart--v2 .smj-cart__trow span:last-child{font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--smj-text,#111827)}
.smj-cart__trow--discount span:last-child{color:#166534!important}
.smj-cart--v2 .smj-cart__trow--total{padding-top:10px;margin-top:2px;border-top:1px dashed var(--smj-border,#e2e8f0);
  font-size:15px;font-weight:800;color:var(--smj-text,#111827)}
.smj-cart--v2 .smj-cart__trow--total span:last-child{font-size:19px;color:var(--smj-primary,#1e6eff)}
.smj-cart__taxnote{font-size:11.5px;color:var(--smj-text-muted,#94a3b8);margin-top:2px}
.smj-cart--v2 .smj-cart__checkout{display:block;width:100%;text-align:center;margin-top:14px;
  padding:13px;font-size:15px;border-radius:10px;box-sizing:border-box}
.smj-cart__continue{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:600;
  color:var(--smj-text-muted,#64748b);text-decoration:none}
.smj-cart__continue:hover{color:var(--smj-primary,#1e6eff)}
.smj-cart-empty{text-align:center;padding:56px 16px}
.smj-cart-empty__ico{display:block;font-size:44px;margin-bottom:8px}
/* Row-busy state while the qty/remove AJAX runs */
.smj-cart__row.is-busy{opacity:.45;pointer-events:none;transition:opacity .15s}
@media (max-width:900px){
  .smj-cart--v2{grid-template-columns:1fr}
  .smj-cart__aside{position:static}
}
@media (max-width:520px){
  .smj-cart--v2 .smj-cart__row{grid-template-columns:72px minmax(0,1fr)}
  .smj-cart__media{width:72px;height:86px}
  .smj-cart__lineblock{grid-column:2;flex-direction:row;align-items:baseline;gap:8px;
    justify-content:flex-start;min-width:0}
}

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.94 — Theme Control (Cart tab) variable bindings.
 * Reads the --smj-cart-* variables emitted by SMJ_TC_Commerce under
 * body.smj-pg-cart. Every value falls back to the existing token, so an
 * unset control changes nothing. Scoped to the cart page only.
 * ════════════════════════════════════════════════════════════════════════ */
body.smj-pg-cart{
  background: var(--smj-cart-page-bg, transparent);
  color: var(--smj-cart-text, inherit);
  font-family: var(--smj-cart-font, inherit);
  font-size: var(--smj-cart-font-size, inherit);
  line-height: var(--smj-cart-line-height, inherit);
}
body.smj-pg-cart .smj-cart--v2{ gap: var(--smj-cart-gap, 24px); }
body.smj-pg-cart .smj-cart--v2 .smj-cart__items,
body.smj-pg-cart .smj-cart__summary{
  background: var(--smj-cart-card-bg, var(--smj-card-bg,#fff));
  border-color: var(--smj-cart-card-border, var(--smj-border,#e8ebee));
  border-radius: var(--smj-cart-card-radius, var(--smj-radius,12px));
  box-shadow: var(--smj-cart-card-shadow, 0 2px 10px rgba(15,23,42,.04));
}
body.smj-pg-cart .smj-cart__summary{ padding: var(--smj-cart-card-pad, 18px); }
body.smj-pg-cart .smj-cart__title,
body.smj-pg-cart .smj-cart__sumtitle{
  color: var(--smj-cart-heading, var(--smj-text,#111827));
  font-size: var(--smj-cart-heading-size, inherit);
  font-weight: var(--smj-cart-heading-weight, 800);
}
body.smj-pg-cart .smj-cart__count,
body.smj-pg-cart .smj-cart__variant,
body.smj-pg-cart .smj-cart__taxnote{ color: var(--smj-cart-muted, var(--smj-text-muted,#94a3b8)); }
body.smj-pg-cart .smj-cart--v2 .smj-cart__checkout{
  background: var(--smj-cart-btn-bg, var(--smj-primary));
  color: var(--smj-cart-btn-text, #fff);
  border-radius: var(--smj-cart-btn-radius, 10px);
  padding: var(--smj-cart-btn-pad-y, 13px);
  font-size: var(--smj-cart-btn-size, 15px);
}
body.smj-pg-cart .smj-cart--v2 .smj-cart__checkout:hover{
  background: var(--smj-cart-btn-hover-bg, var(--smj-primary-dk, var(--smj-primary)));
  color: var(--smj-cart-btn-hover-text, #fff);
}
body.smj-pg-cart .smj-cart--v2 .smj-coupon-input{
  background: var(--smj-cart-input-bg, #fff);
  color: var(--smj-cart-input-text, inherit);
  border-color: var(--smj-cart-input-border, var(--smj-border,#e2e8f0));
  border-radius: var(--smj-cart-input-radius, var(--smj-radius-sm,8px));
}
body.smj-pg-cart .smj-cart--v2 .smj-coupon-input:focus{
  border-color: var(--smj-cart-input-focus, var(--smj-primary));
  box-shadow: 0 0 0 3px rgba(var(--smj-cart-input-focus-rgb, 30,110,255), .12);
}
body.smj-pg-cart .smj-cart--v2 .smj-coupon-input::placeholder{ color: var(--smj-cart-placeholder, #9aa4b2); }
body.smj-pg-cart .smj-coupon-apply{
  background: var(--smj-cart-coupon-btn-bg, var(--smj-primary));
  color: var(--smj-cart-coupon-btn-text, #fff);
}
body.smj-pg-cart .smj-cart--v2 .smj-cart__trow span:first-child{ color: var(--smj-cart-sum-label, var(--smj-text-muted,#475569)); }
body.smj-pg-cart .smj-cart--v2 .smj-cart__trow span:last-child{ color: var(--smj-cart-sum-value, var(--smj-text,#111827)); }
body.smj-pg-cart .smj-cart--v2 .smj-cart__trow--total span:last-child{ color: var(--smj-cart-sum-total, var(--smj-primary)); }
body.smj-pg-cart .smj-cart__trow--discount span:last-child{ color: var(--smj-cart-discount-color, #166534) !important; }

/* ════════════════════════════════════════════════════════════════════════
 * v6.20.96 — Login-required modal (guest Add to Cart).
 * Portalled to <body>, so no card overflow/transform can clip it. Uses theme
 * tokens to match the site; falls back to sane literals off-theme.
 * ════════════════════════════════════════════════════════════════════════ */
.smj-loginpop{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;transition:opacity .2s ease}
.smj-loginpop.is-in{opacity:1}
.smj-loginpop__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.smj-loginpop__card{position:relative;width:100%;max-width:360px;background:var(--smj-card-bg,#fff);
  border-radius:16px;padding:28px 24px 24px;text-align:center;
  box-shadow:0 20px 55px rgba(15,23,42,.3);transform:translateY(10px) scale(.98);transition:transform .2s ease}
.smj-loginpop.is-in .smj-loginpop__card{transform:none}
.smj-loginpop__x{position:absolute;top:10px;right:12px;width:26px;height:26px;border:0;background:transparent;
  font-size:22px;line-height:1;color:var(--smj-text-muted,#94a3b8);cursor:pointer;border-radius:7px}
.smj-loginpop__x:hover{background:var(--smj-bg,#f4f6f8);color:var(--smj-text,#111827)}
.smj-loginpop__ico{font-size:34px;display:block;margin-bottom:6px}
.smj-loginpop__title{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--smj-text,#111827)}
.smj-loginpop__msg{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--smj-text-muted,#64748b)}
.smj-loginpop__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.smj-loginpop__btn{flex:1 1 130px;display:inline-block;background:var(--smj-primary,#1e6eff);color:#fff;
  border-radius:10px;padding:12px 16px;font-weight:700;font-size:14px;text-decoration:none;text-align:center}
.smj-loginpop__btn:hover{filter:brightness(.95)}
.smj-loginpop__btn--ghost{background:transparent;color:var(--smj-primary,#1e6eff);
  border:1.5px solid var(--smj-primary,#1e6eff)}
.smj-loginpop__btn--ghost:hover{background:rgba(30,110,255,.06);filter:none}
@media (prefers-reduced-motion:reduce){.smj-loginpop,.smj-loginpop__card{transition:none}}
@media (max-width:380px){.smj-loginpop__actions{flex-direction:column}}

/* v6.20.99 — audit bindings: every Cart-tab control now has a live target. */
body.smj-pg-cart .smj-cart--v2{max-width:var(--smj-cart-container-w,none);margin-inline:auto}
body.smj-pg-cart .smj-cart__linelbl{color:var(--smj-cart-label-color,var(--smj-text-muted,#94a3b8))}
body.smj-pg-cart .smj-cart--v2 .smj-coupon-input{background:var(--smj-cart-coupon-bg,var(--smj-cart-input-bg,#fff));border-color:var(--smj-cart-coupon-border,var(--smj-cart-input-border,var(--smj-border,#e2e8f0)))}
body.smj-pg-cart .smj-cart__summary{background:var(--smj-cart-sum-bg,var(--smj-cart-card-bg,var(--smj-card-bg,#fff)));border-color:var(--smj-cart-sum-border,var(--smj-cart-card-border,var(--smj-border,#e8ebee)))}