/* Product-detail hover magnifier (Task 49) — desktop web only.
   Shared across admin, account-manager and reseller product detail pages;
   built and positioned entirely by public/assets/js/pdp-magnifier.js.
   Gated the same way design-system.css already gates .data-card:hover, so
   even if the JS gate were ever bypassed these rules still only apply on a
   real mouse + hover-capable display — never on touch. */
@media (hover: hover) and (pointer: fine) {
    .pdp-magnifier-lens {
        position: fixed;
        z-index: 20;
        pointer-events: none;
        background: rgba(245, 165, 1, 0.18);
        border: 2px solid var(--accent);
        border-radius: var(--radius-sm);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.12s ease;
    }

    .pdp-magnifier-lens.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .pdp-magnifier-panel {
        position: fixed;
        z-index: 20;
        pointer-events: none;
        background-color: var(--surface);
        background-repeat: no-repeat;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.12s ease;
    }

    .pdp-magnifier-panel.is-visible {
        opacity: 1;
        visibility: visible;
    }
}