/* Build352: visible desktop controls and a balanced transaction cart. */
body:has(#app:not(.hidden) main.posScreen) {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body:has(#app:not(.hidden) main.posScreen) #app:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - 18px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#app:not(.hidden):has(main.posScreen) > header { flex: 0 0 auto; }
#app main.posScreen {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  gap: 8px !important;
  overflow: hidden !important;
}
#app main.posScreen .posHeading {
  grid-row: 1;
  grid-column: 1;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  gap: 12px !important;
}
#app main.posScreen .posHeading .pageTitle { font-size: 16px !important; }
#app main.posScreen .posHumanGuide { font-size: 10px; margin: 0; }
#app main.posScreen .posStatusBar > span { min-width: 80px !important; padding: 4px 7px !important; }
#app main.posScreen .posWorkspace351 {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  gap: 10px;
}
#app main.posScreen .posControls351 {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
  border: 1px solid #cbded1;
  border-radius: 12px;
  background: #f6faf7;
}
/* The controls stay in view; only a long customer address and cart rows scroll. */
#app main.posScreen .posSideScroll351 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  overflow: visible;
}
#app main.posScreen .posEntryGrid352 {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(135px, 1fr);
  gap: 8px;
  min-width: 0;
}
#app main.posScreen .posControlSection351 {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid #dce8e0;
  border-radius: 9px;
  background: #fff;
}
#app main.posScreen .posControlSection351 > h2,
#app main.posScreen .posPaymentDock351 > h2 {
  margin: 0 0 6px;
  color: #245740;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .4px;
  line-height: 1.2;
}
#app main.posScreen .posCustomerSelect352 h2 label { margin: 0; font: inherit; color: inherit; }
#app main.posScreen .posProductFields352 { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 6px; }
#app main.posScreen .posControls351 select,
#app main.posScreen .posControls351 input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
#app main.posScreen .posControls351 .posToolbar { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#app main.posScreen .posControls351 .posSearchWrap { width: 100% !important; min-width: 0 !important; }
#app main.posScreen .posControls351 .posSearchResults { left: 0 !important; right: 0 !important; min-width: 0 !important; max-height: min(280px, 40dvh) !important; z-index: 30; }
#app main.posScreen .posControls351 .barcodeDock {
  grid-area: auto !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#app main.posScreen .posControls351 .barcodeShortcut { min-height: 36px !important; height: 36px !important; width: 36px !important; padding: 0 !important; font-size: 10px !important; }
#app main.posScreen .posControls351 .barcodeInputWrap { min-width: 0 !important; min-height: 0 !important; height: auto !important; }
#app main.posScreen .posControls351 .barcodeInputWrap input { letter-spacing: 0 !important; font-size: 11px !important; }
#app main.posScreen .posControls351 .barcodeInputWrap small { position: static !important; display: block !important; transform: none !important; width: auto !important; max-width: none !important; margin: 3px 0 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.2 !important; white-space: normal !important; }
#app main.posScreen .posControls351 .posLoyaltyDock350 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px;
  border-radius: 9px;
}
#app main.posScreen .posMemberTools352 { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; min-height: 0; }
#app main.posScreen .posLoyaltyEntry350 { align-self: stretch; }
#app main.posScreen .posLoyaltyEntry350 > label { margin: 0 0 5px; font-size: 10px; line-height: 1.2; letter-spacing: .4px; }
#app main.posScreen .posLoyaltyInput350 { display: grid; grid-template-columns: minmax(0, 1fr) 42px 73px; gap: 4px; }
#app main.posScreen .posLoyaltyInput350 button { min-width: 0 !important; min-height: 36px !important; margin: 0 !important; padding: 4px !important; font-size: 9px !important; line-height: 1.2 !important; white-space: normal !important; }
#app main.posScreen .posLoyaltyHint350 { margin: 5px 0 0; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
#app main.posScreen .posCustomerShortcuts352 { padding: 0; border: 0; background: transparent; }
#app main.posScreen .posCustomerActions351 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
#app main.posScreen .posCustomerActions351 button { min-width: 0 !important; min-height: 40px !important; margin: 0 !important; padding: 5px 4px !important; font-size: 10px !important; line-height: 1.2 !important; white-space: normal !important; }
#app main.posScreen #posLoyaltyInfo350 { min-width: 0; min-height: 0; margin: 0; padding: 9px; border: 1px solid #d5e5da; border-radius: 8px; background: #fff; }
#app main.posScreen .posMember350 { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; height: 100%; min-height: 0; }
#app main.posScreen .posMemberHeader350 { align-items: center; gap: 5px; }
#app main.posScreen .posMemberHeader350 small { font-size: 8px; letter-spacing: .2px; }
#app main.posScreen .posMemberHeader350 h3 { font-size: 16px; margin: 3px 0; }
#app main.posScreen .posMemberHeader350 span { font-size: 10px; }
#app main.posScreen .posMemberHeader350 button { min-height: 29px !important; padding: 5px !important; font-size: 9px !important; }
#app main.posScreen .posMemberDetails350 { min-height: 0; overflow-y: auto; margin: 0; gap: 6px 10px; align-content: start; overscroll-behavior: contain; }
#app main.posScreen .posMemberDetails350 dt { font-size: 9px; }
#app main.posScreen .posMemberDetails350 dd { margin-top: 2px; font-size: 11px; }
#app main.posScreen .posPoints350 { gap: 5px; min-width: 0; padding: 7px 8px; border-radius: 7px; }
#app main.posScreen .posPoints350 small { font-size: 8px; }
#app main.posScreen .posPoints350 strong { font-size: 23px; line-height: 1.1; }
#app main.posScreen .posPoints350 strong span { font-size: 10px; }
#app main.posScreen .posPoints350 div > span { font-size: 9px; }
#app main.posScreen .posPoints350 button { min-width: 0; min-height: 35px !important; padding: 6px !important; font-size: 9px !important; white-space: normal !important; }
#app main.posScreen .posControls351 .posSideActions351 {
  grid-area: auto !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#app main.posScreen .posControls351 .checkoutGroup { min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 23px 6px 6px !important; gap: 5px !important; grid-auto-rows: auto !important; align-content: start !important; overflow: visible !important; }
