/* Keep the world inside the web viewport; contain every native scroll surface. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100%;height:var(--beeyack-viewport-height,100dvh);padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
body>header{flex:none}body>main{flex:1;min-height:0}body>main>.walk-space{height:100%;min-height:0}
.walk-space,dialog,dialog *,[class$="-tray"]{overscroll-behavior:none}
dialog{touch-action:pan-x pan-y pinch-zoom}
#world{touch-action:none;overscroll-behavior:none}
dialog[open]{max-height:calc(var(--beeyack-viewport-height,100dvh) - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
html.viewport-keyboard-open dialog[open]:not(.dance-tray){top:calc(var(--beeyack-viewport-top,0px) + 10px + env(safe-area-inset-top,0px));bottom:auto;margin-block:0}
.shelf-pager{display:none}
@media(max-width:850px),(pointer:coarse){
 #shelfDialog[open]{display:flex;flex-direction:column;height:min(640px,94dvh);max-height:94dvh;overflow:hidden;padding:18px;gap:0}
 #shelfDialog .shelf-heading{gap:10px}#shelfDialog .shelf-heading h2{font-size:23px;margin:3px 0}#shelfDialog .shelf-heading p{margin:3px 0 7px;font-size:9px}#shelfNumber{font-size:8px}
 #shelfDialog .shelf-search{margin:6px 0}#shelfDialog .shelf-search label{margin:0 0 4px}#shelfDialog #shelfSearch{padding:9px 34px 9px 10px}
 #shelfDialog .shelf-subcorners{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;max-height:47px;min-height:35px;margin:5px 0 6px;padding:2px;touch-action:pan-x;scrollbar-width:thin}
 #shelfDialog .kids-caution{flex:none;max-height:52px;overflow-y:auto;margin:3px 0;font-size:9px;line-height:1.5}
 #shelfDialog .shelf-pager{display:flex;flex:none;align-items:center;justify-content:space-between;gap:8px;margin:4px 0;color:#5a7358;font-size:10px}
 #shelfDialog .shelf-pager button{min-width:38px;min-height:34px;border:1px solid #d7dfcb;border-radius:10px;background:#fffef4;font-size:18px}#shelfDialog .shelf-pager button:disabled{opacity:.35}
 #shelfDialog .shelf-pager span{text-align:center}#shelfDialog .shelf-pager small{display:block;margin-top:2px;font-size:9px;color:#85937a}
 #shelfDialog .shelf-products{display:grid;grid-template-columns:none;grid-template-rows:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/2);gap:20px;flex:1;min-height:0;max-height:none;height:auto;overflow-x:auto;overflow-y:hidden;padding:12px 8px 8px;scroll-snap-type:none;scroll-padding-inline:8px;touch-action:pan-x;overscroll-behavior:none;scrollbar-width:thin;align-items:stretch}
 #shelfDialog .shelf-slot{scroll-snap-align:none;min-height:0;min-width:0;width:100%;height:100%;padding:23px 0 12px;gap:6px;margin:0;border-bottom-width:8px;box-shadow:0 3px 0 #b5a684}
 #shelfDialog .shelf-slot>.product-box{width:min(115px,90%);height:clamp(95px,19dvh,128px);max-height:60%;font-size:12px;padding:8px}
 #shelfDialog .shelf-slot>.product-box.photo-pack{width:min(150px,94%);height:clamp(125px,24dvh,180px);max-height:73%;padding:9px}
 #shelfDialog .shelf-slot>.atc-pick{min-height:34px;font-size:10px;padding:5px 8px}#shelfDialog .product-box:hover{transform:none!important}
 #shelfDialog .shelf-slot .slot-category{font-size:9px;line-height:1.3;max-height:24px;overflow:hidden}#shelfDialog .shelf-slot .product-box strong{font-size:11px}#shelfDialog .shelf-slot .photo-pack strong{font-size:9px}
 #shelfDialog .shelf-foot{margin:10px 0 0;font-size:9px;gap:5px}#shelfDialog .shelf-foot button{font-size:9px;padding:5px}#shelfDialog .empty-shelf{grid-column:auto;width:100%;padding:20px 5px}
 #shelfDialog .shelf-products:has(.empty-shelf){display:block}
}
@media(max-height:510px) and (orientation:landscape){#shelfDialog[open]{height:96dvh;max-height:96dvh;padding:10px 18px}#shelfDialog .shelf-heading p,#shelfNumber,#shelfDialog .shelf-search label,#shelfDialog .shelf-foot>span{display:none}#shelfDialog .shelf-heading h2{font-size:18px}#shelfDialog .shelf-search{margin:2px 0}#shelfDialog .shelf-subcorners{margin:2px 0;min-height:28px}#shelfDialog .shelf-pager{margin:0}#shelfDialog .shelf-pager small{display:none}#shelfDialog .shelf-slot{padding-top:18px}#shelfDialog .shelf-slot>.product-box.photo-pack{height:110px}#shelfDialog .shelf-foot{margin-top:4px}}
#shelfDialog[open]{max-height:calc(var(--beeyack-viewport-height,100dvh) - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
/* Two-axis cabinet browsing: one category at a time, products along the rail. */
#shelfDialog .shelf-subcorners{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:12px;overflow:visible;min-height:34px;max-height:none;margin:4px 0;padding:0;white-space:normal;touch-action:auto}
#shelfDialog .shelf-subcorners>span{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;text-align:center;color:#456854}
#shelfDialog .shelf-subcorners b{font-size:13px;overflow-wrap:anywhere}#shelfDialog .shelf-subcorners small{font-size:10px;margin:0;white-space:nowrap;color:#83917b}
#shelfDialog .shelf-subcorners button{flex:none;min-width:34px;min-height:34px;padding:4px 8px;border:1px solid #d7dfcb;border-radius:9px;background:#fffef4;color:#54735c;font-size:17px}
#shelfDialog .shelf-subcorners button:disabled{opacity:.3}
#shelfDialog .shelf-products{grid-template-columns:none;grid-template-rows:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/2);gap:20px;overflow-x:auto;overflow-y:hidden;touch-action:none;overscroll-behavior:none;scroll-snap-type:none;scroll-padding-inline:8px;user-select:none;-webkit-user-select:none}
#shelfDialog .shelf-products img{-webkit-user-drag:none}#shelfDialog .shelf-slot{scroll-snap-align:none}
#shelfDialog .shelf-products:focus-visible{outline:2px solid #719780;outline-offset:2px}
#shelfDialog .shelf-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0;color:#5a7358;font-size:10px}
#shelfDialog .shelf-pager button{min-width:38px;min-height:34px;border:1px solid #d7dfcb;border-radius:10px;background:#fffef4;font-size:18px}#shelfDialog .shelf-pager button:disabled{opacity:.35}
#shelfDialog .shelf-pager span{text-align:center}#shelfDialog .shelf-pager small{display:block;margin-top:2px;font-size:10px;color:#85937a}
@media(min-width:851px) and (pointer:fine){#shelfDialog .shelf-products{height:330px;max-height:48dvh;grid-auto-columns:calc((100% - 40px)/3)}#shelfDialog .shelf-slot{min-height:0;height:100%;margin:0}#shelfDialog .shelf-subcorners b{font-size:15px}}

/* Browsing rails: swipe the category chips or slide the medicine packages. */
#shelfDialog .shelf-subcorners{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:7px;padding:4px 2px 7px;touch-action:pan-x;overscroll-behavior:none;scrollbar-width:thin;user-select:none;cursor:grab}
#shelfDialog .shelf-subcorners button{font-size:11px;min-height:32px;padding:7px 12px;white-space:nowrap;scroll-snap-align:none}
#shelfDialog .shelf-subcorners button[aria-pressed=true]{background:#416950;border-color:#416950;color:#fffef4}
#shelfDialog .shelf-products{touch-action:pan-x;cursor:grab}
#shelfDialog .shelf-products.is-dragging,#shelfDialog .shelf-subcorners.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
#shelfDialog .shelf-pager{justify-content:center;pointer-events:none}

/* Readable package photos and names on the existing horizontal rail. */
#shelfDialog .shelf-slot>.product-box.photo-pack{width:min(205px,100%);height:225px;max-height:100%;padding:8px;grid-template-rows:minmax(0,1fr) auto;gap:8px;background:#fff;box-shadow:0 2px 8px #263c2e14}
#shelfDialog .shelf-slot .product-box strong,#shelfDialog .shelf-slot .photo-pack strong{font-size:14px;font-weight:700;line-height:1.45;color:#193d2c;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;word-break:keep-all;margin:0;max-width:100%}
#shelfDialog .shelf-slot .photo-pack img{border-radius:5px;image-rendering:auto;opacity:1;filter:none}
#shelfDialog .shelf-slot .slot-category{color:#3b5949;font-weight:600}
@media(max-width:850px),(pointer:coarse){
 #shelfDialog .shelf-products{gap:12px;grid-auto-columns:calc((100% - 12px)/2);padding-inline:2px;scroll-padding-inline:2px}
 #shelfDialog .shelf-slot>.product-box.photo-pack{width:100%;height:clamp(170px,32dvh,255px);max-height:100%;padding:7px}
 #shelfDialog .shelf-slot .product-box strong,#shelfDialog .shelf-slot .photo-pack strong{font-size:13px}
}
@media(max-height:510px) and (orientation:landscape){
 #shelfDialog .shelf-slot>.product-box.photo-pack{height:100%;min-height:0;gap:3px;padding:4px}
 #shelfDialog .shelf-slot .photo-pack strong{font-size:12px;line-height:1.3}
}

/* Own both axes on the medicine rail so vertical swipes cannot leave the app. */
#shelfDialog .shelf-products{touch-action:none}
#shelfDialog .shelf-pager small{color:#42624f;font-size:11px;line-height:1.5}
#shelfDialog .shelf-slot .photo-pack img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-height:0;object-fit:contain}
#shelfDialog .shelf-slot .photo-pack strong{font-size:15px;color:#153c2a;text-shadow:none;-webkit-font-smoothing:antialiased}

.product-photo-frame{display:block;min-height:0;min-width:0;width:100%;height:100%;overflow:hidden}
#shelfDialog .shelf-slot .product-photo-frame{width:100%;height:100%;min-height:0}
#shelfDialog .shelf-slot .slot-category{top:4px;z-index:1;max-width:95%;white-space:nowrap;text-overflow:ellipsis}

/* Both category chips and product cards accept vertical category swipes. */
#shelfDialog .shelf-subcorners{touch-action:none}