/* Keep product detail photographs square instead of stretching a wide photo into a tall box. */
.product-detail>.detail-overview .food-photo{height:auto;aspect-ratio:1;max-width:100%;min-width:0}
.product-detail .detail-overview>div{min-width:0}
.product-detail .food-photo img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:620px){
 dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:20px}
 dialog .close{min-width:36px;min-height:36px;padding:0;line-height:36px;background:#fffffff2;border-radius:50%;position:sticky;top:0;z-index:10}
 .product-detail .detail-overview{min-width:0;gap:20px}
 .product-detail .detail-overview .food-photo{height:auto;aspect-ratio:1;width:100%;max-width:320px;margin:0 auto}
 .product-detail table{table-layout:fixed;width:100%}
 .product-detail td,.product-detail th{overflow-wrap:anywhere;word-break:normal}
 #tok-kakao-toggle{font-size:12px;padding:10px 14px;min-height:44px}
 body{padding-bottom:70px}
}

@media(max-width:620px){
 .product-grid>.product-card{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:1fr 44px}
 .product-card .add{width:44px;height:44px;padding:3px;font-size:20px}
 .product-grid>.product-card>.price{line-height:44px}
 dialog .close{width:44px;height:44px;min-width:44px;min-height:44px;line-height:44px}
 #tok-kakao{position:static!important;display:contents;font-size:12px}
 #tok-kakao-toggle{position:static!important;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:10px 14px;min-height:44px;box-shadow:none;font-size:12px}
 #tok-kakao-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 24px);max-height:calc(100dvh - 40px);margin:0;z-index:9999;text-align:left}
 #tok-kakao-close{min-width:44px;min-height:44px}
 .utilities{align-items:center}
 body{padding-bottom:0}
}