.product-photo-inline{display:none}
.product-photo-preview{position:fixed;z-index:40;width:min(360px,calc(100vw - 32px));padding:10px;border:1px solid #fff;border-radius:25px;background:#f6fafd;box-shadow:12px 18px 45px #123b5633,inset 2px 2px 5px #fff;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(7px) scale(.97);transition:opacity .24s ease,transform .36s var(--ease),visibility .24s}
.product-photo-preview.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.product-photo-preview img{display:block;width:100%;height:clamp(140px,32svh,240px);object-fit:contain;object-position:center;background:#fff;border-radius:17px}
.product-photo-preview strong{display:block;color:var(--navy);font-size:1rem;line-height:1.35;padding:12px 8px 4px}
.product-photo-preview span{display:block;font-size:.75rem;line-height:1.5;color:var(--text);padding:0 8px 5px}
@media(hover:none),(max-width:720px){
  .mobile-product .product-photo-inline{display:block;grid-column:1/-1;align-self:stretch;width:100%;margin:0 0 16px;border-radius:15px;overflow:hidden;background:#fff}
  .product-photo-inline img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
  .product-photo-inline>span{display:block;font-size:.75rem;line-height:1.4;padding:7px 8px;background:#eaf2f7;color:var(--text)}
  .mobile-product>.clay-icon{display:none}
  .product-photo-preview{display:none}
}
@media(hover:none) and (min-width:721px){.mobile-product{grid-template-columns:1fr}.mobile-product h3,.mobile-product p,.mobile-product-action{grid-column:1}}
@media(prefers-reduced-motion:reduce){.product-photo-preview{transition:none;transform:none}}