.product-image{border-radius:var(--radius-md);background-color:var(--bg-tertiary);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.product-image-sm{width:64px;height:64px}.product-image-md{width:128px;height:128px}.product-image-lg{width:256px;height:256px}.product-image-xl{aspect-ratio:1;width:100%;max-width:400px}.product-image-img{width:100%;height:100%;transition:opacity .3s ease-in-out}.product-image-fit-cover{object-fit:cover}.product-image-fit-contain{object-fit:contain}.product-image-loading{opacity:0}.product-image-loaded{opacity:1}.product-image-placeholder{color:#fff;cursor:default;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-weight:500;display:flex;position:relative}.product-image-placeholder-content{flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.product-image-icon{opacity:.9;width:40%;height:40%}.product-image-sm .product-image-icon{width:24px;height:24px}.product-image-md .product-image-icon{width:48px;height:48px}.product-image-lg .product-image-icon{width:96px;height:96px}.product-image-xl .product-image-icon{width:140px;height:140px}.product-image-placeholder-text{opacity:.9;font-size:1.5rem;font-weight:600}.product-image-sm .product-image-placeholder-text{font-size:.75rem}.product-image-md .product-image-placeholder-text{font-size:1rem}.product-image-lg .product-image-placeholder-text{font-size:2rem}.product-image-skeleton{background:var(--bg-tertiary);position:absolute;inset:0;overflow:hidden}.skeleton-shimmer{background:linear-gradient(90deg,#0000 0%,#ffffffbf 50%,#0000 100%);animation:1.4s ease-in-out infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes shimmer{to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.skeleton-shimmer{animation:none}}.product-image-error-tooltip{color:#fff;text-align:center;opacity:0;background-color:#000000b3;padding:4px 8px;font-size:.75rem;transition:opacity .2s ease-in-out;position:absolute;bottom:0;left:0;right:0}.product-image-placeholder:hover .product-image-error-tooltip{opacity:1}@media (width<=768px){.product-image-xl{max-width:100%}}
