/* The content scrolls independently so the product close control stays reachable. */
#product-dialog[open]{display:block;overflow:hidden}
#product-dialog>.product-dialog-content{display:grid;grid-template-columns:1fr 1fr;max-height:90svh;overflow:auto;overscroll-behavior:contain}
#product-dialog>.dialog-close{z-index:5}

@media(max-width:760px){
 .product-grid>.product-card{display:flex;flex-direction:column;align-self:stretch}
 .product-card>.product-image-button{flex-shrink:0}
 .product-card>.product-info{display:flex;flex-direction:column;align-items:stretch;flex:1;gap:0}
 .product-card .product-info>div:not(.product-actions){flex:0 0 auto;width:100%;min-width:0}
 .product-card .product-title{display:block;width:100%;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 .product-card .product-subtitle{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 .product-card .product-info>.product-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex:0 0 auto;width:100%;min-width:0;margin-top:auto;padding-top:12px}
 .product-card .product-actions .product-watch,.product-card .product-actions .product-add{flex:0 0 40px;margin-top:0}
 #product-dialog>.product-dialog-content{display:block}
 #product-dialog>.dialog-close{top:12px;right:12px;width:44px;height:44px}
}