/**
 * File:        assets/css/jsm-member-app.css
 * Purpose:     Single-page Akun Saya dashboard. Informatif, fokus profil + tier + referral.
 *              Mobile-first dengan desktop responsive (max-width 720px container).
 *
 * Brand: navy #1F2C72 + lime #C8F133 + Plus Jakarta Sans.
 */

:root {
	--jsm-navy:        #1F2C72;
	--jsm-navy-2:      #2A3990;
	--jsm-navy-dark:   #161F52;
	--jsm-lime:        #C8F133;
	--jsm-lime-soft:   rgba(200, 241, 51, 0.15);
	--jsm-bg:          #F5F7FA;
	--jsm-white:       #FFFFFF;
	--jsm-border:      #E5E7EB;
	--jsm-text:        #1F2937;
	--jsm-text-muted:  #6B7280;
	--jsm-wa-green:    #25D366;
	--jsm-success:     #10B981;
	--jsm-radius:      16px;
	--jsm-radius-sm:   10px;
}

/* ============================================================
   Body global (scoped ke .jsm-app-body)
   ============================================================ */
.jsm-app-body {
	margin: 0;
	padding: 0;
	font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
	background: var(--jsm-bg);
	color: var(--jsm-text);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
.jsm-app-body * { box-sizing: border-box; }
.jsm-app-body button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}
.jsm-app-body a { color: var(--jsm-navy); text-decoration: none; }
.jsm-app-body h1, .jsm-app-body h2, .jsm-app-body h3 { margin: 0; }

/* ============================================================
   SHELL — single container, max-width responsive
   ============================================================ */
.jsm-akun-shell {
	max-width: 720px;
	margin: 0 auto;
	background: var(--jsm-bg);
	min-height: 100vh;
	padding-bottom: 40px;
}

/* ============================================================
   TOPBAR — minimal sticky bar
   ============================================================ */
.jsm-akun-topbar {
	background: var(--jsm-navy);
	color: var(--jsm-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	position: sticky;
	top: 0;
	z-index: 50;
}
.jsm-akun-topbar-back,
.jsm-akun-topbar-action {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsm-white);
	font-size: 18px;
	transition: background 0.15s;
}
.jsm-akun-topbar-back:hover,
.jsm-akun-topbar-action:hover { background: rgba(255,255,255,0.16); color: var(--jsm-lime); }
.jsm-akun-topbar-brand {
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.5px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.jsm-akun-hero {
	background: linear-gradient(160deg, var(--jsm-navy) 0%, var(--jsm-navy-dark) 100%);
	color: var(--jsm-white);
	position: relative;
	overflow: hidden;
	padding: 24px 20px 28px;
}
.jsm-akun-hero-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.jsm-akun-hero-bg-deco svg { width: 100%; height: 100%; }
.jsm-akun-hero-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.jsm-akun-greeting {
	font-size: 12px;
	opacity: 0.85;
	margin-bottom: 14px;
	letter-spacing: 0.5px;
}

/* Avatar */
.jsm-akun-avatar-wrap {
	position: relative;
	display: inline-block;
	margin-bottom: 12px;
}
.jsm-akun-avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--jsm-lime) 0%, #a3d12e 100%);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 32px;
	letter-spacing: 1px;
	border: 4px solid rgba(255,255,255,0.18);
	box-shadow: 0 8px 24px rgba(200,241,51,0.3);
}
.jsm-akun-tier-chip {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jsm-white);
	color: var(--jsm-navy);
	padding: 4px 12px 4px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.jsm-akun-tier-chip i { font-size: 14px; }
/* Tier colors */
.jsm-tier-bronze   { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
.jsm-tier-silver   { background: linear-gradient(135deg, #e0e0e0, #c0c0c0); color: var(--jsm-navy); }
.jsm-tier-gold     { background: linear-gradient(135deg, #ffd700, #d4a017); color: var(--jsm-navy); }
.jsm-tier-platinum { background: linear-gradient(135deg, #e5e4e2, #b3b3b3); color: var(--jsm-navy); }
.jsm-tier-diamond  { background: linear-gradient(135deg, #b9f2ff, #80d4f5); color: var(--jsm-navy); }
.jsm-tier-guest    { background: #777; color: var(--jsm-white); }

.jsm-akun-hero-name {
	font-size: 22px;
	font-weight: 800;
	color: var(--jsm-white);
	margin-top: 14px;
	line-height: 1.2;
}
.jsm-akun-hero-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.85;
}
.jsm-akun-hero-meta i {
	color: var(--jsm-lime);
	vertical-align: -2px;
	margin-right: 2px;
}

/* Spent card */
.jsm-akun-spent-card {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--jsm-radius);
	padding: 16px 18px;
	margin-top: 22px;
	text-align: left;
}
.jsm-akun-spent-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
}
.jsm-akun-spent-label {
	font-size: 11px;
	opacity: 0.8;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.jsm-akun-spent-value {
	font-size: 22px;
	font-weight: 900;
	color: var(--jsm-lime);
	line-height: 1.1;
	letter-spacing: -0.5px;
}
.jsm-akun-spent-status {
	text-align: right;
	font-size: 11px;
	opacity: 0.9;
	line-height: 1.4;
}
.jsm-akun-spent-status small { display: block; }
.jsm-akun-spent-status strong { color: var(--jsm-lime); }
.jsm-akun-spent-remain { opacity: 0.7; }

.jsm-akun-progress {
	height: 6px;
	background: rgba(255,255,255,0.18);
	border-radius: 3px;
	margin-top: 12px;
	overflow: hidden;
}
.jsm-akun-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--jsm-lime), #fff);
	border-radius: 3px;
	transition: width 0.6s ease;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.jsm-akun-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 18px 16px;
	margin-top: -16px;
	position: relative;
	z-index: 2;
}
.jsm-akun-stat {
	background: var(--jsm-white);
	border-radius: var(--jsm-radius);
	padding: 14px;
	display: flex;
	gap: 10px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
	border: 1px solid var(--jsm-border);
	align-items: center;
}
.jsm-akun-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--jsm-radius-sm);
	background: var(--jsm-lime-soft);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.jsm-akun-stat-icon-alt     { background: rgba(31,44,114,0.08); }
.jsm-akun-stat-icon-success { background: rgba(16,185,129,0.12); color: var(--jsm-success); }
.jsm-akun-stat-info { flex: 1; min-width: 0; }
.jsm-akun-stat-label {
	font-size: 10px;
	color: var(--jsm-text-muted);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.jsm-akun-stat-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--jsm-navy);
	line-height: 1.1;
	margin-top: 2px;
	letter-spacing: -0.3px;
}
.jsm-akun-stat-sub {
	font-size: 10px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}

@media (max-width: 540px) {
	.jsm-akun-stats { grid-template-columns: 1fr; gap: 8px; }
	.jsm-akun-stat { padding: 12px 14px; }
	.jsm-akun-stat-value { font-size: 22px; }
}

/* ============================================================
   SECTIONS (generic wrap)
   ============================================================ */
.jsm-akun-section {
	padding: 14px 16px 4px;
}
.jsm-akun-section-head-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.jsm-akun-section-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	gap: 8px;
}
.jsm-akun-section-title i {
	color: var(--jsm-lime);
	font-size: 22px;
	background: var(--jsm-lime-soft);
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jsm-akun-section-sub {
	font-size: 11px;
	color: var(--jsm-text-muted);
	font-weight: 600;
}

/* ============================================================
   REFERRAL CARD
   ============================================================ */
.jsm-akun-section-ref { padding-top: 8px; }
.jsm-akun-ref-card {
	background: linear-gradient(135deg, var(--jsm-navy) 0%, var(--jsm-navy-dark) 100%);
	color: var(--jsm-white);
	border-radius: var(--jsm-radius);
	padding: 22px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(31,44,114,0.2);
}
.jsm-akun-ref-card::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200,241,51,0.2), transparent 70%);
	pointer-events: none;
}
.jsm-akun-ref-label {
	font-size: 11px;
	opacity: 0.85;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}
.jsm-akun-ref-code {
	font-family: "Courier New", monospace;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: 6px;
	color: var(--jsm-lime);
	margin: 6px 0 14px;
	text-shadow: 0 4px 12px rgba(200,241,51,0.3);
	user-select: all;
}
.jsm-akun-ref-link-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.1);
	border-radius: var(--jsm-radius-sm);
	padding: 4px 4px 4px 12px;
	margin-bottom: 12px;
}
.jsm-akun-ref-link {
	flex: 1;
	font-size: 12px;
	color: var(--jsm-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
.jsm-akun-ref-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	transition: transform 0.15s;
}
.jsm-akun-ref-btn:active { transform: scale(0.92); }
.jsm-akun-ref-share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--jsm-wa-green);
	color: var(--jsm-white) !important;
	font-weight: 700;
	font-size: 14px;
	padding: 12px;
	border-radius: 999px;
	width: 100%;
	transition: opacity 0.15s;
}
.jsm-akun-ref-share:hover { opacity: 0.92; }
.jsm-akun-ref-share i { font-size: 20px; }

/* ============================================================
   TIER JOURNEY — horizontal scroll
   ============================================================ */
.jsm-akun-tier-journey {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 8px 4px 16px;
	margin: 0 -4px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.jsm-akun-tier-journey::-webkit-scrollbar { height: 4px; }
.jsm-akun-tier-journey::-webkit-scrollbar-thumb {
	background: rgba(31,44,114,0.2);
	border-radius: 2px;
}

.jsm-akun-tier-step {
	flex: 0 0 110px;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: var(--jsm-radius);
	padding: 16px 10px 12px;
	text-align: center;
	position: relative;
	scroll-snap-align: start;
	transition: transform 0.2s, box-shadow 0.2s;
}
.jsm-akun-tier-step:hover { transform: translateY(-2px); }
.jsm-akun-tier-step-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	margin: 0 auto 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.jsm-akun-tier-step-icon i { font-size: 26px; }
.jsm-akun-tier-step-name {
	font-size: 12px;
	font-weight: 800;
	color: var(--jsm-navy);
	letter-spacing: 0.5px;
}
.jsm-akun-tier-step-min {
	font-size: 10px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}
.jsm-akun-tier-step-locked {
	opacity: 0.45;
	filter: grayscale(0.4);
}
.jsm-akun-tier-step-active {
	border-color: var(--jsm-lime);
	border-width: 2px;
	box-shadow: 0 6px 18px rgba(200,241,51,0.3);
	padding: 15px 9px 11px;
}
.jsm-akun-tier-step-badge {
	margin-top: 6px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-size: 9px;
	font-weight: 900;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.5px;
	display: inline-block;
}
.jsm-akun-tier-step-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--jsm-success);
	color: var(--jsm-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.jsm-akun-tier-step-pulse {
	position: absolute;
	inset: -4px;
	border: 2px solid var(--jsm-lime);
	border-radius: 50%;
	animation: jsmTierPulse 2s ease infinite;
}
@keyframes jsmTierPulse {
	0%,100% { transform: scale(1);   opacity: 0.7; }
	50%     { transform: scale(1.1); opacity: 0; }
}

/* ============================================================
   PROFIL CARD
   ============================================================ */
.jsm-akun-btn-edit {
	background: var(--jsm-lime-soft);
	color: var(--jsm-navy);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background 0.15s;
}
.jsm-akun-btn-edit:hover { background: var(--jsm-lime); }
.jsm-akun-btn-edit i { font-size: 14px; }

.jsm-akun-profile-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: var(--jsm-radius);
	overflow: hidden;
}
.jsm-akun-profile-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--jsm-border);
	font-size: 13px;
}
.jsm-akun-profile-row:last-child { border-bottom: 0; }
.jsm-akun-profile-key {
	color: var(--jsm-text-muted);
	font-weight: 600;
}
.jsm-akun-profile-val {
	color: var(--jsm-navy);
	font-weight: 600;
	word-break: break-word;
}

@media (max-width: 540px) {
	.jsm-akun-profile-row {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: 10px 14px;
	}
	.jsm-akun-profile-key { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.jsm-akun-footer {
	padding: 20px 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.jsm-akun-footer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	transition: opacity 0.15s, transform 0.1s;
}
.jsm-akun-footer-btn:active { transform: scale(0.98); }
.jsm-akun-footer-btn i { font-size: 18px; }
.jsm-akun-footer-btn-wa {
	background: var(--jsm-wa-green);
	color: var(--jsm-white);
}
.jsm-akun-footer-btn-wa:hover { opacity: 0.92; }
.jsm-akun-footer-btn-ghost {
	background: var(--jsm-white);
	color: var(--jsm-text-muted);
	border: 1px solid var(--jsm-border);
}
.jsm-akun-footer-btn-ghost:hover { color: #c0392b; border-color: #c0392b; }
.jsm-akun-footer-brand {
	text-align: center;
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-top: 12px;
	font-weight: 600;
}

/* ============================================================
   DESKTOP TWEAK (≥720px) — bigger card, more breathing room
   ============================================================ */
@media (min-width: 720px) {
	.jsm-app-body {
		background:
			radial-gradient(circle at 10% 0%, rgba(31,44,114,0.05), transparent 50%),
			radial-gradient(circle at 90% 100%, rgba(200,241,51,0.07), transparent 50%),
			#eef0f5;
		padding: 24px 16px;
	}
	.jsm-akun-shell {
		background: var(--jsm-white);
		border-radius: 24px;
		overflow: hidden;
		box-shadow: 0 24px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
	}
	.jsm-akun-topbar {
		border-radius: 24px 24px 0 0;
	}
	.jsm-akun-hero {
		padding: 32px 32px 36px;
	}
	.jsm-akun-avatar { width: 96px; height: 96px; font-size: 36px; }
	.jsm-akun-hero-name { font-size: 26px; }
	.jsm-akun-stats {
		padding: 22px 24px;
		margin-top: -22px;
	}
	.jsm-akun-section { padding: 18px 24px 6px; }
	.jsm-akun-ref-code { font-size: 44px; letter-spacing: 8px; }
	.jsm-akun-footer { padding: 24px 24px 32px; }
}

/* ============================================================
   AUTH PAGES (login + register) — center card di tengah viewport
   ============================================================ */
.jsm-app-auth-body {
	background:
		radial-gradient(ellipse at top, rgba(200,241,51,0.08), transparent 50%),
		linear-gradient(180deg, #161F52 0%, var(--jsm-navy) 60%, var(--jsm-navy-dark) 100%);
	min-height: 100vh;
	color: var(--jsm-white);
}
.jsm-auth-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 16px 24px;
	position: relative;
}
.jsm-auth-bg-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 15% 15%, rgba(200,241,51,0.15), transparent 50%),
		radial-gradient(circle at 85% 85%, rgba(200,241,51,0.1), transparent 50%);
}
.jsm-auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--jsm-white);
	color: var(--jsm-text);
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05);
	position: relative;
	z-index: 1;
}
.jsm-auth-card-wide { max-width: 540px; }
.jsm-auth-page-wide { padding: 24px 16px; }

.jsm-auth-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
	color: var(--jsm-navy);
}
.jsm-auth-logo-mark {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsm-navy);
	font-size: 20px;
}
.jsm-auth-logo-text {
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: var(--jsm-navy);
}

.jsm-auth-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--jsm-navy);
	text-align: center;
	margin: 0 0 6px;
}
.jsm-auth-subtitle {
	font-size: 13px;
	color: var(--jsm-text-muted);
	text-align: center;
	margin: 0 0 22px;
	line-height: 1.5;
}

.jsm-auth-form { display: flex; flex-direction: column; gap: 14px; }
.jsm-auth-row { display: grid; gap: 12px; }
.jsm-auth-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
	.jsm-auth-row-2 { grid-template-columns: 1fr; }
}

.jsm-auth-field { display: flex; flex-direction: column; gap: 4px; }
.jsm-auth-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--jsm-navy);
	letter-spacing: 0.3px;
}
.jsm-auth-label small {
	font-weight: 500;
	color: var(--jsm-text-muted);
	font-size: 11px;
	margin-left: 4px;
}
.jsm-auth-req { color: #c0392b; }
.jsm-auth-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--jsm-border);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--jsm-navy);
	background: var(--jsm-white);
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.jsm-auth-input:focus {
	outline: none;
	border-color: var(--jsm-navy);
	box-shadow: 0 0 0 3px rgba(31,44,114,0.12);
}
.jsm-auth-textarea { resize: vertical; min-height: 60px; }
.jsm-auth-select { cursor: pointer; }
.jsm-auth-input-otp {
	font-family: "Courier New", monospace;
	font-size: 22px;
	letter-spacing: 8px;
	text-align: center;
	font-weight: 800;
}

.jsm-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	font-family: inherit;
	transition: opacity 0.15s, transform 0.1s;
	border: none;
	cursor: pointer;
}
.jsm-auth-btn:active { transform: scale(0.98); }
.jsm-auth-btn-primary {
	background: linear-gradient(135deg, var(--jsm-navy) 0%, var(--jsm-navy-dark) 100%);
	color: var(--jsm-lime);
	box-shadow: 0 8px 20px rgba(31,44,114,0.25);
}
.jsm-auth-btn-primary:hover { opacity: 0.95; }
.jsm-auth-btn-outline {
	background: transparent;
	color: var(--jsm-navy);
	border: 2px solid var(--jsm-border);
}
.jsm-auth-btn-outline:hover {
	border-color: var(--jsm-navy);
	background: var(--jsm-lime-soft);
}
.jsm-auth-btn i { font-size: 18px; }

.jsm-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var(--jsm-text-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
.jsm-auth-divider::before,
.jsm-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--jsm-border);
}

