/* SmartPOS reference-design implementation: Oct 2026.
   Layouts reproduce the approved dashboard/checkout/subscription visual language
   while retaining real API data, tenant colors, permissions and existing actions.
   CSS is isolated to the redesigned shell or sr-/sp-reference components. */
:root {
 --sr-text:#101a3b;--sr-subtle:#697999;--sr-border:#e5e9f4;
 --sr-purple:#823ca1;--sr-violet:#7941e6;--sr-blue:#367ef2;
 --sr-bg:#f7f8fe;--sr-green:#139b63;--sr-pink:#e34d76;
 --sr-shadow:0 8px 24px rgba(44,44,88,.045);
}
.sp-premium-root {background:radial-gradient(ellipse 65% 440px at 78% 0%,#eeedfc 0%,transparent 80%),var(--sr-bg)!important;color:var(--sr-text)}
.sp-premium-root .sp-sidebar {background:#fff!important;width:var(--sp-sidebar-width);box-shadow:none!important;border-right:1px solid #e7eaf3!important}
.sp-premium-root .sp-sidebar-brand {height:80px;padding:13px 18px}
.sp-premium-root .sp-sidebar-scroll {padding:15px 10px}
.sp-premium-root .sp-navigation .sp-sidebar-link {font-weight:590;font-size:12px;min-height:42px;padding:10px 13px}
.sp-premium-root .sp-navigation .sp-sidebar-link.active {border-radius:10px;background:color-mix(in srgb,var(--sp-primary) 9%,white)!important}
.sp-premium-root .sp-nav-bottom {background:#fff}
.sp-premium-root .sp-topbar {height:80px;background:rgba(255,255,255,.98);border-bottom:1px solid #e7ebf5;padding-inline:clamp(18px,2.2vw,34px)}
.sp-premium-root .sp-topbar-search {max-width:660px;background:#f5f6fb;height:45px;border:1px solid #eef0f7}
.sp-premium-root .sp-page-content {padding:clamp(24px,2.35vw,42px) clamp(18px,2.2vw,42px) 65px;max-width:2000px}
.sp-premium-root .sp-plan-message {border-radius:13px;padding:13px 16px!important}
.sp-premium-root .btn-primary {background:linear-gradient(112deg,var(--sp-primary),color-mix(in srgb,var(--sp-primary) 74%,#8844d4))!important;border:1px solid transparent!important}
.sp-premium-root .btn-outline-primary {background:#fff!important}
.sp-premium-root .sp-form-modal .modal-content,.sp-premium-root .sp-plan-modal-panel {border-radius:20px!important}
/* Reference dashboard building blocks */
.sp-reference {max-width:100%;color:var(--sr-text);font-size:13px}
.sp-reference .sr-hero {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:104px;margin:0 0 23px;padding:7px 4px 14px;position:relative}
.sp-reference .sr-hero::before {content:"";position:absolute;right:5%;top:-32px;width:48%;height:145px;border-radius:0 0 45% 50%;z-index:0;background:radial-gradient(ellipse at 50% -20%,color-mix(in srgb,var(--sp-primary) 7%,transparent),transparent 72%);pointer-events:none}
.sp-reference .sr-hero>*{position:relative;z-index:1}
.sp-reference .sr-hero h1 {font-size:clamp(27px,2.8vw,39px)!important;line-height:1.11;letter-spacing:-.045em;margin:9px 0 8px;color:#101a3b;font-weight:850}
.sp-reference .sr-hero h1 span {font-size:.75em;margin-left:5px}
.sp-reference .sr-hero p {font-size:13px;color:var(--sr-subtle);margin:0;max-width:680px;line-height:1.6}
.sp-reference .sr-hero .btn {display:inline-flex;align-items:center;gap:9px;min-height:46px!important;padding:10px 20px;font-size:12.5px;white-space:nowrap}
.sp-reference .sp-eyebrow {letter-spacing:.14em;font-size:10.5px;font-weight:850;color:var(--sp-primary)}
.sp-reference .sr-stats {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:20px}
.sp-reference .sr-stat {background:#fff;border:1px solid var(--sr-border);border-radius:18px;box-shadow:var(--sr-shadow);min-width:0;position:relative;min-height:146px;padding:19px 13px 20px 16px;display:flex;gap:11px;overflow:hidden}
.sp-reference .sr-stat::after {content:"";height:50px;width:120px;position:absolute;bottom:-7px;right:-8px;opacity:.42;background:radial-gradient(ellipse at bottom right,var(--sr-tone-light),transparent 72%);border-radius:50%;pointer-events:none}
.sp-reference .sr-stat>div {min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;justify-content:flex-start;padding-top:1px}
.sp-reference .sr-stat small {color:#677695;font-weight:700;font-size:11px;line-height:1.35}
.sp-reference .sr-stat strong {color:#12193d;letter-spacing:-.055em;line-height:1.1;font-size:clamp(20px,1.65vw,29px);font-weight:850;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sp-reference .sr-stat div>span {color:#8a96b0;font-size:10.5px;line-height:1.55}
.sp-reference .sr-stat>a {position:absolute;right:11px;top:13px;width:25px;height:25px;background:#f7f4fc;display:grid;place-items:center;border-radius:100%;text-decoration:none;color:#9765bd;font-weight:800;font-size:14px;opacity:0;transition:opacity .15s}
.sp-reference .sr-stat:hover>a,.sp-reference .sr-stat>a:focus-visible {opacity:1}
.sp-reference .sr-icon {flex:0 0 45px;width:45px;height:45px;display:inline-grid;place-items:center;border-radius:13px;background:var(--sr-tone-light,#f4eafa);color:var(--sr-tone,#853c9c);font-size:21px}
.sp-reference .sr-icon .sp-bs-icon,.sp-reference .sr-icon svg {width:23px!important;height:23px!important}
.sp-reference .sr-tone-plum {--sr-tone:#823d89;--sr-tone-light:#f7eafa}
.sp-reference .sr-tone-purple {--sr-tone:#843dea;--sr-tone-light:#f1e9ff}
.sp-reference .sr-tone-blue {--sr-tone:#2878ef;--sr-tone-light:#e9f2ff}
.sp-reference .sr-tone-rose {--sr-tone:#e24672;--sr-tone-light:#ffedf2}
.sp-reference .sr-tone-green {--sr-tone:#07996c;--sr-tone-light:#e8f9f1}
.sp-reference .sr-tone-amber {--sr-tone:#ea9000;--sr-tone-light:#fff3df}
.sp-reference .sr-tone-plum>.sr-icon,.sp-reference .sr-tone-purple>.sr-icon,.sp-reference .sr-tone-blue>.sr-icon,.sp-reference .sr-tone-rose>.sr-icon,.sp-reference .sr-tone-green>.sr-icon{background:var(--sr-tone-light);color:var(--sr-tone)}
.sp-reference .sr-card {background:#fff;border:1px solid var(--sr-border);box-shadow:var(--sr-shadow);border-radius:18px;padding:19px 20px 21px;min-width:0}
.sp-reference .sr-card-head {display:flex;gap:13px;align-items:center;margin-bottom:16px;min-width:0}
.sp-reference .sr-card-head>div {min-width:0;flex:1}
.sp-reference .sr-card-head h2 {margin:0 0 4px;font-size:16px!important;letter-spacing:-.025em;font-weight:820;color:#101a38}
.sp-reference .sr-card-head p {margin:0;color:#8895af;font-size:11px;line-height:1.45}
.sp-reference .sr-text-link{color:var(--sp-primary);font-size:11px;font-weight:800;white-space:nowrap;text-decoration:none}
.sp-reference .sr-muted {color:#8a96ac;font-size:12px}
.sp-reference .sr-status {display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:999px;font-weight:780;font-size:10px;white-space:nowrap;background:#f0f2f7;color:#6c7890}
.sp-reference .sr-status.is-success{color:#0d8b55;background:#e5f8ed}
.sp-reference .sr-status.is-warning{color:#b46b00;background:#fff1d7}
.sp-reference .sr-empty {display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center;min-height:180px;text-align:center;color:#8492ad}
.sp-reference .sr-empty strong {color:#1e2a49}
.sp-reference .sr-empty p {margin:0}
.sp-reference .sr-table {margin:0}
.sp-reference .sr-table th {background:#f7f9fd!important;color:#8793ac;padding:11px 10px;font-size:9.5px;white-space:nowrap;border:0;text-transform:uppercase;letter-spacing:.055em}
.sp-reference .sr-table td {padding:14px 10px;color:#55627e;border-bottom:1px solid #eff1f6!important;font-size:11.5px}
.sp-reference .sr-table tr:last-child td {border-bottom:0!important}
.sp-reference .sr-table td strong {color:#172447;font-size:11.5px}
/* Platform overview */
.sp-platform-overview .sr-platform-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(350px,.95fr);gap:17px}
.sp-platform-overview .sr-donut-layout {display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:26px;min-height:190px}
.sp-platform-overview .sr-donut {display:grid;place-items:center;width:150px;height:150px;border-radius:50%;position:relative}
.sp-platform-overview .sr-donut::before {content:"";position:absolute;inset:27px;background:white;border-radius:50%}
.sp-platform-overview .sr-donut>span {z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.sp-platform-overview .sr-donut strong {font-size:27px;font-weight:850;color:#161b44;line-height:1}
.sp-platform-overview .sr-donut small {font-size:10px;color:#929bb0;margin-top:7px}
.sp-platform-overview .sr-donut-legend {display:flex;flex-direction:column;gap:9px}
.sp-platform-overview .sr-donut-legend>div {display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f1f7;padding:9px 0}
.sp-platform-overview .sr-donut-legend strong {font-size:11.5px;flex:1}
.sp-platform-overview .sr-donut-legend>div>span:last-child {min-width:28px;background:#f4f3fb;text-align:center;padding:5px;border-radius:8px;color:#505777;font-weight:800}
.sp-platform-overview .sr-dot {width:11px;height:11px;border-radius:50%;display:block}
.sp-platform-overview .sr-dot-purple{background:#8538ec}.sp-platform-overview .sr-dot-blue{background:#3982f0}.sp-platform-overview .sr-dot-amber{background:#f59e0b}
.sp-reference .sr-action-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-reference .sr-action {min-width:0;display:flex;align-items:center;gap:11px;border:1px solid #e9eaf4;border-radius:12px;padding:14px;text-decoration:none;background:#fff;transition:background .16s,border-color .16s,transform .16s}
.sp-reference .sr-action:hover {background:#faf7ff;border-color:color-mix(in srgb,var(--sp-primary) 38%,#fff);transform:translateY(-1px)}
.sp-reference .sr-action>.sr-icon {width:42px;height:42px;flex-basis:42px}
.sp-reference .sr-action>span:nth-child(2) {display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.sp-reference .sr-action strong {font-size:11.8px;font-weight:810;color:#1a2345}
.sp-reference .sr-action small {color:#8b95ab;font-size:10px;line-height:1.45}
.sp-reference .sr-action-arrow {color:var(--sp-primary);font-size:17px;flex:0 0 auto}
.sp-platform-overview .sr-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center;padding:15px 0}
.sp-platform-overview .sr-steps>div {position:relative;display:flex;align-items:center;flex-direction:column;gap:7px}
.sp-platform-overview .sr-steps>div:not(:last-child)::after {content:"→";position:absolute;right:-10px;top:9px;color:#a0a9bc;font-size:16px}
.sp-platform-overview .sr-steps>div>span {display:grid;place-items:center;width:40px;height:40px;background:#f0e7ff;border-radius:50%;color:var(--sp-primary);font-weight:850}
.sp-platform-overview .sr-steps strong {color:#172344;font-size:11px}
.sp-platform-overview .sr-steps small {color:#8793a7;font-size:9.5px;max-width:100px}
.sp-reference .sr-card-footer {border-top:1px solid #edf0f5;padding-top:14px;margin-top:6px;text-align:right}
.sp-platform-overview .sr-platform-bottom {grid-column:1 / -1}
.sp-platform-overview .sr-shortcuts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sp-platform-overview .sr-shortcuts a {display:flex;justify-content:space-between;align-items:center;border-radius:11px;background:#faf9fe;border:1px solid #eaeaf4;padding:16px;text-decoration:none;font-weight:750;color:#39425f}
.sp-platform-overview .sr-shortcuts a span{color:var(--sp-primary)}
/* Business overview */
.sr-business-dashboard .sr-business-stats{margin-bottom:20px}
.sr-business-dashboard .sr-business-panels {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:17px}
.sr-business-dashboard .sr-attention {background:linear-gradient(140deg,#fff 35%,#fdf6fd)!important;display:flex;flex-direction:column}
.sr-business-dashboard .sr-attention-number {display:flex;gap:23px;align-items:center;padding:17px 7px 23px;border-bottom:1px solid #edf0f6}
.sr-business-dashboard .sr-attention-number .sr-icon {width:62px;height:62px;flex-basis:62px;border-radius:50%}
.sr-business-dashboard .sr-attention-number>div {display:flex;flex-direction:column}
.sr-business-dashboard .sr-attention-number strong {font-size:48px;letter-spacing:-.07em;line-height:1.05;color:#131a40;font-weight:850}
.sr-business-dashboard .sr-attention-number small {color:#75809d;font-size:12px}
.sr-business-dashboard .sr-attention>p {color:#72819a;margin:23px 3px 19px;line-height:1.65}
.sr-business-dashboard .sr-attention>.btn {align-self:flex-start}
.sr-business-dashboard .sr-support-mini {display:flex;align-items:center;gap:9px;border-top:1px solid #ebedf5;color:#7d8aa1;margin-top:auto;padding-top:21px;font-size:11px}
.sr-business-dashboard .sr-support-mini a{color:var(--sp-primary)}
.sr-business-dashboard .sr-alert-notice {margin-bottom:18px}
.sr-business-dashboard .sr-mini-insights {display:flex;gap:14px;margin-top:17px}
.sr-business-dashboard .sr-mini-insights article {flex:1;display:flex;align-items:center;gap:14px}
.sr-business-dashboard .sr-mini-insights article div {display:flex;flex-direction:column;gap:5px}
.sr-business-dashboard .sr-mini-insights article small{color:#7285a4}.sr-business-dashboard .sr-mini-insights article strong{color:#182348}
/* Shared status notices */
.sp-reference .sr-alert-notice{display:flex;align-items:center;gap:13px;border:1px solid #bce8f5;background:#eefdff;color:#29536a;padding:15px 18px;border-radius:13px;font-size:12px}
.sp-reference .sr-alert-notice>a{margin-left:auto;color:#236c86;font-weight:800;white-space:nowrap}
/* Subscription */
.sr-subscription .sr-subscription-hero-grid {display:grid;grid-template-columns:minmax(0,1.68fr) minmax(315px,1fr);gap:17px;margin:17px 0 22px}
.sr-subscription .sr-current-plan {padding:20px!important}
.sr-subscription .sr-current-heading {background:linear-gradient(120deg,#f8f6ff,#fefcff 55%,#f2ecff);border-radius:14px;display:flex;gap:15px;align-items:center;padding:20px;margin-bottom:14px;position:relative;overflow:hidden}
.sr-subscription .sr-current-heading:after{content:'♛';position:absolute;right:24px;top:-18px;font-size:104px;color:#a885ef;opacity:.23;line-height:1.4;pointer-events:none}
.sr-subscription .sr-current-heading>div{z-index:1}.sr-subscription .sr-current-heading .sr-icon{z-index:1;flex-basis:58px;width:58px;height:58px}
.sr-subscription .sr-current-heading h2{margin:4px 0 5px;font-size:24px!important;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sr-subscription .sr-current-heading p{margin:0;font-size:11px;color:#8291a9}
.sr-subscription .sr-plan-dates {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 0 21px;border-bottom:1px solid #e9edf5;gap:9px}
.sr-subscription .sr-plan-dates>div {display:flex;align-items:center;gap:10px;padding:0 12px;border-right:1px solid #edf0f6;min-width:0}
.sr-subscription .sr-plan-dates>div:first-child {padding-left:0}.sr-subscription .sr-plan-dates>div:last-child{border:0}
.sr-subscription .sr-plan-dates svg {color:var(--sp-primary);flex-shrink:0}
.sr-subscription .sr-plan-dates>div>span{display:flex;flex-direction:column;gap:5px;min-width:0}.sr-subscription .sr-plan-dates small{font-size:10px;color:#8696af}.sr-subscription .sr-plan-dates strong{font-size:11px;color:#202b47}
.sr-subscription .sr-plan-inclusions {padding:17px 0}.sr-subscription .sr-plan-inclusions h3{font-size:13px;margin:0 0 13px}
.sr-subscription .sr-check-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.sr-subscription .sr-check-grid>div {display:flex;align-items:center;gap:9px;color:#56617c;font-size:11.5px}
.sr-subscription .sr-check-grid>div>span {display:grid;place-items:center;background:#0f9b64;color:white;border-radius:100%;font-size:9px;flex:0 0 17px;height:17px;font-weight:850}
.sr-subscription .sr-plan-helper {display:flex;gap:11px;background:#f4f2ff;color:#7863c1;border-radius:11px;padding:15px;margin-top:3px}
.sr-subscription .sr-plan-helper>span{display:flex;flex-direction:column;gap:4px}.sr-subscription .sr-plan-helper strong{color:#2f3254;font-size:11px}.sr-subscription .sr-plan-helper small{font-size:10.5px;color:#8286a8;line-height:1.5}
.sr-subscription .sr-support-card {display:flex;flex-direction:column;padding:23px!important}
.sr-subscription .sr-support-card .sr-card-head{align-items:flex-start;margin-bottom:21px}
.sr-subscription .sr-support-name{font-size:12px;font-weight:800;margin-bottom:17px;color:#393d5b}
.sr-subscription .sr-contact-list{display:flex;flex-direction:column;gap:19px}
.sr-subscription .sr-contact-list>div{display:grid;grid-template-columns:22px 67px minmax(0,1fr);align-items:center;gap:9px;font-size:11px}
.sr-subscription .sr-contact-list svg{color:#4c5e8a}.sr-subscription .sr-contact-list>div>span{color:#7b85a1}
.sr-subscription .sr-contact-list strong{color:#465173;font-weight:650;overflow-wrap:anywhere}.sr-subscription .sr-contact-list a{color:#426ec8;overflow-wrap:anywhere}
.sr-subscription .sr-support-note{display:flex;gap:12px;background:#f4f4ff;color:#687aab;padding:14px;border-radius:11px;margin-top:auto;font-size:10.5px;line-height:1.6}
.sr-subscription .sr-support-note svg{flex-shrink:0;color:#587cff}
.sr-subscription .sr-plan-comparison{margin-top:25px}.sr-subscription .sr-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.sr-subscription .sr-section-title h2{font-size:22px!important;margin-bottom:6px}.sr-subscription .sr-section-title p{font-size:12px;color:#7787a3;margin:0}
.sr-subscription .sp-premium-plan-toolbar{justify-content:flex-end;margin:-5px 0 12px}.sr-subscription .sp-premium-plan-toolbar>span{display:none}
.sr-subscription .sp-plan-card{border-radius:16px!important;padding:22px!important}
.sr-subscription .sp-current-tier{border-color:color-mix(in srgb,var(--sp-primary) 47%,#fff)!important}
.sr-subscription .sp-premium-tier-top h3{font-size:14px!important;min-height:35px}.sr-subscription .sp-premium-tier-price{min-height:78px}
.sr-subscription .sp-premium-tier-features li {padding:5px 0 5px 23px}
/* POS — reference: catalogue up front, checkout pinned on desktop */
.sp-premium-root .sp-pos-page .sp-pos-layout.sr-pos-layout {display:grid;grid-template-columns:minmax(0,1.28fr) minmax(360px,1fr)!important;gap:18px!important;align-items:start}
.sp-premium-root .sr-pos-layout .sp-pos-search-panel,.sp-premium-root .sr-pos-layout .sp-pos-cart-panel {border-radius:18px!important;overflow:hidden;border:1px solid var(--sr-border)!important;box-shadow:var(--sr-shadow)!important}
.sp-premium-root .sr-pos-layout .sp-pos-cart-panel {position:sticky;top:88px}
.sp-premium-root .sr-pos-layout .sp-pos-panel-heading{padding:18px 21px!important;min-height:83px}
.sp-premium-root .sr-pos-layout .sp-pos-step{width:45px;height:45px;flex:0 0 45px;background:#f3e9ff;color:var(--sp-primary);font-size:12px;font-weight:850;display:grid;place-items:center}
.sp-premium-root .sr-pos-layout .sp-pos-panel-heading h2{font-size:17px!important;margin:0 0 3px}
.sp-premium-root .sr-pos-layout .sp-pos-panel-heading p{font-size:11px;margin:0;color:#8190a9}
.sp-premium-root .sr-pos-layout .sr-pos-search-tabs {display:flex;align-items:center;margin:5px 18px 0;background:#f5f6fb;border-radius:10px;padding:4px;gap:4px}
.sp-premium-root .sr-pos-layout .sr-pos-search-tabs button{flex:1;min-width:0;border:0;background:transparent;color:#7282a0;padding:10px;border-radius:8px;font-weight:750;font-size:11px;display:flex;justify-content:center;align-items:center;gap:8px}
.sp-premium-root .sr-pos-layout .sr-pos-search-tabs button.is-active{background:#fff;color:var(--sp-primary);box-shadow:0 2px 10px #28345312;border-bottom:2px solid var(--sp-primary)}
.sp-premium-root .sr-pos-layout .sr-pos-search-pane {padding:16px 20px 14px!important;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sp-premium-root .sr-pos-layout .sr-pos-search-pane>.sp-pos-autocomplete {flex:1 1 230px;min-width:0}
.sp-premium-root .sr-pos-layout .sr-pos-search-pane>.sp-pos-add-selected {flex:0 0 auto}
.sp-premium-root .sr-pos-layout .sr-pos-search-pane>.form-label,.sp-premium-root .sr-pos-layout .sr-pos-search-pane>.sp-pos-hint {width:100%}
.sp-premium-root .sr-pos-layout .sr-pos-search-pane>.input-group{width:100%}
.sp-premium-root .sr-pos-layout .sp-pos-product-browser {padding:18px 20px 24px;border-top:1px solid #edf0f5}
.sp-premium-root .sr-pos-layout .sp-pos-browser-heading h3{display:flex;align-items:center;gap:8px;font-size:15px!important}
.sp-premium-root .sr-pos-layout .sp-pos-browser-heading h3 svg{color:var(--sp-primary)}
.sp-premium-root .sr-pos-layout .sp-pos-category-list button {font-size:10.5px;padding:8px 12px}
.sp-premium-root .sr-pos-layout .sp-pos-product-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.sp-premium-root .sr-pos-layout .sp-pos-product-card {min-height:205px;padding:12px;gap:5px;border-radius:12px;justify-content:flex-start}
.sp-premium-root .sr-pos-layout .sr-pos-product-art {height:68px;width:100%;display:flex;align-items:center;justify-content:center;color:var(--sp-primary);background:linear-gradient(145deg,#f9f7ff,#f3f0fc);border-radius:10px;margin-bottom:5px}
.sp-premium-root .sr-pos-layout .sr-pos-product-art svg {width:34px!important;height:34px!important;opacity:.7}
.sp-premium-root .sr-pos-layout .sp-pos-product-card>strong{font-size:11px;line-height:1.25;min-height:26px}
.sp-premium-root .sr-pos-layout .sp-pos-product-card>small {font-size:9.5px}
.sp-premium-root .sr-pos-layout .sr-pos-product-price {font-size:12px;font-weight:850;color:#202445;margin-top:3px}
.sp-premium-root .sr-pos-layout .sp-pos-product-stock{font-size:9px;margin-bottom:5px}
.sp-premium-root .sr-pos-layout .sr-pos-add-btn {margin-top:auto;width:100%;min-height:30px;border:1px solid color-mix(in srgb,var(--sp-primary) 29%,#fff);border-radius:8px;background:#fff;color:var(--sp-primary);font-size:10.5px;font-weight:800;display:flex;gap:7px;align-items:center;justify-content:center}
.sp-premium-root .sr-pos-layout .sr-pos-add-btn:hover:not(:disabled){background:#f7efff}
.sp-premium-root .sr-pos-layout .sr-pos-add-btn:disabled{opacity:.45;cursor:not-allowed}
.sp-premium-root .sr-pos-layout .sp-pos-workflow-tips {display:none}
.sp-premium-root .sr-pos-layout .sp-pos-empty-cart {min-height:244px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;padding:24px}
.sp-premium-root .sr-pos-layout .sp-pos-empty-cart .sp-pos-empty-mark {width:85px;height:85px;border-radius:50%;background:#f7f7fb;display:grid;place-items:center;color:#8997b0}
.sp-premium-root .sr-pos-layout .sp-pos-empty-cart h3 {font-size:18px;margin:0}.sp-premium-root .sr-pos-layout .sp-pos-empty-cart p{margin:0;color:#8998b1}
.sp-premium-root .sr-pos-layout .sp-pos-checkout {border-top:1px solid #edf0f7;padding:20px!important}
.sp-premium-root .sr-pos-layout .sp-pos-grand-total{background:linear-gradient(110deg,#faf0ff,#f7effe);padding:13px 14px;border-radius:11px}
.sp-premium-root .sr-pos-layout .sp-pos-complete{min-height:48px;font-size:13px}
/* responsive behavior: no horizontal scroll for primary workflows */
@media(max-width:1380px){
 .sp-reference .sr-stats {grid-template-columns:repeat(3,minmax(0,1fr))}
 .sp-platform-overview .sr-platform-grid {grid-template-columns:1fr 1fr}
 .sp-premium-root .sr-pos-layout .sp-pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1150px){
 .sp-reference .sr-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-platform-overview .sr-platform-grid,.sr-business-dashboard .sr-business-panels,.sr-subscription .sr-subscription-hero-grid {grid-template-columns:1fr}
 .sp-premium-root .sp-pos-page .sp-pos-layout.sr-pos-layout{grid-template-columns:1fr!important}
 .sp-premium-root .sr-pos-layout .sp-pos-cart-panel{position:static}
 .sr-subscription .sr-support-note{margin-top:18px}
 .sp-premium-root .sr-pos-layout .sp-pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 .sp-reference .sr-hero{align-items:flex-start;flex-direction:column}
 .sp-reference .sr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-reference .sr-stat{min-height:129px;padding:15px 12px;gap:8px}
 .sp-reference .sr-stat>.sr-icon{width:37px;height:37px;flex-basis:37px}
 .sp-reference .sr-stat strong{font-size:21px}
 .sp-reference .sr-action-grid{grid-template-columns:1fr}
 .sp-platform-overview .sr-platform-grid{grid-template-columns:1fr}
 .sp-platform-overview .sr-shortcuts{grid-template-columns:1fr}
 .sp-platform-overview .sr-steps{grid-template-columns:repeat(2,1fr)}
 .sp-platform-overview .sr-steps>div::after{display:none}
 .sr-subscription .sr-plan-dates{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .sr-subscription .sr-plan-dates>div:nth-child(2){border-right:0}
 .sr-subscription .sr-contact-list>div{grid-template-columns:20px 58px minmax(0,1fr)}
 .sp-premium-root .sr-pos-layout .sp-pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
 .sp-reference .sr-hero h1 {font-size:27px!important}
 .sp-reference .sr-stats{grid-template-columns:1fr}
 .sp-reference .sr-stat{min-height:103px}
 .sp-platform-overview .sr-donut-layout{grid-template-columns:1fr;justify-items:center}
 .sp-platform-overview .sr-donut-legend{width:100%}
 .sr-subscription .sr-plan-dates{grid-template-columns:1fr 1fr}
 .sr-subscription .sr-current-heading{padding:14px}.sr-subscription .sr-current-heading h2{font-size:19px!important}
 .sr-subscription .sr-check-grid{grid-template-columns:1fr}
 .sp-premium-root .sr-pos-layout .sp-pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Product photography: consistent, letterboxed variants instead of stretched originals. */
.sp-product-image-form { display:grid;grid-template-columns:minmax(155px,235px) 1fr;gap:1.25rem;margin:1.35rem 0;padding:1.25rem;border:1px solid #e7e0ee;border-radius:18px;background:#fcfbff; }
.sp-product-image-preview { aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px dashed #d9c8e0;border-radius:16px;overflow:hidden; }
.sp-product-image-preview img { display:block;width:100%;height:100%;object-fit:contain; }
.sp-product-no-image {display:grid;place-items:center;color:#8f7b99;gap:.7rem;text-align:center; }
.sp-product-no-image .mud-icon-root,.sp-product-no-image svg {width:38px;height:38px;}
.sp-product-image-fields h3{font-size:1.05rem;font-weight:800;color:#1c2041;margin:.15rem 0 .5rem}
.sp-product-image-fields p{font-size:.88rem;color:#68738d;line-height:1.5}
.sp-product-row-photo{display:block;width:42px;height:42px;object-fit:contain;border:1px solid #e9e5f0;border-radius:11px;background:#fff;}
.sr-pos-product-art img {width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;padding:.35rem;}
.sr-pos-product-art { overflow:hidden; }
@media(max-width:690px){.sp-product-image-form {grid-template-columns:1fr}.sp-product-image-preview{width:180px;max-width:100%;}}

/* True data-backed overview panels */
.sr-live-insights-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin-top:1.2rem}
.sr-live-insights-grid .sr-card{min-width:0}
.sr-top-product-list{display:flex;flex-direction:column;gap:.25rem}
.sr-top-product-row{display:flex;align-items:center;gap:.75rem;padding:.62rem .2rem;border-bottom:1px solid #edf0f6;font-size:.86rem}
.sr-top-product-row:last-child{border-bottom:0}
.sr-rank{font-size:.8rem;color:#777b9b;width:1.35rem;text-align:center}
.sr-top-product-name{display:flex;flex:1;flex-direction:column;gap:.15rem;min-width:0}
.sr-top-product-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#171c42}
.sr-top-product-name small{font-size:.75rem;color:#737e97}
.sr-plan-requests{margin:1.2rem 0}
@media(max-width:960px){.sr-live-insights-grid{grid-template-columns:1fr}}


/* SMARTPOS LOGIN V2 — dedicated, responsive, branded sign-in layout (2026-10-23) */
.sp-login-layout .sp-login-screen.sp-login-v2 {
    display:grid;
    grid-template-columns:minmax(0, 49%) minmax(0, 51%);
    min-height:100vh;
    min-height:100svh;
    width:100%;
    overflow-x:clip;
    background:#f7f8fd;
    color:#182342;
}
.sp-login-layout .sp-login-v2 *,
.sp-login-layout .sp-login-v2 *::before,
.sp-login-layout .sp-login-v2 *::after { box-sizing:border-box; }
.sp-login-layout .sp-login-v2 .sp-login-intro {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:32px;
    min-height:100vh;
    min-height:100svh;
    min-width:0;
    padding:clamp(30px, 5vw, 80px);
    isolation:isolate;
    position:relative;
    overflow:hidden;
}
.sp-login-layout .sp-login-v2 .sp-login-intro::before {
    content:"";
    position:absolute;
    inset:auto -28% -42% auto;
    width:min(80%,570px);
    aspect-ratio:1;
    border:1px solid #ffffff31;
    border-radius:50%;
    box-shadow:0 0 0 70px #ffffff07, 0 0 0 145px #ffffff08;
    pointer-events:none;
    z-index:-1;
}
.sp-login-layout .sp-login-v2 .sp-login-intro::after {
    width:210px;
    height:210px;
    right:-90px;
    top:-95px;
    bottom:auto;
    border-color:#ffffff29;
    box-shadow:0 0 0 70px #ffffff08;
}
.sp-login-layout .sp-login-v2 .sp-login-brand {display:flex;align-items:center;gap:14px;min-width:0;}
.sp-login-layout .sp-login-v2 .sp-login-brand-icon {
    width:52px;height:52px;flex:0 0 52px;
    border-radius:15px;background:#ffffff18;
    border:1px solid #ffffff2c;
    display:grid;place-items:center;
}
.sp-login-layout .sp-login-v2 .sp-login-brand img {
    width:43px;height:43px;border-radius:11px;
    object-fit:contain;background:transparent;
}
.sp-login-layout .sp-login-v2 .sp-login-brand-copy {display:flex;flex-direction:column;gap:3px;min-width:0;}
.sp-login-layout .sp-login-v2 .sp-login-brand-copy strong {color:#fff;letter-spacing:-.025em;font-size:22px;line-height:1.15;overflow-wrap:anywhere;}
.sp-login-layout .sp-login-v2 .sp-login-brand-copy small {color:#ffffffc4;font-size:12px;letter-spacing:0;}
.sp-login-layout .sp-login-v2 .sp-login-intro-content {max-width:580px;min-width:0;}
.sp-login-layout .sp-login-v2 .sp-login-kicker {display:block;color:#fbe4ff;font-size:12px;letter-spacing:.16em;font-weight:800;}
.sp-login-layout .sp-login-v2 .sp-login-intro h1 {
    font-size:clamp(38px,4.1vw,65px)!important;
    line-height:1.10;
    margin:22px 0 22px;
    color:#fff!important;
    font-weight:800;
    letter-spacing:-.045em;
    overflow-wrap:break-word;
}
.sp-login-layout .sp-login-v2 .sp-login-intro p {max-width:500px;color:#ffffffe0;line-height:1.75;font-size:16px;margin:0;}
.sp-login-layout .sp-login-v2 .sp-login-capabilities {margin-top:32px;display:flex;flex-wrap:wrap;gap:9px;}
.sp-login-layout .sp-login-v2 .sp-login-capabilities span {background:#ffffff0d;border-color:#ffffff4a;color:#fff;font-size:12px;font-weight:500;padding:9px 13px;gap:7px;}
.sp-login-layout .sp-login-v2 .sp-login-intro-tagline {font-size:12px;color:#ffffffad;line-height:1.5;overflow-wrap:anywhere;}
.sp-login-layout .sp-login-v2 .sp-login-form-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:clamp(24px, 4.5vw, 74px);
    background:radial-gradient(ellipse at 80% 4%,#eee9fc 0,transparent 55%),#f8f9fd;
}
.sp-login-layout .sp-login-v2 .sp-login-form-wrapper {width:100%;max-width:495px;min-width:0;margin:0 auto;display:flex;flex-direction:column;gap:24px;}
.sp-login-layout .sp-login-v2 .sp-login-card {
    width:100%;max-width:none;min-width:0;
    padding:clamp(28px,3vw,48px);
    background:#fff;
    border:1px solid #e8e9f1;
    border-radius:22px!important;
    box-shadow:0 28px 65px #2a234014!important;
    color:#202942;
}
.sp-login-layout .sp-login-v2 .sp-login-card-heading {min-width:0;margin-bottom:29px;}
.sp-login-layout .sp-login-v2 .sp-login-eyebrow {display:block;font-size:11px;letter-spacing:.17em;color:var(--sp-primary,#805477);font-weight:850;}
.sp-login-layout .sp-login-v2 .sp-login-card h2 {
    font-size:clamp(26px,2.45vw,34px)!important;
    line-height:1.17!important;
    max-width:100%;
    white-space:normal!important;
    overflow-wrap:anywhere;
    margin:12px 0 11px!important;
    letter-spacing:-.035em;
    font-weight:800;
    color:#171f39!important;
}
.sp-login-layout .sp-login-v2 .sp-login-card-heading p {font-size:14px;line-height:1.65;color:#75839a;margin:0;overflow-wrap:anywhere;}
.sp-login-layout .sp-login-v2 .sp-login-card-heading strong {font-weight:700;color:#55627d;}
.sp-login-layout .sp-login-v2 .sp-login-form {display:flex;flex-direction:column;gap:19px;}
.sp-login-layout .sp-login-v2 .sp-login-field {display:flex;flex-direction:column;gap:8px;min-width:0;}
.sp-login-layout .sp-login-v2 .sp-login-form label {display:block;font-size:13px;font-weight:740;color:#283655;margin:0;}
.sp-login-layout .sp-login-v2 .sp-login-form input {
    width:100%;min-width:0;height:52px;padding:0 16px;
    background:#fff!important;color:#172441;
    border:1px solid #d9dfec;
    border-radius:11px;
    outline:0;
    font-size:14px;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.sp-login-layout .sp-login-v2 .sp-login-form input::placeholder {color:#8e9ab0;opacity:1;}
.sp-login-layout .sp-login-v2 .sp-login-form input:focus-visible {
    border-color:var(--sp-primary,#805477);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--sp-primary,#805477) 12%,transparent);
}
.sp-login-layout .sp-login-v2 .sp-login-form input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    -webkit-text-fill-color:#172441!important;
    caret-color:#172441;
}
.sp-login-layout .sp-login-v2 .sp-login-submit {
    display:inline-flex;align-items:center;justify-content:center;gap:11px;
    margin-top:6px;width:100%;height:54px;border-radius:11px;
    background:var(--sp-primary,#805477)!important;
    border:1px solid transparent;
    color:#fff!important;font-weight:760;font-size:14px;
    box-shadow:0 8px 20px color-mix(in srgb,var(--sp-primary,#805477) 19%,transparent);
    cursor:pointer;
}
.sp-login-layout .sp-login-v2 .sp-login-submit:hover:not(:disabled) {filter:brightness(1.08);transform:translateY(-1px);}
.sp-login-layout .sp-login-v2 .sp-login-submit:disabled {opacity:.66;cursor:progress;}
.sp-login-layout .sp-login-v2 .sp-login-submit:focus-visible {outline:3px solid color-mix(in srgb,var(--sp-primary,#805477) 32%,transparent);outline-offset:3px;}
.sp-login-layout .sp-login-v2 .sp-login-error {font-size:12px;line-height:1.55;overflow-wrap:anywhere;}
.sp-login-layout .sp-login-v2 .sp-login-footnote {
    display:flex;align-items:flex-start;gap:10px;
    border-top:1px solid #eef0f5;
    margin-top:29px;padding-top:19px;
    font-size:12px;line-height:1.6;color:#78869f;
}
.sp-login-layout .sp-login-v2 .sp-login-footnote .sp-icon {flex-shrink:0;}
.sp-login-layout .sp-login-v2 .sp-login-copyright {
    display:block;margin:0;text-align:center;font-size:11px;line-height:1.6;
    color:#8692a8;overflow-wrap:anywhere;
}
@media (max-width:1050px) and (min-width:821px) {
    .sp-login-layout .sp-login-v2 .sp-login-intro {padding:35px;}
    .sp-login-layout .sp-login-v2 .sp-login-intro h1 {font-size:clamp(36px,4vw,48px)!important;}
    .sp-login-layout .sp-login-v2 .sp-login-form-panel {padding:28px;}
    .sp-login-layout .sp-login-v2 .sp-login-card {padding:30px;}
}
@media (max-width:820px) {
    .sp-login-layout .sp-login-screen.sp-login-v2 {grid-template-columns:minmax(0,1fr);}
    .sp-login-layout .sp-login-v2 .sp-login-intro {
        min-height:0;padding:18px 22px;gap:0;
    }
    .sp-login-layout .sp-login-v2 .sp-login-intro-content,
    .sp-login-layout .sp-login-v2 .sp-login-intro-tagline {display:none;}
    .sp-login-layout .sp-login-v2 .sp-login-brand-icon {width:43px;height:43px;flex-basis:43px;border-radius:12px;}
    .sp-login-layout .sp-login-v2 .sp-login-brand img {width:36px;height:36px;}
    .sp-login-layout .sp-login-v2 .sp-login-brand-copy strong {font-size:18px;}
    .sp-login-layout .sp-login-v2 .sp-login-brand-copy small {font-size:11px;}
    .sp-login-layout .sp-login-v2 .sp-login-form-panel {min-height:calc(100svh - 80px);padding:32px 20px;}
    .sp-login-layout .sp-login-v2 .sp-login-form-wrapper {max-width:490px;}
}
@media (max-width:480px) {
    .sp-login-layout .sp-login-v2 .sp-login-form-panel {padding:25px 14px;justify-content:flex-start;}
    .sp-login-layout .sp-login-v2 .sp-login-card {padding:25px 21px;border-radius:17px!important;}
    .sp-login-layout .sp-login-v2 .sp-login-card h2 {font-size:27px!important;}
    .sp-login-layout .sp-login-v2 .sp-login-form {gap:17px;}
    .sp-login-layout .sp-login-v2 .sp-login-card-heading {margin-bottom:24px;}
    .sp-login-layout .sp-login-v2 .sp-login-footnote {margin-top:23px;}
}
@media (prefers-reduced-motion:reduce) {
    .sp-login-layout .sp-login-v2 .sp-login-form input,
    .sp-login-layout .sp-login-v2 .sp-login-submit {transition:none;transform:none;}
}