/* A small visual refinement for the existing catalogue, not a new layout. */
@media(max-width:900px){
 .phone .category{border-radius:16px;box-shadow:0 3px 12px rgba(16,44,71,.045)}
 .phone .category .imagewell{border-radius:8px}
 .phone .brandcard,.phone .catalog-item{box-shadow:0 3px 12px rgba(16,44,71,.045)}
 .phone .heading h1,.phone .catalog-item h2,.phone .brandcard strong{text-wrap:balance}
 .lab-product-preview .product-card,.lab-product-preview .product-card.industrial-card{border-radius:16px!important;box-shadow:0 3px 12px rgba(16,44,71,.055)}
 .lab-product-preview .product-image{border-radius:8px}
 .lab-product-preview .product-copy h2{text-wrap:balance;hyphens:manual}
 .lab-product-preview .part-group-card{border-radius:16px;box-shadow:0 3px 12px rgba(16,44,71,.045)}
 .lab-product-preview .part-group-card-image{border-radius:8px}
 .lab-product-preview .part-group-card-copy strong{text-wrap:balance}
 #resultCount,.part-group-card-copy small{font-variant-numeric:tabular-nums}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 html[data-ui-refined] body[data-mobile-view="brands"] .brand-list .brand-card:nth-child(-n+6){animation:polish-brand-enter 220ms ease-out backwards}
 html[data-ui-refined] body[data-mobile-view="brands"] .brand-list .brand-card:nth-child(3n+2):nth-child(-n+6){animation-delay:35ms}
 html[data-ui-refined] body[data-mobile-view="brands"] .brand-list .brand-card:nth-child(3n):nth-child(-n+6){animation-delay:70ms}
 @keyframes polish-brand-enter{from{opacity:.88;transform:translateY(5px)}to{opacity:1;transform:none}}
}