.jsm-auth-link {
	color: var(--jsm-navy);
	font-weight: 700;
	text-decoration: none;
	font-size: 12px;
}
.jsm-auth-link:hover { color: var(--jsm-lime); }
.jsm-auth-link[disabled] { color: var(--jsm-text-muted); cursor: not-allowed; }

.jsm-auth-otp-step {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--jsm-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.jsm-auth-otp-info {
	font-size: 12px;
	color: var(--jsm-text-muted);
	text-align: center;
}
.jsm-auth-otp-info strong { color: var(--jsm-navy); }
.jsm-auth-otp-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--jsm-text-muted);
}

.jsm-auth-tos {
	font-size: 11px;
	color: var(--jsm-text-muted);
	text-align: center;
	margin-top: 4px;
	line-height: 1.5;
}
.jsm-auth-support {
	text-align: center;
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin-top: 18px;
}
.jsm-auth-support a { color: var(--jsm-navy); font-weight: 700; }
.jsm-auth-support a:hover { color: var(--jsm-lime); }

.jsm-auth-footer-text {
	margin-top: 24px;
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	font-weight: 600;
	text-align: center;
}

/* ============================================================
   HOME / LANDING PAGE
   ============================================================ */
.jsm-app-home-body {
	background: var(--jsm-white);
	min-height: 100vh;
}
.jsm-home-shell {
	max-width: 1100px;
	margin: 0 auto;
	background: var(--jsm-white);
}

/* NAV */
.jsm-home-nav {
	background: var(--jsm-navy);
	color: var(--jsm-white);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.jsm-home-nav-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
}
.jsm-home-nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.5px;
}
.jsm-home-nav-logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.jsm-home-nav-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.jsm-home-nav-btn {
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.15s;
}
.jsm-home-nav-btn-ghost {
	color: var(--jsm-white) !important;
	background: transparent;
}
.jsm-home-nav-btn-ghost:hover { background: rgba(255,255,255,0.1); color: var(--jsm-lime) !important; }
.jsm-home-nav-btn-primary {
	background: var(--jsm-lime);
	color: var(--jsm-navy) !important;
}
.jsm-home-nav-btn-primary:hover { opacity: 0.92; }

/* HERO */
.jsm-home-hero {
	background: linear-gradient(160deg, var(--jsm-navy) 0%, var(--jsm-navy-dark) 100%);
	color: var(--jsm-white);
	position: relative;
	overflow: hidden;
	padding: 64px 20px 72px;
	text-align: center;
}
.jsm-home-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(200,241,51,0.18), transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(200,241,51,0.12), transparent 40%);
	pointer-events: none;
}
.jsm-home-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.jsm-home-eyebrow {
	display: inline-block;
	background: rgba(200,241,51,0.15);
	color: var(--jsm-lime);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.jsm-home-hero-title {
	font-size: 38px;
	font-weight: 900;
	color: var(--jsm-white);
	line-height: 1.1;
	letter-spacing: -1px;
	margin: 0 0 14px;
}
.jsm-home-accent {
	color: var(--jsm-lime);
}
.jsm-home-hero-tagline {
	font-size: 16px;
	color: rgba(255,255,255,0.85);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto 26px;
}
.jsm-home-hero-cta {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.jsm-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.3px;
	transition: transform 0.1s, opacity 0.15s;
	border: 2px solid transparent;
}
.jsm-home-btn:active { transform: scale(0.98); }
.jsm-home-btn-primary {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
}
.jsm-home-btn-primary:hover { opacity: 0.92; }
.jsm-home-btn-outline {
	background: transparent;
	color: var(--jsm-white) !important;
	border-color: rgba(255,255,255,0.3);
}
.jsm-home-btn-outline:hover { border-color: var(--jsm-lime); color: var(--jsm-lime) !important; }
.jsm-home-btn-primary-inverse {
	background: var(--jsm-navy);
	color: var(--jsm-lime) !important;
}
.jsm-home-btn-wa-inverse {
	background: var(--jsm-wa-green);
	color: var(--jsm-white) !important;
}

.jsm-home-hero-trust {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 12px;
	color: rgba(255,255,255,0.75);
}
.jsm-home-hero-trust i { color: var(--jsm-lime); margin-right: 4px; vertical-align: -2px; }

/* SECTIONS */
.jsm-home-section {
	padding: 56px 20px;
	background: var(--jsm-white);
}
.jsm-home-section-alt {
	background: var(--jsm-bg);
}
.jsm-home-section-head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 36px;
}
.jsm-home-section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--jsm-navy);
	opacity: 0.7;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.jsm-home-section-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--jsm-navy);
	line-height: 1.3;
	letter-spacing: -0.3px;
}

/* USP grid */
.jsm-home-usp-grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 768px) {
	.jsm-home-usp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.jsm-home-usp-grid { grid-template-columns: 1fr; }
}
.jsm-home-usp {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 16px;
	padding: 20px;
	transition: transform 0.15s, box-shadow 0.15s;
}
.jsm-home-usp:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	border-color: var(--jsm-lime);
}
.jsm-home-usp-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 14px;
}
.jsm-home-usp h3 {
	font-size: 15px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 6px;
	letter-spacing: -0.2px;
}
.jsm-home-usp p {
	font-size: 13px;
	color: var(--jsm-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* 3-step grid */
.jsm-home-step-grid {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 640px) {
	.jsm-home-step-grid { grid-template-columns: 1fr; }
}
.jsm-home-step {
	background: var(--jsm-white);
	border-radius: 16px;
	padding: 32px 20px 22px;
	text-align: center;
	position: relative;
	box-shadow: 0 4px 16px rgba(0,0,0,0.05);
	border: 1px solid var(--jsm-border);
}
.jsm-home-step-num {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-weight: 900;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(200,241,51,0.35);
}
.jsm-home-step-icon {
	font-size: 32px;
	color: var(--jsm-navy);
	margin-bottom: 10px;
}
.jsm-home-step h3 {
	font-size: 15px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 4px;
}
.jsm-home-step p {
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin: 0;
}

/* FINAL CTA */
.jsm-home-final-cta {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	padding: 56px 20px;
	text-align: center;
}
.jsm-home-final-cta h2 {
	font-size: 28px;
	font-weight: 900;
	margin: 0 0 8px;
	letter-spacing: -0.5px;
}
.jsm-home-final-cta p {
	font-size: 14px;
	margin: 0 0 22px;
	color: rgba(31,44,114,0.85);
}
.jsm-home-final-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* FOOTER */
.jsm-home-footer {
	background: #0F1A4D;
	color: rgba(255,255,255,0.7);
	padding: 24px 20px 32px;
	text-align: center;
	font-size: 12px;
}
.jsm-home-footer-brand {
	color: var(--jsm-white);
	font-weight: 800;
	font-size: 14px;
	margin-bottom: 6px;
}
.jsm-home-footer-meta {
	margin-top: 4px;
	font-size: 11px;
}
.jsm-home-footer-meta i {
	color: var(--jsm-lime);
	vertical-align: -2px;
	margin-right: 4px;
}

@media (max-width: 540px) {
	.jsm-home-hero { padding: 44px 18px 52px; }
	.jsm-home-hero-title { font-size: 28px; }
	.jsm-home-hero-tagline { font-size: 14px; }
	.jsm-home-section { padding: 36px 16px; }
	.jsm-home-section-title { font-size: 22px; }
	.jsm-home-final-cta h2 { font-size: 22px; }
}

/* ============================================================
   REFERRAL DETAIL MODAL — list orang yang diajak
   ============================================================ */
.jsm-modal-dialog-ref {
	max-width: 480px !important;
	padding: 26px 22px !important;
}
.jsm-ref-modal-list {
	max-height: 360px;
	overflow-y: auto;
	margin: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 2px;
}
.jsm-ref-modal-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 10px 12px;
}
.jsm-ref-modal-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
	flex-shrink: 0;
}
.jsm-ref-modal-info { flex: 1; min-width: 0; }
.jsm-ref-modal-name {
	font-weight: 700;
	font-size: 13px;
	color: var(--jsm-navy);
	font-family: "Courier New", monospace;
	letter-spacing: 0.5px;
}
.jsm-ref-modal-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}
.jsm-ref-modal-meta i { vertical-align: -2px; margin-right: 2px; color: var(--jsm-navy); opacity: 0.6; }
.jsm-ref-modal-com {
	text-align: right;
	flex-shrink: 0;
}
.jsm-ref-modal-com small {
	display: block;
	font-size: 9px;
	color: var(--jsm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.jsm-ref-modal-com strong {
	font-size: 14px;
	font-weight: 800;
	color: var(--jsm-success);
}

.jsm-ref-modal-totals {
	border-top: 2px dashed var(--jsm-border);
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jsm-ref-modal-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--jsm-text-muted);
	padding: 6px 4px;
}
.jsm-ref-modal-total-row strong {
	font-weight: 800;
	font-size: 14px;
	color: var(--jsm-navy);
}
.jsm-ref-modal-total-highlight {
	background: var(--jsm-lime-soft);
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 4px;
}
.jsm-ref-modal-total-highlight span { color: var(--jsm-navy); font-weight: 700; }
.jsm-ref-modal-total-highlight strong {
	font-size: 18px;
	color: var(--jsm-navy);
}

/* Custom scrollbar untuk list */
.jsm-ref-modal-list::-webkit-scrollbar { width: 5px; }
.jsm-ref-modal-list::-webkit-scrollbar-thumb {
	background: rgba(31,44,114,0.2);
	border-radius: 3px;
}

/* ============================================================
   LANDING — Section baru (Ribbon, Products, Pain, Tiers, Store)
   ============================================================ */

/* RIBBON di atas hero */
.jsm-home-ribbon {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 1px;
	text-align: center;
	padding: 12px 20px;
}

/* Section dark variant (navy bg) */
.jsm-home-section-dark {
	background: var(--jsm-navy-dark);
	color: var(--jsm-white);
}
.jsm-eyebrow-light { color: var(--jsm-lime) !important; opacity: 1 !important; }
.jsm-title-light   { color: var(--jsm-white) !important; }
.jsm-desc-light    { color: rgba(255,255,255,0.75); }
.jsm-home-section-desc {
	font-size: 14px;
	color: var(--jsm-text-muted);
	margin-top: 6px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* PRODUCTS — 6 kategori LED */
.jsm-home-product-grid {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 640px) {
	.jsm-home-product-grid { grid-template-columns: repeat(2, 1fr); }
}
.jsm-home-product-card {
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.jsm-home-product-card:hover {
	transform: translateY(-2px);
	border-color: var(--jsm-lime);
	box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.jsm-home-product-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	border-radius: 14px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}
.jsm-home-product-name {
	font-weight: 800;
	font-size: 13px;
	color: var(--jsm-navy);
}
.jsm-home-product-sub {
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}
.jsm-home-product-badge {
	margin: 22px auto 0;
	max-width: 360px;
	background: var(--jsm-navy);
	color: var(--jsm-white);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
}
.jsm-home-product-badge i {
	color: var(--jsm-lime);
	font-size: 18px;
}

/* PAIN POINTS — 3 card */
.jsm-home-pain-grid {
	max-width: 700px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 640px) {
	.jsm-home-pain-grid { grid-template-columns: 1fr; }
}
.jsm-home-pain-card {
	background: rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 20px 14px;
	text-align: center;
	color: var(--jsm-white);
	border: 1px solid rgba(255,255,255,0.06);
}
.jsm-home-pain-card i {
	font-size: 32px;
	color: var(--jsm-lime);
	margin-bottom: 8px;
	display: block;
}
.jsm-home-pain-card h3 {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--jsm-white);
}
.jsm-home-pain-card p {
	font-size: 12px;
	color: rgba(255,255,255,0.7);
	margin: 0;
}
.jsm-home-pain-cta {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--jsm-lime);
	margin-top: 24px;
}

/* TIER GRID — 5 step visual */
.jsm-home-tier-grid {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	padding: 0 12px;
}
@media (max-width: 720px) {
	.jsm-home-tier-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
	.jsm-home-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
.jsm-home-tier-step {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 18px 10px 14px;
	text-align: center;
	position: relative;
	transition: transform 0.15s;
}
.jsm-home-tier-step:hover { transform: translateY(-2px); }
.jsm-home-tier-popular {
	background: rgba(200,241,51,0.12);
	border-color: var(--jsm-lime);
	box-shadow: 0 8px 24px rgba(200,241,51,0.2);
	padding-top: 26px;
}
.jsm-home-tier-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-size: 9px;
	font-weight: 900;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 1px;
	white-space: nowrap;
}
.jsm-home-tier-icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.jsm-home-tier-name {
	font-weight: 800;
	font-size: 13px;
	color: var(--jsm-white);
	letter-spacing: 0.5px;
}
.jsm-home-tier-popular .jsm-home-tier-name { color: var(--jsm-lime); }
.jsm-home-tier-min {
	font-size: 11px;
	color: rgba(255,255,255,0.65);
	margin-top: 2px;
}

/* STORE SECTION */
.jsm-home-store-wrap {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: stretch;
}
@media (max-width: 760px) {
	.jsm-home-store-wrap { grid-template-columns: 1fr; }
}
.jsm-home-store-map {
	border-radius: 16px;
	overflow: hidden;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jsm-home-store-map iframe { display: block; }
.jsm-home-store-map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--jsm-text-muted);
}
.jsm-home-store-map-placeholder i {
	font-size: 56px;
	color: var(--jsm-lime);
}
.jsm-home-store-map-placeholder span {
	font-weight: 700;
	font-size: 14px;
	color: var(--jsm-navy);
}
.jsm-home-store-map-placeholder small { font-size: 11px; }

.jsm-home-store-info {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.jsm-home-store-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.jsm-home-store-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.jsm-home-store-label {
	font-weight: 700;
	font-size: 12px;
	color: var(--jsm-navy);
	margin-bottom: 2px;
}
.jsm-home-store-value {
	font-size: 13px;
	color: var(--jsm-text-muted);
	line-height: 1.5;
}
.jsm-home-store-fac {
	border-top: 1px solid var(--jsm-border);
	padding-top: 14px;
}
.jsm-home-store-fac-label {
	font-weight: 700;
	font-size: 12px;
	color: var(--jsm-navy);
	margin-bottom: 8px;
}
.jsm-home-store-fac-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	font-size: 12px;
	color: var(--jsm-text);
}
.jsm-home-store-fac-grid span {
	display: flex;
	align-items: center;
	gap: 6px;
}
.jsm-home-store-fac-grid i {
	color: var(--jsm-navy);
	opacity: 0.7;
	font-size: 14px;
}
.jsm-home-store-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.jsm-home-store-actions .jsm-home-btn {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	font-size: 12px;
}

/* ============================================================
   LANDING — Sprint B sections (Paket Starter, Referral, Testimoni, App Preview)
   ============================================================ */

/* Eyebrow pill (untuk section Paket Starter) */
.jsm-home-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.jsm-home-eyebrow-pill i { font-size: 14px; }
.jsm-home-highlight {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	padding: 0 8px;
	border-radius: 4px;
}

