.mfp-container { max-width:1100px; margin:18px auto; font-family:Inter,system-ui,Arial,Helvetica,sans-serif; }
.mfp-controls { margin-bottom:12px; }

.mfp-image-box { position:relative; display:inline-block; background:#f7f8fb; padding:8px; border-radius:10px; box-shadow:0 6px 20px rgba(15,20,30,0.05); }
.mfp-image-box img { display:block; max-width:100%; border-radius:8px; }

#mfp_overlay { position:absolute; left:0; top:0; pointer-events:none; }

/* clickable areas (invisible but show hover) */
.mfp-shop-area {
  pointer-events: auto;
  display:block;
  text-decoration:none;
  background: rgba(0,0,0,0);
  transition: all 0.18s ease;
}
.mfp-shop-area:hover {
  outline: 3px solid rgba(43,140,255,0.9);
  background: linear-gradient(90deg, rgba(43,140,255,0.06), rgba(0,0,0,0.02));
  cursor: pointer;
}

/* popup */
.mfp-popup { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.98); background:#fff; border-radius:12px; padding:16px 20px; box-shadow:0 18px 60px rgba(10,20,40,0.25); z-index:99999; opacity:0; transition:all .18s ease; min-width:260px; }
.mfp-popup.visible { transform:translate(-50%,-50%) scale(1); opacity:1; }
.mfp-popup-close { position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:16px; cursor:pointer; color:#666; }
.mfp-popup-inner h3 { margin:0 0 12px 0; font-size:18px; text-align:center; }
.mfp-btn-primary { display:block; margin:0 auto; background: linear-gradient(90deg,#2b8cff,#0066ff); color:#fff; border:0; padding:10px 14px; border-radius:8px; font-weight:600; cursor:pointer; }