/* Three products per row in every catalogue, including sector and food views. */
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product{min-width:0;grid-column:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.catalog-group-heading,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.food-group-heading,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.empty-results{grid-column:1/-1}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-media{width:100%;height:190px;flex:0 0 auto;grid-column:auto;grid-row:auto}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy{padding:12px 0 0;min-width:0;grid-column:auto;grid-row:auto}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy h3{min-height:40px;font-size:14px;line-height:1.5}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy p{font-size:11px;line-height:1.65}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-pricing{padding:14px 0;min-width:0;grid-column:auto;grid-row:auto}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-pricing .product-price,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .previous-price{position:static;transform:none;text-align:left}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .add-product,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity{width:100%;min-width:0;grid-column:auto;grid-row:auto;margin-top:auto}
@media(max-width:760px){
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product{padding:8px;border-radius:9px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-media{height:115px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-media .product-photo{padding:3px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy{padding-top:9px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy h3{font-size:11px;min-height:48px;line-height:1.45;overflow-wrap:anywhere}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy p{font-size:9px;line-height:1.5;overflow-wrap:anywhere}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-brand{font-size:7px;overflow-wrap:anywhere}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-pricing{padding:10px 0}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices{gap:7px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:8px;line-height:1.4}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices strong,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices .deferred-price strong{font-size:14px;letter-spacing:-.4px;white-space:normal;overflow-wrap:anywhere}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices>small{font-size:8px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .minimum-price{padding:6px;font-size:8px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .minimum-price strong{font-size:11px;overflow-wrap:anywhere}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .add-product{padding:9px 4px;font-size:9px;gap:4px;white-space:normal;line-height:1.4;min-height:44px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity input{grid-column:1/-1;grid-row:1;height:36px;font-size:14px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity button{grid-row:2;min-height:40px}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity button:first-child{grid-column:1}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity button:last-child{grid-column:2}
}
@media(max-width:390px){.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products){gap:6px}.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product{padding:6px}.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-media{height:88px}.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices strong,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .payment-prices .deferred-price strong{font-size:12px}}

/* Product families remain ordered and filterable without forcing partial rows. */
.commerce #product-grid>.food-group-heading{display:none}

/* Equal card boundaries and bottom controls, with shared content tracks per row. */
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products){align-items:stretch}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy{flex:1 0 auto}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy h3{min-height:0}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .add-product,.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-quantity{margin-top:auto}
.commerce .product .glove-price-notice{padding:8px;border-left-width:4px;min-width:0;max-width:100%}
.commerce .product .glove-price-notice>strong{display:block;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.commerce .product .glove-price-notice>strong>span{display:inline-grid;width:18px;height:18px;margin-right:4px;font-size:12px;vertical-align:middle}
.commerce .product .glove-price-notice>span{font-size:11px;line-height:1.45;margin-top:5px}
@media(max-width:760px){.commerce .product .glove-price-notice{padding:6px;border-left-width:3px}.commerce .product .glove-price-notice>strong{font-size:9px}.commerce .product .glove-price-notice>strong>span{width:14px;height:14px;font-size:10px}.commerce .product .glove-price-notice>span{font-size:9px}.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .quote-price{font-size:15px;line-height:1.4}}

@supports(grid-template-rows:subgrid){
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:stretch}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-media{grid-row:1;align-self:start}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-copy{grid-row:2;align-self:start}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) .product-pricing{grid-row:3;align-self:start}
 .commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products) :is(.add-product,.product-quantity){grid-row:4;align-self:end;margin-top:0}
}

/* Visible products share a consistent frame even when source photos contain margins. */
.commerce .product-media{position:relative;overflow:hidden;isolation:isolate}
.commerce .product-media .product-photo{padding:0;object-fit:contain;transform-origin:center;max-width:none;max-height:none}
.commerce .product-media .photo-label{z-index:3}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product{justify-items:stretch}
.commerce :is(#product-grid,#healthcare-products,#selected-products,#brand-products)>.product>:is(.add-product,.product-quantity){justify-self:stretch;width:100%}