/* PAKET STARTER */
.jsm-home-section-starter {
	background: var(--jsm-bg);
}
.jsm-home-starter-grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
@media (max-width: 720px) {
	.jsm-home-starter-grid { grid-template-columns: 1fr; }
}
.jsm-home-starter-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 18px;
	padding: 22px 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
}
.jsm-home-starter-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.jsm-home-starter-featured {
	border: 2px solid var(--jsm-lime);
	box-shadow: 0 8px 24px rgba(200,241,51,0.2);
}
.jsm-home-starter-ribbon {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	padding: 5px 16px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 1px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.jsm-home-starter-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.jsm-home-starter-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--jsm-lime-soft);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.jsm-home-starter-persona {
	font-size: 10px;
	font-weight: 800;
	color: var(--jsm-text-muted);
	letter-spacing: 1px;
}
.jsm-home-starter-name {
	font-weight: 800;
	font-size: 16px;
	color: var(--jsm-navy);
	letter-spacing: -0.3px;
}
.jsm-home-starter-tagline {
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin-bottom: 12px;
	line-height: 1.5;
}
.jsm-home-starter-price {
	font-weight: 900;
	font-size: 26px;
	color: var(--jsm-navy);
	letter-spacing: -0.5px;
	line-height: 1.1;
}
.jsm-home-starter-profit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #E8F5E9;
	color: #2E7D32;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	margin: 8px 0 14px;
	width: max-content;
}
.jsm-home-starter-items {
	list-style: none;
	padding: 14px 0 0;
	margin: 0;
	border-top: 1px solid var(--jsm-border);
	flex: 1;
}
.jsm-home-starter-items li {
	font-size: 12px;
	color: var(--jsm-text);
	padding: 5px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.jsm-home-starter-items i {
	color: var(--jsm-navy);
	font-size: 14px;
	flex-shrink: 0;
}
.jsm-home-btn-outline-dark {
	background: var(--jsm-white);
	color: var(--jsm-navy) !important;
	border: 2px solid var(--jsm-navy);
}
.jsm-home-btn-outline-dark:hover { background: var(--jsm-lime-soft); }

.jsm-home-starter-help {
	max-width: 720px;
	margin: 22px auto 0;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.jsm-home-starter-help-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.jsm-home-starter-help-text {
	flex: 1;
	min-width: 0;
}
.jsm-home-starter-help-text strong {
	display: block;
	font-size: 13px;
	color: var(--jsm-navy);
	margin-bottom: 2px;
}
.jsm-home-starter-help-text small {
	display: block;
	font-size: 11px;
	color: var(--jsm-text-muted);
}

/* REFERRAL TABLE */
.jsm-home-section-referral {
	background: var(--jsm-white);
}
.jsm-home-ref-table-wrap {
	max-width: 560px;
	margin: 0 auto;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.jsm-home-ref-table {
	width: 100%;
	border-collapse: collapse;
}
.jsm-home-ref-table th {
	background: var(--jsm-navy);
	color: var(--jsm-white);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 14px 18px;
	text-align: left;
}
.jsm-home-ref-table th:last-child { text-align: right; }
.jsm-home-ref-table td {
	padding: 12px 18px;
	font-size: 14px;
	color: var(--jsm-text);
	border-top: 1px solid var(--jsm-border);
}
.jsm-home-ref-table td:last-child { text-align: right; }
.jsm-home-ref-table td strong { color: var(--jsm-navy); font-size: 16px; }
.jsm-home-ref-row-top { background: var(--jsm-lime-soft); }
.jsm-home-ref-row-top td strong { color: var(--jsm-navy); }
.jsm-home-ref-note {
	max-width: 560px;
	margin: 14px auto 0;
	font-size: 12px;
	color: var(--jsm-text-muted);
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 0 6px;
	line-height: 1.5;
}
.jsm-home-ref-note i { color: var(--jsm-navy); flex-shrink: 0; margin-top: 1px; }

/* TESTIMONI */
.jsm-home-section-testi { background: var(--jsm-bg); }
.jsm-home-testi-grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 820px) { .jsm-home-testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .jsm-home-testi-grid { grid-template-columns: 1fr; } }
.jsm-home-testi-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.jsm-home-testi-stars {
	display: flex;
	gap: 2px;
	color: #FFC107;
	margin-bottom: 8px;
	font-size: 16px;
}
.jsm-home-testi-stars i.ti-star { color: #DDD; }
.jsm-home-testi-quote {
	font-size: 13px;
	color: var(--jsm-text);
	line-height: 1.6;
	margin: 0 0 14px;
	flex: 1;
	font-style: italic;
}
.jsm-home-testi-author {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--jsm-border);
	padding-top: 12px;
}
.jsm-home-testi-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
}
.jsm-home-testi-name {
	font-weight: 800;
	font-size: 13px;
	color: var(--jsm-navy);
}
.jsm-home-testi-meta {
	font-size: 11px;
	color: var(--jsm-text-muted);
}

/* APP PREVIEW */
.jsm-home-section-preview {
	background: var(--jsm-white);
}
.jsm-home-preview-wrap {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: center;
}
@media (max-width: 820px) {
	.jsm-home-preview-wrap { grid-template-columns: 1fr; gap: 28px; }
	.jsm-home-preview-phone { order: -1; }
}
.jsm-home-preview-features {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.jsm-home-preview-feat {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px;
	background: var(--jsm-bg);
	border-radius: 12px;
}
.jsm-home-preview-feat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.jsm-home-preview-feat strong {
	display: block;
	font-size: 14px;
	color: var(--jsm-navy);
	margin-bottom: 2px;
}
.jsm-home-preview-feat small {
	display: block;
	font-size: 12px;
	color: var(--jsm-text-muted);
}
.jsm-home-preview-phone {
	display: flex;
	justify-content: center;
}
.jsm-home-preview-phone-frame {
	width: 280px;
	background: #1a1a1a;
	border-radius: 36px;
	padding: 8px;
	box-shadow: 0 24px 48px rgba(0,0,0,0.18);
}
.jsm-home-preview-screen {
	background: var(--jsm-bg);
	border-radius: 28px;
	overflow: hidden;
	min-height: 380px;
	display: flex;
	flex-direction: column;
}
.jsm-home-preview-screen-hero {
	background: linear-gradient(160deg, var(--jsm-navy) 0%, var(--jsm-navy-dark) 100%);
	color: var(--jsm-white);
	padding: 28px 20px;
	text-align: center;
}
.jsm-home-preview-screen-avatar {
	width: 62px;
	height: 62px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--jsm-lime), #a3d12e);
	color: var(--jsm-navy);
	font-weight: 900;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid rgba(255,255,255,0.18);
}
.jsm-home-preview-screen-greeting {
	font-size: 10px;
	opacity: 0.75;
}
.jsm-home-preview-screen-name {
	font-weight: 800;
	font-size: 15px;
	color: var(--jsm-white);
}
.jsm-home-preview-screen-tier {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--jsm-white);
	color: var(--jsm-navy);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	margin-top: 8px;
	letter-spacing: 0.5px;
}
.jsm-home-preview-screen-stats {
	background: var(--jsm-white);
	margin: 14px;
	border-radius: 14px;
	padding: 14px 12px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.jsm-home-preview-screen-stats > div {
	text-align: center;
}
.jsm-home-preview-screen-stats small {
	font-size: 9px;
	color: var(--jsm-text-muted);
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
}
.jsm-home-preview-screen-stats strong {
	display: block;
	font-size: 14px;
	color: var(--jsm-navy);
	font-weight: 900;
	margin-top: 2px;
}

/* Auth back link (di atas card) */
.jsm-auth-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.85) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	margin-bottom: 16px;
	transition: background 0.15s, color 0.15s;
	position: relative;
	z-index: 2;
}
.jsm-auth-back:hover {
	background: rgba(200,241,51,0.18);
	color: var(--jsm-lime) !important;
	border-color: var(--jsm-lime);
}
.jsm-auth-back i { font-size: 16px; }

/* ============================================================
   GLOBAL HEADER — dipakai di semua page plugin (beranda/daftar/akun)
   ============================================================ */
.jsm-global-nav {
	background: var(--jsm-navy);
	color: var(--jsm-white);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.jsm-global-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 20px;
}

/* Brand (logo + text) */
.jsm-global-nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--jsm-white) !important;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-decoration: none;
	flex-shrink: 0;
}
.jsm-global-nav-brand:hover { color: var(--jsm-lime) !important; }
.jsm-global-nav-logo {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

/* Nav links (tengah) */
.jsm-global-nav-links {
	display: flex;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
.jsm-global-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.75) !important;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
	white-space: nowrap;
}
.jsm-global-nav-link:hover {
	color: var(--jsm-lime) !important;
	background: rgba(255,255,255,0.05);
}
.jsm-global-nav-link-active {
	color: var(--jsm-navy) !important;
	background: var(--jsm-lime) !important;
}
.jsm-global-nav-link-active:hover {
	color: var(--jsm-navy) !important;
	background: var(--jsm-lime) !important;
	opacity: 0.92;
}
.jsm-global-nav-link i { font-size: 16px; }

/* Action button (kanan) */
.jsm-global-nav-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.jsm-global-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.jsm-global-nav-btn i { font-size: 16px; }
.jsm-global-nav-btn-ghost {
	background: rgba(255,255,255,0.08);
	color: var(--jsm-white);
	border: 1px solid rgba(255,255,255,0.12);
}
.jsm-global-nav-btn-ghost:hover {
	background: rgba(255,255,255,0.16);
	color: var(--jsm-lime);
}
.jsm-global-nav-btn-primary {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
}
.jsm-global-nav-btn-primary:hover { opacity: 0.92; }

/* Mobile (≤640px): collapse — sembunyikan text di nav link, tampilkan icon saja */
@media (max-width: 720px) {
	.jsm-global-nav-inner {
		padding: 10px 14px;
		gap: 10px;
	}
	.jsm-global-nav-brand span {
		font-size: 12px;
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.jsm-global-nav-link span,
	.jsm-global-nav-btn span {
		display: none;
	}
	.jsm-global-nav-link,
	.jsm-global-nav-btn {
		padding: 8px 12px;
	}
	.jsm-global-nav-link i,
	.jsm-global-nav-btn i {
		font-size: 18px;
	}
}
@media (max-width: 420px) {
	.jsm-global-nav-brand span { max-width: 70px; font-size: 11px; }
	.jsm-global-nav-logo { width: 30px; height: 30px; font-size: 17px; }
}

/* Hide old nav (jsm-home-nav) kalau masih ada — sudah replace dengan global */
.jsm-home-nav { display: none !important; }

/* Hide old topbar akun page — sudah replace dengan global */
.jsm-akun-topbar { display: none !important; }

/* Akun shell adjust — tidak perlu padding atas khusus karena sudah ada global header sticky */
@media (min-width: 720px) {
	.jsm-akun-shell .jsm-akun-topbar + section { border-radius: 0; }
}

/* ============================================================
   E-COMMERCE — Katalog, Cart, Checkout
   ============================================================ */

.jsm-app-shop-body { background: var(--jsm-bg); }

/* Mini cart badge di global nav */
.jsm-global-cart-btn { position: relative; }
.jsm-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-size: 10px;
	font-weight: 800;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border: 2px solid var(--jsm-navy);
}
.jsm-cart-badge[hidden] { display: none; }
.jsm-global-nav-btn-active {
	background: var(--jsm-lime) !important;
	color: var(--jsm-navy) !important;
}

/* CATALOG */
.jsm-shop-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}
.jsm-shop-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.jsm-shop-head h1 {
	font-size: 24px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 4px;
}
.jsm-shop-head p {
	font-size: 13px;
	color: var(--jsm-text-muted);
	margin: 0;
}
.jsm-shop-search {
	display: flex;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 999px;
	overflow: hidden;
	min-width: 240px;
}
.jsm-shop-search input {
	border: 0;
	padding: 10px 16px;
	font-size: 14px;
	flex: 1;
	background: transparent;
	color: var(--jsm-navy);
}
.jsm-shop-search input:focus { outline: none; }
.jsm-shop-search button {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	padding: 0 16px;
	font-size: 18px;
}

.jsm-shop-cats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--jsm-border);
}
.jsm-shop-cat {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	font-size: 12px;
	font-weight: 600;
	color: var(--jsm-navy);
	text-decoration: none;
	transition: all 0.15s;
}
.jsm-shop-cat:hover {
	border-color: var(--jsm-navy);
	color: var(--jsm-navy);
}
.jsm-shop-cat-active {
	background: var(--jsm-navy);
	color: var(--jsm-white);
	border-color: var(--jsm-navy);
}

.jsm-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 980px) { .jsm-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .jsm-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .jsm-shop-grid { grid-template-columns: 1fr; } }

.jsm-shop-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
}
.jsm-shop-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.jsm-shop-card-img {
	background: var(--jsm-bg);
	aspect-ratio: 1;
	position: relative;
	overflow: hidden;
}
.jsm-shop-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jsm-shop-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--jsm-text-muted);
	font-size: 48px;
	opacity: 0.4;
}
.jsm-shop-card-sold-out,
.jsm-shop-card-low-stock {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--jsm-danger);
	color: var(--jsm-white);
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.jsm-shop-card-low-stock { background: #f7b500; color: var(--jsm-navy); }
.jsm-shop-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.jsm-shop-card-sku {
	font-family: "Courier New", monospace;
	font-size: 10px;
	color: var(--jsm-text-muted);
	font-weight: 600;
	margin-bottom: 4px;
}
.jsm-shop-card-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--jsm-navy);
	margin: 0 0 8px;
	line-height: 1.3;
	min-height: 34px;
}
.jsm-shop-card-price {
	margin-bottom: 10px;
}
.jsm-shop-card-price strong {
	font-size: 16px;
	font-weight: 900;
	color: var(--jsm-navy);
	letter-spacing: -0.3px;
}
.jsm-shop-card-price small {
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-left: 4px;
}
.jsm-shop-card-price-locked {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--jsm-text-muted);
	font-weight: 600;
}
.jsm-shop-card-btn {
	margin-top: auto;
	padding: 9px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 12px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	border: none;
	font-family: inherit;
	transition: opacity 0.15s;
}
.jsm-shop-card-btn:hover { opacity: 0.92; }
.jsm-shop-card-btn-outline {
	background: var(--jsm-white);
	color: var(--jsm-navy);
	border: 1px solid var(--jsm-navy);
}
.jsm-shop-card-btn-disabled {
	background: #eee;
	color: #999;
	cursor: not-allowed;
}

.jsm-shop-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--jsm-text-muted);
}
.jsm-shop-empty i { font-size: 64px; opacity: 0.4; }
.jsm-shop-empty h3 { font-size: 18px; color: var(--jsm-navy); margin: 12px 0 4px; }
.jsm-shop-empty p { font-size: 13px; }

.jsm-shop-pagination {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-top: 30px;
}
.jsm-shop-pagination a {
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--jsm-navy);
	text-decoration: none;
}
.jsm-shop-pagination a:hover { background: var(--jsm-lime-soft); }
.jsm-shop-pagination a.active {
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	border-color: var(--jsm-navy);
}

/* CART PAGE */
.jsm-cart-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}
.jsm-cart-title {
	font-size: 24px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 22px;
}
.jsm-cart-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 22px;
	align-items: start;
}
@media (max-width: 820px) {
	.jsm-cart-layout { grid-template-columns: 1fr; }
}
.jsm-cart-items { display: flex; flex-direction: column; gap: 10px; }
.jsm-cart-item {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 14px;
	display: grid;
	grid-template-columns: 72px 1fr auto auto auto;
	gap: 14px;
	align-items: center;
}
@media (max-width: 580px) {
	.jsm-cart-item {
		grid-template-columns: 72px 1fr auto;
		grid-template-rows: auto auto;
	}
	.jsm-cart-item-qty {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
	.jsm-cart-item-subtotal { grid-column: 2 / 3; }
	.jsm-cart-item-remove { grid-column: 3; grid-row: 1; }
}
.jsm-cart-item-img {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--jsm-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jsm-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.jsm-cart-item-img-placeholder { color: var(--jsm-text-muted); font-size: 28px; opacity: 0.5; }
.jsm-cart-item-info { min-width: 0; }
.jsm-cart-item-sku {
	font-family: "Courier New", monospace;
	font-size: 10px;
	color: var(--jsm-text-muted);
	font-weight: 600;
}
.jsm-cart-item-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--jsm-navy);
	margin: 2px 0;
}
.jsm-cart-item-price { font-size: 12px; color: var(--jsm-text-muted); }
.jsm-cart-item-qty {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	padding: 2px;
}
.jsm-qty-btn {
	width: 28px;
	height: 28px;
	background: var(--jsm-bg);
	color: var(--jsm-navy);
	font-weight: 800;
	font-size: 16px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
}
.jsm-qty-btn:hover { background: var(--jsm-lime-soft); }
.jsm-qty-input {
	width: 48px;
	border: none;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--jsm-navy);
	background: transparent;
	font-family: inherit;
	-moz-appearance: textfield;
}
.jsm-qty-input::-webkit-outer-spin-button,
.jsm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jsm-cart-item-subtotal { text-align: right; }
.jsm-cart-item-subtotal small {
	display: block;
	font-size: 10px;
	color: var(--jsm-text-muted);
	text-transform: uppercase;
	font-weight: 700;
}
.jsm-cart-item-subtotal strong {
	display: block;
	font-size: 14px;
	color: var(--jsm-navy);
	font-weight: 800;
}
.jsm-cart-item-remove {
	background: transparent;
	color: var(--jsm-danger);
	font-size: 18px;
	border: none;
	padding: 6px;
	cursor: pointer;
	border-radius: 6px;
}
.jsm-cart-item-remove:hover { background: rgba(192,57,43,0.1); }

.jsm-cart-summary {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 18px;
	position: sticky;
	top: 80px;
}
.jsm-cart-summary h3 {
	font-size: 16px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--jsm-border);
}
.jsm-cart-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 13px;
	color: var(--jsm-text-muted);
}
.jsm-cart-summary-row strong { color: var(--jsm-navy); font-weight: 700; }
.jsm-cart-summary-total {
	border-top: 2px solid var(--jsm-border);
	margin-top: 8px;
	padding-top: 14px;
	font-size: 15px;
}
.jsm-cart-summary-total span { color: var(--jsm-navy); font-weight: 700; }
.jsm-cart-summary-total strong { font-size: 18px; color: var(--jsm-navy); }

.jsm-cart-continue {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 12px;
	color: var(--jsm-text-muted);
	font-weight: 600;
}
.jsm-cart-continue:hover { color: var(--jsm-navy); }

/* CHECKOUT PAGE */
.jsm-checkout-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}
.jsm-checkout-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 22px;
	align-items: start;
}
@media (max-width: 820px) {
	.jsm-checkout-layout { grid-template-columns: 1fr; }
}
.jsm-checkout-main { display: flex; flex-direction: column; gap: 14px; }
.jsm-checkout-section {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 18px;
}
.jsm-checkout-section h3 {
	font-size: 14px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.jsm-checkout-section h3 i {
	color: var(--jsm-lime);
	background: var(--jsm-lime-soft);
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.jsm-checkout-pickup-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}
.jsm-checkout-pickup-active,
.jsm-checkout-pickup-disabled {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--jsm-border);
}
.jsm-checkout-pickup-active {
	background: var(--jsm-lime-soft);
	border-color: var(--jsm-lime);
	border-width: 2px;
}
.jsm-checkout-pickup-active > i { font-size: 22px; color: var(--jsm-navy); }
.jsm-checkout-pickup-active strong { display: block; font-size: 13px; color: var(--jsm-navy); }
.jsm-checkout-pickup-active small { display: block; font-size: 11px; color: var(--jsm-text-muted); }
.jsm-checkout-pickup-active > div { flex: 1; }
.jsm-checkout-pickup-tag {
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	font-size: 9px;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 800;
	letter-spacing: 0.5px;
}
.jsm-checkout-pickup-disabled {
	opacity: 0.45;
}
.jsm-checkout-pickup-disabled > i { font-size: 20px; color: var(--jsm-text-muted); }
.jsm-checkout-pickup-disabled strong { display: block; font-size: 13px; color: var(--jsm-text); }
.jsm-checkout-pickup-disabled small { display: block; font-size: 11px; color: var(--jsm-text-muted); }
.jsm-checkout-pickup-disabled > div { flex: 1; }