#app main.posScreen .posControls351 .checkoutGroup.transactionGroup330 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#app main.posScreen .posControls351 .checkoutGroup.utilityGroup { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#app main.posScreen .posControls351 .checkoutGroup .groupLabel { top: 7px !important; left: 8px !important; font-size: 9px !important; }
#app main.posScreen .posControls351 .checkoutGroup .posBtn { min-width: 0 !important; min-height: 40px !important; height: auto !important; margin: 0 !important; padding: 6px 4px !important; grid-column: auto !important; font-size: 11px !important; line-height: 1.2 !important; white-space: normal !important; }
#app main.posScreen .posControls351 .checkoutGroup .posBtn small { display: inline !important; margin: 0 3px 0 0 !important; font-size: 8px !important; }
#app main.posScreen .posPaymentDock351 { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 7px; padding: 8px 10px; border-top: 1px solid #cbded1; background: #fff; border-radius: 0 0 12px 12px; }
#app main.posScreen .posPaymentDock351 > h2 { display: none; }
#app main.posScreen .posPaymentDock351 .paymentChoices330 { grid-column: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; min-width: 0; }
#app main.posScreen .posPaymentDock351 .paymentChoice330 { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 49px !important; padding: 6px !important; gap: 6px; border-radius: 8px; }
#app main.posScreen .posPaymentDock351 .paymentIcon330 { width: 19px; height: 19px; flex: none; }
#app main.posScreen .posPaymentDock351 .paymentIcon330 svg { width: 19px; height: 19px; }
#app main.posScreen .posPaymentDock351 .paymentText330 strong { font-size: 11px !important; line-height: 1.2; white-space: normal; }
#app main.posScreen .posPaymentDock351 .paymentText330 small,
#app main.posScreen .posPaymentDock351 .paymentArrow330 { display: none !important; }
#app main.posScreen .posPaymentDock351 .paymentChoice330 kbd { font-size: 8px; flex: none; }
#app main.posScreen .posBackOffice351 { width: 100%; min-height: 49px; margin: 0; padding: 6px; font-size: 10px; white-space: normal; }
#app main.posScreen .posWorkspace351 #posCartSurface328 { display: block !important; flex: none !important; height: 100% !important; min-height: 0 !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; }
#app main.posScreen .posWorkspace351 .cartPanel { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) auto !important; position: static !important; height: 100% !important; max-height: none !important; min-height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 11px !important; gap: 7px !important; overflow: hidden !important; border-top: 3px solid #e6b335 !important; }
#app main.posScreen .posCartHead351 { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
#app main.posScreen .posCartHead351 h2 { margin: 0; font-size: 15px; color: #164c45; }
#app main.posScreen .posCartHead351 span { max-width: 50%; overflow-wrap: anywhere; font-size: 11px; font-weight: 650; color: #54705f; text-align: right; }
#app main.posScreen .posWorkspace351 .cartListHeader { grid-row: 2; grid-column: 1; }
#app main.posScreen .posWorkspace351 .cartListHeader:not(.hidden) { display: grid !important; }
#app main.posScreen .posWorkspace351 .cartItemsScroll { grid-row: 3; grid-column: 1; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; }
#app main.posScreen .posWorkspace351 .cartRow,
#app main.posScreen .posWorkspace351 .cartListHeader { grid-template-columns: minmax(0, 1fr) 90px 110px 76px !important; gap: 8px !important; }
#app main.posScreen .posWorkspace351 .cartRow { grid-template-areas: none !important; min-height: 52px; padding: 8px !important; margin: 0 0 6px !important; }
#app main.posScreen .posWorkspace351 .cartRow > * { grid-area: auto !important; }
#app main.posScreen .posWorkspace351 .cartItemName { font-size: 13px; overflow-wrap: anywhere; }
#app main.posScreen .posWorkspace351 .cartQtyBox { min-width: 0 !important; grid-template-columns: 22px minmax(0, 1fr) 22px !important; gap: 3px !important; }
#app main.posScreen .posWorkspace351 .cartQtyInput255 { min-width: 0 !important; width: 100% !important; height: 30px !important; padding: 2px !important; font-size: 12px !important; }
#app main.posScreen .posWorkspace351 .cartQtyBtn { min-width: 22px !important; width: 22px !important; min-height: 30px !important; padding: 0 !important; }
#app main.posScreen .posWorkspace351 .cartButtons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px !important; min-width: 0 !important; }
#app main.posScreen .posWorkspace351 .cartButtons button { min-width: 0 !important; min-height: 24px !important; padding: 3px 2px !important; font-size: 9px !important; white-space: normal !important; }
#app main.posScreen .posWorkspace351 .cartButtons button:last-child { grid-column: 1 / -1 !important; }
#app main.posScreen .posWorkspace351 .emptyCartState { min-height: 0 !important; height: 100%; display: flex; flex-direction: column; justify-content: center; }
#app main.posScreen .posWorkspace351 .cartFixedFooter { grid-row: 4; grid-column: 1; position: static !important; display: block !important; width: 100% !important; min-height: 0 !important; padding: 8px 0 0 !important; border-top: 1px solid #dce8e0 !important; overflow: visible !important; }
#app main.posScreen .posWorkspace351 .cartSummary { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin: 0 0 7px !important; }
#app main.posScreen .posWorkspace351 .cartSummary > span { min-height: 36px !important; padding: 5px 7px !important; }
#app main.posScreen .posWorkspace351 .cartTotal { display: grid !important; min-height: 66px !important; grid-template-columns: 85px minmax(0, 1fr) !important; padding: 8px 10px !important; }
#app main.posScreen .posWorkspace351 .cartTotal strong { font-size: clamp(26px, 2.7vw, 36px) !important; min-width: 0 !important; }
#app main.posScreen #cashier-greeting { display: none !important; }
@media (min-width: 1000px) and (max-height: 650px) {
  #app main.posScreen { padding: 5px !important; gap: 5px !important; }
  #app main.posScreen .posHeading { min-height: 30px !important; padding: 3px 8px !important; }
  #app main.posScreen .posHumanGuide { display: none; }
  #app main.posScreen .posWorkspace351 { gap: 7px; }
  #app main.posScreen .posSideScroll351 { padding: 6px; gap: 6px; }
  #app main.posScreen .posControlSection351 { padding: 5px; }
  #app main.posScreen .posControlSection351 > h2 { margin-bottom: 4px; font-size: 9px; }
  #app main.posScreen .posControls351 input,
  #app main.posScreen .posControls351 select,
  #app main.posScreen .posControls351 .barcodeShortcut { min-height: 30px !important; height: 30px !important; font-size: 10px !important; }
  #app main.posScreen .posControls351 .barcodeInputWrap small { font-size: 8px !important; margin-top: 2px !important; }
  #app main.posScreen .posControls351 .posLoyaltyDock350 { padding: 5px; gap: 7px; }
  #app main.posScreen .posMemberTools352 { gap: 6px; }
  #app main.posScreen .posLoyaltyEntry350 > label { margin-bottom: 3px; font-size: 9px; }
  #app main.posScreen .posLoyaltyInput350 button { min-height: 30px !important; }
  #app main.posScreen .posLoyaltyHint350 { margin-top: 3px; font-size: 9px; }
  #app main.posScreen .posCustomerShortcuts352 { padding: 0; }
  #app main.posScreen .posCustomerActions351 { gap: 4px; }
  #app main.posScreen .posCustomerActions351 button { min-height: 30px !important; padding: 3px !important; font-size: 9px !important; }
  #app main.posScreen #posLoyaltyInfo350 { padding: 6px; }
  #app main.posScreen .posMember350 { gap: 4px; }
  #app main.posScreen .posMemberHeader350 h3 { font-size: 14px; margin: 2px 0; }
  #app main.posScreen .posMemberHeader350 small { font-size: 7px; }
  #app main.posScreen .posMemberDetails350 { gap: 4px 8px; }
  #app main.posScreen .posMemberDetails350 dd { font-size: 10px; }
  #app main.posScreen .posPoints350 { padding: 5px 6px; }
  #app main.posScreen .posPoints350 strong { font-size: 20px; }
  #app main.posScreen .posPoints350 button { min-height: 29px !important; }
  #app main.posScreen .posControls351 .checkoutGroup { padding: 19px 5px 5px !important; gap: 4px !important; }
  #app main.posScreen .posControls351 .checkoutGroup .groupLabel { top: 5px !important; font-size: 8px !important; }
  #app main.posScreen .posControls351 .checkoutGroup .posBtn { min-height: 31px !important; padding: 4px 3px !important; font-size: 10px !important; }
  #app main.posScreen .posControls351 .checkoutGroup .posBtn small { font-size: 7px !important; }
  #app main.posScreen .posPaymentDock351 { padding: 6px; gap: 5px; grid-template-columns: minmax(0, 1fr) 95px; }
  #app main.posScreen .posPaymentDock351 .paymentChoice330,
  #app main.posScreen .posBackOffice351 { min-height: 40px !important; }
  #app main.posScreen .posPaymentDock351 .paymentText330 strong { font-size: 10px !important; }
  #app main.posScreen .posWorkspace351 .cartPanel { padding: 8px !important; gap: 5px !important; }
  #app main.posScreen .posWorkspace351 .cartTotal { min-height: 56px !important; }
}
@media (max-width: 1199px) and (min-width: 1000px) {
  #app main.posScreen .posWorkspace351 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #app main.posScreen .posEntryGrid352 { grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr); }
  #app main.posScreen .posControls351 .posLoyaltyDock350 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  #app main.posScreen .posWorkspace351 .cartRow,
  #app main.posScreen .posWorkspace351 .cartListHeader { grid-template-columns: minmax(0, 1fr) 70px 82px 60px !important; gap: 5px !important; }
  #app main.posScreen .posWorkspace351 .cartSummary > span { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 999px), (max-height: 420px) {
  body:has(#app:not(.hidden) main.posScreen), body:has(#app:not(.hidden) main.posScreen) #app:not(.hidden) { height: auto !important; min-height: 100dvh !important; overflow: visible !important; }
  #app main.posScreen { display: block !important; height: auto !important; overflow: visible !important; padding: 8px !important; }
  #app main.posScreen .posHeading { flex-wrap: wrap; margin-bottom: 8px !important; }
  #app main.posScreen .posHeading > div:first-child { flex-wrap: wrap; white-space: normal !important; }
  #app main.posScreen .posWorkspace351 { display: flex; flex-direction: column; gap: 10px; height: auto; }
  #app main.posScreen .posControls351 { display: block; }
  #app main.posScreen .posSideScroll351 { grid-template-rows: auto auto auto; }
  #app main.posScreen .posControls351 .posLoyaltyDock350 { min-height: 200px; }
  #app main.posScreen .posMember350 { height: auto; grid-template-rows: auto auto auto auto; }
  #app main.posScreen .posMemberDetails350 { overflow: visible; }
  #app main.posScreen .posWorkspace351 #posCartSurface328 { height: min(520px, 70dvh) !important; min-height: 350px !important; }
}
@media (max-width: 600px) {
  #app main.posScreen .posEntryGrid352 { grid-template-columns: 1fr; }
  #app main.posScreen .posControls351 .posLoyaltyDock350 { grid-template-columns: 1fr; }
  #app main.posScreen .posControls351 .posSideActions351 { grid-template-columns: 1fr !important; }
  #app main.posScreen .posPaymentDock351 { grid-template-columns: 1fr; }
  #app main.posScreen .posStatusBar { flex-wrap: wrap; }
  #app main.posScreen .posWorkspace351 .cartPanel { padding: 8px !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  #app main.posScreen .posWorkspace351 .cartListHeader:not(.hidden) { display: none !important; }
  #app main.posScreen .posWorkspace351 .cartItemsScroll { grid-row: 2; }
  #app main.posScreen .posWorkspace351 .cartFixedFooter { grid-row: 3; }
  #app main.posScreen .posWorkspace351 .cartRow { grid-template-columns: minmax(0, 1fr) 90px !important; }
  #app main.posScreen .posWorkspace351 .cartItemInfo { grid-column: 1 / -1 !important; }
  #app main.posScreen .posWorkspace351 .cartButtons { grid-column: 2 !important; }
  #app main.posScreen .posWorkspace351 .cartSummary > span { flex-direction: column !important; align-items: flex-start !important; }
}
@media print { #app main.posScreen .posControls351 { display: none !important; } }