.retail-shortcut-shell{position:relative;display:flex;align-items:stretch;background:#073465;border-bottom:1px solid #2d5f8f;min-width:0;flex-shrink:0}
.retail-shortcut-shell .retail-shortcutbar{display:flex;flex-wrap:nowrap;flex:1 1 0;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#6a98bc #073465;scroll-snap-type:x proximity;padding:4px 0;border:0;gap:0}
.retail-shortcut-shell .retail-shortcutbar button{flex:1 0 max-content;min-width:100px;min-height:43px;padding:4px 12px;white-space:nowrap;border-bottom:0;scroll-snap-align:start;font-size:11px}
.retail-shortcut-shell .retail-shortcutbar span{white-space:nowrap;line-height:1.2}
.retail-shortcut-control{flex:0 0 30px;border:0;background:#073465;color:#d5e9fb;font-size:18px;cursor:pointer}
.retail-shortcut-control:hover,.retail-shortcut-control:focus-visible{background:#14518b;outline:2px solid #9ccbea;outline-offset:-2px}
.retail-shortcut-min{flex-basis:38px;font-size:14px}
.retail-shortcut-shell.is-minimized{min-height:28px;justify-content:flex-end}
.retail-shortcut-shell.is-minimized>.retail-shortcutbar,.retail-shortcut-shell.is-minimized>.retail-shortcut-arrow{display:none}
.retail-shortcut-shell.is-minimized>.retail-shortcut-min{flex:0 0 auto;padding:5px 14px;font-size:11px;min-height:28px}
.retail-shortcut-shell.is-minimized.is-peeking>.retail-shortcutbar{display:flex;position:absolute;left:30px;right:38px;top:28px;z-index:45;background:#073465;box-shadow:0 6px 14px #001b3344}
.retail-shortcut-shell.is-minimized.is-peeking>.retail-shortcut-arrow{display:block;position:absolute;top:28px;height:51px;z-index:46}
.retail-shortcut-shell.is-peeking>.retail-shortcut-prev{left:0}
.retail-shortcut-shell.is-peeking>.retail-shortcut-next{right:8px}
#kasir .customer-select{background:#e8f4ff!important;border:1px solid #c8e1f3!important}
#kasir .customer-icon{background:#d5eafb;color:#145784}
#kasir .customer-select #customer-name{color:#123c62}
.retail-added-confirmation{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));padding:12px 14px;border:1px solid #95c2de;border-radius:12px;background:#e8f4ff;color:#123c62;box-shadow:0 4px 18px #001b332b;display:flex;justify-content:space-between;align-items:center;gap:12px}
.retail-added-confirmation[hidden]{display:none}
.retail-added-confirmation strong,.retail-added-confirmation small{display:block}
.retail-added-confirmation strong{font-size:14px}.retail-added-confirmation small{font-size:12px;margin-top:4px}
.retail-added-confirmation button{border:1px solid #99bfd8;background:#fff;border-radius:8px;padding:8px 10px;color:#123c62;white-space:nowrap;cursor:pointer}
@media(max-width:1000px),(orientation:portrait){
 #kasir.view.active{padding:0;height:var(--retail-view-height,calc(100dvh - 160px));min-height:0;overflow:hidden}
 #kasir .pos-layout{display:block;position:relative;height:100%;padding:12px 12px 80px;overflow:hidden}
 #kasir .catalog-panel{height:100%;min-height:0;padding:0;gap:10px;display:flex;flex-direction:column;overflow:hidden}
 #kasir .retail-table-wrap{flex:1 1 0;min-height:0}
 #kasir .product-grid{flex:1 1 0;min-height:0;overflow-y:auto;align-content:start}
 #kasir .cart-panel{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));height:min(72dvh,var(--retail-sheet-height,600px));min-height:0;display:flex;flex-direction:column;padding:0 10px 10px;overflow:hidden;border:1px solid #a8c6dc;border-radius:12px;box-shadow:0 -4px 18px #001b332e;transform:translateY(calc(100% - 58px));transition:transform .2s ease}
 #kasir .cart-panel.sheet-open{transform:translateY(0)}
 #kasir .cart-panel:not(.sheet-open)>:not(.cart-sheet-toggle){visibility:hidden}
 #kasir .cart-sheet-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;align-items:center;gap:8px;position:relative;flex:0 0 58px;width:calc(100% + 20px);height:58px;margin:0 -10px;padding:12px 14px 7px;border:0;border-bottom:1px solid #d1e2ef;border-radius:12px 12px 0 0;background:#e8f4ff;color:#123c62;text-align:left;cursor:pointer}
 #kasir .sheet-grip{top:5px;height:3px;width:30px;background:#88b0cc}
 #kasir .sheet-order small{font-size:11px;margin:0;color:#476b87;white-space:nowrap}
 #kasir .sheet-order strong{font-size:13px;margin-top:2px;color:#123c62}
 #kasir .sheet-total{font-size:17px;color:#124d79;white-space:nowrap}
 #kasir .sheet-chevron{font-size:18px;color:#124d79;align-self:center}
 #kasir .cashier-order-tabs{flex-shrink:0;margin-top:8px}
 #kasir .cart-title-row{flex-shrink:0}
 #kasir .customer-actions-row{flex-shrink:0}
 #kasir .cart-items{flex:1 1 0;min-height:0;overflow-y:auto}
 #kasir .empty-cart{flex:1 1 0;min-height:40px;margin:12px 0;overflow:auto}
 #kasir .cart-bottom{flex:0 0 auto;padding-top:8px}
 #kasir .customer-select{min-height:50px;padding:7px;gap:7px;grid-template-columns:30px minmax(0,1fr) auto}
 #kasir .customer-select #customer-name{font-size:16px}
 #kasir .category-row{flex-wrap:nowrap;overflow-x:auto;min-height:36px}
 #kasir .category{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:480px){
 .retail-shortcut-shell .retail-shortcutbar button{min-width:105px;font-size:11px}
 #kasir .customer-select #customer-name{font-size:15px}
 #kasir .retail-member-hotkey small{max-width:80px;font-size:9px}
 #kasir .cart-panel .retail-line-actions{flex-wrap:wrap}
 #kasir .cart-panel .retail-line-price{font-size:12px}
 #kasir .cart-panel .cart-item{padding:8px 0}
}
@media(prefers-reduced-motion:reduce){#kasir .cart-panel{transition:none}}
@media(max-width:620px){#kasir .product-card{grid-template-rows:auto auto auto;min-height:86px}#kasir .product-card .retail-unit{display:block!important;grid-column:2;grid-row:3;text-align:left;font-size:12px}#kasir .product-card .retail-sku{display:none!important}#kasir .product-card .product-photo{grid-row:1/4}#kasir .product-card .price{grid-row:1/4}}

/* Compact, evenly spaced header actions. */
.app-shell .topbar { align-items:center; gap:12px; }
.app-shell .topbar-actions { margin-left:auto; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:nowrap; min-width:0; }
.app-shell .topbar-actions > * { margin:0; flex-shrink:0; }
.app-shell .topbar-actions .outlet-control { margin:0; }
@media(max-width:650px) {
 .app-shell .topbar { gap:8px; }
 .app-shell .topbar-actions { flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
}