/* QR codes stay beside their model descriptions, inside the Surfaces page. */
#surfaceGallery #surfaceGrid{grid-auto-rows:minmax(300px,auto)}
#surfaceGallery #surfaceGrid .surfaceCard{grid-template-columns:170px minmax(0,1fr) 200px;grid-template-rows:1fr auto;gap:12px 22px;min-height:300px;overflow:visible;padding:18px}
#surfaceGallery .surfacePreviewLink{grid-column:1;grid-row:1/3;align-self:center}
#surfaceGallery #surfaceGrid .surfaceImage{height:185px}
#surfaceGallery .surfaceCardBody{grid-column:2;grid-row:1}
#surfaceGallery #surfaceGrid .surfaceCardActions{grid-column:2;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:8px;align-self:end}
#surfaceGallery .surfaceCardActions button{flex:1;white-space:normal}
.surfaceQr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;text-align:center;background:#18232c;border:1px solid #426171;border-radius:10px;padding:12px;color:#cceef0}
#surfaceGallery .surfaceQr{grid-column:3;grid-row:1/3}
.surfaceQr>strong{font-size:15px!important;line-height:1.3}
.surfaceQr>small{font-size:13px!important;line-height:1.4;color:#b4ccd5}
.surfaceQrImage{width:174px;max-width:100%;aspect-ratio:1;background:white;border:7px solid white;border-radius:7px;flex-shrink:0}
.surfaceQrImage svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.surfaceQr button{font-size:13px!important;min-height:36px;padding:6px 10px}
#surfaceDetailQr{float:right;width:200px;margin:0 0 18px 18px}
#surfaceGallery .surfaceScanNote{font-size:16px!important;line-height:1.5;color:#bee9ee;margin:0;max-width:none}
@media(max-width:1000px){#surfaceGallery #surfaceGrid .surfaceCard{grid-template-columns:130px minmax(0,1fr) 180px;padding:12px;gap:12px}#surfaceGallery #surfaceGrid .surfaceImage{height:150px}.surfaceQrImage{width:154px}}
@media(max-width:750px){#surfaceGallery #surfaceGrid .surfaceCard{grid-template-columns:110px minmax(0,1fr);gap:14px}#surfaceGallery .surfacePreviewLink{grid-column:1;grid-row:1}#surfaceGallery .surfaceCardBody{grid-column:2;grid-row:1}#surfaceGallery .surfaceQr{grid-column:1/-1;grid-row:2;width:210px;justify-self:center}#surfaceGallery #surfaceGrid .surfaceCardActions{grid-column:1/-1;grid-row:3}#surfaceDetailQr{float:none;width:210px;margin:16px auto}}
.surfaceQr button.surfaceQrImage{padding:0!important;border:7px solid white!important;border-radius:7px;background:white;cursor:zoom-in;min-height:0}
.surfaceQrImage:focus-visible{outline:3px solid #00d4da;outline-offset:5px}
#surfaceQrZoom{position:fixed;inset:0;margin:auto;width:min(680px,94vw);max-height:94dvh;box-sizing:border-box;padding:24px;border:1px solid #436675;border-radius:18px;background:#101a23;color:#e8f6fa;text-align:center;overflow:auto}
#surfaceQrZoom::backdrop{background:#000d;backdrop-filter:blur(4px)}
#surfaceQrZoomClose{display:block;margin:0 0 12px auto;min-height:44px;background:#233944;color:white;border:1px solid #63818f;border-radius:8px;padding:8px 16px;font-size:17px}
#surfaceQrZoom h2{font-size:26px;margin:8px 0 18px}#surfaceQrZoom p{font-size:17px;line-height:1.5;color:#c6dfe7}
#surfaceQrZoomImage{width:min(560px,70dvh,100%);aspect-ratio:1;margin:auto;background:white;border:14px solid white;border-radius:12px;box-sizing:border-box}
#surfaceQrZoomImage svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}