/* Initial HTML already contains the homepage, so the footer cannot paint first. */
html[data-route-pending] #main{visibility:hidden;min-height:100svh}
.product-dialog-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:6px 12px 6px 25px;background:var(--paper);border-bottom:1px solid #262d2314}
.product-dialog-bar>span{font-size:12px;line-height:1.5;color:var(--muted)}
.product-dialog-bar>.close-button{position:static;margin:0;width:44px;height:44px;flex:none}
.product-dialog>.product-dialog-bar{grid-column:1/-1;grid-row:1}
.product-dialog>.product-gallery{grid-column:1;grid-row:2}
.product-dialog>.product-details{grid-column:2;grid-row:2}
.product-gallery{padding-top:20px}
#detail-image{object-fit:contain;object-position:center;background:var(--soft);display:block}
.gallery-navigation>span{text-align:center;line-height:1.5;max-width:24ch;font-size:11px}
@media(max-width:600px){
 .product-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;scrollbar-gutter:auto;overflow-y:auto;overflow-x:hidden;scroll-padding-top:0;-webkit-overflow-scrolling:touch}
 .product-dialog-bar{min-height:52px;padding:4px 12px 4px 20px;padding-top:max(4px,env(safe-area-inset-top));background:var(--paper)}
 .product-dialog-bar>span{font-size:11px}
 .product-dialog-bar>.close-button{position:static;margin:0;min-height:44px;width:44px;height:44px;background:transparent}
 .product-dialog .product-gallery{padding:16px 20px 20px}
 #detail-image{width:100%;height:min(43svh,400px);max-height:none;object-fit:contain;object-position:center}
 .gallery-navigation{margin-top:8px;gap:10px}
 .gallery-navigation>span{font-size:11px;max-width:22ch}
 .product-thumbs{margin-top:8px;gap:12px}
 .product-details{padding-top:24px;padding-bottom:max(32px,env(safe-area-inset-bottom))}
}