/* Object coordinates follow the photo; the glyph and touch target stay fixed-size. */
.product-anchor { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; transform: scale(calc(1 / var(--photo-scale, 1))); }
.product-dot { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: white; }
.product-leader { position: absolute; left: 0; top: -.35px; width: 24px; height: .7px; background: white; transform-origin: left center; }
.product-marker { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; min-width: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.product-plus { width: 24px; height: 24px; grid-area: 1/1; fill: none; stroke: white; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 1px 2px #0005); animation: marker-breathe 3s ease-in-out var(--marker-delay) infinite; }
.product-tag { grid-area: 1/1; width: 32px; height: 32px; fill: #ffffff2e; stroke: white; stroke-width: .8; stroke-linejoin: round; animation: tag-breathe 3s ease-in-out var(--marker-delay) infinite; }
.product-dot, .product-leader { animation: leader-breathe 3s ease-in-out var(--marker-delay) infinite; }
.product-anchor[data-awake="false"] :is(.product-plus,.product-tag,.product-dot,.product-leader), .motion-paused .product-anchor * { animation-play-state: paused; }
.product-marker:hover .product-plus, .product-marker:focus-visible .product-plus { animation: none; opacity: 1; transform: scale(1.18); }
.product-marker:active { scale: .92; }
[data-photo-ready="false"] .product-anchor { visibility: hidden; pointer-events: none; }
@keyframes marker-breathe { 0%,100% { opacity: .58; transform: scale(.93); } 45% { opacity: .96; transform: scale(1.12); } }
@keyframes tag-breathe { 0%,100% { opacity: .12; transform: rotate(-14deg) scale(.94); } 45% { opacity: .26; transform: rotate(-6deg) scale(1.08); } }
@keyframes leader-breathe { 0%,100% { opacity: .3; } 45% { opacity: .8; } }
.product-marker:focus-visible { outline: 2px solid white; outline-offset: -5px; border-radius: 50%; }
dialog.product-popover { position: fixed; inset: auto; margin: 0; padding: 12px; width: min(280px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #ded8cf; border-radius: 8px; background: #f8f6f2; color: #2f2a28; box-shadow: 0 12px 45px #18251c38; transform-origin: center; }
dialog.product-popover::backdrop { background: transparent; backdrop-filter: none; }
.product-popover-close { position: absolute; top: 5px; right: 5px; width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0; background: #f8f6f2e8; color: #2f2a28; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.product-popover-photo { display: block; width: 100%; height: min(170px, 24dvh); object-fit: contain; background: white; border-radius: 4px; }
.product-popover-title { margin: 12px 0 8px; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-popover-details { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 12px; }
.product-popover-details strong { font-size: 17px; font-weight: 600; }
.product-popover-details span { color: #697068; }
.product-popover-visit { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; background: #365f58; color: white; border-radius: 4px; font-size: 13px; text-decoration: none; }
.product-popover :focus-visible { outline: 2px solid #365f58; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .product-plus, .product-tag, .product-dot, .product-leader { animation: none; transition: none; }
  .product-plus { opacity: .85; }.product-tag { opacity: .2; transform: rotate(-10deg); }
  .product-dot, .product-leader { opacity: .65; }
}