.jsm-checkout-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px;
}
.jsm-checkout-field label {
	font-size: 12px;
	font-weight: 700;
	color: var(--jsm-navy);
}
.jsm-checkout-field input,
.jsm-checkout-field textarea {
	padding: 10px 12px;
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
}
.jsm-checkout-field input:focus,
.jsm-checkout-field textarea:focus {
	outline: none;
	border-color: var(--jsm-navy);
}
.jsm-checkout-field small {
	font-size: 11px;
	color: var(--jsm-text-muted);
}

.jsm-checkout-pay {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	border: 1px solid var(--jsm-border);
	border-radius: 10px;
	cursor: pointer;
	margin-bottom: 6px;
	transition: border-color 0.15s, background 0.15s;
}
.jsm-checkout-pay:hover { border-color: var(--jsm-navy); }
.jsm-checkout-pay input { margin-top: 4px; accent-color: var(--jsm-navy); }
.jsm-checkout-pay strong { display: block; font-size: 13px; color: var(--jsm-navy); }
.jsm-checkout-pay small { display: block; font-size: 11px; color: var(--jsm-text-muted); }
.jsm-checkout-pay:has(input:checked) {
	background: var(--jsm-lime-soft);
	border-color: var(--jsm-lime);
	border-width: 2px;
	padding: 11px 13px;
}
.jsm-checkout-pay-special { border-color: var(--jsm-lime); }

.jsm-checkout-items-list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 240px;
	overflow-y: auto;
}
.jsm-checkout-items-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: var(--jsm-text);
	padding: 6px 0;
	border-bottom: 1px dashed var(--jsm-border);
}
.jsm-checkout-items-list li:last-child { border-bottom: 0; }
.jsm-checkout-items-list small { color: var(--jsm-text-muted); }
.jsm-checkout-items-list strong { color: var(--jsm-navy); font-weight: 700; flex-shrink: 0; }

/* Paket starter — product list label */
.jsm-home-starter-prod-label {
	font-size: 11px;
	font-weight: 800;
	color: var(--jsm-navy);
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px dashed var(--jsm-border);
	letter-spacing: 0.3px;
}
.jsm-home-starter-prod-list li i { color: var(--jsm-lime) !important; }

/* Cart-related polish — empty input qty (mobile) */
.jsm-shop-card-img img {
	transition: transform 0.3s;
}
.jsm-shop-card:hover .jsm-shop-card-img img {
	transform: scale(1.05);
}

/* Toast info variant */
.jsm-toast.jsm-toast-info {
	background: rgba(31,44,114,0.95);
	color: #fff;
}

/* ============================================================
   CART / CHECKOUT — Guest mode polish
   ============================================================ */
.jsm-cart-guest-notice {
	max-width: 1100px;
	margin: 0 auto 18px;
	background: #FFF4D5;
	border-left: 4px solid #F7B500;
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: #6B4F00;
	font-size: 13px;
	line-height: 1.5;
}
.jsm-cart-guest-notice i { font-size: 22px; color: #F7B500; flex-shrink: 0; }
.jsm-cart-guest-notice strong { display: block; color: var(--jsm-navy); margin-bottom: 2px; }

.jsm-shop-card-price-hint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--jsm-text-muted);
	font-weight: 600;
	margin-top: 4px;
}
.jsm-shop-card-price-hint i { color: var(--jsm-navy); }

/* CHECKOUT STEPPER */
.jsm-checkout-stepper {
	max-width: 1100px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 14px 18px;
}
.jsm-step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--jsm-text-muted);
	font-size: 12px;
	font-weight: 600;
}
.jsm-step:not(:last-child)::after {
	content: '→';
	margin-left: 12px;
	color: var(--jsm-border);
}
.jsm-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
}
.jsm-step-done { color: var(--jsm-success); }
.jsm-step-done .jsm-step-num {
	background: var(--jsm-success);
	color: var(--jsm-white);
	border-color: var(--jsm-success);
}
.jsm-step-active { color: var(--jsm-navy); font-weight: 800; }
.jsm-step-active .jsm-step-num {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	border-color: var(--jsm-lime);
}

/* CHECKOUT AUTH (inline form, bukan modal) */
.jsm-checkout-auth {
	border: 2px solid var(--jsm-lime);
	background: linear-gradient(135deg, rgba(200,241,51,0.06) 0%, rgba(255,255,255,1) 100%);
}
.jsm-checkout-auth h3 i { color: var(--jsm-navy) !important; background: var(--jsm-lime) !important; }
.jsm-checkout-auth-desc {
	font-size: 13px;
	color: var(--jsm-text);
	line-height: 1.6;
	margin-bottom: 16px;
}
.jsm-checkout-auth-desc strong { color: var(--jsm-success); }

.jsm-checkout-auth-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	background: var(--jsm-bg);
	padding: 4px;
	border-radius: 999px;
}
.jsm-checkout-auth-tab {
	flex: 1;
	padding: 10px 14px;
	border-radius: 999px;
	background: transparent;
	color: var(--jsm-text-muted);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.15s;
}
.jsm-checkout-auth-tab:hover { color: var(--jsm-navy); }
.jsm-checkout-auth-tab-active {
	background: var(--jsm-navy);
	color: var(--jsm-lime);
}

.jsm-checkout-auth-panel { display: none; }
.jsm-checkout-auth-panel-active { display: block; }

.jsm-checkout-auth-otp { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--jsm-border); }
.jsm-checkout-auth-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin: 8px 0;
}
.jsm-checkout-auth-link {
	color: var(--jsm-navy);
	font-weight: 700;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
}
.jsm-checkout-auth-link[disabled] { color: var(--jsm-text-muted); cursor: not-allowed; }

.jsm-checkout-info {
	font-size: 12px;
	background: var(--jsm-bg);
	border-left: 4px solid var(--jsm-navy);
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--jsm-navy);
	margin-top: 14px;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.jsm-checkout-info i { font-size: 16px; color: var(--jsm-navy); flex-shrink: 0; margin-top: 1px; }

.jsm-checkout-summary { position: sticky; top: 80px; }

/* ============================================================
   CATALOG DRILL-DOWN (Kategori → Brand → Produk)
   Inspirasi: s-gala.com pattern
   ============================================================ */

/* Breadcrumb */
.jsm-shop-crumb {
	max-width: 1100px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--jsm-text-muted);
	flex-wrap: wrap;
}
.jsm-shop-crumb a {
	color: var(--jsm-text-muted);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 6px;
	transition: background 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.jsm-shop-crumb a:hover { background: var(--jsm-lime-soft); color: var(--jsm-navy); }
.jsm-shop-crumb .jsm-crumb-active { color: var(--jsm-navy); font-weight: 700; }
.jsm-shop-crumb .jsm-crumb-sep { font-size: 14px; opacity: 0.5; }

/* State 1: Kategori grid */
.jsm-shop-cat-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 720px) { .jsm-shop-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .jsm-shop-cat-grid { grid-template-columns: 1fr; } }

.jsm-shop-cat-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.jsm-shop-cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--jsm-lime);
	box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.jsm-shop-cat-card-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}
.jsm-shop-cat-card-name {
	font-weight: 800;
	font-size: 15px;
	color: var(--jsm-navy);
}
.jsm-shop-cat-card-desc {
	font-size: 12px;
	color: var(--jsm-text-muted);
	line-height: 1.4;
}
.jsm-shop-cat-card-meta {
	font-size: 11px;
	color: var(--jsm-navy);
	font-weight: 700;
	margin-top: 4px;
}

/* State 2: Brand grid */
.jsm-shop-brand-grid {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.jsm-shop-brand-card {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	gap: 14px;
	align-items: center;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.jsm-shop-brand-card:hover {
	border-color: var(--jsm-lime);
	box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.jsm-shop-brand-card-mark {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 22px;
	flex-shrink: 0;
}
.jsm-shop-brand-card-body { flex: 1; min-width: 0; }
.jsm-shop-brand-card-name {
	font-weight: 800;
	font-size: 15px;
	color: var(--jsm-navy);
}
.jsm-shop-brand-card-desc {
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin: 2px 0;
}
.jsm-shop-brand-card-meta {
	font-size: 11px;
	color: var(--jsm-navy);
	font-weight: 700;
	background: var(--jsm-lime-soft);
	padding: 2px 8px;
	border-radius: 4px;
	display: inline-block;
}
.jsm-shop-brand-card-arrow {
	font-size: 20px;
	color: var(--jsm-text-muted);
	flex-shrink: 0;
}

/* State 3: Product list row */
.jsm-shop-product-list {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jsm-shop-product-row {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 80px 1fr auto auto;
	gap: 14px;
	align-items: center;
	transition: border-color 0.15s, background 0.15s;
}
.jsm-shop-product-meta {
	display: flex; flex-wrap: wrap; gap: 6px 10px;
	font-size: 11px; color: var(--jsm-text-muted);
	margin-top: 4px;
}
.jsm-shop-product-pack {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--jsm-bg);
	border-radius: 4px;
	padding: 2px 6px;
}
.jsm-shop-product-pack i { color: var(--jsm-navy); font-size: 12px; }
.jsm-shop-product-stock { display: inline-flex; align-items: center; gap: 4px; }
.jsm-shop-product-stock i { font-size: 12px; }
.jsm-shop-product-row-in-cart {
	border-color: var(--jsm-lime);
	background: var(--jsm-lime-soft);
}
@media (max-width: 580px) {
	.jsm-shop-product-row {
		grid-template-columns: 52px 1fr;
		grid-template-rows: auto auto;
		row-gap: 8px;
	}
	.jsm-shop-product-price { grid-column: 1 / -1; }
	.jsm-shop-product-qty { grid-column: 1 / -1; justify-self: stretch; }
}
.jsm-shop-product-thumb {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--jsm-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsm-text-muted);
	font-size: 32px;
}
@media (max-width: 580px) {
	.jsm-shop-product-thumb { width: 64px; height: 64px; font-size: 26px; }
}
.jsm-shop-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-shop-product-info { min-width: 0; }
.jsm-shop-product-sku {
	font-family: "Courier New", monospace;
	font-size: 10px;
	color: var(--jsm-text-muted);
	font-weight: 600;
}
.jsm-shop-product-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--jsm-navy);
	margin: 2px 0;
}
.jsm-shop-product-meta {
	font-size: 11px;
	color: var(--jsm-text-muted);
}
.jsm-stock-ok    { color: var(--jsm-success); }
.jsm-stock-low   { color: #f7b500; font-weight: 700; }
.jsm-stock-out   { color: var(--jsm-danger); font-weight: 700; }

.jsm-shop-product-price {
	text-align: right;
	flex-shrink: 0;
}
.jsm-shop-product-price strong {
	font-size: 14px;
	font-weight: 800;
	color: var(--jsm-navy);
	display: block;
}
.jsm-shop-product-price small {
	font-size: 10px;
	color: var(--jsm-text-muted);
}
.jsm-shop-product-qty {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	padding: 2px;
	background: var(--jsm-white);
}
.jsm-shop-product-qty .jsm-qty-input { width: 50px; }
.jsm-shop-product-qty-disabled {
	font-size: 11px;
	color: var(--jsm-danger);
	font-weight: 700;
	padding: 6px 10px;
}

/* ============================================================
   CATALOG v2 — kategori pill atas → brand section → brand card expand
   ============================================================ */
.jsm-shop-cat-pills {
	max-width: 1100px;
	margin: 0 auto 24px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}
@media (max-width: 900px) { .jsm-shop-cat-pills { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .jsm-shop-cat-pills { grid-template-columns: repeat(2, 1fr); } }

.jsm-shop-cat-pill {
	background: var(--jsm-white);
	border: 2px solid var(--jsm-border);
	border-radius: 14px;
	padding: 14px 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.15s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-family: inherit;
}
.jsm-shop-cat-pill:hover { border-color: var(--jsm-lime); transform: translateY(-2px); }
.jsm-shop-cat-pill.is-active {
	border-color: var(--jsm-navy);
	background: linear-gradient(180deg, rgba(31,44,114,0.06), white);
	box-shadow: 0 8px 22px rgba(31,44,114,0.12);
}
.jsm-shop-cat-pill-name { font-weight: 800; font-size: 14px; color: var(--jsm-navy); }
.jsm-shop-cat-pill-count { font-size: 11px; color: var(--jsm-text-muted); font-weight: 600; }

.jsm-shop-empty-hint {
	max-width: 1100px;
	margin: 0 auto;
	background: white;
	border: 2px dashed var(--jsm-border);
	border-radius: 14px;
	padding: 40px 20px;
	text-align: center;
	color: var(--jsm-text-muted);
}
.jsm-shop-empty-hint i { font-size: 40px; color: var(--jsm-lime); margin-bottom: 10px; display: block; }
.jsm-shop-empty-hint-title { font-weight: 700; color: var(--jsm-navy); font-size: 15px; }
.jsm-shop-empty-hint-sub { font-size: 12px; margin-top: 4px; }

.jsm-shop-brand-section { max-width: 1100px; margin: 0 auto; animation: jsm-fadein 0.25s; }
@keyframes jsm-fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.jsm-shop-brand-section-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 14px; gap: 12px;
}
.jsm-shop-brand-section-head h2 { color: var(--jsm-navy); margin: 0; font-size: 18px; }
.jsm-shop-brand-section-head p { color: var(--jsm-text-muted); font-size: 13px; margin: 4px 0 0; }
.jsm-shop-brand-section-pill {
	background: var(--jsm-lime-soft); color: var(--jsm-navy);
	padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
	flex-shrink: 0;
}

.jsm-shop-brand-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (max-width: 780px) { .jsm-shop-brand-cards { grid-template-columns: 1fr; } }

.jsm-shop-brand-card {
	background: var(--jsm-white);
	border: 2px solid var(--jsm-border);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex; align-items: flex-start; gap: 14px;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
	width: 100%;
}
.jsm-shop-brand-card:hover { border-color: var(--jsm-lime); transform: translateY(-2px); }
.jsm-shop-brand-card.is-active {
	border-color: var(--jsm-navy);
	box-shadow: 0 12px 28px rgba(31,44,114,0.12);
	background: linear-gradient(180deg, rgba(31,44,114,0.04), white);
}
.jsm-shop-brand-card-image {
	width: 110px; height: 80px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--jsm-bg);
	display: flex; align-items: center; justify-content: center;
}
.jsm-shop-brand-card-image img { width: 100%; height: 100%; object-fit: cover; }
.jsm-shop-brand-card-image-fallback {
	font-weight: 900; font-size: 32px; color: var(--jsm-navy);
}
@media (max-width: 480px) {
	.jsm-shop-brand-card-image { width: 80px; height: 60px; }
}
.jsm-shop-brand-card-body-info { flex: 1; min-width: 0; }
.jsm-shop-brand-card-title {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jsm-shop-brand-card-name {
	font-weight: 800; font-size: 16px; color: var(--jsm-navy);
}
.jsm-shop-brand-card-badge {
	padding: 2px 8px; border-radius: 4px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}
.jsm-shop-brand-card-tagline {
	font-size: 13px; color: var(--jsm-text-muted); margin-top: 4px; line-height: 1.4;
}
.jsm-shop-brand-card-specs {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-top: 10px;
}
.jsm-shop-brand-card-spec {
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 11px;
	color: #374151;
	display: inline-flex; align-items: center; gap: 4px;
}
.jsm-shop-brand-card-spec i { color: var(--jsm-navy); font-size: 13px; }
.jsm-shop-brand-card-meta {
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
	flex-shrink: 0;
}
.jsm-shop-brand-card-tipe-count {
	background: var(--jsm-lime-soft); color: var(--jsm-navy);
	padding: 3px 10px; border-radius: 6px;
	font-size: 11px; font-weight: 700;
}
.jsm-shop-brand-card-cta {
	font-size: 12px; font-weight: 700; color: var(--jsm-navy);
	display: inline-flex; align-items: center; gap: 2px;
	background: var(--jsm-bg);
	padding: 4px 8px; border-radius: 6px;
	white-space: nowrap;
}
.jsm-shop-brand-card.is-active .jsm-shop-brand-card-cta {
	background: var(--jsm-lime); color: var(--jsm-navy);
}

/* Panel produk muncul di bawah grid brand */
.jsm-shop-products-panel {
	margin-top: 16px;
	background: var(--jsm-white);
	border: 2px solid var(--jsm-lime);
	border-radius: 14px;
	overflow: hidden;
	animation: jsm-fadein 0.25s;
}
.jsm-shop-products-panel[hidden] { display: none; }
.jsm-shop-products-panel-head {
	padding: 12px 18px;
	background: linear-gradient(90deg, var(--jsm-navy), #2a3a8a);
	color: white;
	display: flex; align-items: center; justify-content: space-between;
}
.jsm-shop-products-panel-head h3 { margin: 0; font-size: 15px; color: white; font-weight: 700; }
.jsm-shop-products-panel-close {
	background: rgba(255,255,255,0.15);
	color: white; border: 0; border-radius: 6px;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 18px;
	transition: background 0.15s;
}
.jsm-shop-products-panel-close:hover { background: rgba(255,255,255,0.3); }
.jsm-shop-products-panel .jsm-shop-product-list {
	max-width: none;
	gap: 8px;
	padding: 14px 18px 18px;
	background: #fafbfc;
}

@media (max-width: 580px) {
	.jsm-shop-brand-card { padding: 12px 12px; gap: 10px; }
	.jsm-shop-products-panel .jsm-shop-product-list { padding: 10px 12px 14px; }
	.jsm-shop-products-panel-head { padding: 10px 14px; }
	.jsm-shop-products-panel-head h3 { font-size: 13px; }
}

/* OLD accordion (deprecated tapi safe leave for backward compat) */
.jsm-shop-accordion {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.jsm-shop-acc-cat {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.jsm-shop-acc-cat.is-open {
	border-color: var(--jsm-navy);
	box-shadow: 0 8px 22px rgba(31,44,114,0.08);
}
.jsm-shop-acc-cat-head {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.jsm-shop-acc-cat.is-open .jsm-shop-acc-cat-head {
	background: linear-gradient(180deg, rgba(31,44,114,0.04), transparent);
}
.jsm-shop-acc-cat-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.jsm-shop-acc-cat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jsm-shop-acc-cat-name {
	font-weight: 800;
	font-size: 15px;
	color: var(--jsm-navy);
}
.jsm-shop-acc-cat-desc {
	font-size: 12px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}
.jsm-shop-acc-cat-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--jsm-navy);
	background: var(--jsm-lime-soft);
	padding: 3px 10px;
	border-radius: 6px;
	flex-shrink: 0;
}
.jsm-shop-acc-chevron {
	font-size: 20px;
	color: var(--jsm-text-muted);
	transition: transform 0.2s;
	flex-shrink: 0;
}
.jsm-shop-acc-cat.is-open > .jsm-shop-acc-cat-head .jsm-shop-acc-chevron,
.jsm-shop-acc-brand.is-open > .jsm-shop-acc-brand-head .jsm-shop-acc-chevron {
	transform: rotate(180deg);
	color: var(--jsm-navy);
}
.jsm-shop-acc-cat-body {
	padding: 0 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fafbfc;
	border-top: 1px solid var(--jsm-border);
	padding-top: 12px;
}
.jsm-shop-acc-cat-body[hidden] { display: none; }

.jsm-shop-acc-brand {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 10px;
	overflow: hidden;
}
.jsm-shop-acc-brand.is-open { border-color: var(--jsm-lime); }
.jsm-shop-acc-brand-head {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.jsm-shop-acc-brand-mark {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 16px;
	flex-shrink: 0;
}
.jsm-shop-acc-brand-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jsm-shop-acc-brand-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--jsm-navy);
}
.jsm-shop-acc-brand-desc {
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-top: 1px;
}
.jsm-shop-acc-brand-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--jsm-text-muted);
	flex-shrink: 0;
}
.jsm-shop-acc-brand-body {
	padding: 10px 12px 12px;
	border-top: 1px solid var(--jsm-border);
	background: #fafbfc;
}
.jsm-shop-acc-brand-body[hidden] { display: none; }
.jsm-shop-acc-brand-body .jsm-shop-product-list {
	max-width: none;
	gap: 8px;
}

