/* Stretch only within each natural grid row, never to the tallest card in the catalog. */
#productGrid{--catalog-card-gap:10px;--catalog-control-height:46px;--catalog-price-slot:32px;grid-auto-rows:auto;align-items:stretch}
#productGrid .product-card{height:auto;align-self:stretch;display:flex;flex-direction:column;min-height:0}
#productGrid .product-card:hover{transform:none}
#productGrid .product-card .product-media{flex:0 0 auto}
#productGrid .product-card .product-card-body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--catalog-card-gap);min-height:0}
/* Keep full names and presentation; the short card absorbs only its own row's text difference. */
#productGrid .product-card .product-price{margin-top:auto;margin-bottom:0;min-height:var(--catalog-price-slot);flex:0 0 auto}
#productGrid .product-card .product-quantity{height:var(--catalog-control-height);min-height:var(--catalog-control-height);flex:0 0 auto;margin:0}
#productGrid .product-card .product-quantity button,#productGrid .product-card .product-quantity input{height:var(--catalog-control-height);min-height:var(--catalog-control-height)}
#productGrid .product-card .storefront-info-label{display:flex;align-items:center;min-height:var(--catalog-control-height);flex:0 0 auto;margin:0}
#productGrid .product-card .product-card-body>button{min-height:var(--catalog-control-height);flex:0 0 auto;margin-top:0}
/* Sold-out cards keep the same footer slot, without a quantity control. */
#productGrid .product-card .product-card-body>.product-price+button:disabled{margin-top:calc(var(--catalog-control-height) + var(--catalog-card-gap))}
@media(max-width:480px){#productGrid{--catalog-card-gap:7px;--catalog-control-height:44px;--catalog-price-slot:27px}}