/* Project photo product tags (2026-10-06, Mr T) — see inc/project-hotspots.php */
.tof-hs-host { position: relative; }
.tof-hs-host:has(.tof-hs-dot:hover), .tof-hs-host:has(.tof-hs-dot.open) { overflow: visible; z-index: 3; }
.tof-gal a.tof-hs-host:has(.tof-hs-dot:hover) img { transform: none; }
.tof-hs-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tof-hs-layer.tof-hs-lb { inset: auto; z-index: 100000; }
.tof-hs-dot {
	position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
	border-radius: 50%; background: #C8102E; border: 3px solid #fff;
	box-shadow: 0 0 0 0 rgba(200, 16, 46, .55), 0 2px 6px rgba(0, 0, 0, .45);
	cursor: pointer; pointer-events: auto; box-sizing: border-box;
	opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s;
}
.tof-hs-host:hover .tof-hs-dot, .tof-hs-lb .tof-hs-dot, .tof-hs-dot:focus { opacity: 1; transform: scale(1); }
.tof-hs-dot:hover, .tof-hs-dot.open { animation: none; transform: scale(1.15); }
.tof-hs-lb .tof-hs-dot { animation: tofHsPulse 2s infinite; }
@keyframes tofHsPulse { 0% { box-shadow: 0 0 0 0 rgba(200,16,46,.55), 0 2px 6px rgba(0,0,0,.45); } 70% { box-shadow: 0 0 0 12px rgba(200,16,46,0), 0 2px 6px rgba(0,0,0,.45); } 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0), 0 2px 6px rgba(0,0,0,.45); } }
.tof-hs-tip {
	position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
	display: none; align-items: center; gap: 8px; width: max-content; max-width: 240px;
	background: #fff; color: #1a1a1a; border-radius: 8px; padding: 8px 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28); font: 13px/1.3 system-ui, -apple-system, sans-serif; text-align: left; white-space: normal;
}
.tof-hs-tip img, .tof-gal .tof-hs-tip img, .tof-gal a:hover .tof-hs-tip img { width: 44px !important; height: 44px !important; max-width: none; object-fit: cover; border-radius: 4px; flex: none; transform: none !important; display: block; }
.tof-hs-txt { display: flex; flex-direction: column; gap: 2px; }
.tof-hs-txt b { font-weight: 600; }
.tof-hs-txt small { color: #C8102E; font-weight: 600; font-size: 12px; }
.tof-hs-dot:hover .tof-hs-tip, .tof-hs-dot:focus .tof-hs-tip, .tof-hs-dot.open .tof-hs-tip { display: flex; }
.tof-hs-up .tof-hs-tip { bottom: calc(100% + 10px); }
.tof-hs-dot:not(.tof-hs-up) .tof-hs-tip { bottom: auto; top: calc(100% + 10px); }
.tof-hs-left .tof-hs-tip { left: auto; right: -10px; transform: none; }
/* touch screens: no hover, so keep the dots visible (slightly smaller on thumbnails) */
@media (hover: none) {
	.tof-hs-dot { opacity: .9; transform: scale(.8); }
	.tof-hs-dot.open { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .tof-hs-dot { transition: none; animation: none !important; } }