/* Build354: supermarket checkout styling over the balanced Build352 layout. */
body:has(#app:not(.hidden) main.posScreen) { background: #edf1e9 !important; }
body:has(#app:not(.hidden) main.posScreen) #app:not(.hidden) { background: #edf1e9 !important; }
#app:not(.hidden):has(main.posScreen) > header { background: #00613b !important; box-shadow: none !important; border-bottom: 3px solid #e3bb30; }
#app main.posScreen .posHeading { border: 1px solid #bccdbc !important; border-left: 5px solid #e3bb30 !important; border-radius: 3px !important; background: #fff !important; }
#app main.posScreen .posHeading .pageTitle { color: #005b35 !important; letter-spacing: .5px !important; }
#app main.posScreen .posStatusBar > span { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
#app main.posScreen .posWorkspace354 { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
#app main.posScreen .posWorkspace354 .posControls351,
#app main.posScreen .posWorkspace354 .cartPanel { border: 1px solid #afc3ae !important; border-radius: 4px !important; background: #fff !important; }
#app main.posScreen .posWorkspace354 .posSideScroll351 { background: #f1f4ed; }
#app main.posScreen .posWorkspace354 .posControlSection351,
#app main.posScreen .posWorkspace354 .posLoyaltyDock350,
#app main.posScreen .posWorkspace354 .checkoutGroup { border: 1px solid #c7d4c3 !important; border-radius: 3px !important; box-shadow: none !important; background: #fff !important; }
#app main.posScreen .posWorkspace354 .posControlSection351 > h2,
#app main.posScreen .posWorkspace354 .posLoyaltyEntry350 > label,
#app main.posScreen .posWorkspace354 .checkoutGroup .groupLabel { color: #195935 !important; font-weight: 900 !important; letter-spacing: .45px !important; }
#app main.posScreen .posWorkspace354 .posControls351 input,
#app main.posScreen .posWorkspace354 .posControls351 select { border: 1px solid #a8bca5 !important; border-radius: 3px !important; background: #fff !important; color: #17341f !important; }
#app main.posScreen .posWorkspace354 .posControls351 input:focus,
#app main.posScreen .posWorkspace354 .posControls351 select:focus { outline: 2px solid #d1ab22 !important; outline-offset: 1px; }
#app main.posScreen .posWorkspace354 .barcodeShortcut { border-radius: 3px !important; background: #075d35 !important; color: #fff !important; }
#app main.posScreen .posWorkspace354 .barcodeDock.scanSuccess input { border-color: #008644 !important; background: #edf9f0 !important; }
#app main.posScreen .posWorkspace354 .barcodeDock.scanFailed input { border-color: #b63130 !important; background: #fff2f0 !important; }
#app main.posScreen .posWorkspace354 .posCustomerShortcuts352 { border: 0 !important; background: transparent !important; }
#app main.posScreen .posWorkspace354 .posCustomerActions351 button,
#app main.posScreen .posWorkspace354 .checkoutGroup .posBtn {
  background: #edf2e8 !important;
  color: #21432d !important;
  border: 1px solid #bdceb6 !important;
  border-radius: 3px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#app main.posScreen .posWorkspace354 .posCustomerActions351 button.gold { background: #fff4c5 !important; color: #68510c !important; border-color: #dcc35c !important; }
#app main.posScreen .posWorkspace354 .checkoutGroup .btnHold,
#app main.posScreen .posWorkspace354 .checkoutGroup .btnRecall { background: #e9f0f5 !important; color: #244b65 !important; border-color: #b6c9d7 !important; }
#app main.posScreen .posWorkspace354 .checkoutGroup .btnClear,
#app main.posScreen .posWorkspace354 .checkoutGroup .btnVoid { background: #fff0ed !important; color: #a03129 !important; border-color: #e1b6b0 !important; }
#app main.posScreen .posWorkspace354 .checkoutGroup .posBtn small { color: #607164 !important; font-weight: 900 !important; }
#app main.posScreen .posWorkspace354 .checkoutGroup .posBtn.selected { background: #07623a !important; color: #fff !important; outline: 2px solid #e2b92b !important; outline-offset: 0; }
#app main.posScreen .posWorkspace354 .checkoutGroup .posBtn.selected small { color: #f6e6a5 !important; }
#app main.posScreen .posWorkspace354 #posLoyaltyInfo350 { border-radius: 3px !important; border-color: #bfcfbb; background: #f9fcf6; }
#app main.posScreen .posWorkspace354 .posPoints350 { border-radius: 3px; border: 1px solid #c9daa8; background: #f1f6df; }
#app main.posScreen .posWorkspace354 .posLoyaltyInput350 button,
#app main.posScreen .posWorkspace354 .posMemberHeader350 button,
#app main.posScreen .posWorkspace354 .posPoints350 button { border-radius: 3px !important; box-shadow: none !important; }
#app main.posScreen .posWorkspace354 .posPaymentDock351 { border-radius: 0 0 4px 4px; border-top: 2px solid #d0b241; background: #fffbe8; }
#app main.posScreen .posWorkspace354 .paymentChoice330,
#app main.posScreen .posWorkspace354 .posBackOffice351 { border-radius: 3px !important; box-shadow: none !important; }
#app main.posScreen .posWorkspace354 .paymentChoice330.payCash330 { background: #00693d !important; border-color: #005932 !important; }
#app main.posScreen .posWorkspace354 .paymentChoice330.payOnline330 { background: #e9f1f8 !important; color: #244f75 !important; border-color: #b6cbdc !important; }
#app main.posScreen .posWorkspace354 .paymentChoice330.payCredit330 { background: #f8e8b2 !important; color: #6c4b09 !important; border-color: #d4b456 !important; }
#app main.posScreen .posWorkspace354 .cartPanel { padding: 8px !important; gap: 5px !important; }
#app main.posScreen .posWorkspace354 .posCartHead351 { padding: 5px 6px; border-bottom: 2px solid #cdb33b; }
#app main.posScreen .posWorkspace354 .posCartHead351 h2 { font-size: 14px; letter-spacing: .4px; color: #0c5430; }
#app main.posScreen .posWorkspace354 .posCartHead351 span { padding: 4px 7px; border-radius: 2px; background: #edf3e6; color: #315b34; }
#app main.posScreen .posWorkspace354 .cartListHeader,
#app main.posScreen .posWorkspace354 .cartRow {
  grid-template-columns: 24px minmax(0, 1fr) 76px 72px 88px 64px !important;
  gap: 6px !important;
}
#app main.posScreen .posWorkspace354 .cartListHeader { padding: 8px 6px !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important; background: #0c653c !important; color: #fff !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .3px !important; }
#app main.posScreen .posWorkspace354 .cartListHeader > span { display: block !important; color: #fff !important; text-align: right !important; }
#app main.posScreen .posWorkspace354 .cartListHeader > span:first-child { text-align: center !important; }
#app main.posScreen .posWorkspace354 .cartListHeader > span:nth-child(2) { text-align: left !important; }
#app main.posScreen .posWorkspace354 .cartListHeader > span:nth-child(3),
#app main.posScreen .posWorkspace354 .cartListHeader > span:last-child { text-align: center !important; }
#app main.posScreen .posWorkspace354 .cartRow { grid-template-areas: none !important; min-height: 54px; margin: 0 !important; padding: 7px 6px !important; border: 0 !important; border-bottom: 1px solid #dce5d6 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
#app main.posScreen .posWorkspace354 .cartRow:nth-child(even) { background: #f7faf4 !important; }
#app main.posScreen .posWorkspace354 .cartRow:last-child { background: #fff8d8 !important; box-shadow: inset 3px 0 #cfac23 !important; }
#app main.posScreen .posWorkspace354 .posLineNumber354 { display: block; align-self: center; min-width: 0; color: #7b8a74; font-size: 10px; font-weight: 700; text-align: center; }
#app main.posScreen .posWorkspace354 .cartItemName { font-size: 13px; font-weight: 750; color: #173b25 !important; }
#app main.posScreen .posWorkspace354 .cartItemInfo > small { font-size: 9px !important; font-weight: 600 !important; color: #76866d !important; }
#app main.posScreen .posWorkspace354 .cartUnitPrice { display: none !important; }
#app main.posScreen .posWorkspace354 .posUnitPrice354 { min-width: 0; align-self: center; text-align: right; }
#app main.posScreen .posWorkspace354 .posUnitPrice354 small { display: none; }
#app main.posScreen .posWorkspace354 .posUnitPrice354 strong { font-size: 12px; font-weight: 650; color: #476044; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#app main.posScreen .posWorkspace354 .cartItemTotal { min-width: 0 !important; align-items: flex-end !important; justify-content: center !important; }
#app main.posScreen .posWorkspace354 .cartItemTotal > small { display: none !important; }
#app main.posScreen .posWorkspace354 .cartItemTotal > strong { font-size: 13px !important; font-weight: 850 !important; color: #164626 !important; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#app main.posScreen .posWorkspace354 .cartQtyBox { grid-template-columns: 18px minmax(0, 1fr) 18px !important; gap: 2px !important; }
#app main.posScreen .posWorkspace354 .cartQtyBtn { width: 18px !important; min-width: 18px !important; min-height: 28px !important; border-radius: 2px !important; border: 1px solid #bacaad !important; background: #edf2e7 !important; color: #295230 !important; }
#app main.posScreen .posWorkspace354 .cartQtyInput255 { height: 28px !important; min-height: 28px !important; padding: 2px !important; border: 1px solid #b5c6a8 !important; border-radius: 2px !important; background: #fff !important; font-size: 12px !important; }
#app main.posScreen .posWorkspace354 .cartButtons button { border-radius: 2px !important; border: 1px solid #c5d1ba !important; background: #f1f5eb !important; color: #496239 !important; }
#app main.posScreen .posWorkspace354 .cartButtons button.danger { background: #fff0ec !important; color: #a3352c !important; border-color: #e1c0b5 !important; }
#app main.posScreen .posWorkspace354 .cartSummary > span { border-radius: 2px !important; background: #f5f8ef !important; }
#app main.posScreen .posWorkspace354 .cartTotal { min-height: 68px !important; border-radius: 3px !important; border: 1px solid #dbc24f !important; background: #f5dc65 !important; color: #243a13 !important; box-shadow: none !important; }
#app main.posScreen .posWorkspace354 .cartItemCount.totalStripBlock { border: 0 !important; border-right: 1px solid #d0b94c !important; border-radius: 0 !important; background: transparent !important; color: #38522a !important; }
#app main.posScreen .posWorkspace354 .grandTotalBlock.totalStripBlock { min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#app main.posScreen .posWorkspace354 .grandTotalLabel { color: #3b542b !important; font-size: 10px !important; letter-spacing: .7px !important; }
#app main.posScreen .posWorkspace354 .cartTotal strong { color: #164d25 !important; font-size: clamp(28px, 2.6vw, 40px) !important; text-shadow: none !important; letter-spacing: -.5px !important; font-variant-numeric: tabular-nums; }
#app main.posScreen .posWorkspace354 .emptyCartState { height: 100%; min-height: 0 !important; display: flex; flex-direction: column; justify-content: center; padding: 24px 10px !important; background: #fff !important; }
#app main.posScreen .posWorkspace354 .emptyCartState .emptyCartIcon { color: #cad7bd; }
#app main.posScreen .posWorkspace354 .emptyCartState strong { color: #265430 !important; font-size: 18px !important; }
#app main.posScreen .posWorkspace354 .emptyCartState > span { font-size: 13px !important; color: #687e5f !important; }
#app main.posScreen .posWorkspace354 .emptyCartTips { gap: 5px; }
#app main.posScreen .posWorkspace354 .emptyCartTips span { border-radius: 2px !important; border-color: #d5dfca; background: #f4f7ee; color: #718369; }
#modalRoot .modalBox:has(.cashPayment),
#modalRoot .modalBox:has(.saleReceiptScreen) { border-radius: 6px !important; border: 2px solid #0b6137 !important; }
#modalRoot .cashPayment .cashDue { border-radius: 4px; background: #07673b !important; color: #fff !important; }
#modalRoot .cashPayment .cashDue > span,
#modalRoot .cashPayment .cashDue > strong { color: #fff !important; }
#modalRoot .cashPayment .cashDue strong { font-variant-numeric: tabular-nums; }
#modalRoot .cashPayment .cashKeypad button,
#modalRoot .cashPayment .tenderButtons button,
#modalRoot .cashPayment .cashActions button { border-radius: 4px !important; box-shadow: none !important; }
#modalRoot .cashPayment .cashChange.cashReady { border-radius: 4px; background: #fff2b9 !important; border: 1px solid #dac252; color: #23491c !important; }
#modalRoot .cashPayment .cashChange.cashReady > span,
#modalRoot .cashPayment .cashChange.cashReady > strong { color: #23491c !important; }
#modalRoot .cashPayment .cashChange strong { font-variant-numeric: tabular-nums; }
#modalRoot .saleReceiptScreen .saleReceiptSuccess[data-save-state="saved"] { border-radius: 4px; background: #086a3c; }
#modalRoot .saleReceiptScreen .saleReceiptSummary { border-radius: 4px; background: #f7e18b !important; color: #285024 !important; }
#modalRoot .saleReceiptScreen .saleReceiptSummary > strong,
#modalRoot .saleReceiptScreen .saleReceiptSummary > span,
#modalRoot .saleReceiptScreen .saleReceiptSummary > small { color: #285024 !important; font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) and (max-height: 650px) {
  #app main.posScreen .posWorkspace354 .cartTotal { min-height: 56px !important; }
  #app main.posScreen .posWorkspace354 .cartTotal strong { font-size: 29px !important; }
  #app main.posScreen .posWorkspace354 .cartListHeader { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  #app main.posScreen .posWorkspace354 { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
  #app main.posScreen .posWorkspace354 .cartListHeader,
  #app main.posScreen .posWorkspace354 .cartRow { grid-template-columns: 20px minmax(0, 1fr) 66px 58px 76px 48px !important; gap: 3px !important; }
  #app main.posScreen .posWorkspace354 .cartItemName { font-size: 12px; }
  #app main.posScreen .posWorkspace354 .posUnitPrice354 strong,
  #app main.posScreen .posWorkspace354 .cartItemTotal > strong { font-size: 11px !important; }
}
@media (max-width: 600px) {
  #app main.posScreen .posWorkspace354 .cartRow { grid-template-columns: minmax(0, 1fr) 90px !important; gap: 5px !important; }
  #app main.posScreen .posWorkspace354 .posLineNumber354 { display: none; }
  #app main.posScreen .posWorkspace354 .cartItemInfo { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  #app main.posScreen .posWorkspace354 .cartQtyBox { grid-row: 2 !important; grid-column: 1 !important; max-width: 100px; }
  #app main.posScreen .posWorkspace354 .posUnitPrice354 { grid-row: 3 !important; grid-column: 1 !important; text-align: left; }
  #app main.posScreen .posWorkspace354 .posUnitPrice354 small { display: inline; margin-right: 5px; font-size: 9px; color: #718369; }
  #app main.posScreen .posWorkspace354 .cartItemTotal { grid-row: 2 !important; grid-column: 2 !important; }
  #app main.posScreen .posWorkspace354 .cartButtons { grid-row: 3 !important; grid-column: 2 !important; }
}