Enhance zoomable image overlay with improved styling and SVG magnifier

css/style.css

@@ -1227,30 +1227,28 @@ footer.footer-modern a:hover {
 	position: relative;
 	display: inline-block;
 	cursor: zoom-in;
+	/* clip the overlay to the image bounds */
+	overflow: hidden;
 }
 
-/* Magnifier badge that appears on hover */
+/* Full-image dark overlay with centred magnifier on hover.
+   Stroke-based SVG (24×24 viewBox, no fill) stays crisp at any rendered size. */
 .zoomable-wrap::after {
 	content: '';
 	position: absolute;
-	bottom: 8px;
-	right: 8px;
-	width: 30px;
-	height: 30px;
-	border-radius: 50%;
-	background:
-		rgba(0, 0, 0, 0.55)
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zM7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5z'/%3E%3C/svg%3E")
-		center / 14px no-repeat;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.38);
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
+	background-position: center;
+	background-size: 52px;
+	background-repeat: no-repeat;
 	opacity: 0;
-	transform: scale(0.8);
-	transition: opacity 0.18s ease, transform 0.18s ease;
+	transition: opacity 0.2s ease;
 	pointer-events: none;
 }
 
 .zoomable-wrap:hover::after {
 	opacity: 1;
-	transform: scale(1);
 }
 
 /* ========================================