@media (max-width: 580px) {
	.jsm-shop-acc-cat-head { padding: 12px 12px; gap: 10px; }
	.jsm-shop-acc-cat-icon { width: 38px; height: 38px; font-size: 18px; }
	.jsm-shop-acc-cat-desc { display: none; }
	.jsm-shop-acc-brand-desc { display: none; }
	.jsm-shop-acc-cat-body { padding: 10px 8px; }
}

/* ============================================================
   FLOATING CART WIDGET — sticky bottom-right (desktop) / bottom (mobile)
   ============================================================ */
.jsm-floating-cart {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 200;
	width: 360px;
	max-width: calc(100vw - 24px);
	display: flex;
	flex-direction: column;
	animation: jsm-fc-slide-in 0.25s ease;
}
.jsm-floating-cart[hidden] { display: none; }
.jsm-floating-cart-empty .jsm-floating-cart-count { display: none; }

/* Bottom bar (always visible) */
.jsm-floating-cart-bar {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.18);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
	transition: box-shadow 0.15s;
}
.jsm-floating-cart-bar:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.22); }
.jsm-floating-cart.is-open .jsm-floating-cart-bar {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: var(--jsm-border);
}
.jsm-floating-cart-bar-toggle {
	background: var(--jsm-bg);
	color: var(--jsm-navy);
	width: 34px; height: 34px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.jsm-floating-cart-bar-chevron {
	font-size: 18px;
	transition: transform 0.2s;
}
.jsm-floating-cart.is-open .jsm-floating-cart-bar-chevron { transform: rotate(180deg); }

/* Expandable panel (di atas bar) */
.jsm-floating-cart-panel {
	background: var(--jsm-white);
	border: 1px solid var(--jsm-border);
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
	display: flex;
	flex-direction: column;
	max-height: 70vh;
	overflow: hidden;
	animation: jsm-fc-panel-up 0.2s ease;
}
.jsm-floating-cart-panel[hidden] { display: none; }
@keyframes jsm-fc-panel-up {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.jsm-floating-cart-panel-head {
	padding: 12px 14px;
	background: var(--jsm-navy);
	color: white;
	display: flex; align-items: center; justify-content: space-between;
	border-radius: 16px 16px 0 0;
}
.jsm-floating-cart-panel-head h3 {
	margin: 0; font-size: 14px; font-weight: 800; color: white;
}
.jsm-floating-cart-panel-head small {
	color: var(--jsm-lime); font-size: 11px; font-weight: 700;
}
.jsm-floating-cart-panel-close {
	background: rgba(255,255,255,0.15);
	color: white; border: 0;
	width: 28px; height: 28px;
	border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 16px;
}
.jsm-floating-cart-panel-close:hover { background: rgba(255,255,255,0.3); }
.jsm-floating-cart-panel-body {
	overflow-y: auto; flex: 1;
	padding: 10px 14px;
	background: #fafbfc;
}
.jsm-floating-cart-panel-empty {
	text-align: center; color: var(--jsm-text-muted);
	padding: 30px 10px; font-size: 13px;
}

/* Group cat → brand inside panel */
.jsm-fc-cat-group { margin-bottom: 12px; }
.jsm-fc-cat-group:last-child { margin-bottom: 0; }
.jsm-fc-cat-head {
	font-size: 11px; font-weight: 800;
	color: var(--jsm-navy);
	text-transform: uppercase; letter-spacing: 0.5px;
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--jsm-border);
}
.jsm-fc-brand-group { margin-bottom: 8px; }
.jsm-fc-brand-head {
	font-size: 10px; font-weight: 700; color: var(--jsm-text-muted);
	margin-bottom: 4px;
	display: flex; align-items: center; gap: 4px;
}
.jsm-fc-brand-head::before {
	content: ''; display: inline-block;
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--jsm-lime);
}

