/* Touch layouts, with the desktop catalogue unchanged. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body:has(dialog[open]){overflow:hidden}
@media screen and (max-width:1024px){
 body:not(.login-page) header{padding:20px 24px;gap:16px}
 body:not(.login-page) main{padding:30px 24px 48px}
 nav{padding:0 24px;gap:24px}
 .nav-note{display:none}
 .page-head>div,.panel,.sell-layout>section,.customer-layout>section,.detail>div{min-width:0}
 .request-row{flex-wrap:wrap;gap:16px}
 .request-side{flex:1 1 100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
 .request-actions{justify-content:flex-start;margin:0}
 .request-side .button{margin:0}
 .customer-row{flex-wrap:wrap}
 .customer-row>div{flex:1 1 100%;min-width:0}
 .sell-layout{gap:20px}
 input,select,textarea,.photo-drop input{font-size:16px}
 .button,.close,.nav,.tabs button{min-height:44px}
 .close{width:44px;height:44px}
 .photo-choice label,.keep-photo,.suggestion-row label{min-height:44px}
 .photo-choice input[type=checkbox],.photo-choice input[type=radio],.keep-photo input,.suggestion-row input[type=checkbox]{width:22px;height:22px;flex:none}
 .photo-upload .button{min-height:44px}
 .detail .photo img{object-fit:contain}
 .modal-head{position:sticky;top:0;background:#fff;z-index:2}
 .modal-head h2{font-size:22px}
 dialog{max-height:90dvh;overscroll-behavior:contain}
 .invoice-table{table-layout:fixed}
 .invoice-table th:first-child{width:40%}
 .invoice-table th:nth-child(2){width:12%}
 .invoice-table td,.invoice-table th{overflow-wrap:anywhere}
}
@media screen and (max-width:680px){
 body:not(.login-page) header{padding:12px 16px;gap:12px}
 .brand{gap:9px;font-size:15px;letter-spacing:1.3px}
 .brand-mark{padding:10px;font-size:22px}
 .brand-sub{font-size:9px;letter-spacing:2px;margin-top:4px}
 .private-label,.account #account{display:none}
 .account{gap:0}.account .button{padding:10px 12px;font-size:13px}
 nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0 12px}
 nav:has(#customers-nav[hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
 .nav{padding:12px 5px;font-size:13px;min-width:0;white-space:normal;line-height:1.3}
 body:not(.login-page) main{padding:24px 14px 36px;min-height:60svh}
 h1{font-size:28px;line-height:1.15;letter-spacing:-.8px}h2{font-size:22px}
 .page-head{margin-bottom:22px;gap:16px}.page-head .muted{font-size:14px;line-height:1.55}
 .inventory-actions{width:100%}.inventory-actions .button{width:100%}
 .toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:18px}
 .toolbar input,.toolbar select{width:100%;min-height:46px}
 .count{margin:16px 0;font-size:13px}
 #catalogue .card{padding:10px;gap:8px}
 #catalogue .card-open{grid-template-columns:80px minmax(0,1fr);gap:10px}
 #catalogue .photo{width:80px;height:88px}
 #catalogue .card-action{margin-left:90px}
 #catalogue .card-action .button{min-height:44px;font-size:13px}
 #catalogue .card-bottom{gap:7px}
 #catalogue .card-bottom>div:last-child{flex-wrap:wrap;gap:5px}
 #catalogue .price{font-size:17px}
 .empty{padding:38px 18px}
 .panel{padding:18px}
 .sell-layout,.customer-layout{grid-template-columns:minmax(0,1fr);gap:24px}
 .seller-enquiry .muted{overflow-wrap:anywhere}
 .request-row{padding:17px;gap:14px}
 .request-side{display:block}.request-side .price{font-size:23px}
 .request-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
 .request-actions .button{padding:10px 8px;white-space:normal}
 .request-actions .primary{grid-column:1/-1}
 .collection-notice{font-size:13px;padding:12px}
 dialog{width:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;border-radius:0;box-shadow:none}
 dialog[open]{display:block}
 .modal-head{padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
 .modal-head h2{font-size:20px}
 .modal-body{padding:18px 16px max(24px,env(safe-area-inset-bottom))}
 .detail{grid-template-columns:minmax(0,1fr);gap:18px}
 .detail .photo{max-height:260px}
 .specs{gap:14px;margin:20px 0}
 .form-grid{grid-template-columns:minmax(0,1fr)}.span2{grid-column:auto}
 .form-actions{display:grid;grid-template-columns:1fr 1fr}
 .photo-drop{padding:14px}.photo-drop input{max-width:100%}
 .invoice-heading{gap:10px}.invoice-heading img{width:72px;height:62px}
 .invoice-heading h3{font-size:16px}.invoice-heading .eyebrow{font-size:10px;letter-spacing:1px}
 .invoice-table th,.invoice-table td{padding:10px 4px;font-size:12px}
 .invoice-total{font-size:16px}.invoice-document>p{font-size:14px}.invoice-print{width:100%}
 #notice{width:calc(100% - 28px);max-width:none;bottom:max(14px,env(safe-area-inset-bottom));padding:14px 16px;font-size:14px}
 footer{padding:20px 16px max(20px,env(safe-area-inset-bottom));gap:10px}
 .login-page{min-height:100svh}.login-shell{min-height:100svh}
 .login-story{padding:20px 22px}.login-brand img{width:48px;height:48px}.login-brand>span{font-size:17px}
 .story-copy{margin:18px 0 0}.story-copy h1{font-size:24px}.login-kicker{display:none}
 .login-card{padding:24px 22px}.login-card input{font-size:16px;min-height:48px}
 .login-card h2{font-size:27px}.invitation-tag{margin-bottom:12px}.login-intro{margin-bottom:20px;font-size:14px}
 .login-card label{font-size:14px;margin-bottom:18px}.login-help{margin-top:20px;padding-top:16px}
 .login-card-footer{margin-top:24px}
}
@media screen and (min-width:681px) and (max-width:1024px){
 .login-page{padding:24px}.login-shell{min-height:620px;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
 .login-story{padding:28px}.login-brand{gap:12px}.login-brand img{width:52px;height:52px}.login-brand>span{font-size:15px}
 .login-card{padding:32px 28px}.login-card input{font-size:16px}
 .story-copy h1{font-size:36px}.story-copy{margin:55px 0 80px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Offshore platform silhouette between the title and catalogue action. */
.inventory-heading>div:first-child{flex:1;min-width:0}
.inventory-rig{display:block;flex:0 1 190px;width:190px;height:129px;object-fit:contain}
.inventory-heading .inventory-actions{flex:none}
@media screen and (max-width:1024px) and (min-width:681px){.inventory-heading{flex-wrap:wrap}.inventory-heading>div:first-child{flex-basis:calc(100% - 200px)}.inventory-heading .inventory-actions{margin-left:auto}}
@media screen and (max-width:680px){.inventory-heading{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:14px}.inventory-heading>div:first-child{grid-column:1/-1}.inventory-rig{width:100px;height:76px}.inventory-heading .inventory-actions{width:100%;min-width:0}}