.pmm-ui {
  --brand-blue: #1d4aa3;
  --action-blue: #155ce4;
  --soft-blue: #e8f1ff;
  --yellow: #e5fa64;
  --ink: #0f172a;
  --muted: #64748b;
  --subtle: #94a3b8;
  --panel-bg: #f8fafc;
  --border: #e2e8f0;
  --green: #1f7a3d;
  --green-bg: #e7f5ea;
  --ease-primary: cubic-bezier(.22, 1, .36, 1);
}
.pmm-ui .cmp-canvas { min-height: 430px; padding: 22px 22px 52px; border-radius: 24px; background: var(--panel-bg); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pmm-ui .cmp-canvas::before { display: none; }
.pmm-ui .cmp-canvas > [class^="viz-"] { position: relative; z-index: 1; min-height: 360px; overflow: hidden; border: 1px solid rgb(226 232 240 / 82%); border-radius: 17px; background: white; box-shadow: 0 26px 50px -28px rgb(13 38 86 / 28%); color: var(--ink); }
.pmm-ui [class^="viz-"] button { font: inherit; }
.pmm-ui [class^="viz-"] header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.pmm-ui [class^="viz-"] header span, .pmm-ui [class^="viz-"] header b, .pmm-ui [class^="viz-"] header small { display: block; }
.pmm-ui [class^="viz-"] header b { font-size: 13px; }
.pmm-ui [class^="viz-"] header small { color: var(--muted); font-size: 9px; }
.pmm-ui [class^="viz-"] header em { padding: 6px 10px; border-radius: 999px; background: var(--soft-blue); color: var(--action-blue); font-size: 9px; font-style: normal; font-weight: 800; }
.pmm-ui .cmp-sat { top: 8px; left: 12px; background: var(--ink); }

/* Product demand: wide report crop with one enlarged decision signal. */
.pmm-ui .viz-report { display: grid; grid-template-columns: 43% 57%; }
.pmm-ui .viz-chart { display: flex; flex-direction: column; justify-content: space-between; padding: 26px 22px 20px; background: #edf3ff; color: var(--ink); }
.pmm-ui .viz-chart-copy small, .pmm-ui .viz-chart-copy strong, .pmm-ui .viz-chart-copy span { display: block; }
.pmm-ui .viz-chart-copy small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.pmm-ui .viz-chart-copy strong { margin: 8px 0 3px; font-size: 34px; }
.pmm-ui .viz-chart-copy span { color: var(--muted); font-size: 9px; }
.pmm-ui .viz-bars { display: flex; height: 94px; align-items: end; gap: 7px; }
.pmm-ui .viz-bars i { flex: 1; border-radius: 4px 4px 0 0; background: #a8c1ef; }
.pmm-ui .viz-bars i:nth-child(1) { height: 28%; } .pmm-ui .viz-bars i:nth-child(2) { height: 45%; } .pmm-ui .viz-bars i:nth-child(3) { height: 38%; } .pmm-ui .viz-bars i:nth-child(4) { height: 67%; } .pmm-ui .viz-bars i:nth-child(5) { height: 54%; } .pmm-ui .viz-bars i:nth-child(6) { height: 75%; } .pmm-ui .viz-bars i:nth-child(7) { height: 94%; background: var(--yellow); }
.pmm-ui .viz-product-panel { display: flex; min-width: 0; flex-direction: column; background: white; }
.pmm-ui .viz-product-panel header { flex: 0 0 auto; }
.pmm-ui .viz-products { display: grid; flex: 1; align-content: center; gap: 9px; padding: 17px; }
.pmm-ui .viz-products article { display: grid; grid-template: auto auto / 42px 1fr auto; align-items: center; gap: 2px 10px; padding: 9px; border: 1px solid var(--border); border-radius: 11px; }
.pmm-ui .viz-products article > i { grid-row: 1 / 3; width: 42px; height: 42px; overflow: hidden; border-radius: 9px; background: #f1eee8; }
.pmm-ui .viz-products article > i img, .pmm-ui .viz-control-product > i img, .pmm-ui .viz-control-queue span i img, .pmm-ui .viz-captured-order > div > i img, .pmm-ui .viz-stock-list span i img, .pmm-ui .viz-order-panel article > i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-products strong { font-size: 9px; } .pmm-ui .viz-products small { color: var(--muted); font-size: 8px; }
.pmm-ui .viz-products b { grid-area: 1 / 3 / 3 / 4; padding: 4px 7px; border-radius: 999px; background: var(--soft-blue); color: var(--action-blue); font-size: 8px; }
.pmm-ui .viz-lineup-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 17px 17px; padding: 0; background: transparent; }
.pmm-ui .viz-lineup-action span, .pmm-ui .viz-lineup-action b, .pmm-ui .viz-lineup-action small { display: block; }
.pmm-ui .viz-lineup-action b { font-size: 9px; } .pmm-ui .viz-lineup-action small { color: #cbd5e1; font-size: 7px; }
.pmm-ui .viz-lineup-action button { padding: 9px 12px; border: 0; border-radius: 7px; background: var(--action-blue); color: white; font-size: 8px; font-weight: 800; }

/* Live control room: a focused EasyStore-style selling workspace. */
.pmm-ui .viz-control-room { display: grid; grid-template: auto 1fr / 55% 45%; background: var(--panel-bg) !important; }
.pmm-ui .viz-control-top { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: white; }
.pmm-ui .viz-control-top span, .pmm-ui .viz-control-top b, .pmm-ui .viz-control-top small { display: block; }
.pmm-ui .viz-control-top b { font-size: 12px; } .pmm-ui .viz-control-top small { color: var(--muted); font-size: 8px; }
.pmm-ui .viz-control-top em { padding: 5px 8px; border-radius: 6px; background: #fee2e2; color: #dc2626; font-size: 8px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-control-product { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 15px; margin: 18px 9px 18px 18px; padding: 16px; border-radius: 15px; background: white; box-shadow: 0 20px 42px -30px rgb(15 23 42 / 38%); }
.pmm-ui .viz-control-product > i { height: 180px; overflow: hidden; border-radius: 13px; background: #f1eee8; }
.pmm-ui .viz-control-product span, .pmm-ui .viz-control-product small, .pmm-ui .viz-control-product strong, .pmm-ui .viz-control-product b { display: block; }
.pmm-ui .viz-control-product small, .pmm-ui .viz-control-settings > small, .pmm-ui .viz-control-queue > small { color: var(--action-blue); font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.pmm-ui .viz-control-product strong { margin: 9px 0 5px; font-size: 15px; } .pmm-ui .viz-control-product b { color: var(--muted); font-size: 8px; }
.pmm-ui .viz-control-settings { margin: 18px 18px 8px 9px; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: white; }
.pmm-ui .viz-control-settings label { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 8px; }
.pmm-ui .viz-control-settings label b { color: var(--ink); }
.pmm-ui .viz-control-settings > button { width: 100%; margin-top: 10px; padding: 9px; border: 0; border-radius: 8px; background: var(--action-blue); color: white; font-size: 8px; font-weight: 800; }
.pmm-ui .viz-control-timer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px; border-radius: 9px; background: var(--soft-blue); color: var(--action-blue); font-size: 8px; }
.pmm-ui .viz-control-timer strong { font-size: 15px; }
.pmm-ui .viz-control-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px; border-radius: 9px; background: var(--green-bg); color: var(--green); }
.pmm-ui .viz-control-note > i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: white; font-size: 8px; font-style: normal; }
.pmm-ui .viz-control-note span, .pmm-ui .viz-control-note b, .pmm-ui .viz-control-note small { display: block; } .pmm-ui .viz-control-note b { font-size: 8px; } .pmm-ui .viz-control-note small { font-size: 7px; }
.pmm-ui .viz-control-queue { display: flex; grid-column: 2; gap: 6px; margin: 0 18px 16px 9px; }
.pmm-ui .viz-control-queue > small { align-self: center; margin-right: 2px; }
.pmm-ui .viz-control-queue > span { display: grid; flex: 1; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: white; }
.pmm-ui .viz-control-queue span i { grid-row: 1 / 3; width: 24px; height: 24px; overflow: hidden; border-radius: 6px; background: #f1eee8; }
.pmm-ui .viz-control-queue span b, .pmm-ui .viz-control-queue span em { font-size: 7px; } .pmm-ui .viz-control-queue span em { color: var(--muted); font-style: normal; }

/* Legacy offer primitives retained for responsive compatibility. */
.pmm-ui .viz-campaign { display: grid; grid-template-columns: 1fr .9fr; grid-template-rows: 1fr auto; gap: 14px; padding: 22px; background: var(--panel-bg) !important; }
.pmm-ui .viz-product-card { position: relative; display: flex; grid-row: 1 / 3; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 18px; border-radius: 16px; background: white; box-shadow: 0 26px 50px -20px rgb(13 38 86 / 22%); }
.pmm-ui .viz-product-card > span { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 8px; border-radius: 999px; background: var(--yellow); color: black; font-size: 8px; font-weight: 800; }
.pmm-ui .viz-product-card > i { position: absolute; top: 42px; right: 22px; left: 22px; height: 150px; border-radius: 22px; background: radial-gradient(circle at 42% 36%, white 0 8%, transparent 9%), linear-gradient(145deg, var(--soft-blue), #99baf7); }
.pmm-ui .viz-product-card strong { position: relative; font-size: 14px; } .pmm-ui .viz-product-card small { position: relative; color: var(--muted); font-size: 9px; }
.pmm-ui .viz-offer-card { display: grid; grid-template-columns: 1fr auto; align-content: center; padding: 19px; border-radius: 16px; background: var(--brand-blue); color: white; }
.pmm-ui .viz-offer-card small, .pmm-ui .viz-offer-card span { grid-column: 1 / -1; color: #dbe7ff; font-size: 8px; }
.pmm-ui .viz-offer-card strong { margin: 5px 0; font-size: 32px; } .pmm-ui .viz-offer-card del { align-self: center; color: #c9d9fa; font-size: 11px; }
.pmm-ui .viz-offer-card button, .pmm-ui .viz-message-bubble button, .pmm-ui .viz-reminder-preview button, .pmm-ui .viz-reward button { margin-top: 12px; padding: 8px; border: 0; border-radius: 8px; background: white; color: var(--ink); font-size: 9px; font-weight: 800; }
.pmm-ui .viz-timer { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.pmm-ui .viz-timer span, .pmm-ui .viz-timer small { color: var(--muted); font-size: 8px; } .pmm-ui .viz-timer strong { grid-row: 1 / 3; grid-column: 2; color: var(--action-blue); font-size: 20px; }

/* Comment capture: one merchant surface plus the customer-facing message proof. */
.pmm-ui .viz-live-commerce { position: relative; min-height: 360px; overflow: hidden !important; background: white !important; }
.pmm-ui .viz-live-commerce::before { position: absolute; inset: 0 52% 0 0; background: #edf3ff; content: ""; }
.pmm-ui .viz-live-device { position: absolute; top: 22px; bottom: 22px; left: 11%; width: 27%; overflow: hidden; border: 7px solid var(--ink); border-radius: 27px; background: var(--ink); box-shadow: 0 24px 42px -22px rgb(13 38 86 / 35%); }
.pmm-ui .viz-live-device > img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; opacity: .9; }
.pmm-ui .viz-live-device::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(15 23 42 / 82%)); content: ""; }
.pmm-ui .viz-live-badge, .pmm-ui .viz-viewers { position: absolute; top: 12px; z-index: 2; padding: 5px 7px; border-radius: 6px; color: white; font-size: 7px; font-weight: 800; }
.pmm-ui .viz-live-badge { left: 11px; background: #dc2626; } .pmm-ui .viz-viewers { right: 10px; background: rgb(15 23 42 / 68%); }
.pmm-ui .viz-live-product { position: absolute; right: 10px; bottom: 12px; left: 10px; z-index: 2; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 11px; background: rgb(15 23 42 / 72%); color: white; backdrop-filter: blur(8px); }
.pmm-ui .viz-live-product > i { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(145deg, var(--soft-blue), #9dbaf2); }
.pmm-ui .viz-live-product > i img { width: 100%; height: 100%; object-fit: contain; }
.pmm-ui .viz-live-product span, .pmm-ui .viz-live-product strong, .pmm-ui .viz-live-product small { display: block; min-width: 0; }
.pmm-ui .viz-live-product strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .pmm-ui .viz-live-product small { color: #dbe7ff; font-size: 7px; }
.pmm-ui .viz-floating-comments { position: absolute; top: 42px; left: 2.5%; z-index: 3; width: 36%; }
.pmm-ui .viz-floating-comments article { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; width: 82%; margin-bottom: 10px; padding: 8px 9px; border: 1px solid rgb(226 232 240 / 85%); border-radius: 12px; background: rgb(255 255 255 / 96%); box-shadow: 0 12px 28px -16px rgb(15 23 42 / 55%); }
.pmm-ui .viz-floating-comments article:nth-child(2) { margin-left: 13%; } .pmm-ui .viz-floating-comments article:nth-child(3) { margin-left: 4%; }
.pmm-ui .viz-floating-comments article > i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--soft-blue); color: var(--action-blue); font-size: 8px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-floating-comments article span, .pmm-ui .viz-floating-comments article strong, .pmm-ui .viz-floating-comments article small { display: block; min-width: 0; }
.pmm-ui .viz-floating-comments article strong { font-size: 8px; } .pmm-ui .viz-floating-comments article small { color: var(--muted); font-size: 7px; }
.pmm-ui .viz-floating-comments article > b { color: var(--green); font-size: 7px; }
.pmm-ui .viz-captured-order { position: absolute; top: 50%; right: 5%; z-index: 3; width: 39%; padding: 18px; border-radius: 17px; background: white; box-shadow: 0 26px 50px -20px rgb(13 38 86 / 40%); transform: translateY(-50%); }
.pmm-ui .viz-captured-order > small, .pmm-ui .viz-captured-order > strong { display: block; } .pmm-ui .viz-captured-order > small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .06em; } .pmm-ui .viz-captured-order > strong { margin: 9px 0 13px; font-size: 14px; }
.pmm-ui .viz-captured-order > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 11px; background: var(--panel-bg); }
.pmm-ui .viz-captured-order > div > i { width: 38px; height: 38px; overflow: hidden; border-radius: 9px; background: #f1eee8; }
.pmm-ui .viz-captured-order > div span, .pmm-ui .viz-captured-order > div b, .pmm-ui .viz-captured-order > div small { display: block; min-width: 0; } .pmm-ui .viz-captured-order > div b { font-size: 8px; } .pmm-ui .viz-captured-order > div small { color: var(--muted); font-size: 7px; } .pmm-ui .viz-captured-order > div em { color: var(--ink); font-size: 9px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-capture-status { display: flex; align-items: center; gap: 6px; margin-top: 11px; color: var(--green); font-size: 8px; } .pmm-ui .viz-capture-status i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--green-bg); font-style: normal; }
.pmm-ui .viz-captured-order > button { width: 100%; margin-top: 12px; padding: 8px; border: 0; border-radius: 8px; background: var(--action-blue); color: white; font-size: 9px; font-weight: 800; }
.pmm-ui .viz-reactions { position: absolute; right: 2%; bottom: 22px; display: flex; gap: 7px; }
.pmm-ui .viz-reactions span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: white; box-shadow: 0 8px 18px -10px rgb(15 23 42 / 45%); font-size: 11px; }
.pmm-ui .viz-comment-order { display: grid; grid-template-columns: 1fr 39%; gap: 18px; padding: 20px; background: var(--panel-bg) !important; }
.pmm-ui .viz-live-comments { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: white; }
.pmm-ui .viz-live-preview { position: relative; display: flex; height: 84px; align-items: center; justify-content: center; background: linear-gradient(145deg, #15213a, var(--brand-blue)); color: white; }
.pmm-ui .viz-live-preview > span { position: absolute; top: 10px; left: 11px; padding: 4px 6px; border-radius: 4px; background: #dc2626; font-size: 7px; font-weight: 800; }
.pmm-ui .viz-live-preview > i { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; font-style: normal; }
.pmm-ui .viz-live-preview > small { position: absolute; right: 11px; bottom: 9px; color: #dbe7ff; font-size: 8px; }
.pmm-ui .viz-comment-list { padding: 7px 12px 10px; }
.pmm-ui .viz-comment-list article { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-comment-list article.is-selected { border-radius: 9px; background: var(--soft-blue); }
.pmm-ui .viz-comment-list article > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e2e8f0; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-comment-list article span, .pmm-ui .viz-comment-list article strong, .pmm-ui .viz-comment-list article small { display: block; min-width: 0; }
.pmm-ui .viz-comment-list article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .viz-comment-list article small { color: var(--muted); font-size: 7px; }
.pmm-ui .viz-comment-list article > b { color: var(--action-blue); font-size: 8px; }
.pmm-ui .viz-message-preview { position: relative; align-self: center; padding: 14px; border: 6px solid var(--ink); border-radius: 24px; background: white; box-shadow: 0 26px 50px -20px rgb(13 38 86 / 22%); }
.pmm-ui .viz-message-head { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-message-head > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--brand-blue); color: white; font-style: normal; }
.pmm-ui .viz-message-head span, .pmm-ui .viz-message-head strong, .pmm-ui .viz-message-head small { display: block; }
.pmm-ui .viz-message-head strong { font-size: 9px; } .pmm-ui .viz-message-head small { color: var(--muted); font-size: 7px; }
.pmm-ui .viz-message-bubble { margin-top: 24px; padding: 13px; border-radius: 12px; background: #f1f5f9; }
.pmm-ui .viz-message-bubble small, .pmm-ui .viz-message-bubble strong, .pmm-ui .viz-message-bubble span { display: block; }
.pmm-ui .viz-message-bubble small, .pmm-ui .viz-message-bubble span { color: var(--muted); font-size: 7px; } .pmm-ui .viz-message-bubble strong { margin: 8px 0 4px; font-size: 10px; }
.pmm-ui .viz-message-bubble button { width: 100%; background: var(--action-blue); color: white; }
.pmm-ui .viz-outcome { display: block; margin: 12px auto 0; color: var(--green); font-size: 8px; text-align: center; }

/* Inventory: readable status rows and stock levels, not a generic dashboard. */
.pmm-ui .viz-inventory { background: white; }
.pmm-ui .viz-stock-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px; background: var(--panel-bg); }
.pmm-ui .viz-stock-summary article { padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: white; }
.pmm-ui .viz-stock-summary small, .pmm-ui .viz-stock-summary strong { display: block; } .pmm-ui .viz-stock-summary small { color: var(--muted); font-size: 8px; } .pmm-ui .viz-stock-summary strong { margin-top: 3px; font-size: 20px; }
.pmm-ui .viz-stock-head { display: grid; grid-template-columns: 42% 1fr 70px; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--border); color: var(--subtle); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.pmm-ui .viz-stock-list { padding: 8px 18px 16px; }
.pmm-ui .viz-stock-list > div { display: grid; grid-template-columns: 42% 1fr 70px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-stock-list span { display: flex; align-items: center; gap: 8px; min-width: 0; } .pmm-ui .viz-stock-list span i { flex: 0 0 28px; height: 28px; overflow: hidden; border-radius: 8px; background: #f1eee8; }
.pmm-ui .viz-stock-list span b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .pmm-ui .viz-stock-list span b small { display: block; color: var(--muted); font-size: 7px; font-weight: 400; }
.pmm-ui .viz-stock-list em { position: relative; height: 7px; margin-bottom: 13px; border-radius: 999px; background: var(--border); } .pmm-ui .viz-stock-list em u { display: block; height: 100%; border-radius: inherit; background: var(--action-blue); text-decoration: none; } .pmm-ui .viz-stock-list em small { position: absolute; top: 11px; left: 0; color: var(--muted); font-size: 7px; font-style: normal; white-space: nowrap; }
.pmm-ui .viz-stock-list > div > strong { justify-self: end; padding: 5px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 7px; text-align: right; } .pmm-ui .viz-stock-list > div > strong.is-low { background: #fff4db; color: #9a6400; }

/* Follow-up: selected unpaid order with the final reminder message beside it. */
.pmm-ui .viz-followup { display: grid; grid-template-columns: 58% 1fr; gap: 18px; padding: 20px; background: var(--panel-bg) !important; }
.pmm-ui .viz-order-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: white; }
.pmm-ui .viz-order-panel nav { display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-order-panel nav span { padding: 5px 8px; border-radius: 999px; color: var(--muted); font-size: 8px; }
.pmm-ui .viz-order-panel nav span.is-active { background: var(--soft-blue); color: var(--action-blue); font-weight: 800; }
.pmm-ui .viz-order-panel article { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin: 0 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-order-panel article.is-selected { margin: 5px 8px; padding: 10px 8px; border: 1px solid #aac5f5; border-radius: 10px; background: var(--soft-blue); }
.pmm-ui .viz-order-panel article > i { width: 30px; height: 30px; overflow: hidden; border-radius: 8px; background: #f1eee8; }
.pmm-ui .viz-order-panel article span, .pmm-ui .viz-order-panel article strong, .pmm-ui .viz-order-panel article small { display: block; min-width: 0; }
.pmm-ui .viz-order-panel article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .pmm-ui .viz-order-panel article small { color: var(--muted); font-size: 7px; }
.pmm-ui .viz-order-panel article > b { color: var(--action-blue); font-size: 8px; }
.pmm-ui .viz-reminder-preview { align-self: center; padding: 18px; border-radius: 16px; background: white; box-shadow: 0 26px 50px -20px rgb(13 38 86 / 22%); }
.pmm-ui .viz-reminder-preview > small, .pmm-ui .viz-reminder-preview > strong, .pmm-ui .viz-reminder-preview > span, .pmm-ui .viz-reminder-preview > i { display: block; }
.pmm-ui .viz-reminder-preview > small { color: var(--action-blue); font-size: 8px; font-weight: 800; } .pmm-ui .viz-reminder-preview > strong { margin: 12px 0 5px; font-size: 15px; } .pmm-ui .viz-reminder-preview > span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.pmm-ui .viz-reminder-preview > .viz-reminder-label { display: flex; align-items: center; gap: 6px; }
.pmm-ui .viz-reminder-label svg { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 2; }
.pmm-ui .viz-reminder-preview > div { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding: 10px; border-radius: 10px; background: var(--panel-bg); font-size: 8px; } .pmm-ui .viz-reminder-preview > div em { color: var(--muted); font-style: normal; }
.pmm-ui .viz-reminder-preview > .viz-payment-methods { display: block; margin-top: 10px; padding: 0; background: transparent; }
.pmm-ui .viz-payment-methods > small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.pmm-ui .viz-payment-methods > span { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pmm-ui .viz-payment-methods > span b { display: grid; min-height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: white; color: #475569; font-size: 8px; letter-spacing: .02em; }
.pmm-ui .viz-payment-methods > span b.is-selected { border-color: #9fc1ff; background: var(--soft-blue); color: var(--action-blue); box-shadow: inset 0 0 0 1px #d7e6ff; }
.pmm-ui .viz-reminder-preview button { width: 100%; background: var(--action-blue); color: white; } .pmm-ui .viz-reminder-preview > i { margin-top: 10px; color: var(--green); font-size: 8px; font-style: normal; text-align: center; }

/* Loyalty: an EasyStore customer profile plus the concrete next-order reward. */
.pmm-ui .viz-loyalty { display: grid; grid-template-columns: 52% 1fr; align-items: center; gap: 14px; padding: 18px; background: white !important; }
.pmm-ui .viz-customer-profile { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: 0 26px 50px -30px rgb(13 38 86 / 24%); }
.pmm-ui .viz-profile-main { display: flex; align-items: center; gap: 11px; padding: 16px 18px 10px; }
.pmm-ui .viz-profile-main .viz-avatar { flex: 0 0 auto; margin: 0; background: var(--brand-blue); color: white; }
.pmm-ui .viz-profile-main span, .pmm-ui .viz-profile-main strong, .pmm-ui .viz-profile-main small { display: block; } .pmm-ui .viz-profile-main strong { font-size: 11px; } .pmm-ui .viz-profile-main small { color: var(--muted); font-size: 8px; }
.pmm-ui .viz-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 5px 18px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--border); }
.pmm-ui .viz-profile-stats span { padding: 10px 8px; background: var(--panel-bg); } .pmm-ui .viz-profile-stats small, .pmm-ui .viz-profile-stats b { display: block; } .pmm-ui .viz-profile-stats small { color: var(--muted); font-size: 7px; } .pmm-ui .viz-profile-stats b { margin-top: 3px; font-size: 11px; }
.pmm-ui .viz-order-activity { margin: 0 18px 18px; } .pmm-ui .viz-order-activity > small { color: var(--subtle); font-size: 7px; font-weight: 800; }
.pmm-ui .viz-order-activity > span { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; margin-top: 7px; padding: 10px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.pmm-ui .viz-order-activity i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: white; font-size: 8px; font-style: normal; } .pmm-ui .viz-order-activity b, .pmm-ui .viz-order-activity em { font-size: 8px; } .pmm-ui .viz-order-activity em { font-style: normal; font-weight: 800; }
.pmm-ui .viz-member-card { display: flex; height: 288px; flex-direction: column; padding: 22px; border-radius: 20px; background: var(--brand-blue); color: white; box-shadow: 0 26px 50px -20px rgb(13 38 86 / 30%); }
.pmm-ui .viz-member-card small { color: #c9d9fa; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.pmm-ui .viz-avatar { display: grid; width: 46px; height: 46px; margin: 25px 0 10px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 16%); font-size: 13px; font-weight: 800; }
.pmm-ui .viz-member-card > strong { font-size: 12px; } .pmm-ui .viz-member-card > b { margin-top: auto; color: var(--yellow); font-size: 25px; } .pmm-ui .viz-member-card em { color: #dbe7ff; font-size: 8px; font-style: normal; }
.pmm-ui .viz-reward { position: relative; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-bg); }
.pmm-ui .viz-reward > small, .pmm-ui .viz-reward > strong, .pmm-ui .viz-reward > span { display: block; }
.pmm-ui .viz-reward > small { color: var(--action-blue); font-size: 8px; font-weight: 800; }
.pmm-ui .viz-reward-badge { position: absolute; top: 18px; right: 18px; padding: 5px 8px; border-radius: 999px; background: var(--yellow); color: black !important; font-size: 7px !important; font-weight: 800; }
.pmm-ui .viz-reward > strong { margin: 24px 0 5px; font-size: 32px; } .pmm-ui .viz-reward > span { color: var(--muted); font-size: 9px; }
.pmm-ui .viz-reward > div { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; padding: 11px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.pmm-ui .viz-reward > div i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: white; font-style: normal; } .pmm-ui .viz-reward > div b { font-size: 9px; }
.pmm-ui .viz-reward button { width: 100%; background: var(--action-blue); color: white; }

@media (max-width: 1023px) {
  .pmm-ui .cmp-canvas { min-height: 365px; padding: 16px 16px 52px; }
  .pmm-ui .cmp-canvas > [class^="viz-"] { min-height: 310px; }
  .pmm-ui .viz-report { grid-template-columns: 39% 61%; }
  .pmm-ui .viz-control-room { grid-template-columns: 52% 48%; }
  .pmm-ui .viz-control-product { grid-template-columns: 38% 1fr; margin: 12px 6px 12px 12px; padding: 10px; }
  .pmm-ui .viz-control-product > i { height: 150px; }
  .pmm-ui .viz-control-settings { margin: 12px 12px 6px 6px; padding: 10px; }
  .pmm-ui .viz-control-queue { margin: 0 12px 10px 6px; }
  .pmm-ui .viz-comment-order, .pmm-ui .viz-followup { grid-template-columns: 1fr 41%; gap: 10px; padding: 12px; }
  .pmm-ui .viz-live-device { left: 7%; width: 31%; }
  .pmm-ui .viz-floating-comments { left: 1%; width: 39%; }
  .pmm-ui .viz-captured-order { right: 3%; width: 43%; padding: 12px; }
  .pmm-ui .viz-reactions { display: none; }
  .pmm-ui .viz-live-preview { height: 64px; }
  .pmm-ui .viz-message-preview, .pmm-ui .viz-reminder-preview { padding: 10px; }
  .pmm-ui .viz-loyalty { grid-template-columns: 42% 1fr; gap: 12px; padding: 14px; }
  .pmm-ui .viz-member-card { height: 270px; padding: 15px; }
}

/* Beyond Marketplace composition: open product-proof clusters, not framed mini dashboards. */
.pmm-ui .cmp-canvas { min-height: 420px; padding: 28px 24px 54px; overflow: visible; background: transparent; }
.pmm-ui .cmp-canvas > [class^="viz-"] { min-height: 340px; overflow: visible; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; }
.pmm-ui .cmp-sat { top: 12px; left: 8px; }

.pmm-ui .viz-report { display: block; }
.pmm-ui .viz-chart { position: absolute; top: 52px; left: 4%; z-index: 2; width: 43%; height: 238px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 50px -28px rgb(13 38 86 / 36%); }
.pmm-ui .viz-product-panel { position: absolute; top: 18px; right: 2%; width: 61%; min-height: 302px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: white; box-shadow: 0 28px 56px -28px rgb(13 38 86 / 32%); }
.pmm-ui .viz-lineup-action { margin-bottom: 14px; }

.pmm-ui .viz-control-room { display: block; }
.pmm-ui .viz-control-top { position: absolute; top: 8px; left: 6%; z-index: 3; width: 70%; border: 1px solid var(--border); border-radius: 13px 13px 0 0; box-shadow: 0 22px 44px -30px rgb(13 38 86 / 30%); }
.pmm-ui .viz-control-product { position: absolute; top: 62px; left: 6%; z-index: 2; width: 53%; height: 250px; margin: 0; border: 1px solid var(--border); border-radius: 0 0 15px 15px; box-shadow: 0 28px 56px -30px rgb(13 38 86 / 32%); }
.pmm-ui .viz-control-settings { position: absolute; top: 38px; right: 1%; z-index: 4; width: 43%; margin: 0; box-shadow: 0 26px 52px -26px rgb(13 38 86 / 36%); }
.pmm-ui .viz-control-queue { position: absolute; right: 4%; bottom: 0; z-index: 5; width: 48%; margin: 0; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: 0 18px 36px -24px rgb(13 38 86 / 34%); }

.pmm-ui .viz-live-offer { position: relative; min-height: 380px; }
.pmm-ui .viz-offer-phone { position: absolute; top: 2px; bottom: auto; left: 5%; box-sizing: border-box; width: min(38%, 205px); height: auto; aspect-ratio: 9 / 16; overflow: hidden; border: 7px solid var(--ink); border-radius: 29px; background: var(--ink); box-shadow: 0 28px 54px -26px rgb(13 38 86 / 42%); }
.pmm-ui .viz-offer-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.pmm-ui .viz-offer-phone::after { position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, rgb(15 23 42 / 88%)); content: ""; }
.pmm-ui .viz-live-topbar { position: absolute; top: 8px; right: 8px; left: 8px; z-index: 4; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: white; }
.pmm-ui .viz-live-topbar > i { display: grid; width: 28px; height: 28px; overflow: hidden; place-items: center; border: 2px solid white; border-radius: 50%; background: white; }
.pmm-ui .viz-live-topbar > i img { width: 16px; height: 16px; }
.pmm-ui .viz-offer-phone.is-instagram .viz-live-topbar > i { border-color: #f43f5e; box-shadow: 0 0 0 2px #f59e0b; }
.pmm-ui .viz-live-topbar span,
.pmm-ui .viz-live-topbar b,
.pmm-ui .viz-live-topbar small { display: block; min-width: 0; }
.pmm-ui .viz-live-topbar b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .viz-live-topbar > em { display: flex; align-items: center; gap: 4px; font-style: normal; }
.pmm-ui .viz-live-topbar > em b,
.pmm-ui .viz-live-topbar > em small { padding: 4px 5px; border-radius: 5px; color: white; font-size: 12px; line-height: 1; }
.pmm-ui .viz-live-topbar > em b { background: #ed2939; }
.pmm-ui .viz-live-topbar > em small { background: rgb(15 23 42 / 66%); }
.pmm-ui .viz-live-chatbox { position: absolute; right: 9px; bottom: 105px; left: 9px; z-index: 4; display: grid; gap: 5px; color: white; }
.pmm-ui .viz-live-chatbox > span { width: fit-content; max-width: 100%; padding: 5px 7px; border-radius: 9px; background: rgb(15 23 42 / 62%); font-size: 12px; line-height: 1.25; text-shadow: 0 1px 2px rgb(0 0 0 / 35%); }
.pmm-ui .viz-live-chatbox b { font-size: 12px; }
.pmm-ui .viz-offer-phone.is-instagram .viz-live-chatbox > span { padding: 2px 0; background: transparent; }
.pmm-ui .viz-live-offer-product { position: absolute; right: 9px; bottom: 51px; left: 9px; z-index: 4; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 10px; background: rgb(255 255 255 / 94%); }
.pmm-ui .viz-live-offer-product > i { width: 34px; height: 34px; overflow: hidden; border-radius: 7px; }
.pmm-ui .viz-live-offer-product > i img { width: 100%; height: 100%; object-fit: contain; }
.pmm-ui .viz-live-offer-product b,
.pmm-ui .viz-live-offer-product em { font-size: 12px; }
.pmm-ui .viz-live-offer-product em { color: var(--action-blue); font-style: normal; font-weight: 700; }
.pmm-ui .viz-live-composer { position: absolute; right: 9px; bottom: 9px; left: 9px; z-index: 4; display: grid; min-height: 34px; grid-template-columns: minmax(0, 1fr) 18px 18px; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 999px; color: white; }
.pmm-ui .viz-live-composer > span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .viz-live-composer svg { width: 16px; height: 16px; stroke-width: 2; }
.pmm-ui .viz-offer-phone.is-facebook .viz-live-composer { border-color: transparent; background: rgb(255 255 255 / 94%); color: #4b5563; }
.pmm-ui .viz-product-announcement { position: absolute; top: 46px; right: 4%; z-index: 3; width: 48%; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: white; box-shadow: 0 26px 52px -24px rgb(13 38 86 / 34%); }
.pmm-ui .viz-product-announcement > small { color: var(--action-blue); font-size: 8px; font-weight: 800; }
.pmm-ui .viz-product-announcement > span { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; margin-top: 11px; padding: 10px; border-radius: 11px; background: var(--panel-bg); }
.pmm-ui .viz-product-announcement > span i { grid-row: 1 / 3; width: 54px; height: 54px; overflow: hidden; border-radius: 9px; } .pmm-ui .viz-product-announcement > span i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-product-announcement > span b { font-size: 10px; } .pmm-ui .viz-product-announcement > span em { color: var(--action-blue); font-size: 10px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-product-announcement p { margin: 11px 0 0; padding: 9px 10px; border-radius: 8px; background: #edf3ff; color: var(--muted); font-size: 8px; } .pmm-ui .viz-product-announcement p strong { color: var(--action-blue); }
.pmm-ui .viz-product-announcement.is-promotion { top: 38px; padding: 17px; }
.pmm-ui .viz-promotion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pmm-ui .viz-promotion-header > small { color: var(--action-blue); font-size: 12px; font-weight: 800; }
.pmm-ui .viz-promotion-header > b { color: var(--green); font-size: 11px; }
.pmm-ui .viz-promotion-title { display: block; margin-top: 9px; font-size: 13px; }
.pmm-ui .viz-promotion-pricing { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 11px 12px; border-radius: 12px; background: #f6f8ff; }
.pmm-ui .viz-promotion-pricing span,
.pmm-ui .viz-promotion-pricing s,
.pmm-ui .viz-promotion-pricing b { display: block; }
.pmm-ui .viz-promotion-pricing s { color: var(--muted); font-size: 9px; font-weight: 500; }
.pmm-ui .viz-promotion-pricing b { margin-top: 1px; color: var(--ink); font-size: 25px; line-height: 1; }
.pmm-ui .viz-promotion-pricing em { padding: 7px 9px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pmm-ui .viz-promotion-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--ink); color: white; }
.pmm-ui .viz-promotion-timer span { display: flex; align-items: center; gap: 8px; }
.pmm-ui .viz-promotion-timer small { color: #cbd5e1; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.pmm-ui .viz-promotion-timer strong { min-width: 46px; color: white; font-size: 17px; line-height: 1; }
.pmm-ui .viz-promotion-timer em { color: #cbd5e1; font-size: 10px; font-style: normal; }
.pmm-ui .viz-product-announcement.is-promotion p { margin-top: 9px; text-align: center; }

@media (min-width: 521px) and (max-width: 1023px) {
  .pmm-ui .cmp-s2 .cmp-canvas { height: 380px; aspect-ratio: auto; }
}

@media (max-width: 520px) {
  .pmm-ui .cmp-s2 .cmp-canvas { height: 760px; aspect-ratio: auto; }
  .pmm-ui .cmp-s2 .viz-offer-phone {
    top: var(--cmp-safe);
    bottom: auto;
    left: 50%;
    width: min(72%, 220px);
    height: auto;
    transform: translateX(-50%);
  }
  .pmm-ui .cmp-s2 .viz-product-announcement.is-promotion {
    top: 432px;
    right: var(--cmp-safe);
    bottom: auto;
    left: var(--cmp-safe);
    width: auto;
  }
}

.pmm-ui .viz-live-offer.is-facebook .viz-live-offer-product {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 0;
}
.pmm-ui .viz-live-offer.is-facebook .viz-live-offer-product > i { grid-row: 1 / 3; }
.pmm-ui .viz-live-offer.is-facebook .viz-live-offer-product b,
.pmm-ui .viz-live-offer.is-facebook .viz-live-offer-product em { grid-column: 2; font-size: 11px; white-space: nowrap; }

/* Comment-to-order keeps the live moment readable while showing the resulting EasyStore order. */
.pmm-ui .viz-comment-journey {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 380px;
  grid-template-columns: 44% 34px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(120deg, #f8fafc 0 42%, #fff 42% 100%) !important;
  box-shadow: 0 28px 56px -30px rgb(13 38 86 / 32%);
}

.pmm-ui .viz-journey-phone {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 200px;
  height: auto;
  aspect-ratio: 9 / 16;
  justify-self: center;
  overflow: hidden;
  border: 7px solid var(--ink);
  border-radius: 30px;
  background: var(--ink);
  box-shadow: 0 24px 44px -20px rgb(15 23 42 / 52%);
}

.pmm-ui .viz-journey-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.pmm-ui .viz-journey-phone::after { position: absolute; inset: 26% 0 0; background: linear-gradient(transparent, rgb(15 23 42 / 88%)); content: ""; }
.pmm-ui .viz-journey-phone.is-instagram .viz-live-topbar > i { border-color: #f43f5e; box-shadow: 0 0 0 2px #f59e0b; }
.pmm-ui .viz-journey-phone.is-instagram .viz-live-chatbox > span { padding: 2px 0; background: transparent; }
.pmm-ui .viz-journey-phone.is-facebook .viz-live-composer { border-color: transparent; background: rgb(255 255 255 / 94%); color: #4b5563; }
.pmm-ui .viz-journey-phone .viz-live-chatbox { bottom: 58px; }
.pmm-ui .viz-journey-phone .viz-live-chatbox > .is-order-comment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}
.pmm-ui .viz-journey-phone .viz-live-chatbox > .is-order-comment mark {
  padding: 5px 7px;
  border-radius: 9px;
  font-weight: 800;
}
.pmm-ui .viz-journey-phone.is-facebook .viz-live-chatbox > .is-order-comment { padding-left: 7px; color: white; }
.pmm-ui .viz-journey-phone.is-facebook .viz-live-chatbox > .is-order-comment mark {
  border: 2px solid #60a5fa;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 24px -12px rgb(37 99 235 / 80%);
  color: var(--ink);
  text-shadow: none;
}
.pmm-ui .viz-journey-phone.is-instagram .viz-live-chatbox > .is-order-comment { color: white; }
.pmm-ui .viz-journey-phone.is-instagram .viz-live-chatbox > .is-order-comment mark {
  border: 2px solid #fb7185;
  background: rgb(15 23 42 / 76%);
  box-shadow: 0 10px 24px -12px rgb(225 48 108 / 78%);
  color: white;
}

.pmm-ui .viz-journey-handoff {
  position: relative;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 50%;
  background: white;
  color: var(--action-blue);
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 8px 18px -12px rgb(24 119 242 / 60%);
}

.pmm-ui .viz-journey-handoff::before,
.pmm-ui .viz-journey-handoff::after { content: none; }

.pmm-ui .viz-journey-order {
  position: relative;
  z-index: 2;
  width: min(300px, calc(100% - 18px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: white;
  box-shadow: 0 22px 44px -28px rgb(15 23 42 / 55%);
}

.pmm-ui .cmp-s3 .viz-journey-order > header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  border-bottom: 1px solid #edf1f5;
}

.pmm-ui .viz-journey-order header span,
.pmm-ui .viz-journey-order header small,
.pmm-ui .viz-journey-order header strong,
.pmm-ui .viz-journey-product span,
.pmm-ui .viz-journey-product small,
.pmm-ui .viz-journey-product strong,
.pmm-ui .viz-journey-message span,
.pmm-ui .viz-journey-message small,
.pmm-ui .viz-journey-message strong,
.pmm-ui .viz-journey-order footer span,
.pmm-ui .viz-journey-order footer small,
.pmm-ui .viz-journey-order footer strong { display: block; min-width: 0; }
.pmm-ui .viz-journey-order header small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.pmm-ui .viz-journey-order header strong { margin-top: 2px; font-size: 13px; }
.pmm-ui .viz-journey-order header em { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--soft-blue); color: var(--action-blue); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }

.pmm-ui .viz-journey-product,
.pmm-ui .viz-journey-message,
.pmm-ui .viz-journey-order footer { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; }
.pmm-ui .viz-journey-product > i,
.pmm-ui .viz-journey-message > i,
.pmm-ui .viz-journey-order footer > i { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 12px; background: #eef4ff; color: var(--action-blue); font-style: normal; font-weight: 800; }
.pmm-ui .viz-journey-product > i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-journey-product small,
.pmm-ui .viz-journey-message small,
.pmm-ui .viz-journey-order footer small { margin-bottom: 3px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pmm-ui .viz-journey-product strong,
.pmm-ui .viz-journey-message strong,
.pmm-ui .viz-journey-order footer strong { font-size: 12px; line-height: 1.25; }
.pmm-ui .viz-journey-product > b,
.pmm-ui .viz-journey-message > em,
.pmm-ui .viz-journey-order footer > em { color: #475569; font-size: 10px; font-style: normal; font-weight: 800; }
.pmm-ui .viz-journey-message { margin: 0 15px; padding: 11px 0; border-top: 1px solid #edf1f5; }
.pmm-ui .viz-journey-message > i img { width: 23px; height: 23px; object-fit: contain; }
.pmm-ui .viz-journey-message > em { padding: 4px 7px; border-radius: 999px; background: var(--soft-blue); color: var(--action-blue); }
.pmm-ui .viz-journey-order footer { background: var(--green-bg); }
.pmm-ui .viz-journey-order footer > i { background: #dcfce7; color: var(--green); }
.pmm-ui .viz-journey-order footer small,
.pmm-ui .viz-journey-order footer > em { color: var(--green); }

@media (min-width: 521px) and (max-width: 1199px) {
  .pmm-ui .cmp-s3 .cmp-canvas { height: 480px; aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .pmm-ui .cmp-s2 .cmp-canvas { min-height: 460px; }
}

@media (max-width: 520px) {
  .pmm-ui .cmp-s3 .cmp-canvas { height: 800px; aspect-ratio: auto; }
  .pmm-ui .viz-comment-journey { display: block; min-height: 0; overflow: visible; border: 0; background: transparent !important; box-shadow: none; }
  .pmm-ui .viz-journey-phone { position: absolute; top: var(--cmp-safe); left: 50%; width: min(74%, 225px); height: auto; transform: translateX(-50%); }
  .pmm-ui .viz-journey-handoff { position: absolute; top: 432px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .pmm-ui .viz-journey-order { position: absolute; top: 478px; right: var(--cmp-safe); left: var(--cmp-safe); width: auto; }
}

.pmm-ui .viz-live-offer-control { position: absolute; right: 10%; bottom: 18px; z-index: 4; width: 38%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: 0 20px 40px -24px rgb(13 38 86 / 34%); }
.pmm-ui .viz-live-offer-control small, .pmm-ui .viz-live-offer-control strong, .pmm-ui .viz-live-offer-control span { display: block; } .pmm-ui .viz-live-offer-control small { color: var(--action-blue); font-size: 7px; font-weight: 800; } .pmm-ui .viz-live-offer-control strong { margin-top: 4px; font-size: 17px; } .pmm-ui .viz-live-offer-control span { color: var(--muted); font-size: 7px; } .pmm-ui .viz-live-offer-control b { position: absolute; top: 11px; right: 12px; color: var(--green); font-size: 7px; }

.pmm-ui .viz-live-commerce::before { display: none; }
.pmm-ui .viz-live-device { top: 10px; bottom: 8px; left: 14%; width: 29%; }
.pmm-ui .viz-floating-comments { top: 50px; left: 0; width: 39%; }
.pmm-ui .viz-captured-order { right: 2%; width: 44%; border: 1px solid var(--border); box-shadow: 0 28px 56px -26px rgb(13 38 86 / 34%); }

.pmm-ui .viz-inventory { display: block; }
.pmm-ui .viz-inventory > header { position: absolute; top: 8px; left: 2%; z-index: 2; width: 70%; border: 1px solid var(--border); border-radius: 14px 14px 0 0; background: white; box-shadow: 0 24px 46px -32px rgb(13 38 86 / 30%); }
.pmm-ui .viz-stock-summary { position: absolute; top: 67px; left: 2%; z-index: 1; width: 70%; padding: 12px; border: 1px solid var(--border); border-top: 0; background: white; }
.pmm-ui .viz-stock-head { position: absolute; top: 158px; left: 2%; z-index: 1; width: 70%; background: white; }
.pmm-ui .viz-stock-list { position: absolute; top: 188px; left: 2%; z-index: 1; width: 70%; padding-top: 2px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; background: white; box-shadow: 0 30px 58px -32px rgb(13 38 86 / 34%); }
.pmm-ui .viz-stock-list > div { padding-right: 12px; padding-left: 12px; }
.pmm-ui .viz-stock-summary article { box-shadow: none; }
.pmm-ui .viz-stock-live { position: absolute; top: 92px; right: 1%; z-index: 4; width: 31%; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: white; box-shadow: 0 24px 48px -24px rgb(13 38 86 / 36%); }
.pmm-ui .viz-stock-live span { display: inline-block; padding: 4px 6px; border-radius: 5px; background: #dc2626; color: white; font-size: 7px; font-weight: 800; }
.pmm-ui .viz-stock-live strong, .pmm-ui .viz-stock-live small, .pmm-ui .viz-stock-live b { display: block; } .pmm-ui .viz-stock-live strong { margin-top: 12px; font-size: 11px; } .pmm-ui .viz-stock-live small { margin-top: 3px; color: #b45309; font-size: 8px; } .pmm-ui .viz-stock-live b { margin-top: 12px; padding: 8px; border-radius: 8px; background: var(--green-bg); color: var(--green); font-size: 8px; text-align: center; }

.pmm-ui .viz-followup { display: block; padding: 0; }
.pmm-ui .viz-order-panel { position: absolute; top: 18px; left: 1%; z-index: 1; width: 65%; height: 304px; box-shadow: 0 28px 56px -30px rgb(13 38 86 / 30%); }
.pmm-ui .viz-reminder-preview { position: absolute; top: 62px; right: 1%; z-index: 3; width: 43%; border: 1px solid var(--border); box-shadow: 0 26px 52px -24px rgb(13 38 86 / 36%); }

.pmm-ui .viz-loyalty { display: block; padding: 0; }
.pmm-ui .viz-customer-profile { position: absolute; top: 20px; left: 2%; z-index: 1; width: 64%; height: 300px; }
.pmm-ui .viz-reward { position: absolute; top: 72px; right: 1%; z-index: 3; width: 45%; box-shadow: 0 26px 52px -24px rgb(13 38 86 / 34%); }

@media (max-width: 1023px) {
  .pmm-ui .cmp-canvas { min-height: 350px; padding: 20px 12px 52px; }
  .pmm-ui .cmp-canvas > [class^="viz-"] { min-height: 290px; }
  .pmm-ui .viz-chart { top: 44px; width: 42%; height: 210px; }
  .pmm-ui .viz-product-panel { width: 63%; min-height: 268px; }
  .pmm-ui .viz-products { padding: 10px; }
  .pmm-ui .viz-lineup-action { margin: 0 10px 10px; }
  .pmm-ui .viz-control-product { height: 215px; }
  .pmm-ui .viz-control-product > i { height: 135px; }
  .pmm-ui .viz-control-queue { display: none; }
  .pmm-ui .viz-stock-head, .pmm-ui .viz-stock-list, .pmm-ui .viz-stock-summary, .pmm-ui .viz-inventory > header { width: 76%; }
  .pmm-ui .viz-stock-live { width: 29%; padding: 11px; }
  .pmm-ui .viz-order-panel, .pmm-ui .viz-customer-profile { width: 67%; }
  .pmm-ui .viz-reminder-preview, .pmm-ui .viz-reward { width: 45%; }
}

/* PMM Composite compact type ladder: 16 / 15 / 13 / 12 at reviewer size. */
.pmm-ui [class^="viz-"] header b,
.pmm-ui .viz-control-top b,
.pmm-ui .viz-product-announcement > span b,
.pmm-ui .viz-captured-order > strong,
.pmm-ui .viz-reminder-preview > strong,
.pmm-ui .viz-profile-main strong,
.pmm-ui .viz-stock-live strong { font-size: 16px; line-height: 1.25; }

.pmm-ui .viz-products strong,
.pmm-ui .viz-captured-order > div b,
.pmm-ui .viz-stock-list span b,
.pmm-ui .viz-order-panel article strong,
.pmm-ui .viz-product-announcement > span em,
.pmm-ui .viz-live-offer-control strong,
.pmm-ui .viz-reward > span,
.pmm-ui .viz-reward > div b { font-size: 15px; line-height: 1.25; }

.pmm-ui [class^="viz-"] header small,
.pmm-ui .viz-products small,
.pmm-ui .viz-lineup-action b,
.pmm-ui .viz-capture-status,
.pmm-ui .viz-captured-order > div small,
.pmm-ui .viz-stock-list span b small,
.pmm-ui .viz-stock-list em small,
.pmm-ui .viz-order-panel article small,
.pmm-ui .viz-reminder-preview > span,
.pmm-ui .viz-profile-main small,
.pmm-ui .viz-order-activity b,
.pmm-ui .viz-order-activity em,
.pmm-ui .viz-stock-live small,
.pmm-ui .viz-product-announcement p,
.pmm-ui .viz-live-offer-control span { font-size: 13px; line-height: 1.35; }

.pmm-ui [class^="viz-"] header em,
.pmm-ui .viz-products b,
.pmm-ui .viz-lineup-action small,
.pmm-ui .viz-lineup-action button,
.pmm-ui .viz-floating-comments article strong,
.pmm-ui .viz-floating-comments article small,
.pmm-ui .viz-floating-comments article > b,
.pmm-ui .viz-captured-order > small,
.pmm-ui .viz-captured-order > button,
.pmm-ui .viz-stock-head,
.pmm-ui .viz-stock-list > div > strong,
.pmm-ui .viz-order-panel nav span,
.pmm-ui .viz-order-panel article > b,
.pmm-ui .viz-reminder-preview > small,
.pmm-ui .viz-reminder-preview > div,
.pmm-ui .viz-reminder-preview button,
.pmm-ui .viz-reminder-preview > i,
.pmm-ui .viz-profile-stats small,
.pmm-ui .viz-order-activity > small,
.pmm-ui .viz-reward > small,
.pmm-ui .viz-reward-badge,
.pmm-ui .viz-reward button,
.pmm-ui .viz-product-announcement > small,
.pmm-ui .viz-live-offer-control small,
.pmm-ui .viz-live-offer-control b,
.pmm-ui .viz-stock-live span,
.pmm-ui .viz-stock-live b { font-size: 12px; line-height: 1.3; }

.pmm-ui .viz-products { gap: 7px; padding: 12px; }
.pmm-ui .viz-products article { grid-template-columns: 46px 1fr auto; padding: 10px; }
.pmm-ui .viz-products article > i { width: 46px; height: 46px; }
.pmm-ui .viz-product-panel header { padding: 14px 16px; }
.pmm-ui .viz-lineup-action { margin: 0 12px 12px; }
.pmm-ui .viz-floating-comments { width: 43%; }
.pmm-ui .viz-floating-comments article { width: 92%; }
.pmm-ui .viz-captured-order { width: 47%; padding: 16px; }
.pmm-ui .viz-stock-list > div { min-height: 62px; }
.pmm-ui .viz-stock-live { width: 34%; }
.pmm-ui .viz-reminder-preview { width: 47%; }
.pmm-ui .viz-reward { width: 47%; }

/* Shared Composite spacing contract. */
.pmm-ui .cmp {
  --cmp-safe: 24px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.pmm-ui .cmp-canvas {
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  padding: 0;
}

.pmm-ui .cmp-canvas > [class^="viz-"] {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.pmm-ui .cmp-sat { display: none; }

/* S1 keeps product insight and selection in one decision workspace. */
.pmm-ui .viz-product-panel {
  display: grid;
  top: var(--cmp-safe);
  right: var(--cmp-safe);
  bottom: var(--cmp-safe);
  left: var(--cmp-safe);
  width: auto;
  min-height: 0;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
}

.pmm-ui .viz-product-panel header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  display: block;
  min-height: 64px;
  padding: 19px 92px 10px 16px;
}

.pmm-ui .viz-product-panel header span { min-width: 0; }
.pmm-ui .viz-product-panel header b { max-width: 260px; }
.pmm-ui .viz-product-panel header em { position: absolute; top: 14px; right: 14px; white-space: nowrap; }
.pmm-ui .viz-products { min-height: 0; grid-template-rows: repeat(3, minmax(54px, 1fr)); align-content: stretch; gap: 5px; padding: 8px 12px; overflow: hidden; }
.pmm-ui .viz-products article {
  min-height: 54px;
  grid-template: 1fr / 42px minmax(0, 1fr) 132px 92px;
  gap: 10px;
  padding: 6px 10px;
}
.pmm-ui .viz-products article.is-selected { border-color: #b8d0fa; background: #f8fbff; }
.pmm-ui .viz-products article > i { grid-row: auto; width: 42px; height: 42px; }
.pmm-ui .viz-product-copy,
.pmm-ui .viz-product-signal { display: block; min-width: 0; }
.pmm-ui .viz-product-signal {
  width: 100%;
  justify-self: stretch;
  text-align: left;
}
.pmm-ui .viz-product-copy strong,
.pmm-ui .viz-product-signal b { display: block; }
.pmm-ui .viz-product-signal b {
  grid-area: auto;
  padding: 0;
  background: none;
  color: var(--action-blue);
  font-size: 12px;
  text-align: left;
}
.pmm-ui .viz-products article > button {
  width: 92px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--action-blue);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pmm-ui .viz-products article > button.is-selected { border-color: #cfe0ff; background: var(--soft-blue); }
.pmm-ui .viz-lineup-action { min-height: 48px; margin: 0 12px 10px; flex: 0 0 auto; justify-content: flex-end; }

/* All remaining clusters stay inside the same protected boundary. */
.pmm-ui .viz-offer-phone { top: var(--cmp-safe); bottom: auto; }
.pmm-ui .viz-product-announcement { top: 56px; right: var(--cmp-safe); }
.pmm-ui .viz-product-announcement.is-promotion { top: calc(var(--cmp-safe) - 4px); }
.pmm-ui .viz-live-offer-control { right: 38px; bottom: var(--cmp-safe); }
.pmm-ui .viz-live-device { top: var(--cmp-safe); bottom: var(--cmp-safe); }
.pmm-ui .viz-floating-comments { top: 72px; }
.pmm-ui .viz-captured-order { right: var(--cmp-safe); }
.pmm-ui .viz-inventory > header {
  position: absolute !important;
  top: var(--cmp-safe) !important;
  right: auto !important;
  left: var(--cmp-safe) !important;
  width: 63%;
}
.pmm-ui .viz-stock-summary { top: 96px; left: var(--cmp-safe); width: 63%; padding: 9px; }
.pmm-ui .viz-stock-summary article { padding: 8px; }
.pmm-ui .viz-stock-head { top: 177px; left: var(--cmp-safe); width: 63%; padding: 7px 12px; }
.pmm-ui .viz-stock-head span { white-space: nowrap; }
.pmm-ui .viz-stock-list { top: 208px; left: var(--cmp-safe); bottom: var(--cmp-safe); width: 63%; overflow: hidden; }
.pmm-ui .viz-stock-list > div { min-height: 0; height: 33.333%; grid-template-columns: 48% minmax(92px, 1fr) 68px; gap: 8px; padding: 4px 8px; }
.pmm-ui .viz-stock-list span b { overflow: visible; text-overflow: clip; white-space: normal; }
.pmm-ui .viz-stock-list span b small { margin-top: 2px; }
.pmm-ui .viz-stock-live { top: 108px; right: var(--cmp-safe); width: 27%; }
.pmm-ui .viz-order-panel { top: var(--cmp-safe); bottom: var(--cmp-safe); left: var(--cmp-safe); height: auto; }
.pmm-ui .viz-order-panel > header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
}
.pmm-ui .viz-order-panel nav { min-height: 48px; align-items: center; }
.pmm-ui .viz-reminder-preview { top: 98px; right: var(--cmp-safe); }
.pmm-ui .viz-customer-profile { top: var(--cmp-safe); bottom: var(--cmp-safe); left: var(--cmp-safe); height: auto; }
.pmm-ui .viz-customer-profile > header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  min-height: 72px;
  padding: 14px 120px 14px 16px;
}
.pmm-ui .viz-profile-main { min-height: 76px; }
.pmm-ui .viz-profile-stats,
.pmm-ui .viz-order-activity { width: 62%; margin-right: 0; }
.pmm-ui .viz-reward { right: var(--cmp-safe); }

@media (max-width: 1100px) {
  .pmm-ui .cmp-s1 .cmp-canvas { height: 380px; aspect-ratio: auto; }
  .pmm-ui .viz-reward { width: 44%; }
}

@media (max-width: 1023px) {
  .pmm-ui .cmp { --cmp-safe: 18px; }
  .pmm-ui .viz-product-panel { width: auto; }
  .pmm-ui .viz-product-panel header { padding-right: 92px; }
  .pmm-ui .viz-product-panel header b { max-width: 220px; }
  .pmm-ui .viz-product-panel header em { top: 12px; right: 10px; }
  .pmm-ui .viz-inventory > header,
  .pmm-ui .viz-stock-summary,
  .pmm-ui .viz-stock-head,
  .pmm-ui .viz-stock-list { width: 63%; }
  .pmm-ui .viz-stock-summary { top: 90px; }
  .pmm-ui .viz-stock-head { top: 170px; }
  .pmm-ui .viz-stock-list { top: 201px; }
}

@media (max-width: 520px) {
  .pmm-ui .viz-product-panel { grid-template-rows: 72px minmax(0, 1fr) 54px; }
  .pmm-ui .viz-product-panel header { min-height: 72px; padding-top: 18px; }
  .pmm-ui .viz-product-panel header b { max-width: 150px; }
  .pmm-ui .viz-products { gap: 5px; padding: 8px; }
  .pmm-ui .viz-products article {
    grid-template: auto auto / 38px minmax(0, 1fr) auto;
    gap: 1px 7px;
    padding: 6px 7px;
  }
  .pmm-ui .viz-products article > i { grid-row: 1 / 3; width: 38px; height: 38px; }
  .pmm-ui .viz-product-copy { grid-column: 2; grid-row: 1; }
  .pmm-ui .viz-product-signal { grid-column: 2; grid-row: 2; }
  .pmm-ui .viz-products article > button { width: auto; grid-column: 3; grid-row: 1 / 3; min-width: 70px; padding: 6px; }
  .pmm-ui .viz-lineup-action { margin-right: 8px; margin-left: 8px; }
  .pmm-ui .viz-stock-head,
  .pmm-ui .viz-stock-list > div { grid-template-columns: 1fr; }
  .pmm-ui .viz-stock-head span:nth-child(2),
  .pmm-ui .viz-stock-head span:nth-child(3),
  .pmm-ui .viz-stock-list em,
  .pmm-ui .viz-stock-list > div > strong { display: none; }
  .pmm-ui .viz-customer-profile > header { padding-right: 80px; }
  .pmm-ui .viz-customer-profile > header span { max-width: 108px; }
  .pmm-ui .viz-customer-profile > header em { display: none; }
  .pmm-ui .viz-profile-main .viz-avatar { display: none; }
  .pmm-ui .viz-profile-main > span:nth-child(2) { max-width: 110px; }
  .pmm-ui .viz-profile-stats,
  .pmm-ui .viz-order-activity { width: 50%; }
}

/* S4 tells one inventory story: an incoming live order changes available stock. */
.pmm-ui .viz-inventory > header {
  top: var(--cmp-safe) !important;
  left: var(--cmp-safe) !important;
  width: 58%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  background: white;
  box-shadow: 0 24px 46px -32px rgb(13 38 86 / 30%);
}

.pmm-ui .viz-stock-list {
  position: absolute;
  top: 100px;
  bottom: var(--cmp-safe);
  left: var(--cmp-safe);
  width: 58%;
  padding: 6px 14px 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: white;
  box-shadow: 0 30px 58px -32px rgb(13 38 86 / 34%);
}

.pmm-ui .viz-stock-list > div {
  height: 33.333%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 72px 74px;
  gap: 12px;
  padding: 8px 2px;
}

.pmm-ui .viz-stock-list span i { flex-basis: 38px; height: 38px; }
.pmm-ui .viz-stock-list span b { overflow: visible; font-size: 14px; text-overflow: clip; white-space: normal; }
.pmm-ui .viz-stock-list span b small { margin-top: 3px; font-size: 11px; }
.pmm-ui .viz-stock-list > div > .viz-stock-quantity {
  display: block;
  justify-self: end;
  padding: 0;
  background: none;
  color: var(--ink);
  text-align: right;
}
.pmm-ui .viz-stock-quantity small,
.pmm-ui .viz-stock-quantity b { display: block; }
.pmm-ui .viz-stock-quantity small { color: var(--muted); font-size: 10px; font-weight: 500; }
.pmm-ui .viz-stock-quantity b { margin-top: 2px; font-size: 18px; }
.pmm-ui .viz-stock-list > div > .viz-stock-status {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  justify-self: end;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.pmm-ui .viz-stock-list > div > .viz-stock-status.is-low { background: #fff4db; color: #9a6400; }

.pmm-ui .viz-stock-live {
  top: 82px;
  right: var(--cmp-safe);
  width: 30%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  box-shadow: 0 26px 52px -24px rgb(13 38 86 / 36%);
}
.pmm-ui .viz-stock-live > span {
  padding: 0;
  background: none;
  color: var(--action-blue);
  font-size: 10px;
  letter-spacing: .04em;
}
.pmm-ui .viz-stock-live > strong {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.pmm-ui .viz-stock-live > strong > i { width: 42px; height: 42px; overflow: hidden; border-radius: 9px; }
.pmm-ui .viz-stock-live > strong > i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-stock-live > strong b,
.pmm-ui .viz-stock-live > strong small { display: block; }
.pmm-ui .viz-stock-live > strong b { min-width: 0; font-size: 13px; }
.pmm-ui .viz-stock-live > strong small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.pmm-ui .viz-stock-change { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 11px; border-radius: 10px; background: var(--panel-bg); }
.pmm-ui .viz-stock-change small { color: var(--muted); font-size: 10px; }
.pmm-ui .viz-stock-change b { color: var(--ink); font-size: 15px; }
.pmm-ui .viz-stock-change s { color: var(--muted); font-weight: 500; }
.pmm-ui .viz-stock-live > em { display: block; margin-top: 12px; color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; }

@media (max-width: 1023px) {
  .pmm-ui .viz-inventory > header,
  .pmm-ui .viz-stock-list { width: 58%; }
  .pmm-ui .viz-stock-live { width: 30%; }
}

@media (max-width: 520px) {
  .pmm-ui .cmp-s4 .cmp-canvas { height: 380px; aspect-ratio: auto; }
  .pmm-ui .viz-inventory > header { right: var(--cmp-safe) !important; width: auto; min-height: 62px; padding: 11px 13px; }
  .pmm-ui .viz-stock-list { top: 80px; right: var(--cmp-safe); bottom: auto; width: auto; height: 158px; padding: 3px 10px 7px; }
  .pmm-ui .viz-stock-list > div { grid-template-columns: minmax(0, 1fr) 58px; gap: 8px; padding: 5px 0; }
  .pmm-ui .viz-stock-list span i { flex-basis: 30px; height: 30px; }
  .pmm-ui .viz-stock-list span b { font-size: 11px; }
  .pmm-ui .viz-stock-list span b small { font-size: 9px; }
  .pmm-ui .viz-stock-quantity small { font-size: 8px; }
  .pmm-ui .viz-stock-quantity b { font-size: 14px; }
  .pmm-ui .viz-stock-list > div > .viz-stock-status { display: none; }
  .pmm-ui .viz-stock-live {
    display: grid;
    top: auto;
    right: var(--cmp-safe);
    bottom: var(--cmp-safe);
    left: var(--cmp-safe);
    width: auto;
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    padding: 12px 14px;
  }
  .pmm-ui .viz-stock-live > span { grid-column: 1; grid-row: 1; font-size: 8px; }
  .pmm-ui .viz-stock-live > strong { display: block; width: auto; margin: 0; grid-column: 1; grid-row: 2; }
  .pmm-ui .viz-stock-live > strong > i { display: none; }
  .pmm-ui .viz-stock-live > strong b { font-size: 10px; }
  .pmm-ui .viz-stock-live > strong small { font-size: 8px; }
  .pmm-ui .viz-stock-change { position: static; width: auto; margin: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; display: block; padding: 8px 10px; text-align: right; }
  .pmm-ui .viz-stock-change small { font-size: 8px; }
  .pmm-ui .viz-stock-change b { display: block; margin-top: 2px; font-size: 12px; }
  .pmm-ui .viz-stock-live > em { position: static; margin: 0; grid-column: 1 / 3; grid-row: 3; font-size: 9px; }
}

/* S4 uses one causal story: a captured live order updates the matching shared-stock row. */
.pmm-ui .viz-inventory > header {
  top: var(--cmp-safe) !important;
  right: var(--cmp-safe) !important;
  left: auto !important;
  width: 61%;
  min-height: 76px;
  justify-content: flex-start;
  gap: 10px;
  padding: 13px 14px;
}

.pmm-ui .viz-inventory > header > span { min-width: 0; flex: 1; }
.pmm-ui .viz-inventory > header > em { flex: 0 0 auto; }
.pmm-ui .viz-inventory-brand { display: grid; width: 32px; height: 32px; flex: 0 0 32px; overflow: hidden; place-items: center; border-radius: 9px; background: #2455aa; }
.pmm-ui .viz-inventory-brand img { width: 100%; height: 100%; object-fit: cover; }

.pmm-ui .viz-stock-list {
  top: 112px;
  right: var(--cmp-safe);
  left: auto;
  width: 61%;
}

.pmm-ui .viz-stock-list > div { grid-template-columns: minmax(0, 1fr) 64px 60px; gap: 8px; }
.pmm-ui .viz-stock-list span b { min-width: 0; overflow: hidden; }
.pmm-ui .viz-stock-list span b small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pmm-ui .viz-stock-list > div.is-updated {
  position: relative;
  border: 1px solid #b9e8ca;
  border-radius: 12px;
  background: #f2fcf5;
  box-shadow: 0 13px 28px -22px rgb(22 101 52 / 42%);
}

.pmm-ui .viz-stock-list > div.is-context { opacity: .58; }
.pmm-ui .viz-stock-quantity .has-changed { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.pmm-ui .viz-stock-quantity .has-changed s { color: var(--muted); font-size: 13px; font-weight: 500; }
.pmm-ui .viz-stock-quantity .has-changed i { color: var(--muted); font-size: 11px; font-style: normal; }
.pmm-ui .viz-stock-quantity .has-changed mark { padding: 0; background: transparent; color: var(--ink); font-size: 18px; }

.pmm-ui .viz-stock-live {
  top: 100px;
  right: auto;
  left: var(--cmp-safe);
  width: 27%;
  padding: 16px;
}

.pmm-ui .viz-stock-live-channel { display: flex; align-items: center; gap: 8px; }
.pmm-ui .viz-stock-live-channel > i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; background: #1877f2; }
.pmm-ui .viz-stock-live-channel > i img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.pmm-ui .viz-stock-live-channel > span { min-width: 0; padding: 0; background: none; color: var(--action-blue); font-size: 9px; line-height: 1.3; }
.pmm-ui .viz-stock-live > strong { margin-top: 16px; }
.pmm-ui .viz-stock-live > strong b { min-width: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; }
.pmm-ui .viz-stock-live > strong small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .viz-stock-live > em { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.pmm-ui .viz-stock-connector { position: absolute; top: 166px; left: 32%; z-index: 5; display: grid; width: 6%; place-items: center; color: var(--action-blue); }
.pmm-ui .viz-stock-connector b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cfe0ff; border-radius: 50%; background: white; box-shadow: 0 10px 22px -15px rgb(21 92 228 / 70%); font-size: 17px; line-height: 1; }

@media (max-width: 1023px) {
  .pmm-ui .viz-inventory > header,
  .pmm-ui .viz-stock-list { width: 61%; }
  .pmm-ui .viz-stock-live { width: 27%; }
}

@media (max-width: 520px) {
  .pmm-ui .cmp-s4 .cmp-canvas { height: 560px; }
  .pmm-ui .viz-stock-live {
    display: block;
    top: var(--cmp-safe);
    right: var(--cmp-safe);
    bottom: auto;
    left: var(--cmp-safe);
    width: auto;
    min-height: 132px;
    padding: 12px 14px;
  }
  .pmm-ui .viz-stock-live-channel > i { width: 22px; height: 22px; flex-basis: 22px; }
  .pmm-ui .viz-stock-live-channel > i img { width: 13px; height: 13px; }
  .pmm-ui .viz-stock-live-channel > span { font-size: 8px; }
  .pmm-ui .viz-stock-live > strong { display: grid; width: auto; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; margin-top: 10px; }
  .pmm-ui .viz-stock-live > strong > i { display: block; width: 36px; height: 36px; }
  .pmm-ui .viz-stock-live > strong b { font-size: 11px; }
  .pmm-ui .viz-stock-live > strong small { font-size: 9px; }
  .pmm-ui .viz-stock-live > em { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 9px; }
  .pmm-ui .viz-stock-connector { top: 166px; left: 50%; width: auto; transform: translateX(-50%); }
  .pmm-ui .viz-stock-connector b { width: 28px; height: 28px; transform: rotate(90deg); font-size: 16px; }
  .pmm-ui .viz-inventory > header { top: 212px !important; right: var(--cmp-safe) !important; left: var(--cmp-safe) !important; width: auto; min-height: 64px; padding: 10px 12px; }
  .pmm-ui .viz-inventory-brand { width: 28px; height: 28px; flex-basis: 28px; }
  .pmm-ui .viz-stock-list { top: 330px; right: var(--cmp-safe); left: var(--cmp-safe); width: auto; height: 210px; }
  .pmm-ui .viz-stock-list > div.is-updated { padding-right: 7px; padding-left: 7px; }
  .pmm-ui .viz-stock-quantity .has-changed s,
  .pmm-ui .viz-stock-quantity .has-changed i { font-size: 10px; }
  .pmm-ui .viz-stock-quantity .has-changed mark { font-size: 14px; }
}

/* Loyalty tells two different stories: member acquisition, then reward redemption. */
.pmm-ui .viz-member-earned,
.pmm-ui .viz-reward-redemption {
  display: grid;
  position: relative;
  place-items: center;
  padding: 34px 42px;
}

.pmm-ui .viz-member-earned::before,
.pmm-ui .viz-reward-redemption::before {
  position: absolute;
  inset: 12% 10%;
  border-radius: 42px;
  background: #edf4ff;
  content: "";
  transform: rotate(-3deg);
}

.pmm-ui .viz-member-order {
  display: flex;
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 28px;
  width: 228px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  box-shadow: 0 18px 36px -24px rgb(13 38 86 / 50%);
}

.pmm-ui .viz-member-order > i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: #1877f2;
}

.pmm-ui .viz-member-order > i img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.pmm-ui .viz-member-order span,
.pmm-ui .viz-member-order small,
.pmm-ui .viz-member-order strong { display: block; min-width: 0; }
.pmm-ui .viz-member-order small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.pmm-ui .viz-member-order strong { margin-top: 2px; font-size: 11px; }
.pmm-ui .viz-member-order > b { margin-left: auto; color: var(--green); font-size: 10px; white-space: nowrap; }

.pmm-ui .viz-new-member-card {
  position: relative;
  z-index: 1;
  width: 68%;
  max-width: 390px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--brand-blue);
  box-shadow: 0 30px 60px -28px rgb(13 38 86 / 55%);
  color: white;
  transform: translate(30px, 5px);
}

.pmm-ui .viz-new-member-card > header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex;
  width: 100%;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.pmm-ui .viz-new-member-card > header > span { display: flex; min-width: 0; align-items: center; gap: 11px; }
.pmm-ui .viz-new-member-card > header i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--action-blue);
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
}
.pmm-ui .viz-new-member-card > header b,
.pmm-ui .viz-new-member-card > header small { display: block; }
.pmm-ui .viz-new-member-card > header b { font-size: 13px; }
.pmm-ui .viz-new-member-card > header small { margin-bottom: 3px; color: #cfe0ff; font-size: 8px; letter-spacing: .06em; }
.pmm-ui .viz-new-member-card > header em { padding: 6px 9px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }

.pmm-ui .viz-member-points { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 22px; }
.pmm-ui .viz-member-points span,
.pmm-ui .viz-member-points small,
.pmm-ui .viz-member-points strong { display: block; }
.pmm-ui .viz-member-points small { color: #cfe0ff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.pmm-ui .viz-member-points strong { margin-top: 6px; color: var(--yellow); font-size: 34px; line-height: 1; }
.pmm-ui .viz-member-points > i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 12%); color: var(--yellow); font-size: 30px; font-style: normal; font-weight: 400; }
.pmm-ui .viz-new-member-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: rgb(0 0 0 / 12%); color: #dbe7ff; font-size: 9px; }
.pmm-ui .viz-new-member-card > footer strong { color: white; font-size: 11px; }

.pmm-ui .viz-member-outcome {
  display: flex;
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 34px;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid #b9e8ca;
  border-radius: 14px;
  background: #f2fcf5;
  box-shadow: 0 18px 36px -24px rgb(13 38 86 / 45%);
}
.pmm-ui .viz-member-outcome > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 13px; font-style: normal; }
.pmm-ui .viz-member-outcome span,
.pmm-ui .viz-member-outcome small,
.pmm-ui .viz-member-outcome strong { display: block; }
.pmm-ui .viz-member-outcome small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.pmm-ui .viz-member-outcome strong { margin-top: 2px; font-size: 11px; }

.pmm-ui .viz-reward-redemption::before { inset: 10% 17%; background: #f1f3f7; transform: rotate(3deg); }
.pmm-ui .viz-reward-checkout {
  position: relative;
  z-index: 1;
  width: 72%;
  max-width: 410px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
  box-shadow: 0 30px 60px -28px rgb(13 38 86 / 45%);
}
.pmm-ui .viz-reward-checkout > header { display: flex; position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pmm-ui .viz-reward-checkout > header span,
.pmm-ui .viz-reward-checkout > header small,
.pmm-ui .viz-reward-checkout > header strong { display: block; }
.pmm-ui .viz-reward-checkout > header small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.pmm-ui .viz-reward-checkout > header strong { margin-top: 2px; font-size: 14px; }
.pmm-ui .viz-reward-checkout > header em { padding: 7px 10px; border-radius: 999px; background: #edf4ff; color: var(--action-blue); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pmm-ui .viz-reward-product { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px 18px; }
.pmm-ui .viz-reward-product > i { width: 46px; height: 46px; overflow: hidden; border-radius: 11px; background: #f1eee8; }
.pmm-ui .viz-reward-product img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-reward-product span,
.pmm-ui .viz-reward-product strong,
.pmm-ui .viz-reward-product small { display: block; min-width: 0; }
.pmm-ui .viz-reward-product strong { font-size: 12px; }
.pmm-ui .viz-reward-product small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pmm-ui .viz-reward-product > b { font-size: 13px; }

.pmm-ui .viz-redeem-points { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 16px 10px; padding: 11px 12px; border: 1px solid #b9e8ca; border-radius: 13px; background: #f2fcf5; }
.pmm-ui .viz-redeem-points > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 12px; font-style: normal; }
.pmm-ui .viz-redeem-points span,
.pmm-ui .viz-redeem-points small,
.pmm-ui .viz-redeem-points strong { display: block; }
.pmm-ui .viz-redeem-points small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.pmm-ui .viz-redeem-points strong { margin-top: 2px; font-size: 12px; }
.pmm-ui .viz-redeem-points > em { padding: 5px 9px; border-radius: 999px; background: var(--green); color: white; font-size: 8px; font-style: normal; font-weight: 800; }

.pmm-ui .viz-reward-checkout dl { margin: 0; padding: 4px 18px 10px; }
.pmm-ui .viz-reward-checkout dl div { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; color: var(--muted); font-size: 10px; }
.pmm-ui .viz-reward-checkout dt,
.pmm-ui .viz-reward-checkout dd { margin: 0; }
.pmm-ui .viz-reward-checkout dl .is-saving { color: var(--green); font-weight: 700; }
.pmm-ui .viz-reward-checkout dl .is-total { margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13px; font-weight: 800; }
.pmm-ui .viz-reward-checkout dl .is-total dd { font-size: 18px; }
.pmm-ui .viz-reward-checkout > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; background: var(--brand-blue); color: white; font-size: 9px; }
.pmm-ui .viz-reward-checkout > footer b { color: var(--yellow); font-size: 11px; }

@media (max-width: 520px) {
  .pmm-ui .cmp-s6 .cmp-canvas,
  .pmm-ui .cmp-s7 .cmp-canvas { height: 500px; aspect-ratio: auto; }
  .pmm-ui .viz-member-earned,
  .pmm-ui .viz-reward-redemption { padding: 26px var(--cmp-safe); }
  .pmm-ui .viz-member-earned::before,
  .pmm-ui .viz-reward-redemption::before { inset: 12% 5%; }
  .pmm-ui .viz-member-order { top: 32px; left: var(--cmp-safe); width: calc(100% - (var(--cmp-safe) * 2)); }
  .pmm-ui .viz-new-member-card { width: 100%; transform: translateY(22px); }
  .pmm-ui .viz-member-outcome { right: var(--cmp-safe); bottom: 28px; }
  .pmm-ui .viz-new-member-card > header { min-height: 66px; padding: 11px 13px; }
  .pmm-ui .viz-new-member-card > header em { font-size: 8px; }
  .pmm-ui .viz-member-points { padding: 21px 17px; }
  .pmm-ui .viz-new-member-card > footer { padding: 11px 14px; }
  .pmm-ui .viz-reward-checkout { width: 100%; }
  .pmm-ui .viz-reward-checkout > header { padding: 12px 14px; }
  .pmm-ui .viz-reward-product { padding: 12px 14px; }
  .pmm-ui .viz-redeem-points { margin: 0 12px 8px; }
  .pmm-ui .viz-reward-checkout dl { padding-right: 14px; padding-left: 14px; }
  .pmm-ui .viz-reward-checkout > footer { padding: 10px 14px; }
}

/* Customer acquisition and retention use one focused product surface each. */
.pmm-ui .viz-customer-acquisition,
.pmm-ui .viz-customer-retention {
  display: grid;
  position: relative;
  place-items: center;
  padding: 34px 30px;
}

.pmm-ui .viz-customer-acquisition::before,
.pmm-ui .viz-customer-retention::before {
  position: absolute;
  inset: 12% 7%;
  border-radius: 28px;
  background: #edf4ff;
  content: "";
}

.pmm-ui .viz-customer-retention::before {
  inset: 8% 16%;
  background: #f0f3f8;
  transform: rotate(3deg);
}

.pmm-ui .viz-customer-acquisition::before { display: none; }

.pmm-ui .viz-customer-record,
.pmm-ui .viz-member-wallet {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 500px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 28px 56px -30px rgb(13 38 86 / 42%);
}

.pmm-ui .viz-customer-record > header,
.pmm-ui .viz-member-wallet > header {
  display: flex;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.pmm-ui .viz-customer-record > header > span,
.pmm-ui .viz-member-wallet > header > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.pmm-ui .viz-customer-record > header i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border-radius: 9px;
}

.pmm-ui .viz-customer-record > header i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-customer-record > header b { font-size: 13px; }
.pmm-ui .viz-customer-record > header em { padding: 6px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }

.pmm-ui .viz-record-profile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
}

.pmm-ui .viz-record-profile > i,
.pmm-ui .viz-member-wallet > header > span > i {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #edf4ff;
  color: var(--action-blue);
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
}

.pmm-ui .viz-record-profile span,
.pmm-ui .viz-record-profile strong,
.pmm-ui .viz-record-profile small { display: block; min-width: 0; }
.pmm-ui .viz-record-profile strong { font-size: 13px; }
.pmm-ui .viz-record-profile small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pmm-ui .viz-record-profile > b { color: var(--green); font-size: 10px; white-space: nowrap; }

.pmm-ui .viz-record-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 17px; }
.pmm-ui .viz-record-benefits > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-bg); }
.pmm-ui .viz-record-benefits > div:first-child { border-color: #d8e4ff; background: #f5f8ff; }
.pmm-ui .viz-record-benefits span,
.pmm-ui .viz-record-benefits small,
.pmm-ui .viz-record-benefits strong { display: block; min-width: 0; }
.pmm-ui .viz-record-benefits small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.pmm-ui .viz-record-benefits strong { margin-top: 4px; font-size: 14px; }
.pmm-ui .viz-record-benefits em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }

.pmm-ui .viz-customer-record > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; border-top: 1px solid var(--border); background: #fbfcfe; color: var(--muted); font-size: 9px; }
.pmm-ui .viz-customer-record > footer span { display: flex; align-items: center; gap: 7px; }
.pmm-ui .viz-customer-record > footer i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: #1877f2; }
.pmm-ui .viz-customer-record > footer i img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.pmm-ui .viz-customer-record > footer strong { color: var(--ink); font-size: 10px; }

.pmm-ui .viz-welcome-email {
  position: relative;
  z-index: 1;
  width: 82%;
  max-width: 440px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 28px 56px -30px rgb(13 38 86 / 42%);
}

.pmm-ui .viz-welcome-email > header {
  display: flex;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.pmm-ui .viz-welcome-email > header > span { display: flex; min-width: 0; align-items: center; gap: 10px; }
.pmm-ui .viz-welcome-email > header i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: #edf4ff; color: var(--action-blue); font-size: 15px; font-style: normal; }
.pmm-ui .viz-welcome-email > header b,
.pmm-ui .viz-welcome-email > header small { display: block; }
.pmm-ui .viz-welcome-email > header b { font-size: 12px; }
.pmm-ui .viz-welcome-email > header small { margin-bottom: 2px; color: var(--action-blue); font-size: 8px; letter-spacing: .05em; }
.pmm-ui .viz-welcome-email > header em { padding: 6px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }

.pmm-ui .viz-email-body { padding: 18px 20px 16px; }
.pmm-ui .viz-email-body > small,
.pmm-ui .viz-email-body > strong,
.pmm-ui .viz-email-body > p { display: block; margin: 0; }
.pmm-ui .viz-email-body > small { color: var(--muted); font-size: 9px; }
.pmm-ui .viz-email-body > strong { margin-top: 6px; font-size: 16px; }
.pmm-ui .viz-email-body > p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.pmm-ui .viz-email-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.pmm-ui .viz-email-rewards > div { padding: 10px 11px; border: 1px solid #d8e4ff; border-radius: 11px; background: #f5f8ff; }
.pmm-ui .viz-email-rewards small,
.pmm-ui .viz-email-rewards strong { display: block; }
.pmm-ui .viz-email-rewards small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.pmm-ui .viz-email-rewards strong { margin-top: 4px; font-size: 13px; }
.pmm-ui .viz-email-body > button { width: 100%; margin-top: 12px; padding: 9px 12px; border: 0; border-radius: 9px; background: var(--action-blue); color: white; font-size: 10px; font-weight: 800; }
.pmm-ui .viz-welcome-email > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); background: #fbfcfe; color: var(--muted); font-size: 9px; }
.pmm-ui .viz-welcome-email > footer strong { color: var(--green); font-size: 9px; }

.pmm-ui .viz-customer-retention .viz-reward-checkout {
  width: 82%;
  max-width: 440px;
}

.pmm-ui .viz-member-wallet { width: 78%; max-width: 430px; }
.pmm-ui .viz-member-wallet > header { border-bottom: 0; background: var(--brand-blue); color: white; }
.pmm-ui .viz-member-wallet > header > span > i { width: 38px; height: 38px; flex: 0 0 38px; background: white; }
.pmm-ui .viz-member-wallet > header b,
.pmm-ui .viz-member-wallet > header small { display: block; }
.pmm-ui .viz-member-wallet > header b { font-size: 12px; }
.pmm-ui .viz-member-wallet > header small { margin-bottom: 2px; color: #cfe0ff; font-size: 8px; letter-spacing: .05em; }
.pmm-ui .viz-member-wallet > header em { padding: 7px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }

.pmm-ui .viz-wallet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px 9px; }
.pmm-ui .viz-wallet-heading span,
.pmm-ui .viz-wallet-heading small,
.pmm-ui .viz-wallet-heading strong { display: block; }
.pmm-ui .viz-wallet-heading small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.pmm-ui .viz-wallet-heading strong { margin-top: 3px; font-size: 13px; }
.pmm-ui .viz-wallet-heading > b { color: var(--muted); font-size: 9px; }

.pmm-ui .viz-wallet-perks { display: grid; gap: 8px; padding: 0 15px 14px; }
.pmm-ui .viz-wallet-perks > div { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; }
.pmm-ui .viz-wallet-perks > div.is-selected { border-color: #b9e8ca; background: #f2fcf5; }
.pmm-ui .viz-wallet-perks > div > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #edf4ff; color: var(--action-blue); font-size: 12px; font-style: normal; }
.pmm-ui .viz-wallet-perks > div.is-selected > i { background: var(--green); color: white; }
.pmm-ui .viz-wallet-perks span,
.pmm-ui .viz-wallet-perks strong,
.pmm-ui .viz-wallet-perks small { display: block; min-width: 0; }
.pmm-ui .viz-wallet-perks strong { font-size: 11px; }
.pmm-ui .viz-wallet-perks small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.pmm-ui .viz-wallet-perks em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }

.pmm-ui .viz-member-wallet > footer { padding: 11px 15px 14px; border-top: 1px solid var(--border); background: #fbfcfe; }
.pmm-ui .viz-member-wallet > footer > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.pmm-ui .viz-member-wallet > footer > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pmm-ui .viz-member-wallet > footer span { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: white; font-size: 8px; font-weight: 700; white-space: nowrap; }
.pmm-ui .viz-member-wallet > footer i { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; }
.pmm-ui .viz-member-wallet > footer img { width: 16px; height: 16px; object-fit: contain; }

@media (max-width: 520px) {
  .pmm-ui .cmp-s6 .cmp-canvas,
  .pmm-ui .cmp-s7 .cmp-canvas { height: 470px; }
  .pmm-ui .viz-customer-acquisition,
  .pmm-ui .viz-customer-retention { padding: 24px var(--cmp-safe); }
  .pmm-ui .viz-customer-acquisition::before,
  .pmm-ui .viz-customer-retention::before { inset: 10% 3%; transform: none; }
  .pmm-ui .viz-customer-record,
  .pmm-ui .viz-member-wallet,
  .pmm-ui .viz-welcome-email,
  .pmm-ui .viz-customer-retention .viz-reward-checkout { width: 100%; }
  .pmm-ui .viz-record-profile { grid-template-columns: 42px minmax(0, 1fr); }
  .pmm-ui .viz-record-profile > b { grid-column: 2; }
  .pmm-ui .viz-record-benefits { grid-template-columns: 1fr; }
  .pmm-ui .viz-customer-record > footer { align-items: flex-start; flex-direction: column; }
  .pmm-ui .viz-email-body { padding: 15px 16px 14px; }
  .pmm-ui .viz-member-wallet > footer span { justify-content: center; padding: 6px 3px; font-size: 7px; }
}

/* Past-order affinity turns two related products into one live-selling idea. */
.pmm-ui .viz-affinity-report {
  display: grid;
  position: relative;
  place-items: center;
  padding: 32px;
}

.pmm-ui .viz-affinity-report::before {
  position: absolute;
  inset: 12% 8%;
  border-radius: 30px;
  background: #edf4ff;
  content: "";
  transform: rotate(-2deg);
}

.pmm-ui .viz-affinity-panel {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 500px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 28px 56px -30px rgb(13 38 86 / 42%);
}

.pmm-ui .viz-affinity-panel > header {
  display: flex;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border);
}

.pmm-ui .viz-affinity-panel > header span,
.pmm-ui .viz-affinity-panel > header small,
.pmm-ui .viz-affinity-panel > header b { display: block; min-width: 0; }
.pmm-ui .viz-affinity-panel > header small { margin-bottom: 2px; color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.pmm-ui .viz-affinity-panel > header b { font-size: 14px; }
.pmm-ui .viz-affinity-panel > header em { padding: 6px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }

.pmm-ui .viz-affinity-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 15px 17px 12px;
}

.pmm-ui .viz-affinity-products > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fbfcfe;
}

.pmm-ui .viz-affinity-products > div > i { width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: #f1eee8; }
.pmm-ui .viz-affinity-products > div > i img { width: 100%; height: 100%; object-fit: cover; }
.pmm-ui .viz-affinity-products span,
.pmm-ui .viz-affinity-products small,
.pmm-ui .viz-affinity-products strong,
.pmm-ui .viz-affinity-products em { display: block; min-width: 0; }
.pmm-ui .viz-affinity-products small { color: var(--action-blue); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.pmm-ui .viz-affinity-products strong { margin-top: 2px; font-size: 11px; line-height: 1.2; }
.pmm-ui .viz-affinity-products em { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.pmm-ui .viz-affinity-plus { display: grid; width: 30px; height: 30px; place-self: center; place-items: center; border-radius: 50%; background: var(--action-blue); color: white; font-size: 18px; }

.pmm-ui .viz-affinity-insight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 17px 13px;
  padding: 12px 13px;
  border: 1px solid #b9e8ca;
  border-radius: 13px;
  background: #f2fcf5;
}

.pmm-ui .viz-affinity-insight span,
.pmm-ui .viz-affinity-insight small,
.pmm-ui .viz-affinity-insight strong { display: block; min-width: 0; }
.pmm-ui .viz-affinity-insight small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.pmm-ui .viz-affinity-insight strong { margin-top: 3px; font-size: 11px; }
.pmm-ui .viz-affinity-insight > b { padding: 6px 9px; border-radius: 999px; background: var(--green); color: white; font-size: 8px; white-space: nowrap; }

.pmm-ui .viz-affinity-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 17px; border-top: 1px solid var(--border); background: #fbfcfe; }
.pmm-ui .viz-affinity-panel > footer span { color: var(--muted); font-size: 9px; font-weight: 700; }
.pmm-ui .viz-affinity-panel > footer button { padding: 8px 11px; border: 0; border-radius: 9px; background: var(--action-blue); color: white; font-size: 9px; font-weight: 800; }

@media (max-width: 520px) {
  .pmm-ui .cmp-s1b .cmp-canvas { height: 470px; aspect-ratio: auto; }
  .pmm-ui .viz-affinity-report { padding: 24px var(--cmp-safe); }
  .pmm-ui .viz-affinity-report::before { inset: 9% 3%; transform: none; }
  .pmm-ui .viz-affinity-panel { width: 100%; }
  .pmm-ui .viz-affinity-products { grid-template-columns: 1fr; gap: 7px; padding: 12px 14px 10px; }
  .pmm-ui .viz-affinity-products > div { grid-template-columns: 42px minmax(0, 1fr); padding: 8px 10px; }
  .pmm-ui .viz-affinity-products > div > i { width: 42px; height: 42px; }
  .pmm-ui .viz-affinity-plus { width: 26px; height: 26px; font-size: 15px; }
  .pmm-ui .viz-affinity-insight { margin: 0 14px 10px; padding: 10px 11px; }
  .pmm-ui .viz-affinity-panel > footer { padding: 10px 14px; }
}

/*
 * Production Composite density bindings.
 *
 * The canonical pmm-composite.css owns the 16 / 15 / 13 / 12 type ladder and
 * control dimensions. These bindings map the established live-commerce proof
 * markup to those roles without changing the shared section shell.
 */
.pmm-ui .pmm-proof-surface,
.pmm-ui .pmm-proof-surface * {
  font-size: var(--cui-support) !important;
  font-weight: 400 !important;
  line-height: 1.35;
}

.pmm-ui .pmm-proof-surface :is(strong, b, mark) {
  font-size: var(--cui-primary) !important;
  font-weight: 600 !important;
}

.pmm-ui .pmm-proof-surface :is(header strong, header b),
.pmm-ui .pmm-proof-surface > strong {
  font-size: var(--cui-title) !important;
  font-weight: 700 !important;
}

.pmm-ui .pmm-proof-surface small {
  font-size: var(--cui-aux) !important;
  font-weight: 700 !important;
}

.pmm-ui .pmm-proof-surface em,
.pmm-ui .pmm-proof-surface button {
  font-weight: 600 !important;
}

.pmm-ui .pmm-proof-surface header em {
  font-size: var(--cui-aux) !important;
}

.pmm-ui .pmm-proof-surface button {
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1;
}

.pmm-ui .pmm-proof-surface > header,
.pmm-ui .pmm-proof-surface .viz-product-panel > header,
.pmm-ui .pmm-proof-surface .viz-order-panel > header,
.pmm-ui .pmm-proof-surface.viz-inventory > header {
  padding: 14px 18px !important;
}

.pmm-ui .pmm-proof-surface :is(
  .viz-products article,
  .viz-affinity-products > div,
  .viz-journey-product,
  .viz-journey-order > footer,
  .viz-stock-list > div,
  .viz-order-panel article,
  .viz-reward-product
) {
  padding: 11px 18px !important;
}

.pmm-ui .pmm-proof-surface .viz-journey-message {
  margin-inline: 0 !important;
  padding: 12px 18px !important;
}

.pmm-ui .pmm-proof-surface .viz-stock-list {
  padding: 0 !important;
}

@media (min-width: 521px) {
  .pmm-ui .pmm-proof-surface .viz-stock-list,
  .pmm-ui .pmm-proof-surface.viz-inventory > header {
    width: 66%;
  }

  .pmm-ui .pmm-proof-surface .viz-stock-list > div {
    grid-template-columns: minmax(0, 1fr) 72px 78px;
  }

  .pmm-ui .pmm-proof-surface .viz-stock-live {
    width: 24%;
  }
}

.pmm-ui .pmm-proof-surface :is(
  .viz-stock-live,
  .viz-reminder-preview,
  .viz-email-body
),
.pmm-ui .pmm-proof-surface.viz-captured-order,
.pmm-ui .pmm-proof-surface.viz-product-announcement {
  padding: 14px 18px 20px !important;
}

.pmm-ui .pmm-proof-surface :is(
  .viz-journey-order > footer,
  .viz-welcome-email > footer,
  .viz-reward-checkout > footer
) {
  padding-bottom: 20px !important;
}

/* Inventory sync is presented as one continuous cause-and-effect surface. */
.pmm-ui .viz-inventory > header {
  top: 24px !important;
  right: 7% !important;
  left: 7% !important;
  width: auto !important;
  min-height: 72px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 24px 46px -34px rgb(13 38 86 / 34%);
}

.pmm-ui .viz-inventory .viz-stock-live {
  display: grid;
  box-sizing: border-box;
  top: 96px;
  right: 7%;
  left: 7%;
  width: auto;
  height: 78px;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 18px !important;
  border-color: var(--border);
  border-radius: 0;
  background: #f4f8ff;
  box-shadow: none;
}

.pmm-ui .viz-inventory.is-instagram .viz-stock-live-channel > i {
  background: linear-gradient(145deg, #833ab4, #fd1d1d 62%, #fcb045);
}

.pmm-ui .viz-inventory .viz-stock-live-channel span,
.pmm-ui .viz-inventory .viz-stock-live-channel b,
.pmm-ui .viz-inventory .viz-stock-live-channel small {
  display: block;
  min-width: 0;
}

.pmm-ui .viz-inventory .viz-stock-live-channel span {
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
}

.pmm-ui .viz-inventory .viz-stock-live-channel b { font-size: 13px; }
.pmm-ui .viz-inventory .viz-stock-live-channel small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.pmm-ui .viz-inventory .viz-stock-live > strong { margin: 0; }
.pmm-ui .viz-inventory .viz-stock-live > em {
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--green-bg);
  white-space: nowrap;
}

.pmm-ui .viz-inventory .viz-stock-list {
  top: 174px;
  right: 7%;
  bottom: 24px;
  left: 7%;
  width: auto !important;
  height: auto;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 30px 58px -34px rgb(13 38 86 / 34%);
}

.pmm-ui .viz-inventory .viz-stock-list > div {
  grid-template-columns: minmax(0, 1fr) 74px 78px;
  gap: 14px;
}

.pmm-ui .viz-inventory .viz-stock-list > div.is-updated {
  border-width: 0 0 1px;
  border-radius: 0;
  background: #f2fcf5;
  box-shadow: inset 4px 0 0 #65c889;
}

.pmm-ui .viz-inventory .viz-stock-list > div.is-context { opacity: .68; }
.pmm-ui .viz-inventory .viz-stock-connector { display: none; }

@media (max-width: 520px) {
  .pmm-ui .cmp-s4 .cmp-canvas { height: 440px; }

  .pmm-ui .viz-inventory > header {
    top: 18px !important;
    right: 12px !important;
    left: 12px !important;
    min-height: 64px;
    padding: 10px 12px !important;
  }

  .pmm-ui .viz-inventory .viz-stock-live {
    top: 82px;
    right: 12px;
    left: 12px;
    height: 92px;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    padding: 10px 12px !important;
  }

  .pmm-ui .viz-inventory .viz-stock-live-channel { grid-column: 1; grid-row: 1; }
  .pmm-ui .viz-inventory .viz-stock-live > strong {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }
  .pmm-ui .viz-inventory .viz-stock-live > strong > i { display: block; width: 32px; height: 32px; }
  .pmm-ui .viz-inventory .viz-stock-live > em {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 6px 8px;
    font-size: 8px;
  }

  .pmm-ui .viz-inventory .viz-stock-list {
    top: 174px;
    right: 12px;
    bottom: 18px;
    left: 12px;
    width: auto !important;
    height: auto;
  }

  .pmm-ui .viz-inventory .viz-stock-list > div {
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 8px;
  }
}

/* Inventory sync: keep the source, quantity, and stock change in one readable SKU row. */
.pmm-ui .viz-inventory > header {
  box-sizing: border-box;
  height: 72px;
  min-height: 0;
}

.pmm-ui .viz-inventory .viz-stock-live { display: none; }

.pmm-ui .viz-inventory .viz-stock-list {
  display: grid;
  top: 96px;
  grid-template-rows: 1.2fr 1fr 1fr;
}

.pmm-ui .viz-inventory .viz-stock-list > div {
  height: auto;
  min-height: 0;
}

.pmm-ui .viz-inventory .viz-stock-list > div.is-updated {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pmm-ui .viz-stock-list .viz-stock-source {
  display: flex;
  overflow: visible;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--action-blue);
  text-overflow: clip;
  white-space: nowrap;
}

.pmm-ui .viz-stock-source > span {
  display: grid;
  width: 16px;
  height: 16px;
  min-width: 16px;
  overflow: hidden;
  place-items: center;
  border-radius: 5px;
  background: #1877f2;
}

.pmm-ui .viz-inventory.is-instagram .viz-stock-source > span {
  background: linear-gradient(145deg, #833ab4, #fd1d1d 62%, #fcb045);
}

.pmm-ui .viz-stock-source > span img {
  width: 10px;
  height: 10px;
  filter: brightness(0) invert(1);
}

.pmm-ui .viz-inventory .viz-stock-quantity,
.pmm-ui .viz-inventory .viz-stock-quantity :is(b, mark) {
  background: transparent !important;
}

@media (max-width: 520px) {
  .pmm-ui .viz-inventory > header { height: 64px; }

  .pmm-ui .viz-inventory .viz-stock-list {
    top: 82px;
    grid-template-rows: 1.25fr 1fr 1fr;
  }

  .pmm-ui .viz-inventory .viz-stock-list > div.is-updated {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .pmm-ui .viz-stock-list .viz-stock-source {
    gap: 4px;
    margin-top: 3px;
    font-size: 8px;
  }

  .pmm-ui .viz-stock-source > span {
    width: 14px;
    height: 14px;
    min-width: 14px;
  }

  .pmm-ui .viz-stock-source > span img {
    width: 9px;
    height: 9px;
  }
}