/* Phone views use the screen as their workspace, with controls in the thumb zone. */
.mobile-dialog-bar,.mobile-product-action,.mobile-email-options,.mobile-reader-hint{display:none}
@media(max-width:760px){
 html body #detailDialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:calc(68px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;background:var(--bg);color:var(--fg)}
 html body #detailDialog::backdrop{background:#101916b8}
 html body #detailDialog>.dialog-close{position:fixed;inset:auto;top:calc(8px + env(safe-area-inset-top));inset-inline-end:12px;width:44px;height:44px;min-height:44px;margin:0;border:1px solid var(--line);border-radius:50%;background:var(--bg);z-index:14}
 #detailDialog .mobile-dialog-bar{display:flex;position:fixed;inset:0 0 auto;min-height:64px;padding:env(safe-area-inset-top) 72px 0 20px;box-sizing:content-box;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--bg);z-index:12}
 html[dir=rtl] #detailDialog .mobile-dialog-bar{padding-left:72px;padding-right:20px}
 .mobile-dialog-bar strong{font:600 15px/1.3 var(--body);min-width:0;overflow-wrap:anywhere}
 .mobile-dialog-bar button{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:50%}
 .mobile-dialog-bar button[hidden]{display:none}
 html[dir=rtl] .mobile-dialog-bar button svg{transform:rotate(180deg)}
 html body #detailDialog #dialogContent{min-width:0}
 html body #detailDialog h2{font-size:clamp(30px,8.5vw,40px);line-height:1.08;letter-spacing:0;overflow-wrap:break-word}
 html body #detailDialog h3{font-size:24px;line-height:1.2}
 html body #detailDialog p,html body #detailDialog label{font-size:16px;line-height:1.65}
 html body #detailDialog input,html body #detailDialog select,html body #detailDialog textarea{font-size:16px;min-height:48px;border-radius:4px;max-width:100%;box-sizing:border-box}
 html body #detailDialog button,html body #detailDialog .button{min-height:44px;font-size:14px}
 html body #detailDialog .button{padding:15px 18px;white-space:normal;line-height:1.4}
 html body #detailDialog .eyebrow{font-size:12px;line-height:1.5}
 html body #detailDialog .catalog-detail-hero{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:24px;padding-bottom:24px}
 html body #detailDialog .catalog-detail-pack{height:190px;max-width:none;margin:0;padding:5px 0 35px}
 html body #detailDialog .catalog-detail-hero h2{font-size:30px;line-height:1.04;margin-top:10px}
 html body #detailDialog .catalog-product-type{font-size:14px;line-height:1.5;margin-bottom:12px}
 html body #detailDialog .catalog-grade{font-size:13px;line-height:1.6;margin-bottom:0;overflow-wrap:anywhere}
 html body #detailDialog .catalog-pack-zoom{font-size:11px;gap:3px}
 html body #detailDialog #catalogProductEnquiry{display:none}
 html body #detailDialog.catalog-product-dialog{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 .mobile-product-action{display:flex;position:fixed;inset:auto 0 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:10;box-shadow:0 -6px 24px #00000009}
 .mobile-product-action .button{width:100%;justify-content:space-between}
 html body #detailDialog .catalog-specifications li{font-size:13px;line-height:1.5;padding:10px 12px}
 html body #detailDialog .catalog-table-scroll{max-width:100%;overflow:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 html body #detailDialog .catalog-table-scroll table{font-size:13px;line-height:1.5}
 html body #detailDialog .catalog-table-scroll th,html body #detailDialog .catalog-table-scroll td{padding:12px;min-width:100px}
 html body #detailDialog .catalog-source-actions{display:grid;gap:8px}
 html body #detailDialog .catalog-source-actions>*{min-height:48px;font-size:14px}
 html body #detailDialog .catalog-pack-view-head h2{font-size:28px}
 html body #detailDialog .catalog-pack-view-tabs{display:flex;gap:8px;position:sticky;top:0;background:var(--bg);z-index:3;padding:8px 0}
 html body #detailDialog .catalog-pack-view-tabs button{flex:1;padding:10px;font-size:13px;white-space:normal}
 html body #detailDialog .journal-modal-grid{display:grid;grid-template-columns:1fr;gap:30px}
 html body #detailDialog .journal-filters{display:flex;flex-wrap:nowrap;overflow:auto;margin:0 -20px 24px;padding:8px 20px;gap:8px;scrollbar-width:none}
 html body #detailDialog .journal-filters button{flex:none;padding:10px 14px;font-size:14px}
 html body #detailDialog .journal-filters>span{display:none}
 html body #detailDialog .journal-story h3{font-size:29px;line-height:1.1}
 html body #detailDialog .journal-story-meta{font-size:13px;line-height:1.6}
 html body #detailDialog .journal-story-photo{height:auto;aspect-ratio:16/10}
 html body #detailDialog .journal-story-read{font-size:14px;min-height:44px}
 html body #detailDialog .article-heading{padding:0;margin-bottom:24px}
 html body #detailDialog .article-heading time{font-size:13px}
 html body #detailDialog .article-photo{margin-inline:-20px;width:calc(100% + 40px);max-width:none;max-height:45dvh;object-fit:cover}
 html body #detailDialog .article-body{padding-top:24px;max-width:38em;margin-inline:auto}
 html body #detailDialog .article-body p{font-size:17px;line-height:1.75;margin-bottom:22px}
 html body #detailDialog .article-body .article-lead{font-size:19px;line-height:1.55}
 html body #detailDialog .story-back,html body #detailDialog #catalogPackBack,html body #detailDialog #catalogBack{display:none}
 .mobile-email-options{display:flex;gap:10px;padding:8px 0 20px;margin-bottom:12px;border-bottom:1px solid var(--line)}
 .mobile-email-options a{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--line);font-size:14px}
 html body #detailDialog #enquiryForm{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
 html body #detailDialog #enquiryForm label{display:grid;gap:8px;font-size:14px;line-height:1.4}
 html body #detailDialog #enquiryForm input,html body #detailDialog #enquiryForm select,html body #detailDialog #enquiryForm textarea{padding:13px 12px;line-height:1.5;width:100%}
 html body #detailDialog #enquiryForm textarea{min-height:140px;resize:vertical}
 .mobile-enquiry-review{display:grid;gap:18px}
 .mobile-enquiry-review dl{display:grid;gap:6px;margin:0;padding:18px;border:1px solid var(--line)}
 .mobile-enquiry-review dt{font-size:12px;color:var(--muted)}
 .mobile-enquiry-review dd{font-size:16px;line-height:1.6;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
 .mobile-enquiry-review .button{display:flex;justify-content:space-between;width:100%;box-sizing:border-box}
 html body #detailDialog.catalog-reader-dialog{padding:calc(64px + env(safe-area-inset-top)) 0 0;display:flex;overflow:hidden}
 html body #detailDialog.catalog-reader-dialog:not([open]){display:none}
 html body #detailDialog.catalog-reader-dialog #dialogContent{width:100%;min-height:0;flex:1;overflow:hidden}
 html body #detailDialog .catalog-reader-shell{display:grid;height:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(100px,1fr) auto;min-height:0}
 html body #detailDialog .catalog-reader-head{grid-row:1;display:block;padding:8px 12px;border-bottom:1px solid var(--line)}
 html body #detailDialog .catalog-reader-head>div:first-child{display:none}
 html body #detailDialog .catalog-reader-actions{display:flex;justify-content:space-between;margin:0;gap:8px;flex-wrap:nowrap}
 html body #detailDialog .catalog-reader-actions .catalog-pdf-link{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;gap:8px;border:1px solid var(--line);padding:5px 8px;box-sizing:border-box;line-height:1.35}
 html body #detailDialog .catalog-reader-actions #catalogBack{display:none}
 html body #detailDialog .catalog-reader-viewport{grid-row:2;padding:4px;border:0;min-height:0;touch-action:pan-x pan-y}
 html body #detailDialog .catalog-reader-toolbar{grid-row:3;display:grid;grid-template-columns:1fr;gap:8px;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
 html body #detailDialog .catalog-reader-pagination{width:100%;max-width:none;gap:8px}
 html body #detailDialog .catalog-reader-page-select{font-size:13px;gap:7px}
 html body #detailDialog .catalog-reader-page-select select{width:70px;min-height:44px;padding-block:8px}
 html body #detailDialog .catalog-reader-step{width:44px;height:44px;min-height:44px;padding:10px;font-size:13px}
 html body #detailDialog .catalog-reader-step>span{display:none}
 html body #detailDialog .catalog-reader-zoom{margin:0;justify-self:center}
 html body #detailDialog .catalog-reader-zoom-fit{min-height:44px;min-width:82px;font-size:14px}
 html body #detailDialog .catalog-reader-zoom .catalog-reader-step{width:48px}
 .mobile-reader-hint{display:block;font:400 11px/1.4 var(--body);color:var(--muted);text-align:center;margin:2px 0 0}
 @media(max-height:500px){html body #detailDialog .catalog-reader-toolbar{grid-template-columns:1fr auto;align-items:center;gap:12px}.mobile-reader-hint{display:none}html body #detailDialog .catalog-reader-head{padding-block:4px}html body #detailDialog .catalog-reader-pagination{gap:4px}}
}