/* Layout depends on available space, independently of touch target sizing. */
body[data-role] .workspace{container-type:inline-size;container-name:workspace}
body[data-role] :is(main,.view,.pos-grid,.cart,.profile-fields,.settings-card,.filters,.admin-toolbar,.section-head,.top-actions){min-width:0}
body[data-role] .pos-grid{grid-template-columns:minmax(0,1fr) minmax(320px,360px);align-items:start}
body[data-role] #view-pos .menu-pane{container-type:inline-size;container-name:catalog;min-width:0}
body[data-role] .products{grid-template-columns:repeat(var(--product-columns,4),minmax(0,1fr))}
body[data-role] .product-shell{min-width:0}
body[data-role] .product-shell>.product{width:100%;min-width:0;flex:1;height:auto}
body[data-role] .product-shell .product strong{white-space:normal;overflow-wrap:anywhere}
body[data-role] .product-bottom{flex-wrap:wrap}
body[data-role] .stock-badge{max-width:100%;white-space:normal}
body[data-role] .cart{position:sticky;top:104px;height:auto;max-height:calc(100dvh - 120px);min-height:0;overflow-y:auto}
body[data-role="cashier"] .cart{top:90px;max-height:calc(100dvh - 106px);padding:20px}
body[data-role] .cart>:not(.cart-items){flex-shrink:0}
body[data-role] .cart-items{flex:1 0 auto;min-height:100px;max-height:300px;overflow:auto}
body[data-role] .cart-line{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;min-height:0}
body[data-role] .cart-item-icon{width:44px;height:44px}
body[data-role] .cart-line strong{white-space:normal;overflow-wrap:anywhere}
body[data-role] .cart-line .qty{gap:4px}
body[data-role] .cart-line .qty span{min-width:20px}
body[data-role] .checkout-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body[data-role] .checkout-actions button{padding:10px 8px;white-space:normal;height:auto}
body[data-role] .sidebar{display:flex;flex-direction:column}
body[data-role] .sidebar>.brand,body[data-role] .sidebar-foot{flex-shrink:0}
body[data-role] .side-nav{min-height:0;overflow-y:auto;flex:1}
body[data-role] .topbar{gap:12px}
body[data-role] .page-intro{min-width:0}
body[data-role] .page-intro h1{font-size:clamp(18px,2vw,26px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-role] .top-actions{flex-shrink:0}
body[data-role] .profile-tabs{display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap}
body[data-role] .profile-tabs button{flex:0 0 auto;white-space:nowrap}
body[data-role] :is(.section-head,.theme-heading,.cashier-catalog-head){flex-wrap:wrap;gap:12px}
body[data-role] .cashier-catalog-head .search-box{flex:1 1 220px;min-width:0;max-width:100%}
body[data-role] :is(input,select,textarea){min-width:0;max-width:100%}
body[data-role] .revenue-filters{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
body[data-role] .profile-layout{grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr)}
body[data-role] .login-settings-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body[data-role] .product-pagination{flex-wrap:wrap}
body[data-role] .product-pagination>div{flex-wrap:wrap}
@container catalog (max-width:1000px){#products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container catalog (max-width:700px){#products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container catalog (max-width:500px){#products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container catalog (max-width:280px){#products{grid-template-columns:minmax(0,1fr)}}
@container workspace (max-width:800px){
  body[data-role] .pos-grid{grid-template-columns:minmax(0,1fr)}
  body[data-role] .cart{position:relative;top:auto;height:auto;max-height:none;width:100%;border-left:0}
  body[data-role] .cart-items{max-height:360px}
  body[data-role] .login-settings-layout,body[data-role] .profile-layout,body[data-role] .receipt-layout{grid-template-columns:minmax(0,1fr)}
  body[data-role] .business-date{display:none}
  body[data-role] .admin-toolbar{grid-template-columns:minmax(0,1fr) minmax(140px,.5fr)}
}
@container workspace (max-width:650px){
  body[data-role] .topbar{padding:12px;height:auto;min-height:74px}
  body[data-role] .top-context,body[data-role] .user-menu>div:last-child{display:none}
  body[data-role] .touch-mode-toggle{width:44px;padding:0;justify-content:center}
  body[data-role] .touch-mode-toggle .touch-copy,body[data-role] .touch-mode-toggle .touch-switch{display:none}
  body[data-role] .section-actions{flex-wrap:wrap;max-width:100%}
  body[data-role] .theme-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-role] .login-media-grid{grid-template-columns:minmax(0,1fr)}
  body[data-role] .category-page-layout,body[data-role] .table-admin-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1100px){.login-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.login-visual{padding:32px}.login-panel{padding:24px}.login-card{width:100%;padding:28px}}
@media(max-width:900px){
  body[data-role] .app-shell,body[data-role].touch .app-shell{display:block;padding:0}
  body[data-role] .topbar{top:0}
  body[data-role] main{padding:16px}
  body[data-role="cashier"] main{padding:0}
  .login-wrap{grid-template-columns:minmax(0,1fr)}
  .login-visual{min-height:280px}
}
@media(max-width:560px){
  body[data-role] :is(.admin-toolbar,.filters,.form-grid){grid-template-columns:minmax(0,1fr)}
  body[data-role] #view-pos .menu-pane{padding:16px 12px}
  body[data-role] .cart{padding:16px 12px}
  body[data-role] .theme-picker{grid-template-columns:minmax(0,1fr)}
  body[data-role] .cart-line{grid-template-columns:36px minmax(0,1fr) auto}
  body[data-role] .cart-item-icon{width:36px;height:36px}
  body[data-role] .cart-line .qty button{width:30px;height:34px}
  body[data-role].touch .cart-line .qty button{width:40px;height:44px}
  body[data-role] .modal-actions{position:static;margin:12px 0 0;padding:12px 0 max(12px,env(safe-area-inset-bottom))}
  .modal .modal-actions{position:sticky;bottom:0;z-index:2;background:var(--paper)}
  .login-panel{padding:16px}.login-card{padding:24px 18px}
}
@media(max-height:700px) and (min-width:901px){body[data-role] .cart{position:relative;top:auto;max-height:none}}