/* Keep payment controls together on every desktop cashier. */
@media(min-width:960px){
 .retail-shell.retail-reference .retail-cashier .ref-checkout-column .retail-checkout{height:auto}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-column .ref-tender[data-cash=true]{flex-grow:0}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-column .ref-keypad{flex-grow:0;max-height:100cqw}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-column .ref-tender[data-cash=false]~.ref-complete{margin-top:0}
}
/* A large retail monitor gets readable native controls and balanced sale/payment
   columns. Apply only to the cashier; mobile and the management pages keep their
   existing layouts. Width and height must both support the larger controls. */
@media (min-width:2000px) and (min-height:900px){
 /* Enlarge the surrounding frame only while the cashier page is visible.
    The retained, hidden cashier must not restyle the management pages. */
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier){
  --retail-frame-unit:clamp(1px,min(.04vw,.095vh),1.4px);
  grid-template-columns:calc(80 * var(--retail-frame-unit)) minmax(0,1fr);
  grid-template-rows:clamp(48px,calc(48 * var(--retail-frame-unit)),64px) minmax(0,1fr);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-rail{
  padding-inline:clamp(4px,calc(4 * var(--retail-frame-unit)),6px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-rail .ref-rail-brand{
  height:clamp(52px,calc(52 * var(--retail-frame-unit)),64px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-rail .ref-rail-brand img{
  width:clamp(34px,calc(34 * var(--retail-frame-unit)),40px);height:clamp(34px,calc(34 * var(--retail-frame-unit)),40px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-rail button{
  min-height:clamp(67px,calc(67 * var(--retail-frame-unit)),88px);
  padding-block:clamp(8px,calc(8 * var(--retail-frame-unit)),12px);
  gap:clamp(5px,calc(5 * var(--retail-frame-unit)),7px);
  font-size:clamp(12px,calc(12 * var(--retail-frame-unit)),16px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-rail button svg{
  width:clamp(23px,calc(23 * var(--retail-frame-unit)),28px);height:clamp(23px,calc(23 * var(--retail-frame-unit)),28px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar{
  gap:clamp(22px,calc(22 * var(--retail-frame-unit)),28px);
  padding-inline:clamp(20px,calc(20 * var(--retail-frame-unit)),28px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-wordmark{
  font-size:clamp(22px,calc(22 * var(--retail-frame-unit)),28px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-branch{
  font-size:clamp(13px,calc(13 * var(--retail-frame-unit)),16px);
  gap:clamp(10px,calc(10 * var(--retail-frame-unit)),14px);
  padding-left:clamp(22px,calc(22 * var(--retail-frame-unit)),28px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-branch svg{
  width:clamp(18px,calc(18 * var(--retail-frame-unit)),24px);height:clamp(18px,calc(18 * var(--retail-frame-unit)),24px);flex-shrink:0;
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-top-meta{
  gap:clamp(12px,calc(12 * var(--retail-frame-unit)),16px);
  font-size:clamp(12px,calc(12 * var(--retail-frame-unit)),15px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-top-meta time{
  padding-left:clamp(16px,calc(16 * var(--retail-frame-unit)),20px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar time strong{
  font-size:clamp(14px,calc(14 * var(--retail-frame-unit)),18px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .icon-btn{
  min-width:clamp(44px,calc(44 * var(--retail-frame-unit)),52px);min-height:clamp(44px,calc(44 * var(--retail-frame-unit)),52px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .icon-btn svg{
  width:clamp(18px,calc(18 * var(--retail-frame-unit)),24px);height:clamp(18px,calc(18 * var(--retail-frame-unit)),24px);
 }
 .retail-shell.retail-reference:has(> .retail-shell-content > .retail-page:not([hidden]) > .retail-cashier) > .ref-topbar .ref-user{
  font-size:clamp(13px,calc(13 * var(--retail-frame-unit)),16px);
 }
 .retail-shell.retail-reference .retail-cashier .ref-content{
  --retail-display-unit:clamp(1px,min(.05vw,.095vh),1.6px);
  --text-2xs:calc(11 * var(--retail-display-unit));
  --text-xs:calc(12 * var(--retail-display-unit));
  --text-sm:calc(13 * var(--retail-display-unit));
  --text-base:calc(14 * var(--retail-display-unit));
  --text-md:calc(16 * var(--retail-display-unit));
  --text-lg:calc(18 * var(--retail-display-unit));
  --text-xl:calc(22 * var(--retail-display-unit));
  --text-2xl:calc(28 * var(--retail-display-unit));
  --control-sm:calc(40 * var(--retail-display-unit));
  --control-md:calc(44 * var(--retail-display-unit));
  --control-lg:calc(52 * var(--retail-display-unit));
  padding:calc(12 * var(--retail-display-unit));
  gap:calc(8 * var(--retail-display-unit));
 }
 .retail-shell.retail-reference .retail-cashier .ref-workspace{
  grid-template-columns:minmax(0,1fr) clamp(460px,27vw,1040px);
  gap:calc(16 * var(--retail-display-unit));
 }
 .retail-shell.retail-reference .retail-cashier .ref-selling{gap:calc(10 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-scan{
  grid-template-columns:minmax(0,1fr) var(--control-lg) var(--control-lg);
  gap:calc(8 * var(--retail-display-unit));
 }
 .retail-shell.retail-reference .retail-cashier .ref-scan :is(.btn,.input){height:var(--control-lg);min-height:var(--control-lg)}
 .retail-shell.retail-reference .retail-cashier .ref-scan svg{width:calc(22 * var(--retail-display-unit));height:calc(22 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-quick-strip{
  grid-template-columns:repeat(5,minmax(0,1fr)) calc(80 * var(--retail-display-unit));
  min-height:calc(72 * var(--retail-display-unit));
  gap:calc(7 * var(--retail-display-unit));
 }
 .retail-shell.retail-reference .retail-cashier :is(.ref-quick-product,.ref-browse){padding:calc(7 * var(--retail-display-unit));gap:calc(7 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-product-thumb{width:calc(36 * var(--retail-display-unit));height:calc(42 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-quick-product .retail-product-image{flex-basis:calc(40 * var(--retail-display-unit));width:calc(40 * var(--retail-display-unit));height:calc(48 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-browse svg{width:calc(27 * var(--retail-display-unit));height:calc(27 * var(--retail-display-unit));padding:calc(4 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .retail-product-tabs{gap:calc(8 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .retail-product-tabs>.btn{
  flex-basis:calc(140 * var(--retail-display-unit));height:var(--control-md);min-height:var(--control-md);
 }
 .retail-shell.retail-reference .retail-cashier .retail-product-tabs>.retail-groups-edit{flex-basis:var(--control-lg)}
 .retail-shell.retail-reference .retail-cashier .ref-sale-table th{height:calc(40 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-sale-table td{height:calc(56 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-sale-table :is(th,td){padding-inline:calc(10 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-sale-table :is(th,td):first-child{width:calc(36 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-sale-table td:last-child{width:calc(52 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-line-product{gap:calc(8 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-line-product .retail-product-image{flex-basis:calc(40 * var(--retail-display-unit));width:calc(40 * var(--retail-display-unit));height:calc(44 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-line-product>span:last-child{max-width:calc(360 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-quantity button{min-width:var(--control-md);min-height:var(--control-md)}
 .retail-shell.retail-reference .retail-cashier .ref-remove{width:var(--control-md);height:var(--control-md)}
 .retail-shell.retail-reference .retail-cashier :is(.ref-quantity,.ref-remove) svg{width:calc(17 * var(--retail-display-unit));height:calc(17 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-cart-footer{gap:calc(10 * var(--retail-display-unit));min-height:var(--control-lg)}
 .retail-shell.retail-reference .retail-cashier :is(.ref-cart-footer>.btn,.ref-more-wrap>.btn){height:var(--control-lg);min-height:var(--control-lg)}
 .retail-shell.retail-reference .retail-cashier .ref-cart-footer svg{width:calc(20 * var(--retail-display-unit));height:calc(20 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .retail-cart-empty{gap:calc(12 * var(--retail-display-unit));padding:calc(24 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .retail-cart-empty>svg{width:calc(32 * var(--retail-display-unit));height:calc(32 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .retail-cart-empty p{max-width:calc(280 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-column{
  margin:calc(-12 * var(--retail-display-unit));padding:calc(12 * var(--retail-display-unit));padding-left:calc(12 * var(--retail-display-unit) - 1px);
 }
 .retail-shell.retail-reference .retail-cashier .retail-checkout{gap:calc(8 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-customer{min-height:calc(48 * var(--retail-display-unit));padding:calc(6 * var(--retail-display-unit)) calc(12 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-customer>svg{width:calc(20 * var(--retail-display-unit));height:calc(20 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-totals{padding:calc(8 * var(--retail-display-unit)) calc(14 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-totals>div{min-height:calc(24 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-totals .ref-grand-total{min-height:calc(44 * var(--retail-display-unit));padding-top:calc(6 * var(--retail-display-unit));margin-top:calc(4 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-tender{padding:calc(10 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-tender>label{margin-bottom:calc(8 * var(--retail-display-unit));gap:calc(8 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-tender>label>span{min-width:calc(100 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-tender .input{height:var(--control-lg);min-height:var(--control-lg)}
 .retail-shell.retail-reference .retail-cashier .ref-keypad{height:calc(288 * var(--retail-display-unit));gap:calc(6 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier :is(.ref-digits,.ref-keypad-side){gap:calc(6 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-keypad button{min-height:var(--control-lg);font-size:var(--text-2xl)}
 .retail-shell.retail-reference .retail-cashier .ref-change{min-height:calc(40 * var(--retail-display-unit));margin-top:calc(6 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-methods{gap:calc(6 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-methods>button{min-height:calc(48 * var(--retail-display-unit));padding:calc(8 * var(--retail-display-unit)) calc(12 * var(--retail-display-unit));gap:calc(8 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-methods svg{width:calc(24 * var(--retail-display-unit));height:calc(24 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-complete{min-height:calc(56 * var(--retail-display-unit));padding:calc(10 * var(--retail-display-unit)) calc(16 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-shortcuts{gap:calc(6 * var(--retail-display-unit));padding-top:calc(4 * var(--retail-display-unit))}
 .retail-shell.retail-reference .retail-cashier .ref-checkout-shortcuts .btn{min-height:var(--control-md);padding:calc(6 * var(--retail-display-unit))}
}