/* Keep the exit action outside the scrolling recommendations, at every zoom. */
#recommend-modal{box-sizing:border-box;display:flex;flex-direction:column;width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);top:50%;padding:22px;overflow:hidden;transform:translate(-50%,-50%);}
#recommend-modal.open{transform:translate(-50%,-50%)}
#recommend-modal>.eyebrow{flex-shrink:0;margin:0 40px 6px 0;font-size:11px}
#recommend-modal>h2{flex-shrink:0;font-size:clamp(22px,4vw,30px);line-height:1.15;margin:0 32px 8px 0}
#recommend-modal>p{flex-shrink:0;font-size:13px;line-height:1.4;margin:0 0 12px}
#recommend-close{right:8px;top:6px;width:44px;height:44px;z-index:2}
#recommend-items{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
#recommend-items article{min-width:0;padding:10px}
#recommend-items article>.recommend-real-photo{height:clamp(70px,20vh,150px);padding:0;display:flex;justify-content:center}
#recommend-items .recommend-real-photo img{width:100%;height:100%;max-height:150px;object-fit:contain}
#recommend-items h3{font-size:15px;line-height:1.3;margin:8px 0}
#recommend-items strong{font-size:14px}
#recommend-items article>button{min-height:44px;margin-top:8px;padding:8px;font-size:12px!important;line-height:1.25}
#skip-recommend{flex:0 0 auto;box-sizing:border-box;width:100%;min-height:48px;margin:12px 0 0;padding:12px;border:1px solid #cadbd4;border-radius:24px;background:#fff;color:#153e40;font-size:15px;font-weight:600;touch-action:manipulation}
@media(max-width:480px){#recommend-modal{padding:16px}#recommend-items{gap:8px}#recommend-items h3{font-size:13px}}
@media(max-height:450px){#recommend-modal{padding:12px 18px}#recommend-modal>.eyebrow,#recommend-modal>p{display:none}#recommend-modal>h2{font-size:22px}#recommend-items article>.recommend-real-photo{height:72px}#skip-recommend{margin-top:8px}}