/* Phone layout: readable controls and tables without scaling down the page. */
@media(max-width:700px){
 html{font-size:16px;-webkit-text-size-adjust:100%}body{font-size:16px}
 button,input,select{font-size:16px;min-height:44px;touch-action:manipulation}
 #catalogControls{padding:8px 12px;box-shadow:0 4px 16px #0007}
 #catalogControls .searchbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
 #catalogControls .searchbar .logo{grid-column:1;grid-row:1;font-size:25px}
 #catalogControls .searchbar .logo small{font-size:9px}
 #catalogControls #homeButton{grid-column:2;grid-row:1}
 #catalogControls #basketOpen{grid-column:3;grid-row:1}
 #catalogControls #search{grid-column:1/3;grid-row:2}
 #catalogControls #runSearch{grid-column:3;grid-row:2}
 #catalogControls #sort{grid-column:1/4;grid-row:3;min-height:40px}
 #catalogControls .searchbar button{font-size:14px;min-height:44px;padding:8px}
 #catalogControls .searchbar input,#catalogControls .searchbar select{font-size:16px;padding:9px;min-height:44px}
 #catalogControls .families,#catalogControls #subcategories,#catalogControls #brands{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:5px 0;max-width:100%;scrollbar-width:thin}
 #catalogControls .families button,#catalogControls #subcategories button,#catalogControls #brands .brand{flex:0 0 auto;font-size:14px;min-height:44px;padding:10px 12px;white-space:nowrap}
 #catalogControls .families button small,#catalogControls .brand small{font-size:12px}
 #catalogControls .topfilters{display:flex;overflow-x:auto;gap:8px;align-items:end;margin:0;padding:4px 0;flex-shrink:0}
 #catalogControls .topfilters .field{flex:0 0 180px;min-width:180px;margin:0}
 #catalogControls .topfilters .field span,#catalogControls .attribute-facets label span{font-size:12px;line-height:1.3;min-height:16px;margin-bottom:4px;white-space:nowrap}
 #catalogControls .topfilters select,#catalogControls .topfilters input,#catalogControls .attribute-facets select{font-size:16px;padding:8px;min-height:44px}
 #catalogControls #reset{flex:0 0 auto;min-height:44px;font-size:14px;padding:8px 12px}
 #catalogControls .attribute-facets{display:flex;overflow-x:auto;gap:10px;padding:4px 0;flex-shrink:0}
 #catalogControls .attribute-facets label{flex:0 0 170px;min-width:170px}
 #catalogPage,#productPage{padding:16px 12px 32px}
 #catalogPage>#catalogBanner{margin:0 0 16px;padding:12px;min-height:88px;gap:10px}
 #catalogBanner .banner-product b{font-size:15px}#catalogBanner .banner-product small{font-size:13px}
 #catalogBanner .banner-controls button{min-width:44px;min-height:44px;font-size:14px}
 .notice,.sub,.catalog-path,footer{font-size:13px;line-height:1.5}
 .resultshead{align-items:start;flex-direction:column;gap:12px}.resultshead h2{font-size:23px}
 .viewtools{flex-wrap:wrap;gap:8px}.viewtools button,#columnPicker summary,.catalog-options button{font-size:14px;min-height:44px;padding:10px 12px}
 .catalog-worktools{margin:14px 0}.catalog-options{justify-content:flex-start!important}
 #tableView{max-height:65dvh;-webkit-overflow-scrolling:touch}
 #catalogTable{min-width:1000px}#catalogTable th,#catalogTable td{font-size:15px!important;padding:12px!important;line-height:1.4}
 #catalogTable th{font-size:14px!important;text-transform:none;letter-spacing:0}
 #catalogTable .model-cell button{font-size:17px;min-height:44px;text-align:left}
 #catalogTable .model-description,#catalogTable .pending-cell small{font-size:13px}
 #catalogTable .photo{width:64px;height:64px}#catalogTable .column-search input{font-size:16px;min-height:44px}
 #catalogTable .quantity-stepper button,#catalogTable .quantity-stepper input{min-width:44px;min-height:44px;font-size:16px}
 .pending{font-size:12px}.product-heading h1{font-size:30px!important}
 .product-toolbar button,.product-quantity-actions button,.web-tab-nav button{font-size:15px;min-height:44px;padding:10px 12px}
 .product-specification dt,.product-specification dd{font-size:15px;line-height:1.5;padding:12px 6px}
 .web-tab-panel{padding:16px 12px}.web-tab-nav{gap:8px}.web-tab-panel h2{font-size:22px}
 .quick-table-scroll th,.quick-table-scroll td,.quick-table-scroll button{font-size:15px}.quick-table-scroll small{font-size:12px}
 #productPage #zoomViewport{height:280px}.photo-thumbnails button{min-width:64px;min-height:64px}.photo-thumbnails .photo{width:52px;height:52px}
 dialog{width:calc(100vw - 16px);padding:16px;max-height:90dvh}dialog h2{font-size:24px}
 footer{flex-direction:column;gap:12px}.pages button{min-width:44px}
 .mobile-table-hint{display:block;color:#bfc8d4;font-size:14px;margin:12px 0}
}
@media(min-width:701px){.mobile-table-hint{display:none}}
@media(max-width:700px){
 #catalogControls .mobile-sort-field{flex:0 0 180px;min-width:180px;margin:0}
 #catalogControls .mobile-sort-field span{display:block;font-size:12px;margin-bottom:4px;color:#bfc8d4}
 #catalogControls #sort{width:180px;min-height:44px;font-size:16px}
 #catalogPage>#catalogBanner{padding:8px;min-height:76px}.banner-controls{gap:4px}
 #catalogPage>#catalogBanner .banner-product b{font-size:14px;line-height:1.3}
 #catalogPage>#catalogBanner .banner-product small{font-size:12px}
 #catalogPage>#catalogBanner .banner-product .photo{width:40px;height:40px;min-width:40px!important}
 #catalogTable .image-cell{min-width:76px;width:76px}#catalogTable .brand-cell{min-width:110px;overflow-wrap:normal;word-break:normal}#catalogTable .model-cell{min-width:155px}
}
@media(max-width:360px){#catalogControls .searchbar .logo{font-size:22px}#catalogControls .searchbar .logo small{font-size:8px;letter-spacing:1px}}
#catalogControls .category-navigation-row{order:1;display:flex;align-items:center;gap:10px;min-width:0;padding:7px 0 5px}
#catalogControls .category-navigation-row .families{flex:1;min-width:0;padding:0;margin:0;flex-wrap:wrap}
#catalogControls .category-navigation-row>.field{flex:0 1 230px;min-width:160px;margin:0}
#catalogControls .category-navigation-row>.field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#catalogControls .category-navigation-row select{font-size:12px;min-height:34px;padding:6px 10px}
#catalogControls .category-navigation-row #reset{margin:0;min-height:34px;font-size:12px;padding:6px 12px;white-space:nowrap}
#catalogControls .topfilters:not(:has(.field:not([hidden]))){display:none}
@media(max-width:1000px){#catalogControls .category-navigation-row{flex-wrap:wrap}#catalogControls .category-navigation-row .families{flex-basis:100%}#catalogControls .category-navigation-row>.field{flex:1}}
@media(max-width:700px){
 #catalogControls .category-navigation-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 0}
 #catalogControls .category-navigation-row .families{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;padding:0}
 #catalogControls .category-navigation-row>.field{min-width:0}
 #catalogControls .category-navigation-row select,#catalogControls .category-navigation-row #reset{font-size:14px;min-height:44px}
}