/* Colours/radii intentionally match techrear's active theme (Saturn) so the
   hotspots look native rather than bolted-on: the red-to-purple gradient and
   border-radius scale are pulled straight from its style.css. A site running
   a different theme still gets a fully functional, reasonably neutral look. */

.pt-hotspot-wrap { position: relative; }
.pt-hotspot-wrap img { display: block; width: 100%; height: auto; }

.pt-hotspot-badge {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 20px;
	background: rgba(0,0,0,0.55);
	color: #fff; font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	pointer-events: none;
}

.pt-dot {
	position: absolute; z-index: 4; margin: -11px 0 0 -11px;
	width: 22px; height: 22px; padding: 0;
	border: 2px solid #fff; border-radius: 50%;
	background-image: linear-gradient(90deg, #d42121 0%, #5e59be 100%);
	cursor: pointer;
	animation: pt-pulse 2.2s ease-out infinite;
}
.pt-dot:hover,
.pt-dot[aria-expanded="true"] { animation: none; }

@keyframes pt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(212,33,33,0.5); }
	70%  { box-shadow: 0 0 0 12px rgba(212,33,33,0); }
	100% { box-shadow: 0 0 0 0 rgba(212,33,33,0); }
}

.pt-card {
	display: none; position: absolute; z-index: 5; width: 200px;
	padding: 14px; text-align: left;
	background: #fff; border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.2);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.pt-card.is-open { display: block; }

.pt-card-close {
	position: absolute; top: 8px; right: 8px;
	width: 22px; height: 22px; line-height: 20px;
	border: 0; border-radius: 50%;
	background: rgba(0,0,0,0.06); color: #333; font-size: 14px; cursor: pointer;
}
.pt-card-close:hover { background: rgba(0,0,0,0.12); }

.pt-card-image {
	display: block; width: 100%; height: 110px; object-fit: contain;
	background: #f7f7f7; border-radius: 8px; margin-bottom: 10px;
}
.pt-card-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35em; color: #333; margin-bottom: 4px; }
.pt-card-detail { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
.pt-card-price { display: block; font-size: 14px; font-weight: 600; color: #d42121; margin-bottom: 10px; }
.pt-card-cta {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	text-align: center; padding: 8px 10px; border-radius: 10px;
	background-image: linear-gradient(90deg, #d42121 0%, #5e59be 100%);
	color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none;
}
.pt-card-cta:hover { opacity: .9; }
.pt-card-cta-icon { flex: 0 0 auto; fill: currentColor; }

/* A distinct line under the photo, not one more layer on top of it - hence
   living outside .pt-hotspot-wrap (which is reserved for the image itself
   and everything positioned over it) rather than inside it. */
.pt-disclosure {
	margin: 10px 10px 0;
	font-size: 8px; line-height: 1.4em; color: #999;
}

@media (max-width: 480px) {
	.pt-card { width: 160px; }
}