/* Match the real card layout while the catalog request is in flight. */
#productGrid { position:relative; }
.catalog-placeholders { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:inherit; pointer-events:none; }
.catalog-placeholder { overflow:hidden; }
.catalog-placeholder:before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(110deg,transparent 30%,#ffffff9c 48%,transparent 66%); translate:-100% 0; animation:catalog-skeleton-sweep 1.8s ease-in-out infinite; }
.catalog-placeholder:after { display:none; }
.catalog-placeholder .product-art { background:#edf2f6; }
.catalog-placeholder .tile-action { width:124px; background:#e9eff4; color:transparent; }
.skeleton-shape { display:block; border-radius:7px; background:#e9eff4; }
.skeleton-title { width:68%; height:1.3em; }
.skeleton-copy { width:82%; height:1.75em; background:linear-gradient(#fff0 6px,#edf2f6 6px,#edf2f6 calc(100% - 6px),#fff0 calc(100% - 6px)); }
.skeleton-price { width:118px; height:1.2em; }
.skeleton-stock { width:76px; height:1.7em; background:linear-gradient(#fff0 4px,#edf2f6 4px,#edf2f6 calc(100% - 4px),#fff0 calc(100% - 4px)); }
.skeleton-stock:last-child { width:92px; }
#productGrid[data-state="ready"]>.catalog-placeholders { position:absolute; inset:0 0 auto; z-index:1; animation:catalog-skeleton-exit 220ms ease-out both; }
.service-tile.catalog-enter { animation:catalog-card-enter 460ms cubic-bezier(.16,1,.3,1) var(--catalog-enter-delay,0ms) both; }
.catalog-retry { display:block; margin:16px auto 0; }
@keyframes catalog-skeleton-sweep { 0%,15% { translate:-100% 0; } 85%,100% { translate:100% 0; } }
@keyframes catalog-skeleton-exit { to { opacity:0; } }
/* Individual translate leaves the existing hover transform free to lift the card. */
@keyframes catalog-card-enter { from { opacity:var(--catalog-enter-opacity,0); translate:0 var(--catalog-enter-offset,14px); } to { opacity:1; translate:0 0; } }
@media(max-width:900px) { .catalog-placeholders { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) {
 .catalog-placeholder:before { display:none; }
 .service-tile.catalog-enter { animation:none; opacity:1; translate:none; }
 #productGrid[data-state="ready"]>.catalog-placeholders { display:none; }
}