.jsm-fc-row {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 8px;
	align-items: center;
	background: white;
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	padding: 6px 8px;
	margin-bottom: 4px;
}
.jsm-fc-row-thumb {
	width: 44px; height: 44px;
	border-radius: 6px;
	background: var(--jsm-bg);
	display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted);
	overflow: hidden;
}
.jsm-fc-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-fc-row-info { min-width: 0; }
.jsm-fc-row-name {
	font-size: 12px; font-weight: 700; color: var(--jsm-navy);
	line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jsm-fc-row-meta {
	font-size: 10px; color: var(--jsm-text-muted);
	display: flex; gap: 6px; margin-top: 2px;
}
.jsm-fc-row-meta strong { color: var(--jsm-navy); }
.jsm-fc-row-qty {
	display: flex; align-items: center; gap: 2px;
	border: 1px solid var(--jsm-border);
	border-radius: 6px;
	background: white;
	padding: 1px;
}
.jsm-fc-row-qty button {
	width: 24px; height: 24px;
	border: 0; background: transparent;
	font-size: 14px; font-weight: 800; color: var(--jsm-navy);
	cursor: pointer; border-radius: 4px;
}
.jsm-fc-row-qty button:hover { background: var(--jsm-lime-soft); }
.jsm-fc-row-qty input {
	width: 30px; height: 24px;
	border: 0; text-align: center;
	font-size: 12px; font-weight: 700; color: var(--jsm-navy);
	background: transparent;
}
.jsm-fc-row-qty input::-webkit-inner-spin-button { display: none; }
.jsm-fc-row-remove {
	background: transparent; border: 0; color: var(--jsm-danger);
	cursor: pointer; padding: 0; margin-left: 4px;
	font-size: 14px;
}

.jsm-floating-cart-panel-foot {
	border-top: 1px solid var(--jsm-border);
	background: white;
	padding: 12px 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.jsm-floating-cart-panel-total {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 13px;
}
.jsm-floating-cart-panel-total strong {
	font-size: 16px; font-weight: 900; color: var(--jsm-navy);
}
.jsm-floating-cart-btn-block {
	display: flex !important; justify-content: center;
	padding: 11px 14px !important; font-size: 14px !important;
}
.jsm-floating-cart-empty .jsm-floating-cart-btn-block { display: none !important; }

/* ============================================================
   CHECKOUT — Single-page flow (no stepper, all sections visible)
   ============================================================ */
.jsm-checkout-header { margin-bottom: 18px; }
.jsm-checkout-subtitle {
	color: var(--jsm-text-muted); font-size: 13px;
	margin: 4px 0 0; line-height: 1.5;
}
.jsm-checkout-stepper { display: none !important; } /* deprecated stepper */

.jsm-checkout-section-locked {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}
.jsm-checkout-section-locked > * { pointer-events: none; }
.jsm-checkout-section-locked h3 { pointer-events: auto; opacity: 1; }
.jsm-locked-pill {
	display: inline-flex; align-items: center; gap: 4px;
	background: #fef3c7; color: #92400e;
	padding: 3px 9px; border-radius: 999px;
	font-size: 11px; font-weight: 700; margin-left: 8px;
}
.jsm-locked-msg {
	color: var(--jsm-text-muted); font-size: 13px;
	background: #fafbfc; border: 1px dashed var(--jsm-border);
	border-radius: 8px; padding: 14px 16px; margin: 0;
	text-align: center;
}

/* ============================================================
   CHECKOUT — Guest Auth Section emphasis + Register optional
   ============================================================ */
.jsm-checkout-auth {
	border: 2px solid var(--jsm-lime) !important;
	background: linear-gradient(180deg, var(--jsm-lime-soft), white) !important;
	box-shadow: 0 4px 16px rgba(31,44,114,0.06);
}
.jsm-checkout-auth h3 { color: var(--jsm-navy); }
.jsm-checkout-auth-desc {
	background: #fff;
	border-left: 4px solid var(--jsm-navy);
	padding: 10px 12px; border-radius: 6px;
	font-size: 13px; color: #374151; line-height: 1.5;
	margin: 8px 0 14px;
}
.jsm-checkout-reg-optional {
	background: #fafbfc; border: 1px solid var(--jsm-border);
	border-radius: 8px; padding: 10px 14px; margin: 10px 0;
	font-size: 13px;
}
.jsm-checkout-reg-optional summary {
	cursor: pointer; font-weight: 700; color: var(--jsm-navy);
	font-size: 12px; user-select: none;
}
.jsm-checkout-reg-optional summary:hover { color: var(--jsm-lime); }
.jsm-checkout-reg-optional[open] summary { color: var(--jsm-navy); margin-bottom: 6px; }

/* ============================================================
   CHECKOUT — Cashback + Bonus Promo (Batch 2)
   ============================================================ */
.jsm-cashback-opts { display: flex; flex-direction: column; gap: 8px; }
.jsm-cashback-opt {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
}
.jsm-cashback-opt:has(input:checked),
.jsm-cashback-opt.is-active {
	border-color: var(--jsm-lime);
	background: var(--jsm-lime-soft);
}
.jsm-cashback-opt input[type="radio"] { margin: 0; }
.jsm-cashback-opt span { display: flex; flex-direction: column; gap: 2px; }
.jsm-cashback-opt strong { font-size: 14px; color: var(--jsm-navy); }
.jsm-cashback-opt small  { font-size: 11px; color: var(--jsm-text-muted); }

.jsm-bonus-credits-badge { margin-left: 8px; }
.jsm-bonus-credits-chip {
	background: var(--jsm-navy); color: var(--jsm-lime);
	padding: 3px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 800;
}
.jsm-bonus-credits-tracker {
	background: var(--jsm-bg); border-radius: 8px;
	padding: 10px 14px; margin-bottom: 12px;
	font-size: 12px; color: var(--jsm-navy); font-weight: 700;
}
.jsm-bonus-credits-tracker strong { font-size: 16px; }
.jsm-bonus-credits-bar {
	margin-top: 6px; background: var(--jsm-border);
	height: 6px; border-radius: 999px; overflow: hidden;
}
.jsm-bonus-credits-bar > div {
	height: 100%; background: linear-gradient(90deg, var(--jsm-lime), var(--jsm-navy));
	transition: width 0.2s ease;
}
.jsm-bonus-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (max-width: 580px) { .jsm-bonus-grid { grid-template-columns: 1fr; } }
.jsm-bonus-item {
	background: white; border: 2px solid var(--jsm-border); border-radius: 10px;
	padding: 10px; display: grid; grid-template-columns: 56px 1fr auto;
	gap: 10px; align-items: center;
	transition: border-color 0.15s;
}
.jsm-bonus-item:has(input[value]:not([value="0"])) {
	border-color: var(--jsm-lime); background: linear-gradient(180deg, var(--jsm-lime-soft), white);
}
.jsm-bonus-item-thumb {
	width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
	background: var(--jsm-bg); display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted); font-size: 22px;
}
.jsm-bonus-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-bonus-item-info { min-width: 0; }
.jsm-bonus-item-name { font-size: 13px; font-weight: 700; color: var(--jsm-navy); line-height: 1.3; }
.jsm-bonus-item-meta {
	font-size: 11px; color: var(--jsm-text-muted);
	display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap;
}
.jsm-bonus-cost-chip {
	background: var(--jsm-navy); color: var(--jsm-lime);
	padding: 1px 6px; border-radius: 4px; font-weight: 700;
}
.jsm-bonus-stock { color: var(--jsm-text-muted); }
.jsm-bonus-item-qty {
	display: inline-flex; align-items: center;
	border: 1px solid var(--jsm-border); border-radius: 8px;
	background: white; padding: 2px;
	gap: 0; flex-shrink: 0;
	overflow: hidden;
}
.jsm-bonus-item-qty button {
	width: 32px; height: 32px; border: 0; background: transparent;
	font-size: 18px; font-weight: 800; color: var(--jsm-navy);
	cursor: pointer; border-radius: 6px;
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.jsm-bonus-item-qty button:hover { background: var(--jsm-lime-soft); }
.jsm-bonus-item-qty input {
	width: 36px; min-width: 36px; height: 32px;
	border: 0;
	text-align: center;
	font-size: 14px; font-weight: 800;
	color: var(--jsm-navy) !important;
	background: white !important;
	-webkit-text-fill-color: var(--jsm-navy) !important;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.jsm-bonus-item-qty input::-webkit-inner-spin-button,
.jsm-bonus-item-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; display: none; }

@media (max-width: 580px) {
	/* Mobile: stack items into 2 rows — header+info, then qty stepper full-width */
	.jsm-bonus-item {
		padding: 10px;
		grid-template-columns: 48px 1fr;
		grid-template-rows: auto auto;
		gap: 8px 10px;
	}
	.jsm-bonus-item-thumb { width: 48px; height: 48px; font-size: 18px; grid-row: 1 / 2; }
	.jsm-bonus-item-info { grid-column: 2 / 3; grid-row: 1 / 2; min-width: 0; }
	.jsm-bonus-item-name { font-size: 12px; }
	.jsm-bonus-item-qty {
		grid-column: 1 / -1; grid-row: 2 / 3;
		justify-self: stretch;
		justify-content: space-between;
		width: 100%;
		padding: 4px;
	}
	.jsm-bonus-item-qty button { width: 40px; height: 36px; font-size: 20px; }
	.jsm-bonus-item-qty input { flex: 1; min-width: 50px; max-width: 80px; width: auto; height: 36px; font-size: 16px; }
}

/* ============================================================
   AKUN — Pesanan untuk Pickup section
   ============================================================ */
.jsm-akun-section-pickup .jsm-akun-section-title i { color: #F59E0B; }
.jsm-pickup-list { display: flex; flex-direction: column; gap: 12px; }
.jsm-pickup-card {
	background: white;
	border: 2px solid var(--jsm-border);
	border-radius: 14px;
	padding: 16px;
	transition: border-color 0.15s;
	position: relative;
}
.jsm-pickup-card-today {
	border-color: #F59E0B;
	background: linear-gradient(180deg, #fef3c7, white);
	box-shadow: 0 4px 16px rgba(245,158,11,0.12);
}
.jsm-pickup-card-tomorrow {
	border-color: var(--jsm-lime);
	background: linear-gradient(180deg, var(--jsm-lime-soft), white);
}
.jsm-pickup-card-past {
	border-color: var(--jsm-danger);
	background: linear-gradient(180deg, #fee2e2, white);
}

.jsm-pickup-reminder {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 12px; border-radius: 8px;
	font-size: 13px; margin-bottom: 12px;
}
.jsm-pickup-reminder i { font-size: 16px; }
.jsm-pickup-reminder-today {
	background: #F59E0B; color: white;
	animation: jsm-pulse-bell 2s ease infinite;
}
@keyframes jsm-pulse-bell {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.02); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
}
.jsm-pickup-reminder-tomorrow { background: var(--jsm-navy); color: var(--jsm-lime); }
.jsm-pickup-reminder-past { background: var(--jsm-danger); color: white; }

.jsm-pickup-card-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 10px; margin-bottom: 12px;
}
.jsm-pickup-card-onum {
	font-family: 'Courier New', monospace; font-size: 11px;
	color: var(--jsm-text-muted); font-weight: 700;
}
.jsm-pickup-card-total {
	font-size: 18px; font-weight: 900; color: var(--jsm-navy);
	margin-top: 2px;
}
.jsm-pickup-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px; border-radius: 6px;
	font-size: 11px; font-weight: 800; white-space: nowrap;
}
.jsm-pickup-badge-paid { background: #dcfce7; color: #166534; }
.jsm-pickup-badge-unpaid { background: #fee2e2; color: #991b1b; }

.jsm-pickup-code-card {
	background: linear-gradient(135deg, #fff8c5, #fcd34d);
	border: 2px dashed #d4a000;
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	margin-bottom: 12px;
}
.jsm-pickup-code-card-label {
	font-size: 11px; color: #78350f;
	text-transform: uppercase; letter-spacing: 0.5px;
	font-weight: 800; margin-bottom: 4px;
}
.jsm-pickup-code-card-value {
	font-family: 'Courier New', monospace;
	font-size: 26px; font-weight: 900;
	color: var(--jsm-navy);
	letter-spacing: 3px; margin: 4px 0 6px;
}
.jsm-pickup-code-card .jsm-pay-copy {
	background: var(--jsm-navy); color: var(--jsm-lime);
	font-size: 11px; padding: 4px 10px;
}

.jsm-pickup-meta {
	display: flex; flex-wrap: wrap; gap: 8px 12px;
	font-size: 12px; color: var(--jsm-text-muted);
	padding-top: 10px; border-top: 1px solid var(--jsm-border);
}
.jsm-pickup-meta span {
	display: inline-flex; align-items: center; gap: 4px;
}
.jsm-pickup-meta i { color: var(--jsm-navy); font-size: 14px; }

.jsm-pickup-pay-info {
	margin-top: 10px;
	background: #fafbfc; border: 1px solid var(--jsm-border);
	border-radius: 8px; padding: 8px 12px;
}
.jsm-pickup-pay-info summary {
	cursor: pointer; font-weight: 700; font-size: 13px;
	color: var(--jsm-navy);
}
.jsm-pickup-pay-info-body { margin-top: 10px; }
.jsm-pickup-pay-info-body > div {
	display: flex; justify-content: space-between; align-items: center;
	padding: 5px 0; border-bottom: 1px dashed var(--jsm-border);
	font-size: 12px; flex-wrap: wrap; gap: 6px;
}
.jsm-pickup-pay-info-body > div:last-of-type { border-bottom: 0; }
.jsm-pickup-pay-info-body span { color: var(--jsm-text-muted); }
.jsm-pickup-pay-info-body strong { color: var(--jsm-navy); }
.jsm-pickup-pay-wa {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	background: #25D366; color: white;
	padding: 10px; border-radius: 8px;
	text-decoration: none; font-weight: 800; font-size: 13px;
	margin-top: 10px;
}
.jsm-pickup-pay-wa:hover { background: #1da851; color: white; }

@media (max-width: 580px) {
	.jsm-pickup-card { padding: 12px; }
	.jsm-pickup-card-total { font-size: 16px; }
	.jsm-pickup-code-card-value { font-size: 22px; letter-spacing: 2px; }
	.jsm-pickup-meta { font-size: 11px; gap: 6px 10px; }
}

/* ============================================================
   CHECKOUT/AKUN polish — section spacing & label consistency
   ============================================================ */
.jsm-checkout-section { margin-bottom: 14px; }
.jsm-checkout-section h3 {
	display: flex; align-items: center; gap: 8px;
	font-size: 15px; margin: 0 0 12px;
	color: var(--jsm-navy);
	font-weight: 800;
}
.jsm-checkout-section h3 i { color: var(--jsm-lime); background: var(--jsm-navy); border-radius: 6px; padding: 4px; font-size: 14px; }
.jsm-checkout-field { margin-bottom: 10px; }
.jsm-checkout-field label {
	display: block; font-size: 12px; font-weight: 700;
	color: var(--jsm-navy); margin-bottom: 4px;
}
.jsm-checkout-field input,
.jsm-checkout-field textarea,
.jsm-checkout-field select {
	width: 100%; padding: 10px 12px;
	border: 1px solid var(--jsm-border); border-radius: 8px;
	font-size: 14px; color: var(--jsm-navy);
	background: white; font-family: inherit;
	box-sizing: border-box;
}
.jsm-checkout-field input:focus,
.jsm-checkout-field textarea:focus,
.jsm-checkout-field select:focus {
	outline: 0; border-color: var(--jsm-navy);
	box-shadow: 0 0 0 3px rgba(31,44,114,0.08);
}

/* Akun section spacing */
.jsm-akun-section { margin-bottom: 16px; }
.jsm-akun-section-head-bar {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 12px; gap: 10px;
}
.jsm-akun-section-title {
	font-size: 16px; color: var(--jsm-navy); margin: 0;
	display: flex; align-items: center; gap: 6px;
}
.jsm-akun-section-sub {
	font-size: 11px; color: var(--jsm-text-muted);
	background: var(--jsm-bg); padding: 3px 10px; border-radius: 6px;
	font-weight: 700;
}

/* ============================================================
   PICKUP CODE BOX — di success state checkout
   ============================================================ */
.jsm-pickup-code-box {
	margin: 14px 18px 0;
	background: linear-gradient(135deg, #fff8c5, #fcd34d);
	border: 2px dashed #d4a000;
	border-radius: 12px;
	padding: 18px 16px;
	text-align: center;
}
.jsm-pickup-code-label {
	font-size: 11px; color: #78350f;
	text-transform: uppercase; letter-spacing: 1px;
	font-weight: 800; margin-bottom: 4px;
}
.jsm-pickup-code-value {
	font-family: 'Courier New', monospace;
	font-size: 32px; font-weight: 900;
	color: var(--jsm-navy);
	letter-spacing: 4px;
	margin: 4px 0 8px;
}
.jsm-pickup-code-schedule {
	font-size: 13px; color: #78350f;
	margin-top: 10px; line-height: 1.5;
}
.jsm-pickup-code-schedule strong { color: var(--jsm-navy); }
@media (max-width: 580px) {
	.jsm-pickup-code-box { margin: 12px; padding: 14px 12px; }
	.jsm-pickup-code-value { font-size: 26px; letter-spacing: 3px; }
}

/* ============================================================
   PICKUP DATE+TIME ROW di checkout
   ============================================================ */
.jsm-pickup-date-row {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 12px; margin-top: 12px;
}
@media (max-width: 480px) { .jsm-pickup-date-row { grid-template-columns: 1fr; } }
.jsm-pickup-date-row input[type="date"],
.jsm-pickup-date-row select {
	width: 100%; padding: 10px 12px;
	border: 1px solid var(--jsm-border); border-radius: 8px;
	font-size: 14px; color: var(--jsm-navy);
	background: white;
	font-family: inherit;
}
.jsm-pickup-date-row small { color: var(--jsm-text-muted); font-size: 11px; }

/* ============================================================
   Z-INDEX AUDIT — pastikan layering konsisten
   ============================================================ */
/* Sticky global nav */
.jsm-global-nav { z-index: 100; position: relative; }
/* Floating cart (above content, below modal) */
.jsm-floating-cart { z-index: 200 !important; }
.jsm-floating-cart-bar { z-index: 1; }
.jsm-floating-cart-panel { z-index: 2; }
.jsm-floating-cart-count { z-index: 3 !important; }
/* Modals (above everything) */
.jsm-reward-modal { z-index: 1000 !important; }
.jsm-reward-modal-overlay { z-index: 1; }
.jsm-reward-modal-card { z-index: 2; }
/* Toast (above modals) */
.jsm-toast, [data-jsm-toast] { z-index: 9999 !important; }
/* Brand badge / chips di card (above thumbnail) */
.jsm-reward-card-tier-badge,
.jsm-reward-card-stock-badge { z-index: 1; }

/* ============================================================
   CHECKOUT SUMMARY — editable cart items inline
   ============================================================ */
.jsm-checkout-empty {
	text-align: center; padding: 40px 20px; color: var(--jsm-text-muted);
}
.jsm-checkout-empty i { font-size: 48px; color: var(--jsm-border); display: block; margin-bottom: 10px; }
.jsm-checkout-empty p { margin: 0 0 14px; font-size: 14px; }
.jsm-checkout-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.jsm-checkout-cat-group {
	background: #fafbfc; border: 1px solid var(--jsm-border);
	border-radius: 10px; padding: 10px 12px;
}
.jsm-checkout-cat-head {
	font-size: 11px; font-weight: 800;
	color: var(--jsm-navy); text-transform: uppercase; letter-spacing: 0.5px;
	padding-bottom: 6px; margin-bottom: 6px;
	border-bottom: 1px solid var(--jsm-border);
}
.jsm-checkout-brand-group + .jsm-checkout-brand-group { margin-top: 8px; }
.jsm-checkout-brand-head {
	font-size: 10px; font-weight: 700; color: var(--jsm-text-muted);
	margin: 4px 0;
	display: flex; align-items: center; gap: 4px;
}
.jsm-checkout-brand-head::before {
	content: ''; display: inline-block;
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--jsm-lime);
}
.jsm-checkout-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 8px;
	align-items: center;
	background: white;
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 4px;
}
.jsm-checkout-item-thumb {
	width: 48px; height: 48px; border-radius: 6px;
	background: var(--jsm-bg);
	display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted); overflow: hidden;
}
.jsm-checkout-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-checkout-item-info { min-width: 0; }
.jsm-checkout-item-name {
	font-size: 12px; font-weight: 700; color: var(--jsm-navy);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jsm-checkout-item-price { font-size: 10px; color: var(--jsm-text-muted); margin: 2px 0 4px; }
.jsm-checkout-item-qty {
	display: inline-flex; align-items: center; gap: 2px;
	border: 1px solid var(--jsm-border); border-radius: 6px;
	background: white; padding: 1px;
}
.jsm-checkout-item-qty button {
	width: 24px; height: 24px; border: 0; background: transparent;
	font-size: 14px; font-weight: 800; color: var(--jsm-navy);
	cursor: pointer; border-radius: 4px;
}
.jsm-checkout-item-qty button:hover { background: var(--jsm-lime-soft); }
.jsm-checkout-item-qty input {
	width: 32px; height: 24px; border: 0; text-align: center;
	font-size: 12px; font-weight: 700; color: var(--jsm-navy);
	background: transparent;
}
.jsm-checkout-item-qty input::-webkit-inner-spin-button { display: none; }
.jsm-checkout-item-qty .js-fc-qty-remove {
	color: var(--jsm-danger); margin-left: 2px;
}
.jsm-checkout-item-subtotal strong {
	font-size: 13px; font-weight: 800; color: var(--jsm-navy);
	white-space: nowrap;
}

/* ============================================================
   CHECKOUT SUCCESS — inline payment instructions
   ============================================================ */
.jsm-checkout-success {
	max-width: 600px; margin: 0 auto;
	background: white;
	border: 2px solid var(--jsm-lime);
	border-radius: 16px;
	overflow: hidden;
	animation: jsm-fc-panel-up 0.3s ease;
}
.jsm-checkout-success-head {
	padding: 28px 20px 18px;
	text-align: center;
	background: linear-gradient(180deg, var(--jsm-lime-soft), white);
}
.jsm-checkout-success-icon {
	font-size: 56px; color: var(--jsm-success);
	margin-bottom: 8px;
}
.jsm-checkout-success-head h2 {
	color: var(--jsm-navy); margin: 0 0 4px; font-size: 22px;
}
.jsm-checkout-success-head p { color: var(--jsm-text-muted); font-size: 14px; margin: 0; }
.jsm-checkout-success-head strong { color: var(--jsm-navy); }

.jsm-checkout-success-body {
	padding: 20px;
	border-top: 1px solid var(--jsm-border);
}
.jsm-checkout-success-body h3 {
	margin: 0 0 14px; color: var(--jsm-navy); font-size: 16px;
	display: flex; align-items: center; gap: 8px;
}
.jsm-pay-info {
	background: var(--jsm-bg);
	border-radius: 10px;
	padding: 12px 16px;
}
.jsm-pay-info-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dashed var(--jsm-border);
	gap: 8px;
}
.jsm-pay-info-row:last-child { border-bottom: 0; }
.jsm-pay-info-row span { font-size: 12px; color: var(--jsm-text-muted); }
.jsm-pay-info-row strong { font-size: 14px; color: var(--jsm-navy); font-weight: 700; }
.jsm-pay-info-row.jsm-pay-info-total strong { font-size: 18px; color: var(--jsm-navy); }
.jsm-pay-info-num { font-family: 'Courier New', monospace; letter-spacing: 1px; }
.jsm-pay-copy {
	background: var(--jsm-navy); color: var(--jsm-lime);
	border: 0; border-radius: 6px;
	padding: 5px 10px; font-size: 11px; font-weight: 700;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
}
.jsm-pay-copy:hover { opacity: 0.92; }
.jsm-pay-qris {
	margin-top: 14px; text-align: center;
}
.jsm-pay-qris img {
	max-width: 200px; border: 1px solid var(--jsm-border); border-radius: 8px;
}
.jsm-checkout-success-foot {
	padding: 14px 20px 20px;
	display: flex; gap: 10px; justify-content: center;
	border-top: 1px solid var(--jsm-border);
	background: #fafbfc;
}
.jsm-home-btn-secondary { background: var(--jsm-navy); color: white; }
.jsm-home-btn-ghost { background: transparent; color: var(--jsm-text-muted); border: 1px solid var(--jsm-border); }
@media (max-width: 480px) {
	.jsm-checkout-success-foot { flex-direction: column; }
	.jsm-checkout-success-foot a { width: 100%; justify-content: center; }
}
@keyframes jsm-fc-slide-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.jsm-floating-cart-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.jsm-floating-cart-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
	position: relative;
}
.jsm-floating-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	font-size: 10px;
	font-weight: 900;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border: 2px solid var(--jsm-white);
}
.jsm-floating-cart-text { min-width: 0; }
.jsm-floating-cart-label {
	font-size: 10px;
	color: var(--jsm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
}
.jsm-floating-cart-total {
	font-weight: 900;
	font-size: 15px;
	color: var(--jsm-navy);
	line-height: 1.1;
}
.jsm-floating-cart-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.jsm-floating-cart-btn {
	padding: 9px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: opacity 0.15s, background 0.15s;
}
.jsm-floating-cart-btn-ghost {
	background: var(--jsm-bg);
	color: var(--jsm-navy);
}
.jsm-floating-cart-btn-ghost:hover { background: var(--jsm-border); }
.jsm-floating-cart-btn-primary {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
}
.jsm-floating-cart-btn-primary:hover { opacity: 0.92; }

/* Mobile: full-width bottom bar */
@media (max-width: 580px) {
	.jsm-floating-cart {
		right: 8px; left: 8px; bottom: 8px;
		width: auto;
	}
	.jsm-floating-cart-panel { max-height: 65vh; }
}

/* ============================================================
   MOBILE TIGHTENING (v0.19.2) — padding/margin/sizing fix
   Override-only block, taruh paling akhir supaya menang specificity
   ============================================================ */
@media (max-width: 640px) {
	/* Page wrappers — kurangi padding luar */
	.jsm-shop-page { padding: 14px 12px 100px; }
	.jsm-checkout-page { padding: 14px 12px 100px; }
	.jsm-cart-page { padding: 14px 12px 100px; }
	body.jsm-app-shop-body { padding-bottom: 80px; } /* hindari overlap floating cart */

	/* Header */
	.jsm-shop-head h1 { font-size: 18px; }
	.jsm-shop-head p { font-size: 12px; }
	.jsm-shop-head { margin-bottom: 12px; gap: 8px; }

	/* Cat pills — 3 kolom di mobile (bukan 2) supaya semua kategori muat 2 baris */
	.jsm-shop-cat-pills { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
	.jsm-shop-cat-pill { padding: 10px 6px; border-radius: 10px; }
	.jsm-shop-cat-pill-name { font-size: 12px; }
	.jsm-shop-cat-pill-count { font-size: 9px; }

	/* Empty hint */
	.jsm-shop-empty-hint { padding: 24px 14px; border-radius: 10px; }
	.jsm-shop-empty-hint i { font-size: 32px; }
	.jsm-shop-empty-hint-title { font-size: 13px; }

	/* Brand section */
	.jsm-shop-brand-section-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
	.jsm-shop-brand-section-head h2 { font-size: 15px; }
	.jsm-shop-brand-section-head p { font-size: 11px; }
	.jsm-shop-brand-cards { gap: 8px; }
	.jsm-shop-brand-card { padding: 10px 10px; gap: 8px; border-radius: 10px; }
	.jsm-shop-brand-card-image { width: 70px; height: 56px; border-radius: 8px; }
	.jsm-shop-brand-card-name { font-size: 14px; }
	.jsm-shop-brand-card-badge { font-size: 9px; padding: 1px 6px; }
	.jsm-shop-brand-card-tagline { font-size: 11px; margin-top: 2px; line-height: 1.3; }
	.jsm-shop-brand-card-specs { gap: 4px; margin-top: 6px; }
	.jsm-shop-brand-card-spec { font-size: 10px; padding: 2px 6px; }
	.jsm-shop-brand-card-spec i { font-size: 11px; }
	.jsm-shop-brand-card-meta { gap: 4px; }
	.jsm-shop-brand-card-tipe-count { font-size: 10px; padding: 2px 6px; }
	.jsm-shop-brand-card-cta { font-size: 10px; padding: 2px 6px; }

	/* Products panel */
	.jsm-shop-products-panel { border-radius: 10px; margin-top: 10px; }
	.jsm-shop-products-panel-head { padding: 8px 12px; }
	.jsm-shop-products-panel-head h3 { font-size: 12px; }
	.jsm-shop-products-panel-close { width: 26px; height: 26px; font-size: 14px; }
	.jsm-shop-products-panel .jsm-shop-product-list { padding: 8px 10px 12px; gap: 6px; }

	/* Product row — 2 baris compact: image+info di atas, price+qty di bawah */
	.jsm-shop-product-row {
		grid-template-columns: 56px 1fr;
		grid-template-rows: auto auto;
		gap: 8px 10px;
		padding: 10px 12px;
		border-radius: 10px;
	}
	.jsm-shop-product-thumb { width: 56px; height: 56px; }
	.jsm-shop-product-name { font-size: 13px; }
	.jsm-shop-product-sku { font-size: 9px; }
	.jsm-shop-product-meta { font-size: 10px; gap: 4px 6px; }
	.jsm-shop-product-pack { padding: 1px 5px; font-size: 10px; }
	.jsm-shop-product-price {
		grid-column: 1 / -1; text-align: left;
		display: flex; align-items: baseline; gap: 4px;
		padding-top: 4px; border-top: 1px dashed var(--jsm-border);
	}
	.jsm-shop-product-price strong { font-size: 15px; }
	.jsm-shop-product-price small { font-size: 10px; }
	.jsm-shop-product-qty { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; padding: 3px; }
	.jsm-shop-product-qty .jsm-qty-btn { width: 38px; height: 34px; font-size: 18px; }
	.jsm-shop-product-qty .jsm-qty-input { width: auto; flex: 1; height: 34px; font-size: 15px; }

	/* Breadcrumb */
	.jsm-shop-crumb { font-size: 11px; flex-wrap: wrap; }

	/* ===== CHECKOUT page ===== */
	.jsm-checkout-layout { grid-template-columns: 1fr; gap: 14px; }
	.jsm-checkout-summary { position: static; }
	.jsm-cart-title { font-size: 20px; margin-bottom: 12px; }
	.jsm-checkout-section { padding: 14px 12px; border-radius: 10px; margin-bottom: 10px; }
	.jsm-checkout-section h3 { font-size: 14px; margin-bottom: 10px; }
	.jsm-checkout-stepper { gap: 6px; margin-bottom: 14px; }
	.jsm-step-num { width: 22px; height: 22px; font-size: 11px; }
	.jsm-step-label { font-size: 10px; }
	.jsm-checkout-pay { padding: 10px 12px; }
	.jsm-checkout-pay strong { font-size: 13px; }
	.jsm-checkout-pay small { font-size: 11px; }

	/* Editable items in checkout summary */
	.jsm-checkout-cat-group { padding: 8px 10px; border-radius: 8px; }
	.jsm-checkout-cat-head { font-size: 10px; padding-bottom: 4px; margin-bottom: 4px; }
	.jsm-checkout-item { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; padding: 8px; gap: 6px 8px; }
	.jsm-checkout-item-thumb { width: 40px; height: 40px; }
	.jsm-checkout-item-name { font-size: 12px; }
	.jsm-checkout-item-price { font-size: 10px; }
	.jsm-checkout-item-qty { padding: 1px; }
	.jsm-checkout-item-qty button { width: 26px; height: 26px; }
	.jsm-checkout-item-qty input { width: 36px; height: 26px; }
	.jsm-checkout-item-subtotal {
		grid-column: 1 / -1; text-align: right;
		padding-top: 4px; border-top: 1px dashed var(--jsm-border);
	}
	.jsm-checkout-item-subtotal strong { font-size: 13px; }

	/* Checkout success */
	.jsm-checkout-success-head { padding: 22px 14px 14px; }
	.jsm-checkout-success-icon { font-size: 44px; }
	.jsm-checkout-success-head h2 { font-size: 18px; }
	.jsm-checkout-success-head p { font-size: 12px; }
	.jsm-checkout-success-body { padding: 14px 12px; }
	.jsm-checkout-success-body h3 { font-size: 14px; }
	.jsm-pay-info { padding: 10px 12px; }
	.jsm-pay-info-row { padding: 6px 0; flex-wrap: wrap; gap: 4px; }
	.jsm-pay-info-row strong { font-size: 13px; }
	.jsm-pay-info-row.jsm-pay-info-total strong { font-size: 16px; }
	.jsm-pay-copy { padding: 4px 8px; font-size: 10px; }
	.jsm-checkout-success-foot { padding: 12px; flex-direction: column; gap: 8px; }
	.jsm-checkout-success-foot a { width: 100%; justify-content: center; padding: 10px; font-size: 13px; }

	/* ===== Floating cart panel pas mobile ===== */
	.jsm-floating-cart-bar { padding: 8px 10px; gap: 8px; }
	.jsm-floating-cart-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
	.jsm-floating-cart-label { font-size: 9px; }
	.jsm-floating-cart-total { font-size: 13px; }
	.jsm-floating-cart-bar-toggle { width: 30px; height: 30px; }
	.jsm-floating-cart-bar-chevron { font-size: 16px; }
	.jsm-floating-cart-panel-head { padding: 10px 12px; }
	.jsm-floating-cart-panel-head h3 { font-size: 13px; }
	.jsm-floating-cart-panel-head small { font-size: 10px; }
	.jsm-floating-cart-panel-body { padding: 8px 12px; }
	.jsm-floating-cart-panel-foot { padding: 10px 12px; }
	.jsm-floating-cart-panel-total strong { font-size: 14px; }
	/* Floating cart panel row — 2-baris layout di mobile (qty stepper full-width)
	   supaya angka qty tidak ketutupan tombol +/- karena layar sempit */
	.jsm-fc-row {
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto;
		gap: 6px 8px;
		padding: 8px;
		align-items: start;
	}
	.jsm-fc-row-thumb { width: 44px; height: 44px; grid-row: 1 / 2; }
	.jsm-fc-row-info  { grid-column: 2 / 3; grid-row: 1 / 2; }
	.jsm-fc-row-name { font-size: 12px; white-space: normal; line-height: 1.25; }
	.jsm-fc-row-meta { font-size: 10px; margin-top: 2px; }
	.jsm-fc-row-qty {
		grid-column: 1 / -1; grid-row: 2 / 3;
		justify-self: stretch; justify-content: space-between;
		padding: 3px; margin-top: 2px;
	}
	.jsm-fc-row-qty button {
		width: 36px; height: 32px;
		font-size: 18px; border-radius: 6px;
		flex-shrink: 0;
	}
	.jsm-fc-row-qty input {
		flex: 1; min-width: 40px; max-width: 70px;
		width: auto; height: 32px;
		font-size: 15px;
		color: #1F2C72 !important;
		background: white !important;
		-webkit-text-fill-color: #1F2C72 !important;
		font-weight: 800 !important;
	}
	.jsm-fc-row-remove { font-size: 16px; padding: 4px 8px; }
}

@media (max-width: 380px) {
	/* Cat pills 2 kolom di layar super sempit (di bawah iPhone SE) */
	.jsm-shop-cat-pills { grid-template-columns: repeat(2, 1fr); }
	.jsm-shop-brand-card-image { width: 60px; height: 50px; }
	.jsm-shop-brand-card-specs { display: none; } /* hide spec chips di layar mini, biar gak terlalu padat */
}

/* ============================================================
   AKUN — Tukar Hadiah CTA + Riwayat Tukar Poin
   ============================================================ */
.jsm-akun-stat-cta {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--jsm-lime); color: var(--jsm-navy);
	padding: 4px 10px; border-radius: 6px;
	font-size: 11px; font-weight: 800;
	text-decoration: none; margin-top: 6px;
}
.jsm-akun-stat-cta:hover { opacity: 0.92; }

.jsm-akun-redeem-list { display: flex; flex-direction: column; gap: 8px; }
.jsm-akun-redeem-row {
	background: white; border: 1px solid var(--jsm-border); border-radius: 10px;
	padding: 12px 14px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.jsm-akun-redeem-info { flex: 1; min-width: 0; }
.jsm-akun-redeem-name { font-weight: 700; font-size: 14px; color: var(--jsm-navy); }
.jsm-akun-redeem-meta {
	font-size: 11px; color: var(--jsm-text-muted);
	margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.jsm-akun-redeem-meta i { font-size: 12px; }
.jsm-akun-redeem-no { font-family: 'Courier New', monospace; font-weight: 700; color: var(--jsm-navy); }
.jsm-akun-redeem-tracking,
.jsm-akun-redeem-admin-note {
	font-size: 11px; color: var(--jsm-text-muted);
	margin-top: 4px; display: flex; align-items: center; gap: 4px;
}
.jsm-akun-redeem-action {
	display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
	flex-shrink: 0;
}
.jsm-akun-redeem-status {
	color: white; padding: 3px 9px; border-radius: 6px;
	font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
	display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.jsm-akun-redeem-status i { font-size: 12px; }
.jsm-akun-redeem-cancel {
	background: transparent; border: 0; color: var(--jsm-danger);
	cursor: pointer; padding: 0; font-size: 11px; font-weight: 700;
	text-decoration: underline;
}
.jsm-akun-redeem-cancel:hover { opacity: 0.7; }
@media (max-width: 580px) {
	.jsm-akun-redeem-row { flex-direction: column; align-items: stretch; }
	.jsm-akun-redeem-action { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   REWARD PAGE — /jsm-hadiah katalog tukar poin
   ============================================================ */
.jsm-reward-page { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }
.jsm-reward-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.jsm-reward-head h1 { color: var(--jsm-navy); margin: 0; font-size: 22px; }
.jsm-reward-head p { color: var(--jsm-text-muted); font-size: 13px; margin: 4px 0 0; }
.jsm-reward-balance {
	background: linear-gradient(135deg, var(--jsm-navy), #2a3a8a);
	color: white;
	border-radius: 14px;
	padding: 12px 20px;
	display: flex; flex-direction: column; align-items: center;
	min-width: 140px;
}
.jsm-reward-balance-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--jsm-lime); font-weight: 700; }
.jsm-reward-balance-num   { font-size: 26px; font-weight: 900; color: white; line-height: 1.1; margin-top: 2px; }

.jsm-reward-suggest {
	background: var(--jsm-lime-soft);
	border: 1px solid var(--jsm-lime);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.jsm-reward-suggest-head {
	display: flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--jsm-navy);
}
.jsm-reward-suggest-head i { color: #F59E0B; font-size: 18px; }
.jsm-reward-suggest-head small { color: var(--jsm-text-muted); font-size: 11px; margin-left: 4px; }
.jsm-reward-suggest-row {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;
}
@media (max-width: 720px) { .jsm-reward-suggest-row { grid-template-columns: 1fr; } }
.jsm-reward-suggest-card {
	background: white; border: 1px solid var(--jsm-border); border-radius: 10px;
	padding: 10px; cursor: pointer; text-align: left;
	display: flex; align-items: center; gap: 10px;
	font-family: inherit; transition: border-color 0.15s;
}
.jsm-reward-suggest-card:hover { border-color: var(--jsm-navy); }
.jsm-reward-suggest-thumb {
	width: 50px; height: 50px; border-radius: 8px; overflow: hidden;
	background: var(--jsm-bg); display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted); flex-shrink: 0;
}
.jsm-reward-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-reward-suggest-info { display: flex; flex-direction: column; min-width: 0; }
.jsm-reward-suggest-name { font-weight: 700; font-size: 13px; color: var(--jsm-navy); }
.jsm-reward-suggest-cost { font-size: 11px; color: var(--jsm-navy); font-weight: 800; margin-top: 2px; }

.jsm-reward-tabs {
	display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.jsm-reward-tab {
	background: white; border: 1px solid var(--jsm-border); border-radius: 999px;
	padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--jsm-text-muted);
	cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.jsm-reward-tab:hover { border-color: var(--jsm-navy); color: var(--jsm-navy); }
.jsm-reward-tab.is-active { background: var(--jsm-navy); color: var(--jsm-lime); border-color: var(--jsm-navy); }

.jsm-reward-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .jsm-reward-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .jsm-reward-grid { grid-template-columns: 1fr; } }

.jsm-reward-card {
	background: white; border: 2px solid var(--jsm-border); border-radius: 14px;
	overflow: hidden; display: flex; flex-direction: column;
	transition: border-color 0.15s, transform 0.15s;
}
.jsm-reward-card:hover { border-color: var(--jsm-lime); transform: translateY(-2px); }
.jsm-reward-card-out, .jsm-reward-card-tier, .jsm-reward-card-poor { opacity: 0.75; }
.jsm-reward-card-out:hover, .jsm-reward-card-tier:hover, .jsm-reward-card-poor:hover {
	border-color: var(--jsm-border); transform: none;
}
.jsm-reward-card-thumb {
	width: 100%; aspect-ratio: 1/1; background: var(--jsm-bg);
	display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted); font-size: 56px;
	position: relative; overflow: hidden;
}
.jsm-reward-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-reward-card-tier-badge {
	position: absolute; top: 8px; left: 8px;
	background: var(--jsm-navy); color: var(--jsm-lime);
	padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800;
	display: inline-flex; align-items: center; gap: 3px;
}
.jsm-reward-card-tier-badge i { font-size: 12px; }
.jsm-reward-card-stock-badge {
	position: absolute; top: 8px; right: 8px;
	background: #F59E0B; color: white;
	padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800;
}
.jsm-reward-card-body { padding: 12px 14px; flex: 1; }
.jsm-reward-card-name { font-size: 14px; font-weight: 800; color: var(--jsm-navy); margin: 0 0 4px; line-height: 1.3; }
.jsm-reward-card-desc { font-size: 11px; color: var(--jsm-text-muted); margin: 0; line-height: 1.4; }
.jsm-reward-card-foot {
	padding: 10px 14px; border-top: 1px solid var(--jsm-border);
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: #fafbfc;
}
.jsm-reward-card-cost { display: flex; align-items: baseline; gap: 3px; }
.jsm-reward-card-cost strong { font-size: 18px; font-weight: 900; color: var(--jsm-navy); }
.jsm-reward-card-cost small  { font-size: 11px; color: var(--jsm-text-muted); font-weight: 600; }
.jsm-reward-btn {
	background: var(--jsm-navy); color: var(--jsm-lime);
	border: 0; padding: 7px 14px; border-radius: 8px;
	font-size: 12px; font-weight: 800; cursor: pointer;
	font-family: inherit;
	display: inline-flex; align-items: center; gap: 4px;
	text-decoration: none;
	transition: opacity 0.15s;
}
.jsm-reward-btn:hover { opacity: 0.9; }
.jsm-reward-btn-ghost {
	background: transparent; color: var(--jsm-text-muted);
	border: 1px solid var(--jsm-border);
}
.jsm-reward-btn-disabled {
	background: var(--jsm-bg); color: var(--jsm-text-muted);
	cursor: not-allowed; opacity: 0.7;
}
.jsm-reward-back-link {
	display: inline-block; margin-top: 24px; color: var(--jsm-text-muted);
	text-decoration: none; font-size: 13px;
}
.jsm-reward-back-link:hover { color: var(--jsm-navy); }

/* Modal tukar */
.jsm-reward-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.jsm-reward-modal[hidden] { display: none; }
.jsm-reward-modal-overlay {
	position: absolute; inset: 0;
	background: rgba(31, 44, 114, 0.55);
	backdrop-filter: blur(2px);
}
.jsm-reward-modal-card {
	position: relative; z-index: 1;
	background: white; border-radius: 16px;
	max-width: 480px; width: calc(100% - 24px);
	max-height: 90vh; overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	animation: jsm-fc-panel-up 0.2s ease;
}
.jsm-reward-modal-head {
	padding: 14px 18px;
	background: var(--jsm-navy); color: white;
	display: flex; align-items: center; justify-content: space-between;
}
.jsm-reward-modal-head h3 { margin: 0; font-size: 16px; color: white; }
.jsm-reward-modal-close {
	background: rgba(255,255,255,0.15); color: white;
	border: 0; width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
	font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.jsm-reward-modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.jsm-reward-modal-foot {
	padding: 12px 18px; border-top: 1px solid var(--jsm-border);
	display: flex; gap: 8px; justify-content: flex-end; background: #fafbfc;
}

.jsm-rwm-preview {
	display: flex; gap: 12px; padding: 12px;
	background: var(--jsm-bg); border-radius: 10px; margin-bottom: 14px;
}
.jsm-rwm-preview-thumb {
	width: 70px; height: 70px; border-radius: 8px; overflow: hidden;
	background: white; display: flex; align-items: center; justify-content: center;
	color: var(--jsm-text-muted); flex-shrink: 0;
}
.jsm-rwm-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jsm-rwm-preview-info h4 { margin: 0 0 4px; font-size: 14px; color: var(--jsm-navy); }
.jsm-rwm-preview-info p { margin: 0; font-size: 12px; color: var(--jsm-text-muted); line-height: 1.4; }
.jsm-rwm-cost {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 8px 0; border-bottom: 1px dashed var(--jsm-border);
}
.jsm-rwm-cost.is-balance { border-bottom: 0; padding-bottom: 0; }
.jsm-rwm-cost.is-after { font-weight: 800; color: var(--jsm-navy); }
.jsm-rwm-cost strong { color: var(--jsm-navy); font-size: 14px; }
.jsm-rwm-field { margin-top: 14px; }
.jsm-rwm-field label {
	display: block; font-size: 12px; font-weight: 700; color: var(--jsm-navy); margin-bottom: 4px;
}
.jsm-rwm-field input,
.jsm-rwm-field select,
.jsm-rwm-field textarea {
	width: 100%; padding: 10px 12px;
	border: 1px solid var(--jsm-border); border-radius: 8px;
	font-size: 14px; font-family: inherit; color: var(--jsm-navy);
	background: white;
}
.jsm-rwm-field small { color: var(--jsm-text-muted); font-size: 11px; }

.jsm-rwm-success {
	text-align: center; padding: 14px 4px;
}
.jsm-rwm-success i { font-size: 56px; color: #10B981; display: block; margin-bottom: 10px; }
.jsm-rwm-success h3 { color: var(--jsm-navy); margin: 0 0 6px; font-size: 18px; }
.jsm-rwm-success p { color: var(--jsm-text-muted); font-size: 13px; margin: 0 0 12px; }
.jsm-rwm-success-info {
	background: var(--jsm-lime-soft); border-radius: 10px; padding: 12px;
	text-align: left; margin-top: 10px;
}
.jsm-rwm-success-info div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.jsm-rwm-success-info strong { color: var(--jsm-navy); }

@media (max-width: 640px) {
	.jsm-reward-page { padding: 14px 12px 80px; }
	.jsm-reward-head h1 { font-size: 18px; }
	.jsm-reward-head p { font-size: 12px; }
	.jsm-reward-balance { padding: 10px 14px; min-width: 110px; }
	.jsm-reward-balance-num { font-size: 22px; }
	.jsm-reward-suggest { padding: 10px 12px; }
	.jsm-reward-card-name { font-size: 13px; }
	.jsm-reward-card-cost strong { font-size: 16px; }
	.jsm-reward-btn { padding: 6px 10px; font-size: 11px; }
	.jsm-reward-modal-card { width: calc(100% - 16px); max-height: 95vh; }
	.jsm-reward-modal-body { padding: 14px; }
}

/* ============================================================
   FORCE NUMBER VISIBILITY — fix mobile qty input + count badge
   ============================================================ */
/* Qty input — paksa kontras + visible di semua state */
.jsm-qty-input,
.js-fc-qty-input,
.js-shop-qty-input,
.jsm-checkout-item-qty input,
.jsm-fc-row-qty input,
.jsm-shop-product-qty input {
	color: #1F2C72 !important;
	background: #FFFFFF !important;
	-webkit-text-fill-color: #1F2C72 !important; /* Safari iOS bug */
	opacity: 1 !important;
	font-weight: 700 !important;
	caret-color: #1F2C72;
}

/* Floating cart count badge — pastikan tampil & muat 2-3 digit */
.jsm-floating-cart-count {
	color: #1F2C72 !important;
	background: #C8F133 !important;
	min-width: 24px !important;
	height: 22px !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	padding: 0 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	border: 2px solid #FFFFFF !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
	z-index: 3 !important;
	position: absolute !important;
	top: -6px !important;
	right: -6px !important;
	line-height: 1 !important;
	-webkit-text-fill-color: #1F2C72 !important;
	pointer-events: none;
}
/* Saat empty, sembunyikan badge tapi keep widget visible */
.jsm-floating-cart-empty .jsm-floating-cart-count { display: none !important; }

/* Pastikan icon-nya cukup ruang untuk badge */
.jsm-floating-cart-icon { position: relative !important; overflow: visible !important; }

/* Floating cart total + label — paksa visible */
.jsm-floating-cart-total,
.jsm-floating-cart-total span {
	color: #1F2C72 !important;
	font-weight: 900 !important;
}
.jsm-floating-cart-label {
	color: #6B7280 !important;
}

/* Subtotal & total di summary checkout */
.jsm-cart-summary-row strong,
.jsm-cart-summary-total strong,
.jsm-checkout-item-subtotal strong,
.jsm-floating-cart-panel-total strong,
.jsm-pay-info-row strong {
	color: #1F2C72 !important;
}

/* Stock badge text supaya keliatan */
.jsm-stock-ok    { color: #10B981 !important; font-weight: 700; }
.jsm-stock-low   { color: #F59E0B !important; font-weight: 700; }
.jsm-stock-out   { color: #EF4444 !important; font-weight: 700; }

/* ============================================================
   AUDIT POLISH v0.26 — color consistency, button system, spacing
   Block paling akhir = priority override semua.
   ============================================================ */

/* — Tombol bayar bawah checkout — */
.jsm-checkout-submit-bottom {
	background: linear-gradient(135deg, #1F2C72 0%, #2A3A8A 100%);
	border-radius: 14px;
	padding: 20px 18px;
	margin-top: 16px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(31,44,114,0.18);
}
.jsm-checkout-submit-bottom-note {
	color: #C8F133;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 12px;
	display: flex; align-items: center; justify-content: center; gap: 6px;
}
.jsm-checkout-submit-bottom-note i { font-size: 16px; }
.jsm-checkout-submit-btn {
	background: #C8F133 !important;
	color: #1F2C72 !important;
	font-weight: 900 !important;
	font-size: 16px !important;
	padding: 14px 24px !important;
	border-radius: 10px !important;
	width: 100% !important;
	justify-content: center !important;
	display: inline-flex !important;
	align-items: center; gap: 8px;
	box-shadow: 0 4px 12px rgba(200,241,51,0.4);
	border: 0;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}
.jsm-checkout-submit-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(200,241,51,0.5);
}
.jsm-checkout-submit-btn:disabled {
	background: #6B7280 !important;
	color: #E5E7EB !important;
	cursor: not-allowed;
	box-shadow: none;
}

/* — Unified button color tokens (paksa konsisten di semua page) — */
.jsm-home-btn-primary,
button.jsm-home-btn-primary {
	background: var(--jsm-navy, #1F2C72);
	color: var(--jsm-lime, #C8F133);
	border: 0;
	font-weight: 800;
	padding: 11px 18px;
	border-radius: 10px;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.jsm-home-btn-primary:hover { opacity: 0.95; transform: translateY(-1px); }
.jsm-home-btn-secondary { background: #2A3A8A; color: white; }
.jsm-home-btn-ghost {
	background: transparent;
	color: var(--jsm-text-muted, #6B7280);
	border: 1px solid var(--jsm-border, #E5E7EB);
}
.jsm-home-btn-ghost:hover { border-color: var(--jsm-navy, #1F2C72); color: var(--jsm-navy, #1F2C72); }

/* — Card system konsisten — */
.jsm-akun-stat,
.jsm-akun-section,
.jsm-akun-ref-card,
.jsm-checkout-section,
.jsm-shop-product-row,
.jsm-shop-brand-card,
.jsm-reward-card {
	border-radius: 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.jsm-akun-section {
	background: white;
	border: 1px solid var(--jsm-border, #E5E7EB);
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (max-width: 580px) {
	.jsm-akun-section { padding: 14px 12px; border-radius: 10px; }
}

/* — Section title icon as colored badge (consistent across pages) — */
.jsm-akun-section-title i,
.jsm-checkout-section h3 i,
.jsm-shop-head h1 i,
.jsm-cart-title i {
	background: var(--jsm-navy, #1F2C72);
	color: var(--jsm-lime, #C8F133);
	border-radius: 7px;
	padding: 5px 6px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* — Better contrast on muted text (was too light) — */
.jsm-shop-product-meta,
.jsm-shop-product-sku,
.jsm-checkout-item-price,
.jsm-fc-row-meta,
.jsm-akun-stat-sub,
.jsm-akun-redeem-meta { color: #4B5563 !important; }

/* — Akun stats grid mobile fix — */
@media (max-width: 580px) {
	.jsm-akun-stats {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	.jsm-akun-stats .jsm-akun-stat { padding: 12px 10px !important; }
	.jsm-akun-stat-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; }
	.jsm-akun-stat-label { font-size: 10px !important; }
	.jsm-akun-stat-value { font-size: 18px !important; }
	.jsm-akun-stat-sub  { font-size: 10px !important; }
	.jsm-akun-stat-cta  { font-size: 10px !important; padding: 3px 8px !important; }
	.jsm-akun-stat:nth-child(3) { grid-column: span 2; }  /* commission card full-width */
}

/* — Form input consistency global — */
.jsm-app-body input[type="text"],
.jsm-app-body input[type="tel"],
.jsm-app-body input[type="email"],
.jsm-app-body input[type="date"],
.jsm-app-body input[type="number"],
.jsm-app-body input[type="url"],
.jsm-app-body input[type="password"],
.jsm-app-body select,
.jsm-app-body textarea {
	font-family: inherit;
	border-radius: 8px;
}
.jsm-app-body input:focus,
.jsm-app-body select:focus,
.jsm-app-body textarea:focus {
	outline: 0;
	border-color: var(--jsm-navy, #1F2C72) !important;
	box-shadow: 0 0 0 3px rgba(31,44,114,0.10) !important;
}

/* — Hero / page header bg gradient halus — */
.jsm-app-body {
	background: linear-gradient(180deg, #F7F8FA 0%, #FFFFFF 280px) !important;
	min-height: 100vh;
}

/* — Nav header consistent shadow & sticky — */
.jsm-global-nav {
	background: white;
	border-bottom: 1px solid var(--jsm-border, #E5E7EB);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	position: sticky; top: 0; z-index: 100;
}
.jsm-global-nav-link {
	color: var(--jsm-text-muted, #6B7280);
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.12s;
}
.jsm-global-nav-link:hover { color: var(--jsm-navy, #1F2C72); background: var(--jsm-bg, #F7F8FA); }
.jsm-global-nav-link-active {
	color: var(--jsm-navy, #1F2C72) !important;
	background: var(--jsm-lime-soft, #E8FAA8);
}

/* — Notification/alert color consistency — */
.jsm-checkout-info,
.jsm-cart-guest-notice {
	border-radius: 10px;
	padding: 12px 14px;
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 13px; line-height: 1.5;
}
.jsm-checkout-info i { font-size: 16px; flex-shrink: 0; margin-top: 2px; }

/* — Toast color override (consistent dengan brand) — */
.jsm-toast { font-family: inherit !important; }
.jsm-toast-success { background: #10B981 !important; }
.jsm-toast-error   { background: #EF4444 !important; }
.jsm-toast-info    { background: var(--jsm-navy, #1F2C72) !important; }

/* — Modal overlay consistent backdrop — */
.jsm-modal-overlay,
.jsm-reward-modal-overlay {
	background: rgba(31,44,114,0.55) !important;
	backdrop-filter: blur(3px);
}

/* — Mobile spacing global tighten — */
@media (max-width: 640px) {
	.jsm-shop-page,
	.jsm-checkout-page,
	.jsm-akun-shell,
	.jsm-reward-page {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* — Fix link color global (jangan default biru WP) — */
.jsm-app-body a:not([class]) { color: var(--jsm-navy, #1F2C72); }
.jsm-app-body a:not([class]):hover { color: #2A3A8A; }

/* — Empty state consistent — */
.jsm-shop-empty {
	background: white; border-radius: 14px;
	padding: 40px 20px; text-align: center;
	color: var(--jsm-text-muted, #6B7280);
	border: 1px dashed var(--jsm-border, #E5E7EB);
}
.jsm-shop-empty i { font-size: 48px; color: var(--jsm-border, #E5E7EB); display: block; margin-bottom: 10px; }
.jsm-shop-empty h3 { color: var(--jsm-navy, #1F2C72); margin: 0 0 4px; font-size: 16px; }

/* ============================================================
   FINAL POLISH v0.26.1 — fix remaining checkout inconsistencies
   ============================================================ */

/* Checkout section base — supaya semua section konsisten */
.jsm-checkout-section {
	background: white;
	border: 1px solid var(--jsm-border, #E5E7EB) !important;
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (max-width: 580px) {
	.jsm-checkout-section { padding: 14px 14px; border-radius: 10px; }
}

/* Auth section special — emphasized (kalau guest) */
.jsm-checkout-auth {
	border: 2px solid #C8F133 !important;
	background: linear-gradient(180deg, #E8FAA8 0%, #ffffff 70%) !important;
	box-shadow: 0 4px 18px rgba(31,44,114,0.08) !important;
}
.jsm-checkout-auth h3 { font-size: 17px; }

/* Auth tabs polish */
.jsm-checkout-auth-tabs {
	display: flex; gap: 6px;
	background: white; padding: 4px; border-radius: 10px;
	margin: 10px 0 14px;
	border: 1px solid var(--jsm-border, #E5E7EB);
}
.jsm-checkout-auth-tab {
	flex: 1; background: transparent; border: 0; cursor: pointer;
	padding: 10px 12px; border-radius: 8px;
	font-family: inherit; font-weight: 700; font-size: 13px;
	color: var(--jsm-text-muted, #6B7280);
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	transition: all 0.15s;
}
.jsm-checkout-auth-tab-active {
	background: var(--jsm-navy, #1F2C72) !important;
	color: var(--jsm-lime, #C8F133) !important;
}
.jsm-checkout-auth-panel { display: none; animation: jsm-fc-panel-up 0.2s ease; }
.jsm-checkout-auth-panel-active { display: block; }

/* Payment method labels — clearer cards */
.jsm-checkout-pay {
	background: white; border: 2px solid var(--jsm-border, #E5E7EB);
	border-radius: 10px; padding: 12px 14px;
	display: flex; align-items: center; gap: 12px;
	cursor: pointer;
	margin-bottom: 8px;
	transition: all 0.15s;
}
.jsm-checkout-pay:has(input:checked) {
	border-color: var(--jsm-navy, #1F2C72);
	background: linear-gradient(135deg, rgba(31,44,114,0.04), white);
	box-shadow: 0 2px 8px rgba(31,44,114,0.08);
}
.jsm-checkout-pay input[type="radio"] { margin: 0; accent-color: var(--jsm-navy, #1F2C72); }
.jsm-checkout-pay strong { display: block; font-size: 14px; color: var(--jsm-navy, #1F2C72); }
.jsm-checkout-pay small { display: block; font-size: 11px; color: var(--jsm-text-muted, #4B5563); margin-top: 2px; }
.jsm-checkout-pay-special {
	border-color: var(--jsm-lime, #C8F133) !important;
	background: linear-gradient(180deg, var(--jsm-lime-soft, #E8FAA8), white) !important;
}

/* Pickup info — visual hierarchy fix */
.jsm-checkout-pickup-info {
	display: flex; flex-direction: column; gap: 8px;
}
.jsm-checkout-pickup-active {
	background: linear-gradient(135deg, #1F2C72, #2A3A8A);
	color: white;
	border-radius: 10px; padding: 14px;
	display: flex; align-items: center; gap: 12px;
}
.jsm-checkout-pickup-active > i { color: var(--jsm-lime, #C8F133); }
.jsm-checkout-pickup-active strong,
.jsm-checkout-pickup-active small { color: white !important; }
.jsm-checkout-pickup-active small { opacity: 0.85; }
.jsm-checkout-pickup-tag {
	background: var(--jsm-lime, #C8F133);
	color: var(--jsm-navy, #1F2C72);
	padding: 3px 10px; border-radius: 6px;
	font-size: 10px; font-weight: 800;
	margin-left: auto;
}
.jsm-checkout-pickup-disabled {
	background: var(--jsm-bg, #F7F8FA);
	border: 1px dashed var(--jsm-border, #E5E7EB);
	border-radius: 10px; padding: 12px;
	display: flex; align-items: center; gap: 12px;
	color: var(--jsm-text-muted, #6B7280);
}

/* Sidebar summary — make sticky cleaner */
.jsm-checkout-summary {
	background: white;
	border: 2px solid var(--jsm-lime, #C8F133);
	border-radius: 14px;
	padding: 18px 16px;
	box-shadow: 0 8px 24px rgba(31,44,114,0.08);
}
.jsm-checkout-summary h3 {
	color: var(--jsm-navy, #1F2C72);
	margin: 0 0 12px;
	font-size: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--jsm-border, #E5E7EB);
}
.jsm-cart-summary-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 6px 0;
	font-size: 13px;
	color: var(--jsm-text-muted, #4B5563);
}
.jsm-cart-summary-row strong { color: var(--jsm-navy, #1F2C72); font-size: 14px; }
.jsm-cart-summary-total {
	border-top: 2px dashed var(--jsm-border, #E5E7EB);
	margin-top: 6px; padding-top: 10px;
	font-size: 15px;
}
.jsm-cart-summary-total strong { font-size: 20px !important; color: var(--jsm-navy, #1F2C72) !important; }
.jsm-cart-continue {
	display: block; text-align: center;
	margin-top: 10px;
	color: var(--jsm-text-muted, #6B7280);
	text-decoration: none; font-size: 12px;
	padding: 8px;
}
.jsm-cart-continue:hover { color: var(--jsm-navy, #1F2C72); }

/* Cashback options polish */
.jsm-cashback-opt input[type="radio"] { accent-color: var(--jsm-navy, #1F2C72); }
.jsm-cashback-opts label { margin-bottom: 0; }

/* OTP input — clean & focused */
#jsm-checkout-login-otp,
#jsm-checkout-reg-otp {
	border: 2px solid var(--jsm-border, #E5E7EB) !important;
}
#jsm-checkout-login-otp:focus,
#jsm-checkout-reg-otp:focus {
	border-color: var(--jsm-navy, #1F2C72) !important;
}

/* Auth meta (countdown + resend) */
.jsm-checkout-auth-meta {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 8px;
	font-size: 12px;
}
.jsm-checkout-auth-meta span { color: var(--jsm-text-muted, #6B7280); }
.jsm-checkout-auth-link {
	background: transparent; border: 0;
	color: var(--jsm-navy, #1F2C72);
	font-weight: 700; cursor: pointer;
	text-decoration: underline;
	font-family: inherit; font-size: 12px;
}
.jsm-checkout-auth-link:disabled { color: var(--jsm-text-muted, #9CA3AF); cursor: not-allowed; text-decoration: none; }

/* Cart guest notice */
.jsm-cart-guest-notice {
	background: #FEF3C7;
	border: 1px solid #FCD34D;
	color: #78350F;
	border-radius: 10px;
	padding: 12px 14px;
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 12px;
	font-size: 13px;
}
.jsm-cart-guest-notice i { font-size: 18px; color: #D97706; flex-shrink: 0; }

/* Cart title spacing */
.jsm-cart-title {
	font-size: 22px;
	color: var(--jsm-navy, #1F2C72);
	margin: 0 0 6px;
	font-weight: 800;
}
@media (max-width: 580px) {
	.jsm-cart-title { font-size: 18px; }
}