:root{--brand:#de6528;--brand-soft:#fff0e7;--brand-dark:#ae4d1d;--ink:#182438;--muted:#718098;--line:#e4e9f0;--bg:#f5f6f9;--ok:#167b52;--warn:#a35a23;--bad:#b63c43;--backend:#7957aa}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:13px Inter,Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#e7ecf3}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{cursor:pointer;color:inherit;text-decoration:none}p{line-height:1.6}h1,h2,h3{margin:0;letter-spacing:-.035em}h1{font-size:clamp(30px,3.5vw,54px);line-height:1.12}h2{font-size:24px}h3{font-size:16px}.small{font-size:11px}.tiny{font-size:10px}.muted{color:var(--muted)}.bold{font-weight:800}.strong{font-weight:750}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:13px}.grow{flex:1;min-width:0}.center{text-align:center}.right{text-align:right}.space{height:16px}.divider{border-top:1px solid var(--line);margin:14px 0}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pill{font-size:10px;font-weight:800;padding:5px 9px;border-radius:30px;background:#edf0f5;color:#617087;display:inline-block}.pill.ok{background:#e7f7ed;color:#167348}.pill.warn{background:#fff0e3;color:#9d531e}.pill.bad{background:#fff0f0;color:#b13d44}.pill.blue{background:#eaf0ff;color:#4169a8}.brand{font-weight:900;letter-spacing:-1px;font-size:22px}.brand span{color:var(--brand)}
.btn{border:1px solid var(--line);background:white;color:var(--ink);border-radius:10px;min-height:39px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;font-weight:750}.btn:hover{border-color:var(--brand);color:var(--brand-dark)}.btn.primary{background:var(--brand);border-color:var(--brand);color:white}.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:white}.btn.soft{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-dark)}.btn.dark{background:#25344a;color:white;border-color:#25344a}.btn.danger{background:#fff2f2;color:var(--bad);border-color:#f1dddd}.btn.sm{font-size:11px;padding:7px 10px;min-height:32px;border-radius:8px}.btn.full{width:100%}.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #79b6f5;outline-offset:2px}
.card{background:white;border:1px solid var(--line);border-radius:15px;padding:18px;min-width:0}.kpi{background:white;border:1px solid var(--line);border-radius:14px;padding:18px}.kpi b{display:block;font-size:27px;letter-spacing:-1px;margin-top:7px}.field{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:750}.field input,.field textarea,.field select,.search{border:1px solid #d9e1ec;border-radius:9px;padding:11px 12px;min-width:0;width:100%;color:var(--ink);background:white;outline:0}.field textarea{min-height:78px;resize:vertical}.field input:focus,.search:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}.notice{border-radius:10px;padding:12px 14px;background:var(--brand-soft);color:var(--brand-dark);font-size:12px;line-height:1.6}.notice.good{background:#e8f7ef;color:#126d47}.notice.bad{background:#fff0f0;color:#a33742}.line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}.line.total{border-top:1px solid var(--line);margin-top:9px;padding-top:13px;font-size:19px;font-weight:850}.line.total b{color:var(--brand)}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:550px}th{text-align:left;color:#8995a7;font-size:10px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);padding:12px 9px}td{font-size:12px;padding:12px 9px;border-bottom:1px solid #eef1f5}
#toolbar{min-height:53px;background:#182638;color:white;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:11px;padding:10px 15px}.toolbar-brand{font-size:15px;font-weight:850;letter-spacing:-.4px}.toolbar-brand em{color:#ff9760;font-style:normal}.toolbar-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.toolbar-group button,.toolbar-group select{border:1px solid #465970;background:#2a3b50;color:#fff;border-radius:8px;padding:8px 10px;font-size:11px;min-height:34px}.toolbar-group button:hover{background:#40536b}#stage{padding:13px;min-height:600px;display:flex;justify-content:center;align-items:flex-start;overflow:auto}#framewrap{max-width:100%;position:relative}#frame{background:var(--bg);border:1px solid #ced7e2;border-radius:12px;box-shadow:0 13px 39px #1b2d4215;width:100%;min-height:720px;overflow:auto;transform-origin:top left;container-name:view;container-type:inline-size}#app{min-height:700px}#app > *{min-width:0}#status-msg{font-size:11px;color:#a8b8cb}body.expanded{display:flex;flex-direction:column;position:fixed;inset:0;z-index:2000}body.expanded #stage{flex:1;min-height:0}body.expanded #frame{border-radius:0}
.site-header{background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 25px;flex-wrap:wrap}.site-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.site-nav button{border:0;border-radius:9px;background:transparent;padding:10px 12px;font-weight:750;color:#66758b}.site-nav button.active,.site-nav button:hover{background:var(--brand-soft);color:var(--brand-dark)}.site-footer{background:#182638;color:white;padding:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}.site-footer .muted{color:#adbbcd}.page{padding:26px;max-width:1440px;margin:auto}.hero{background:white;border:1px solid var(--line);border-radius:21px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr}.hero-content{padding:clamp(30px,5vw,67px);align-self:center}.hero-visual{min-height:400px;background:linear-gradient(140deg,var(--brand-soft),#e8edf5);display:grid;place-items:center;padding:25px}.hero-preview{background:white;box-shadow:0 18px 42px #162a3c25;width:min(100%,310px);padding:21px;border-radius:19px;transform:rotate(-3deg)}.auth-screen{min-height:590px;display:grid;place-items:center;padding:28px 15px}.auth-card{width:min(100%,450px);padding:30px}.portal{display:grid;grid-template-columns:215px minmax(0,1fr);min-height:700px}.sidebar{background:white;border-right:1px solid var(--line);padding:19px 12px}.side-brand{padding:10px 12px 19px;border-bottom:1px solid var(--line);margin-bottom:13px}.sidemenu{display:flex;flex-direction:column;gap:4px}.sidemenu button{border:0;background:transparent;text-align:left;border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;color:#66758a;font-weight:750}.sidemenu button:hover,.sidemenu button.active{background:var(--brand-soft);color:var(--brand-dark)}.workspace{padding:25px;min-width:0}
.categories{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.category{border:1px solid var(--line);border-radius:9px;padding:9px 13px;background:white;font-weight:750;font-size:11px}.category.active{background:var(--brand);color:white;border-color:var(--brand)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.product{background:white;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-width:0;text-align:left;padding:0}.product:hover{border-color:var(--brand);box-shadow:0 9px 20px #192d4013}.product-photo{height:113px;background:linear-gradient(135deg,#f8f9fb,#eaf0f5);display:grid;place-items:center;font-size:42px;position:relative}.product-photo i{font-size:16px;font-style:normal;position:absolute;right:9px;bottom:8px;background:white;color:var(--brand);padding:3px 8px;border-radius:8px;font-weight:900}.product-detail{padding:11px}.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.sticky{position:sticky;top:12px}.cart-item{padding:11px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:9px}.qty{display:inline-flex;align-items:center;gap:7px}.qty button{border:1px solid var(--line);background:white;border-radius:7px;width:26px;height:26px}.service-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.service-options button{border:1px solid var(--line);border-radius:10px;background:white;padding:13px;font-weight:750}.service-options button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:18px;align-items:start}.method-option{border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;align-items:center;gap:11px;cursor:pointer;margin-bottom:8px;background:white}.method-option.active{border-color:var(--brand);background:var(--brand-soft)}.radio-dot{width:17px;height:17px;border-radius:50%;border:2px solid #c1cad7;flex:none}.method-option.active .radio-dot{border:5px solid var(--brand)}.tip-options{display:flex;gap:6px;flex-wrap:wrap}.tip-options button{flex:1;min-width:54px;border:1px solid var(--line);background:white;padding:10px 7px;border-radius:9px;font-weight:750;font-size:11px}.tip-options button.active{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.pos-layout{display:grid;grid-template-columns:minmax(315px,37%) minmax(0,1fr);min-height:720px}.pos-basket{background:white;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}.pos-products{padding:20px;min-width:0}.pos-line{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid transparent;padding:12px;cursor:pointer;border-radius:10px}.pos-line.active{border-color:#f2d5c4;background:var(--brand-soft)}.pos-line:hover{background:#f7f9fb}.pos-line.active:hover{background:var(--brand-soft)}.editbar{display:flex;gap:6px;flex-wrap:wrap}.editbar button{border:1px solid var(--line);border-radius:8px;background:#f5f6f9;padding:8px 10px;font-size:11px;font-weight:750}.editbar button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}.readout{background:#f5f7fa;border:1px solid var(--line);border-radius:9px;font-size:26px;font-weight:850;padding:12px;text-align:right;min-height:58px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.keypad button{border-radius:8px;border:1px solid var(--line);background:#f4f6f9;font-weight:750;font-size:16px;min-height:40px}.keypad button:hover{border-color:var(--brand);background:var(--brand-soft)}.mobile-switch{display:none}.signature{height:140px;width:100%;background:white;border:1px dashed #bdc8d5;border-radius:11px;display:block;touch-action:none;cursor:crosshair}.paper{width:min(100%,600px);margin:auto;min-height:710px;padding:36px;background:white;border:1px solid #d8e1ec;box-shadow:0 10px 28px #1b2e4114}.paper.thermal{width:min(100%,310px);padding:20px;min-height:350px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}.overlay{position:fixed;inset:0;z-index:1500;background:#142438a3;display:grid;place-items:center;padding:15px}.modal{width:min(100%,520px);max-height:86vh;overflow-y:auto;padding:24px;background:white;border-radius:17px;box-shadow:0 20px 70px #0003}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tabs button{border:1px solid var(--line);border-radius:9px;background:white;padding:9px 13px;font-weight:750;font-size:11px}.tabs button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
@container view (max-width:1080px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-layout{grid-template-columns:minmax(290px,41%) minmax(0,1fr)}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container view (max-width:760px){.page{padding:16px}.hero{grid-template-columns:1fr}.hero-visual{min-height:225px}.portal{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:9px}.side-brand{display:none}.sidemenu{flex-direction:row;overflow-x:auto}.sidemenu button{white-space:nowrap;font-size:11px}.workspace{padding:16px}.shop-layout,.checkout-layout{grid-template-columns:1fr}.sticky{position:static}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-layout{display:block}.mobile-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:white}.mobile-switch button{padding:11px;background:#f6f8fb;border-radius:9px;border:1px solid var(--line);font-weight:750}.mobile-switch button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}.pos-layout.show-products .pos-basket{display:none}.pos-layout.show-cart .pos-products{display:none}.pos-products{padding:14px}.pos-basket{min-height:0}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header{padding:11px 13px}}
@container view (max-width:445px){.grid2,.grid3{grid-template-columns:1fr}.site-header{justify-content:center}.site-nav{justify-content:center}.site-nav button{padding:8px;font-size:11px}.product-photo{height:89px;font-size:34px}.product-detail{padding:9px}.paper{padding:19px}.hero-content{padding:26px}.pos-products{padding:11px}}
@media print{body{background:#fff!important}#toolbar,.site-header,.site-footer,#stage > :not(#framewrap),.no-print{display:none!important}#stage,#framewrap,#frame,#app{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;transform:none!important;width:100%!important;height:auto!important;overflow:visible!important}#print-zone{display:block!important;position:absolute!important;top:0;left:0;background:white;color:black}.paper{box-shadow:none;border:0}.paper.thermal{width:80mm!important;max-width:80mm!important;margin:0!important;padding:3mm!important}}#print-zone{display:none}

/* Oima 20.0.1.2.7 self-contained showroom: one responsive viewport */
html,body{width:100%;height:100%;min-height:0;max-width:100%;overflow:hidden}
body{display:flex;flex-direction:column}
#toolbar{flex:0 0 auto;min-height:0;max-width:100%;gap:8px;padding:8px 14px}
#stage{flex:1 1 auto;height:auto;min-height:0;max-width:100%;padding:9px;overflow:hidden;align-items:stretch;justify-content:center}
#framewrap{max-width:100%;min-width:0;min-height:0}
#frame{height:100%;min-height:0;max-width:none;overflow:hidden}
#app{min-height:0;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-width:0}
#app *,#app *::before,#app *::after{min-width:0}
#app .site-nav button{white-space:normal}
#app .tablewrap{max-width:100%}
#app .page{padding:clamp(10px,2vw,22px)}
#app[data-view="pos"]{display:flex;flex-direction:column;overflow:hidden}
#app[data-view="pos"]>.site-header{flex:0 0 auto}
#app[data-view="pos"]>.mobile-switch{flex:0 0 auto}
#app[data-view="pos"]>.pos-layout{flex:1 1 auto;height:auto;min-height:0;overflow:hidden}
#app[data-view="pos"]>.pos-layout>.pos-basket{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#app[data-view="pos"]>.pos-layout>.pos-products{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#app[data-view="pos"] .pos-basket>div:nth-child(2){overflow-y:auto;min-height:85px!important}
#app[data-view="pos"] .pos-basket>div:nth-child(3){flex:0 0 auto}
#app[data-view="pos"] .pos-basket>div:nth-child(4){flex:0 0 auto}
#app[data-view="pos"] .pos-basket .readout{padding:7px 10px;min-height:40px;font-size:22px}
#app[data-view="pos"] .pos-basket .keypad button{min-height:33px}
#app[data-view="pos"] .pos-basket .space{height:7px}
#app[data-view="pos"] .pos-basket .line{padding:4px 0}
#app[data-view="pos"] .pos-basket .line.total{padding-top:7px;margin-top:4px}
#app .hero-visual{min-height:clamp(190px,30vh,400px)}
#app .hero-content{padding:clamp(18px,3vw,52px)}
@media(max-height:720px){
 #toolbar{padding:5px 10px}.toolbar-group button,.toolbar-group select{min-height:29px;padding:5px 7px}
 #app .site-header{padding:7px 12px}.site-nav button{padding:6px 8px}
 #app .pos-products{padding:10px}.product-photo{height:75px}
 #app .pos-basket>div:first-child{padding:9px!important}
 #app .pos-basket>div:nth-child(3){padding:8px!important}
 #app .pos-basket>div:nth-child(4){padding:8px!important}
}
@container view (max-width:760px){
 #app[data-view="pos"]>.pos-layout{display:block;overflow:hidden;min-height:0;flex:1 1 auto}
 #app[data-view="pos"]>.pos-layout>.pos-basket,#app[data-view="pos"]>.pos-layout>.pos-products{height:100%;min-height:0;overflow-y:auto}
 #app[data-view="pos"]>.pos-layout.show-products>.pos-basket{display:none}
 #app[data-view="pos"]>.pos-layout.show-cart>.pos-products{display:none}
}
@container view (max-width:445px){
 #app .site-header{padding:8px 9px;gap:5px}
 #app .site-nav{gap:1px}
 #app .site-nav button{font-size:10px;padding:6px}
 #app .sidebar .sidemenu{scrollbar-width:thin}
}
@media print{html,body{overflow:visible;height:auto}#stage,#framewrap,#frame,#app{height:auto!important;overflow:visible!important}}


/* Finishing touches: no extra demo footer, compact desktop payment, accessible mobile tables */
#app .site-footer{display:none!important}
@media(min-width:950px) and (min-height:760px){
 #app[data-view="pospay"] .page{padding:13px 18px}
 #app[data-view="pospay"] .checkout-layout{gap:11px}
 #app[data-view="pospay"] .checkout-layout>.stack{gap:9px}
 #app[data-view="pospay"] .checkout-layout .card{padding:13px 16px}
 #app[data-view="pospay"] .checkout-layout .keypad button{min-height:32px}
 #app[data-view="pospay"] .checkout-layout .readout{min-height:43px;padding:7px 10px}
 #app[data-view="pospay"] .checkout-layout .divider{margin:7px 0}
}
@container view (max-width:760px){
 #app .tablewrap{overflow-x:hidden!important}
 #app .tablewrap table{width:100%;min-width:0!important}
 #app .tablewrap thead{display:none}
 #app .tablewrap tr{display:block;border:1px solid var(--line);border-radius:11px;padding:7px 10px;margin:9px 0;background:white}
 #app .tablewrap td{display:flex;justify-content:space-between;gap:8px;text-align:left;padding:8px 3px;overflow-wrap:anywhere}
 #app .tablewrap td:last-child{border-bottom:0}
}

/* 20.0.1.3.0: Tablet-portrait and mobile demo header, no horizontal nav squeezing */
.site-mobile-menu{display:none;position:relative;flex:0 0 auto}
.site-mobile-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;min-width:43px;min-height:42px;font-size:21px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.site-mobile-menu summary::-webkit-details-marker{display:none}
.site-mobile-menu[open] summary{border-color:var(--brand);background:var(--brand-soft)}
.site-mobile-menu nav{position:absolute;right:0;top:calc(100% + 9px);z-index:90;width:min(285px,calc(100vw - 36px));max-height:min(65vh,450px);overflow-y:auto;background:white;border:1px solid var(--line);box-shadow:0 15px 30px #16243624;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px}
.site-mobile-menu nav button{display:block;border:0;background:white;text-align:right;padding:12px 13px;color:#556479;font-weight:750;min-height:41px;border-radius:8px}
.site-mobile-menu nav button:hover{background:var(--brand-soft);color:var(--brand-dark)}
@container view (max-width:930px){
 .site-header{justify-content:space-between!important;flex-wrap:nowrap!important;padding:10px 16px!important;gap:8px!important}
 .site-header>.row:first-child{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-start}
 .site-header>.row:first-child .brand{font-size:clamp(16px,3vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .site-header>.row:first-child>.pill{display:none}
 .site-header>.site-nav,.site-header>.row:last-child{display:none!important}
 .site-mobile-menu{display:block;margin-left:auto}
 .hero{grid-template-columns:1fr!important}
 .hero-content{padding:clamp(18px,3vw,30px)!important}
 .hero-visual{min-height:190px!important;padding:17px!important}
 .grid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .shop-layout,.checkout-layout{grid-template-columns:1fr!important}
 .portal{display:block!important}
 .sidebar{border-right:0;border-bottom:1px solid var(--line);padding:8px}
 .side-brand{display:none}
 .sidemenu{display:flex;flex-direction:row;overflow:auto;gap:4px}
 .sidemenu button{flex:0 0 auto;white-space:nowrap;font-size:11px}
 .workspace{padding:14px}
 .pos-layout{display:block!important}
 .mobile-switch{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:white}
 .mobile-switch button{border:1px solid var(--line);background:#f6f8fb;border-radius:9px;padding:10px;min-height:40px}
 .pos-layout.show-products .pos-basket{display:none!important}
 .pos-layout.show-cart .pos-products{display:none!important}
 .pos-products,.pos-basket{min-height:0;overflow-y:auto}
}
@container view (max-width:500px){
 .site-header{padding:9px 11px!important}
 .grid3{grid-template-columns:1fr!important}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .hero-content h1{font-size:clamp(29px,8vw,42px)!important}
 .page{padding:10px!important}
}


/* v20.0.1.3.1, showcase UX: scrolling confined to product grid on desktop */
#app .management-shortcuts{padding:20px clamp(20px,2vw,28px)!important}
#app .management-shortcuts .stack{padding-inline:0;gap:11px!important}
#app .management-shortcuts .btn{margin-left:0;width:100%;text-align:left;justify-content:flex-start;padding-inline:16px!important}
#app .transfer-approval-note{margin-bottom:18px}
#app .empty-orders{margin-top:16px!important;min-height:98px;display:grid;place-items:center}
#app .pos-number-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;margin:10px 0}
#app .pos-number-row .readout{margin:0;min-width:0}
#app .pos-remove{min-width:89px;color:var(--bad);border-color:#f0dbdb;background:#fff1f1}
#app .receipt-email-row[hidden]{display:none!important}
#app .receipt-email-row{margin-top:12px}
#app .site-header{padding-inline:clamp(18px,2.3vw,35px);gap:clamp(12px,2vw,25px)}
#app .site-header>.row:first-child{min-width:0;flex:0 1 270px}
#app .site-header .site-nav{margin-left:auto;justify-content:flex-end;gap:7px}
#app .site-header>.row:last-child{margin-left:12px}
#app[data-view="shop"]{height:100%;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#app[data-view="shop"]>.site-header{flex:none}
#app[data-view="shop"]>.shop-page{display:flex;flex-direction:column;flex:1;min-height:0;max-width:none;width:100%;padding:15px clamp(13px,2vw,24px) 14px!important;overflow:hidden}
#app[data-view="shop"] .shop-layout{flex:1;min-height:0;max-height:100%;align-items:stretch;overflow:hidden;grid-template-columns:minmax(0,1fr) minmax(270px,315px);gap:15px}
#app[data-view="shop"] .shop-items-column{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;gap:9px}
#app[data-view="shop"] .shop-service{flex:none;padding:13px 15px}
#app[data-view="shop"] .shop-catalog-controls{flex:none;display:grid;gap:8px;grid-template-columns:1fr;min-height:0}
#app[data-view="shop"] .shop-catalog-controls .categories{margin:0}
#app[data-view="shop"] .shop-product-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;padding:3px 4px 20px 1px}
#app[data-view="shop"] .shop-cart-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden;position:static!important;padding:17px}
#app[data-view="shop"] .shop-cart-lines{flex:1;overflow-y:auto;min-height:0;padding:9px 0}
#app[data-view="shop"] .shop-cart-footer{flex:none;border-top:1px solid var(--line);padding-top:5px}
#app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#app[data-view="shop"] .shop-product-scroll .product-photo{height:94px}
#app[data-view="shop"] .shop-product-scroll .product-detail{padding:9px}
#app[data-view="shop"] .shop-mobile-cart-cta,#app[data-view="shop"] .mobile-shop-switch{display:none}
#app[data-view="pos"] .pos-products{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#app[data-view="pos"] .pos-basket{overflow:hidden;min-height:0}
#app[data-view="pos"] .pos-basket>div:nth-child(2){min-height:0!important;overflow-y:auto}
#app[data-view="pos"] .pos-layout{overflow:hidden;min-height:0}
@container view (max-width:1080px){
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container view (max-width:930px){
 #app .site-header>.row:first-child{flex:1 1 auto}
 #app .site-header .site-nav{display:none}
 #app .site-header>.row:last-child{display:none}
 #app[data-view="shop"] .shop-layout{grid-template-columns:minmax(0,1fr) minmax(240px,285px)!important;gap:12px}
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app[data-view="shop"] .shop-service{padding:11px}
 #app[data-view="shop"] .shop-cart-panel{padding:12px}
}
@container view (max-width:650px){
 #app[data-view="shop"] .shop-page{padding:8px!important}
 #app[data-view="shop"] .shop-layout{display:block!important;min-height:0;flex:1;overflow:hidden}
 #app[data-view="shop"] .shop-layout.show-products .shop-cart-panel{display:none!important}
 #app[data-view="shop"] .shop-layout.show-cart .shop-items-column{display:none!important}
 #app[data-view="shop"] .shop-items-column{height:100%;gap:7px}
 #app[data-view="shop"] .shop-service{padding:10px}
 #app[data-view="shop"] .shop-cart-panel{height:100%;max-height:none;overflow:hidden}
 #app[data-view="shop"] .mobile-shop-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px;flex:none}
 #app[data-view="shop"] .mobile-shop-switch button{min-height:38px;border:1px solid var(--line);background:white;border-radius:8px;font-weight:750}
 #app[data-view="shop"] .mobile-shop-switch button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
 #app[data-view="shop"] .shop-mobile-cart-cta{display:block;flex:none;width:100%;min-height:43px;padding:10px;margin-top:6px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:800}
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app[data-view="shop"] .shop-product-scroll .product-photo{height:75px}
 #app[data-view="shop"] .shop-product-scroll .product-detail{padding:8px}
 #app .management-shortcuts{padding:17px 18px!important}
 #app .management-shortcuts .btn{padding:11px 14px!important}
}


/* 20.0.1.3.5: clearer mobile & tablet composition with no squeezed dual-column shop */
#app .site-header{gap:clamp(8px,1.8vw,20px)!important;padding-inline:clamp(13px,2vw,30px)!important}
#app .site-header .site-nav{margin-inline-start:auto!important;justify-content:flex-end!important;gap:4px!important}
#app .site-nav button{padding-inline:clamp(8px,.9vw,14px)!important}
#app .site-mobile-menu summary{min-width:44px!important;min-height:42px!important;margin-inline-start:6px}
#app .site-mobile-menu nav{padding:14px!important;right:0!important;min-width:215px!important}
#app .site-mobile-menu nav button{padding:12px 20px!important;text-align:right!important;justify-content:flex-end!important;border-radius:9px!important}
#app .card,#app .kpi{overflow-wrap:anywhere}
#app .management-shortcuts{padding:20px clamp(20px,3vw,30px)!important}
#app .management-shortcuts .stack{margin-top:15px!important;gap:12px!important}
#app .management-shortcuts .btn{padding:12px 18px!important;text-align:left!important;justify-content:flex-start!important;min-height:44px!important}
#app .sidebar .sidemenu{padding:4px}
#app .workspace{padding:clamp(14px,2.2vw,27px)!important}
#app .workspace > .between{margin-bottom:20px!important;gap:15px!important}
#app .grid2,#app .grid3,#app .grid4{gap:clamp(11px,1.4vw,18px)!important}
#app .shop-cart-panel{border-radius:16px!important}
#app[data-view="shop"] .shop-product-scroll{padding:6px 8px 23px 2px!important}
#app[data-view="shop"] .shop-product-scroll .product-grid{gap:12px!important}
#app[data-view="shop"] .shop-catalog-controls{gap:10px!important}
#app[data-view="shop"] .shop-layout{gap:18px!important}
#app[data-view="shop"] .shop-service{padding:16px!important}
#app[data-view="shop"] .shop-cart-lines{padding-top:14px!important}
#app[data-view="shop"] .shop-cart-footer{padding-top:12px!important}
@container view (max-width:930px){
 #app[data-view="shop"] .shop-page{padding:10px 13px 13px!important}
 #app[data-view="shop"] .shop-layout{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
 #app[data-view="shop"] .shop-layout.show-products .shop-cart-panel{display:none!important}
 #app[data-view="shop"] .shop-layout.show-cart .shop-items-column{display:none!important}
 #app[data-view="shop"] .shop-items-column{height:100%;gap:11px!important}
 #app[data-view="shop"] .shop-cart-panel{height:100%;overflow:hidden;padding:16px!important}
 #app[data-view="shop"] .mobile-shop-switch{display:grid!important;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px;flex:none}
 #app[data-view="shop"] .mobile-shop-switch button{min-height:42px;border:1px solid var(--line);background:white;border-radius:10px;font-weight:750}
 #app[data-view="shop"] .mobile-shop-switch button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
 #app[data-view="shop"] .shop-mobile-cart-cta{display:block;flex:none;width:100%;min-height:43px;margin-top:8px;padding:10px;border:0;border-radius:10px;background:var(--brand);color:white;font-weight:850}
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
 #app[data-view="shop"] .shop-service{padding:14px!important}
 #app .portal{display:block!important}
 #app .sidebar{border-right:0!important;border-bottom:1px solid var(--line)!important}
 #app .sidemenu{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;gap:6px!important}
 #app .sidemenu button{font-size:11px!important;min-height:35px!important;padding:8px 10px!important}
 #app .workspace .grid2{grid-template-columns:1fr!important}
 #app .management-shortcuts{margin-top:2px!important}
}
@container view (max-width:600px){
 #app[data-view="shop"] .shop-page{padding:8px 10px 12px!important}
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #app[data-view="shop"] .shop-service{padding:11px!important}
 #app[data-view="shop"] .shop-items-column{gap:8px!important}
 #app[data-view="shop"] .shop-cart-panel{padding:13px!important}
 #app .site-header{padding:10px 14px!important}
 #app .page{padding:12px!important}
 #app .workspace{padding:14px!important}
 #app .management-shortcuts{padding:16px 18px!important}
 #app .management-shortcuts .btn{padding:12px 16px!important}
 #app .sidemenu{gap:5px!important}
 #app .sidemenu button{white-space:normal!important}
 #app .grid2,#app .grid3,#app .grid4{grid-template-columns:1fr!important}
}


/* Only show the extra mobile cart shortcut while browsing products. */
@container view (max-width:930px){
 #app[data-view="shop"] .shop-layout.show-cart + .shop-mobile-cart-cta{display:none!important}
}

/* v138: stand-alone and embedded share exactly the same complete document, CSS and JS. */
html,body{height:100%;min-height:0}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}#toolbar{flex:0 0 auto;min-height:0}#stage{flex:1 1 auto;height:auto;min-height:0;overflow:hidden;padding:10px;align-items:stretch}#framewrap{flex:1 1 auto;width:100%;height:100%;max-width:100%;min-height:0}#frame{height:100%;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain}#app{min-height:100%;height:auto}.site-header{gap:12px}.site-nav{gap:7px}.page{padding:clamp(12px,2.1vw,26px)}.card,.kpi{padding:clamp(12px,1.7vw,19px)}.product-grid{gap:clamp(10px,1.2vw,15px)}.grid2,.grid3,.grid4{gap:clamp(10px,1.2vw,15px)}
@media(max-width:760px){#toolbar{padding:8px 10px;gap:7px}.toolbar-brand{font-size:13px}.toolbar-group{gap:5px}.toolbar-group button,.toolbar-group select{font-size:11px;min-height:33px;padding:7px 8px}#stage{padding:7px}.site-header{justify-content:space-between;flex-wrap:nowrap}.site-nav{max-width:75%;overflow-x:auto;flex-wrap:nowrap}.site-nav button{white-space:nowrap;padding:8px 9px}.page{padding:12px}.hero{grid-template-columns:1fr}.hero-content{padding:22px}.hero-visual{min-height:180px}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.toolbar-group{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;width:100%}.toolbar-group #device{min-width:0}.toolbar-group #theme{grid-column:1 / 2}.toolbar-group #expand{grid-column:2 / 3}.toolbar-group #reset{grid-column:3 / 4}.site-header{padding:11px 12px}.site-nav{max-width:67%;gap:3px}.site-nav button{padding:7px 8px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card,.kpi{padding:12px}.grid2,.grid3,.grid4{gap:10px}.page{padding:10px}}

/* v139: force contained readable layouts in iframe and preserve padding */
:root{color-scheme:light}
html,body,#toolbar,#stage,#framewrap,#frame,#app{box-sizing:border-box}
#toolbar{padding:10px clamp(12px,1.8vw,22px);column-gap:13px;row-gap:10px}
#stage{padding:clamp(8px,1.1vw,16px);min-height:0}
#frame,#app{min-width:0}
#app .card,#app .kpi,#app .paper{border-radius:clamp(10px,1.2vw,16px)}
#app .page{padding:clamp(14px,2.4vw,28px)!important}
#app .stack{gap:clamp(12px,1.5vw,19px)}
#app .grid2,#app .grid3,#app .grid4,#app .product-grid{gap:clamp(10px,1.3vw,16px)}
#app .page .card{padding:clamp(13px,1.6vw,22px)}
#app .page .btn{min-height:38px;padding-inline:14px}
#app .page .card button{margin-inline:0}
@container view (max-width:930px){#app .page{padding:15px!important}#app .card{padding:15px!important}#app .grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important}#app .shop-layout,#app .checkout-layout{grid-template-columns:1fr!important}#app .site-mobile-menu{display:block}}
@container view (max-width:500px){#app .page{padding:12px!important}#app .hero-content{padding:22px!important}#app .product-grid{gap:11px!important}#app .card{padding:13px!important}#app .site-header{justify-content:space-between!important}#toolbar{gap:7px;padding:9px 11px}}
/* v140: same full-window Chrome layout when embedded as a first-class app. */
:root{color-scheme:light}
html,body{margin:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
body{display:flex!important;flex-direction:column!important}
#toolbar{flex:0 0 auto!important;max-height:28vh;gap:9px!important;padding:9px clamp(10px,1.3vw,18px)!important}
#stage{flex:1 1 auto!important;min-height:0!important;min-width:0!important;padding:clamp(6px,.8vw,13px)!important;overflow:hidden!important}
#framewrap{flex:1 1 auto;min-height:0!important;max-width:100%!important}
#frame{min-height:0!important;max-height:100%!important;overflow:hidden!important}
#app{height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
#app .shop-page{max-width:none}
#app .shop-service,#app .shop-cart-panel,#app .shop-product-scroll .product,#app .card{box-sizing:border-box}
#app .shop-service{border-radius:14px}
#app .shop-layout{column-gap:clamp(12px,1.3vw,19px)!important}
#app .shop-cart-panel{min-width:0!important}
#app .shop-product-scroll .product-grid{gap:clamp(9px,1vw,15px)!important}
#app .shop-product-scroll .product-detail{padding:clamp(9px,1vw,12px)!important}
#app .shop-product-scroll .product-photo{min-height:75px}
#app .shop-cart-lines .cart-item{padding:10px 0;gap:9px}
#app .shop-cart-lines .qty button{min-height:32px;min-width:32px}
@container view (max-width:900px){#app .shop-layout{gap:12px!important}#app .shop-catalog-controls{gap:8px!important}#app .shop-page{padding:10px 12px!important}}
@container view (max-width:580px){#app .shop-page{padding:8px 10px!important}#app .shop-product-scroll .product-grid{gap:10px!important}#app .shop-cart-panel{padding:13px!important}#app .shop-service{padding:12px!important}#app .site-header{justify-content:space-between!important}#app .site-mobile-menu nav{text-align:right!important}}

/* v140 mobile: smaller toolbar, larger usable viewport with correct scroll containment. */
@media (max-width:600px){
 #status-msg{display:none!important}
 #toolbar{padding:5px 8px!important;gap:5px!important;max-height:none!important;min-height:0!important;align-items:center!important;}
 #toolbar>.row{flex:0 0 auto!important;margin:0!important;}
 #toolbar>.row .toolbar-brand{font-size:13px!important;line-height:1.15!important;}
 #toolbar>.toolbar-group{flex:1 1 100%!important;display:flex!important;flex-wrap:wrap!important;gap:5px!important;justify-content:space-between!important;}
 #toolbar .toolbar-group :is(select,button){min-height:27px!important;padding:4px 7px!important;font-size:10px!important;line-height:1.1!important;}
 #toolbar .toolbar-group #device{flex:1 1 47%!important;min-width:130px!important;}
 #toolbar .toolbar-group #language{flex:0 0 60px!important;}
 #stage{padding:5px!important;}
 #framewrap,#frame{border-radius:10px!important;}
 #app .site-header{min-height:52px!important;}
 #app .mobile-shop-switch{flex:0 0 auto!important;}
 #app .shop-page{padding-bottom:10px!important;}
 #app .shop-layout{min-height:0!important;}
 #app .shop-cart-panel{min-height:0!important;}
}
/* Oima POS Lite 1.4.2 - standalone QWeb frame and rounded Website page. */
:root{color-scheme:light}
html,body{margin:0;min-height:100%;height:100%;overflow:hidden}
body{background:#e7ecf3}
#op-demo-root{min-height:100%;height:100%;width:100%;}
#op-demo-root #toolbar{border-top-left-radius:0;border-top-right-radius:0}
/* Preserve the interactive mockup's own scroll containers, not Website's. */
#op-demo-root #stage{height:calc(100dvh - 48px);min-height:0;}
#op-demo-root #framewrap{height:100%;min-height:0;}
#op-demo-root #frame{height:100%;min-height:0;}
@media(max-width:680px){#op-demo-root #stage{height:calc(100dvh - 94px)}}

/* OIMA POS LITE 20.0.1.5.5 — Unified responsive demo, fixes device frame,
   landscape clipping, checkout/cart visibility and scroll containment. */
html,body{max-width:100%;overflow:hidden!important}
#op-demo-root{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#op-demo-root #toolbar{flex:0 0 auto;min-height:48px;max-height:none!important;border-radius:0;padding:9px 12px!important;overflow:visible}
#op-demo-root #stage{box-sizing:border-box;flex:1 1 0;height:auto!important;min-height:0!important;min-width:0;max-width:100%;display:flex;align-items:stretch;justify-content:center;overflow:hidden!important;padding:clamp(5px,.9vw,12px)!important}
#op-demo-root #framewrap{box-sizing:border-box;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%;height:100%!important;flex:0 1 auto;position:relative;overflow:hidden}
#op-demo-root #frame{box-sizing:border-box;display:block;width:100%;height:100%!important;min-width:0;min-height:0!important;max-height:100%!important;transform:none!important;overflow:hidden!important;container-type:inline-size;container-name:view}
#op-demo-root #app{box-sizing:border-box;width:100%;min-width:0;min-height:0!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#app>*{max-width:100%;min-width:0}
#app .page,#app .portal,#app .workspace,#app .card,#app .checkout-layout,#app .shop-layout,#app .pos-layout,#app .shop-items-column,#app .pos-products,#app .pos-basket{min-width:0;max-width:100%;box-sizing:border-box}
#app .site-header{box-sizing:border-box;max-width:100%;min-width:0;gap:12px!important}
#app .btn,#app button,#app .field,#app input,#app textarea{max-width:100%;box-sizing:border-box}
#app .shop-page{min-width:0;max-width:100%;width:100%}
#app .shop-layout{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(265px,30%)!important}
#app .shop-items-column,#app .shop-cart-panel{min-width:0;max-width:100%}
#app .shop-product-scroll{overscroll-behavior:contain;overflow-x:hidden!important;scrollbar-gutter:stable}
#app .shop-cart-lines{min-height:0;overflow-x:hidden!important;overscroll-behavior:contain}
#app .cart-item>*{min-width:0}
#app .cart-item{min-width:0;max-width:100%;overflow-wrap:anywhere}
#app .qty{flex-shrink:0}
#app[data-view="pos"]{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden!important}
#app[data-view="pos"]>.site-header{flex:0 0 auto}
#app[data-view="pos"]>.pos-layout{display:grid;grid-template-columns:minmax(270px,37%) minmax(0,1fr);flex:1 1 0;min-height:0;min-width:0;max-width:100%;overflow:hidden}
#app[data-view="pos"] .pos-products,#app[data-view="pos"] .pos-basket{min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
#app[data-view="pos"] .mobile-switch{flex:0 0 auto}
#app .checkout-layout{grid-template-columns:minmax(0,1fr) minmax(265px,34%)}
#app .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .portal{grid-template-columns:minmax(180px,220px) minmax(0,1fr)}
#app .portal .workspace{min-width:0;overflow-wrap:anywhere}
#app .portal .tablewrap{max-width:100%;overflow-x:auto}
#app .site-footer{display:none!important}
@container view (max-width:1000px){
 #app .grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app .portal{display:block!important}
 #app .sidebar{border-right:0;border-bottom:1px solid var(--line);padding:8px}
 #app .side-brand{display:none}
 #app .sidemenu{flex-direction:row;display:flex;overflow-x:auto;overscroll-behavior-x:contain;max-width:100%}
 #app .sidemenu button{flex:0 0 auto;white-space:nowrap}
}
@container view (max-width:930px){
 #app[data-view="pos"]>.pos-layout{display:block!important;grid-template-columns:none!important;height:auto;flex:1 1 0;min-height:0!important}
 #app[data-view="pos"] .mobile-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 15px!important;background:transparent!important}
 #app[data-view="pos"] .mobile-switch button{min-width:0;min-height:44px;border-radius:12px}
 #app[data-view="pos"]>.pos-layout>.pos-basket,#app[data-view="pos"]>.pos-layout>.pos-products{box-sizing:border-box;min-width:0;max-width:100%;height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
 #app[data-view="pos"]>.pos-layout.show-products>.pos-basket{display:none!important}
 #app[data-view="pos"]>.pos-layout.show-cart>.pos-products{display:none!important}
 #app[data-view="shop"] .shop-layout{grid-template-columns:1fr!important;display:block!important}
 #app[data-view="shop"] .mobile-shop-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:transparent!important;padding:10px 3px!important}
 #app[data-view="shop"] .mobile-shop-switch button{min-height:44px!important;padding:10px!important}
 #app[data-view="shop"] .shop-layout.show-products .shop-cart-panel{display:none!important}
 #app[data-view="shop"] .shop-layout.show-cart .shop-items-column{display:none!important}
 #app[data-view="shop"] .shop-items-column,#app[data-view="shop"] .shop-cart-panel{height:100%;max-height:100%;overflow-y:auto!important}
 #app[data-view="shop"] .shop-product-scroll{min-height:0;flex:1 1 0}
 #app[data-view="shop"] .shop-cart-panel{display:flex;flex-direction:column}
 #app[data-view="shop"] .shop-cart-lines{flex:1 1 auto;min-height:0}
 #app .checkout-layout{grid-template-columns:1fr!important}
 #app .site-header .site-nav{display:none!important}
 #app .site-mobile-menu{display:block!important;margin-left:auto}
}
@container view (max-width:640px){
 #app .hero{grid-template-columns:1fr!important}
 #app .page{padding:12px!important}
 #app .workspace{padding:13px!important}
 #app .grid2,#app .grid3,#app .grid4{grid-template-columns:1fr!important}
 #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app[data-view="shop"] .shop-mobile-cart-cta{display:block}
 #app[data-view="shop"] .shop-layout.show-cart + .shop-mobile-cart-cta{display:none!important}
 #app .checkout-layout .card{width:100%}
 #app .site-header{padding:10px 12px!important}
}
@media (max-height:520px) and (orientation:landscape){
 #op-demo-root #toolbar{padding:4px 8px!important;gap:5px!important;min-height:0}
 #op-demo-root #toolbar .toolbar-group button,#op-demo-root #toolbar .toolbar-group select{padding:5px 8px!important;min-height:29px!important}
 #op-demo-root #stage{padding:4px!important}
 #app .site-header{padding:6px 11px!important}
 #app[data-view="pos"] .mobile-switch,#app[data-view="shop"] .mobile-shop-switch{padding:5px 9px!important}
 #app .shop-page{padding:7px 9px!important}
}
/* Small-height landscape: trade fixed panels for one reliable vertical scroll.
   The cart lines and payment button must never be hidden by a constrained height. */
@media (max-height:560px) and (orientation:landscape){
 #op-demo-root #app[data-view="shop"]{display:block!important;overflow-y:auto!important;overflow-x:hidden!important}
 #op-demo-root #app[data-view="shop"] .shop-page{display:block!important;min-height:0!important;height:auto!important;overflow:visible!important;max-height:none!important;padding:8px 12px 16px!important}
 #op-demo-root #app[data-view="shop"] .shop-layout{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;display:block!important}
 #op-demo-root #app[data-view="shop"] .shop-cart-panel,#op-demo-root #app[data-view="shop"] .shop-items-column{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;display:flex;flex-direction:column}
 #op-demo-root #app[data-view="shop"] .shop-product-scroll,#op-demo-root #app[data-view="shop"] .shop-cart-lines{height:auto!important;flex:none!important;max-height:none!important;overflow:visible!important;min-height:0!important}
 #op-demo-root #app[data-view="shop"] .shop-layout.show-products .shop-cart-panel,#op-demo-root #app[data-view="shop"] .shop-layout.show-cart .shop-items-column{display:none!important}
 #op-demo-root #app[data-view="shop"] .shop-cart-footer{padding-top:12px}
 #op-demo-root #app[data-view="pos"]{display:block!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout{display:block!important;height:auto!important;flex:none!important;min-height:0!important;overflow:visible!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout>.pos-products,#op-demo-root #app[data-view="pos"]>.pos-layout>.pos-basket{height:auto!important;min-height:0!important;overflow:visible!important;max-height:none!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout.show-products>.pos-basket,#op-demo-root #app[data-view="pos"]>.pos-layout.show-cart>.pos-products{display:none!important}
}

/* 20.0.1.5.7 – ONE RESPONSIVE VIEWPORT. A simulated desktop may not
   create a wider layout than a real phone can safely display. */
html:has(#op-demo-root),body:has(#op-demo-root){width:100%;height:100%;min-height:0!important;overflow:hidden!important;overscroll-behavior:none}
#op-demo-root{width:100%;height:100dvh;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#op-demo-root #toolbar{flex:0 0 auto;min-width:0;max-width:100%;z-index:10}
#op-demo-root #stage{flex:1 1 0;min-width:0;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:clamp(4px,1vw,12px);align-items:stretch;justify-content:center}
#op-demo-root #framewrap{min-width:0;min-height:0;height:100%;max-width:100%;flex:0 1 auto}
#op-demo-root #frame{min-width:0;min-height:0!important;height:100%;max-width:100%;transform:none!important;overflow:hidden!important}
#op-demo-root #app{width:100%;height:100%;min-height:0!important;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#op-demo-root #app .page,#op-demo-root #app .workspace,#op-demo-root #app .portal,#op-demo-root #app .shop-page{box-sizing:border-box;min-width:0;max-width:100%}
#op-demo-root #app .shop-mobile-cart-cta,#op-demo-root #app .mobile-shop-switch,#op-demo-root #app .mobile-switch{scroll-margin-block:12px}
#op-demo-root #app button,#op-demo-root #app input,#op-demo-root #app select{touch-action:manipulation}
#op-demo-root #app .cart-item{gap:12px!important}
#op-demo-root #app .cart-item .qty{gap:8px!important}
#op-demo-root #app .cart-item .qty button{min-width:32px;min-height:32px}
#op-demo-root #app .site-header{min-width:0;max-width:100%}
#op-demo-root #app .site-mobile-menu nav{max-width:calc(100% - 16px)}
@media(max-width:680px){
 #op-demo-root #toolbar{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:7px 10px}
 #op-demo-root #toolbar>.row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
 #op-demo-root #status-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 #op-demo-root .toolbar-group{display:flex;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;scrollbar-width:thin;max-width:100%;width:100%;padding-bottom:3px;-webkit-overflow-scrolling:touch}
 #op-demo-root .toolbar-group>*{flex:0 0 auto;min-height:38px}
 #op-demo-root #stage{padding:4px}
 #op-demo-root #frame{border-radius:8px}
 #op-demo-root #app .tablewrap{max-width:100%;overflow-x:auto}
 #op-demo-root #app .cart-item{flex-wrap:wrap;gap:8px!important}
}
@media(max-height:480px){
 #op-demo-root #toolbar{padding-block:4px;gap:3px}
 #op-demo-root #stage{padding:2px}
 #op-demo-root #app .site-header{padding-block:6px!important}
}
/* The simulated viewport is responsive in every orientation, not a scaled
   image or an oversized off-screen canvas. */
#frame[data-constrained="true"]{outline:0}

/* v158 – standalone Live Demo, never scale to fit a virtual device. */
:root{color-scheme:light}
html,body{width:100%;max-width:100%;height:100%;margin:0;padding:0;overflow:hidden!important}
#op-demo-root{height:100dvh!important;width:100vw!important;max-width:100%;margin:0;padding:0;overflow:hidden!important}
#op-demo-root #toolbar{flex:0 0 auto;box-sizing:border-box;max-width:100%;}
#op-demo-root #stage{flex:1 1 0;min-height:0!important;min-width:0;box-sizing:border-box;}
#op-demo-root #framewrap{height:100%;max-width:100%;min-width:0;overflow:hidden;}
#op-demo-root #frame{height:100%;max-width:100%;min-width:0;transform:none!important;zoom:1!important;}
#op-demo-root #app{height:100%;max-width:100%;min-width:0;overflow-x:hidden!important;overflow-y:auto!important;}
#op-demo-root #app :is(button,select,input,textarea){font-size:max(12px,1em);}
#op-demo-root #app .site-header .site-mobile-menu summary{min-width:42px;min-height:42px;}
@media(max-width:680px){
 #op-demo-root #toolbar{padding:8px 10px!important;gap:8px!important;}
 #op-demo-root .toolbar-group{max-width:100%;overflow-x:auto!important;flex-wrap:nowrap!important;}
 #op-demo-root #stage{padding:4px!important;}
 #op-demo-root #framewrap{width:100%!important;}
 #op-demo-root #app .workspace{padding:14px!important;}
 #op-demo-root #app .sidemenu button{min-height:38px;}
}
@media(max-height:480px) and (orientation:landscape){
 #op-demo-root #toolbar{padding:4px 8px!important;}
 #op-demo-root #stage{padding:2px!important;}
 #op-demo-root #app{overscroll-behavior-y:contain;}
}

/* v159 – accessibility / visibility: one vertical scroller, no clipped panel content.
   Multiple previous rules gave nested panels fixed 100% heights + overflow:hidden.
   On narrow embedded screens this could leave controls outside the scroll area. */
#op-demo-root #app{display:block!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;scrollbar-gutter:auto!important}
#op-demo-root #app[data-view="shop"],
#op-demo-root #app[data-view="pos"]{height:100%!important;min-height:0!important;display:block!important;overflow-x:hidden!important;overflow-y:auto!important}
#op-demo-root #app[data-view="shop"]>.shop-page{display:block!important;width:100%!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:clamp(12px,1.8vw,24px)!important}
#op-demo-root #app[data-view="shop"] .shop-layout{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;display:grid!important;align-items:start!important;grid-template-columns:minmax(0,1fr) minmax(265px,32%)!important;gap:18px!important}
#op-demo-root #app[data-view="shop"] .shop-items-column,
#op-demo-root #app[data-view="shop"] .shop-cart-panel,
#op-demo-root #app[data-view="shop"] .shop-product-scroll,
#op-demo-root #app[data-view="shop"] .shop-cart-lines{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important}
#op-demo-root #app[data-view="shop"] .shop-cart-panel{display:flex!important;flex-direction:column!important;position:static!important}
#op-demo-root #app[data-view="pos"]>.pos-layout{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;display:grid!important;grid-template-columns:minmax(270px,37%) minmax(0,1fr)!important;align-items:start!important}
#op-demo-root #app[data-view="pos"] .pos-basket,
#op-demo-root #app[data-view="pos"] .pos-products,
#op-demo-root #app[data-view="pos"] .pos-basket>div:nth-child(2){height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
#op-demo-root #app .portal{height:auto!important;min-height:0!important;overflow:visible!important}
#op-demo-root #app .workspace{height:auto!important;min-height:0!important;overflow:visible!important;padding-bottom:28px!important}
#op-demo-root #app .sidebar .sidemenu{max-width:100%;gap:8px!important}
#op-demo-root #app .site-header{position:relative;z-index:50;overflow:visible!important}
#op-demo-root #app .site-mobile-menu{z-index:51}
#op-demo-root #app .site-mobile-menu nav{z-index:99;max-height:min(65dvh,440px);overflow-y:auto!important}
#op-demo-root #app .card,#op-demo-root #app .kpi{min-width:0;max-width:100%}
#op-demo-root #app :is(.between,.row,.grid2,.grid3,.grid4){min-width:0}
@container view (max-width:930px){
 #op-demo-root #app[data-view="shop"] .shop-layout{display:block!important;grid-template-columns:1fr!important;gap:14px!important}
 #op-demo-root #app[data-view="shop"] .shop-layout.show-products .shop-cart-panel{display:none!important}
 #op-demo-root #app[data-view="shop"] .shop-layout.show-cart .shop-items-column{display:none!important}
 #op-demo-root #app[data-view="shop"] .shop-items-column{display:flex!important;flex-direction:column!important;gap:12px!important}
 #op-demo-root #app[data-view="shop"] .shop-layout.show-cart .shop-cart-panel{display:flex!important}
 #op-demo-root #app[data-view="shop"] .shop-product-scroll .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #op-demo-root #app[data-view="shop"] .mobile-shop-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px!important}
 #op-demo-root #app[data-view="shop"] .shop-mobile-cart-cta{display:block!important;min-height:46px!important;margin-top:15px!important}
 #op-demo-root #app[data-view="shop"] .shop-layout.show-cart + .shop-mobile-cart-cta{display:none!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout{display:block!important;grid-template-columns:none!important;min-height:0!important;height:auto!important}
 #op-demo-root #app[data-view="pos"] .mobile-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:14px!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout.show-products>.pos-basket{display:none!important}
 #op-demo-root #app[data-view="pos"]>.pos-layout.show-cart>.pos-products{display:none!important}
 #op-demo-root #app .portal{display:block!important}
 #op-demo-root #app .sidebar{border-right:0!important;border-bottom:1px solid var(--line)!important}
 #op-demo-root #app .sidebar .sidemenu{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;max-width:100%!important;padding:6px!important}
 #op-demo-root #app .sidebar .sidemenu button{min-height:43px!important;white-space:normal!important;flex:0 1 auto!important;padding:9px 12px!important}
}
@container view (max-width:500px){
 #op-demo-root #app[data-view="shop"]>.shop-page{padding:12px!important}
 #op-demo-root #app[data-view="shop"] .shop-catalog-controls{margin-block:10px!important}
 #op-demo-root #app[data-view="shop"] .shop-layout{gap:12px!important}
 #op-demo-root #app[data-view="pos"] .mobile-switch{padding:12px!important}
 #op-demo-root #app .sidebar .sidemenu button{flex:1 1 132px!important;min-width:0!important;text-align:left!important}
 #op-demo-root #app .workspace{padding:15px!important}
}
@media(max-height:480px) and (orientation:landscape){
 #op-demo-root #app[data-view="pos"]{height:100%!important;overflow-y:auto!important}
 #op-demo-root #app[data-view="shop"]>.shop-page{overflow:visible!important}
 #op-demo-root #app[data-view="shop"] .shop-layout{overflow:visible!important}
}


/* v1.0.0.7 — stable navigation outside the Live Demo frame.
   The site-return control and demo screen buttons never get scaled, clipped,
   or moved inside the emulated device view. */
html:has(#op-demo-external-nav),body:has(#op-demo-external-nav){width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
body:has(#op-demo-external-nav){display:flex!important;flex-direction:column!important;margin:0!important;background:#edf1f6!important}
#op-demo-external-nav{box-sizing:border-box;flex:0 0 auto;position:relative;z-index:400;width:100%;max-width:100%;display:flex;flex-direction:column;gap:7px;padding:9px clamp(10px,2.2vw,25px);background:white;color:#1d2b40;border-bottom:1px solid #dee5ee;box-shadow:0 1px 6px #1522380d}
#op-demo-external-nav .op-ext-first-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-width:0}
#op-demo-external-nav .op-ext-first-row strong{font-size:13px;white-space:nowrap;letter-spacing:-.02em}
#op-demo-external-nav .op-ext-demo-badge{font-size:10px;font-weight:800;color:#ad4a1b;margin-left:6px}
#op-demo-external-nav .op-ext-back{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:1px solid #f1c7ae;border-radius:9px;background:#fff4ed;color:#b64b17;font-weight:800;font-size:12px}
#op-demo-external-nav .op-ext-back:hover{background:#ffe7d8;border-color:#de6528}
#op-demo-external-nav .op-ext-tabs{min-width:0;display:flex;align-items:stretch;flex-wrap:wrap;gap:6px}
#op-demo-external-nav .op-ext-tabs button{box-sizing:border-box;flex:0 1 auto;min-width:0;min-height:35px;padding:6px 12px;border:1px solid #dce3ee;border-radius:8px;background:#fff;color:#3f4e64;font-weight:750;font-size:12px;white-space:normal;line-height:1.3;text-align:center}
#op-demo-external-nav .op-ext-tabs button:hover{border-color:#de6528;color:#b94c18}
#op-demo-external-nav .op-ext-tabs button[aria-current="page"]{border-color:#de6528;background:#fff0e7;color:#a9481b}
#op-demo-external-nav :is(a,button):focus-visible{outline:3px solid #68aff5;outline-offset:2px}
body:has(#op-demo-external-nav) #op-demo-root{flex:1 1 0!important;height:auto!important;width:100%!important;min-height:0!important;min-width:0!important;overflow:hidden!important}
body:has(#op-demo-external-nav) #op-demo-root #stage{flex:1 1 0!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
body:has(#op-demo-external-nav) #op-demo-root #framewrap{min-width:0!important;max-width:100%!important;height:100%!important}
body:has(#op-demo-external-nav) #op-demo-root #app{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;scrollbar-gutter:stable}
/* All admin/seller/account options must be visible on narrow and landscape screens. */
@container view (max-width:930px){
 #op-demo-root #app .portal{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important}
 #op-demo-root #app .portal .sidebar{height:auto!important;max-height:none!important;overflow:visible!important;position:static!important;padding:10px!important}
 #op-demo-root #app .portal .sidemenu{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))!important;gap:8px!important;overflow:visible!important;max-height:none!important;width:100%!important;max-width:100%!important;padding:4px!important}
 #op-demo-root #app .portal .sidemenu button{display:flex!important;min-width:0!important;width:100%!important;min-height:42px!important;height:auto!important;flex:auto!important;white-space:normal!important;overflow-wrap:anywhere!important;align-items:center!important;gap:8px!important;line-height:1.3!important;padding:8px 10px!important;text-align:left!important}
 #op-demo-root #app .portal .workspace{height:auto!important;overflow:visible!important;min-width:0!important;padding:15px!important}
 #op-demo-root #app .portal .tablewrap{overflow-x:auto!important;max-width:100%!important}
}
@container view (max-width:440px){
 #op-demo-root #app .portal .sidemenu{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #op-demo-root #app .portal .sidemenu button{font-size:11px!important;padding:8px!important}
}
@media(max-width:540px){
 #op-demo-external-nav{padding:7px 9px;gap:5px}
 #op-demo-external-nav .op-ext-first-row strong{font-size:11px}
 #op-demo-external-nav .op-ext-demo-badge{font-size:9px}
 #op-demo-external-nav .op-ext-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
 #op-demo-external-nav .op-ext-tabs button{min-height:36px;padding:6px 5px;font-size:11px}
 #op-demo-external-nav .op-ext-back{min-height:33px;font-size:11px;padding:6px 9px}
 #op-demo-root #toolbar{padding:6px 9px!important}
}
@media(max-height:480px) and (orientation:landscape){
 #op-demo-external-nav{gap:3px;padding:4px 8px}
 #op-demo-external-nav .op-ext-first-row{display:flex}
 #op-demo-external-nav .op-ext-tabs{display:flex!important;flex-wrap:wrap!important;gap:4px}
 #op-demo-external-nav .op-ext-tabs button{min-height:28px!important;padding:4px 8px!important}
 #op-demo-external-nav:before{content:'←';position:absolute;left:0;top:0;display:none}
}

/* v160: no off-screen controls in the dark device/language/theme toolbar. */
@media(max-width:540px){
 #op-demo-root #toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow:visible!important}
 #op-demo-root #toolbar>.row{display:flex!important;min-width:0!important;flex-wrap:wrap!important;gap:4px!important}
 #op-demo-root #toolbar .toolbar-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;width:100%!important;max-width:100%!important;gap:6px!important;padding-bottom:0!important}
 #op-demo-root #toolbar .toolbar-group>*{display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;min-height:38px!important;padding:7px 9px!important;white-space:normal!important;text-align:center}
 #op-demo-root #toolbar .toolbar-group #device{grid-column:1 / -1!important;text-align:left}
 #op-demo-root #toolbar .toolbar-group #lang{grid-column:auto!important}
 #op-demo-root #toolbar .toolbar-group #theme{grid-column:auto!important}
 #op-demo-root #toolbar .toolbar-group #expand,#op-demo-root #toolbar .toolbar-group #reset{grid-column:auto!important}
}
@media(max-width:540px){
 #op-demo-root #toolbar{flex-wrap:nowrap!important;height:auto!important;max-height:none!important}
 #op-demo-root #toolbar>.toolbar-group{flex:0 0 auto!important;min-width:0!important;width:100%!important;margin:0!important}
}


/* Oima 1.0.0.8: native Website Builder-compatible page. Unlike a raw html document,
   website.layout provides #wrapwrap and a document which the editor can safely inspect. */
html:has(.oima-pos-demo-page),body:has(.oima-pos-demo-page){
 width:100%!important;max-width:100%!important;height:100%!important;
 overflow-x:hidden!important;overflow-y:auto!important;
}
body:has(.oima-pos-demo-page){display:block!important;min-height:100%!important;margin:0!important}
body:has(.oima-pos-demo-page) #wrapwrap{
 height:100dvh!important;min-height:100dvh!important;width:100%!important;
 max-width:100%!important;overflow-x:hidden!important;overflow-y:auto!important;
 margin:0!important;padding:0!important;
}
#wrap.oima-pos-demo-page{
 width:100%!important;max-width:100%!important;height:100dvh!important;
 min-height:100dvh!important;box-sizing:border-box!important;
 overflow:hidden!important;margin:0!important;padding:0!important;
 display:flex!important;flex-direction:column!important;position:relative;
 background:#e9eef5;
}
#wrap.oima-pos-demo-page #op-demo-external-nav{flex:0 0 auto!important;position:relative!important}
#wrap.oima-pos-demo-page #op-demo-root{
 height:auto!important;min-height:0!important;flex:1 1 0!important;
 width:100%!important;max-width:100%!important;overflow:hidden!important;
 display:flex!important;flex-direction:column!important;
}
#wrap.oima-pos-demo-page #op-demo-root #toolbar{flex:0 0 auto!important}
#wrap.oima-pos-demo-page #op-demo-root #stage{flex:1 1 0!important;min-height:0!important}
#wrap.oima-pos-demo-page #op-demo-root #framewrap{height:100%!important;min-height:0!important}
#wrap.oima-pos-demo-page #op-demo-root #app{height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
@media(max-width:550px){
 #wrap.oima-pos-demo-page #op-demo-external-nav{padding-inline:9px!important}
 #wrap.oima-pos-demo-page #op-demo-root #toolbar{padding:7px!important}
}
@media print{
 body:has(.oima-pos-demo-page) #wrapwrap,
 #wrap.oima-pos-demo-page{height:auto!important;min-height:0!important;overflow:visible!important}
}