.product-page__media{position:relative}
  .product-thumb{flex:none;padding:0;border:2px solid transparent;border-radius:14px;background:none;line-height:0;opacity:.6;transition:opacity .2s,border-color .2s,transform .2s}
  .product-thumb:hover{opacity:1;transform:translateY(-2px)}
  .product-thumb.is-active{opacity:1;border-color:var(--pink)}
  .product-thumb img{width:96px;height:96px}
  .draft-swap{position:absolute;z-index:3;overflow:hidden;border-radius:var(--radius);pointer-events:none;visibility:hidden;isolation:isolate;will-change:clip-path;transform:translateZ(0);background:linear-gradient(115deg,#fa0786 0%,#a3127a 50%,#37b7e9 100%);clip-path:inset(0 100% 0 0)}
  .draft-swap:before{content:'';position:absolute;inset:-40%;z-index:0;background:url('draft-logo.webp') 0 0/88px 88px repeat;mix-blend-mode:screen;opacity:.16;transform:rotate(-14deg);will-change:transform}
  .draft-swap:after{content:'';position:absolute;inset:0;z-index:1;background:url('draft-logo.webp') center/min(78%,520px) no-repeat;mix-blend-mode:screen;opacity:0;transform:scale(1.25);will-change:transform,opacity}
  .draft-swap.is-in{visibility:visible;animation:draftWipeIn .36s cubic-bezier(.65,0,.35,1) forwards}
  .draft-swap.is-in:before,.draft-swap.is-hold:before,.draft-swap.is-out:before{animation:draftDrift 2.4s linear forwards}
  .draft-swap.is-in:after{animation:draftMark .55s .08s cubic-bezier(.2,.9,.3,1) forwards}
  .draft-swap.is-hold{visibility:visible;clip-path:inset(0 0 0 0)}
  .draft-swap.is-hold:after{opacity:.38;transform:scale(1)}
  .draft-swap.is-out{visibility:visible;clip-path:inset(0 0 0 0);animation:draftWipeOut .48s cubic-bezier(.65,0,.35,1) forwards}
  .draft-swap.is-out:after{opacity:.38;transform:scale(1);animation:draftMarkOut .36s ease-out forwards}
  @keyframes draftWipeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes draftWipeOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
  @keyframes draftDrift{from{transform:rotate(-14deg) translateX(0)}to{transform:rotate(-14deg) translateX(132px)}}
  @keyframes draftMark{0%{opacity:0;transform:scale(1.25)}100%{opacity:.38;transform:scale(1)}}
  @keyframes draftMarkOut{to{opacity:0;transform:scale(.94)}}


  .product-page__media > img{cursor:zoom-in;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .zoom-hint{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.85rem;opacity:.7;cursor:pointer}
  .zoom-hint:hover{opacity:1}
  .zoom-hint svg{width:16px;height:16px}
  .dz{position:fixed;inset:0;z-index:1000;display:none;opacity:0;background:rgba(8,8,12,.96);transition:opacity .25s ease}
  .dz.is-open{display:block}
  .dz.is-visible{opacity:1}
  .dz-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
  .dz-img{max-width:100%;max-height:100%;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;user-select:none;cursor:zoom-in}
  .dz.is-zoomed .dz-img{cursor:grab}
  .dz-btn{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,20,28,.7);color:#fff;font-size:24px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .dz-btn:hover{background:#fa0786;border-color:#fa0786}
  .dz-close{top:16px;right:16px}
  .dz-prev{left:16px;top:50%;transform:translateY(-50%)}
  .dz-next{right:16px;top:50%;transform:translateY(-50%)}
  .dz-count{position:absolute;bottom:18px;left:50%;z-index:2;transform:translateX(-50%);color:#fff;opacity:.75;font-size:.9rem}
  .dz-tip{position:absolute;top:28px;left:50%;z-index:2;transform:translateX(-50%);color:#fff;opacity:.7;font-size:.85rem;white-space:nowrap;pointer-events:none;transition:opacity .4s}
  .dz.is-zoomed .dz-tip{opacity:0}
  @media (max-width:700px){.dz-prev,.dz-next{display:none}.dz-tip{top:76px}}