.rfp-wrap {
    position: fixed;
    /* Fallbacks first, in case env() is unsupported. */
    right: var(--rfp-side, 24px);
    bottom: var(--rfp-bottom, 24px);
    right: max(var(--rfp-side, 24px), env(safe-area-inset-right));
    bottom: max(var(--rfp-bottom, 24px), env(safe-area-inset-bottom));
    z-index: 99990;
    width: var(--rfp-desktop-width, 180px);
    max-width: calc(100vw - 32px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
    isolation: isolate;
}

.rfp-wrap.rfp-ready {
    opacity: 1;
    visibility: visible;
}

.rfp-wrap.rfp-hide {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.rfp-link {
    display: block;
    width: 100%;
    text-decoration: none;
    line-height: 0;
    border-radius: 12px;
    outline: none;
}

.rfp-link:focus-visible {
    outline: 2px solid #6b5a55;
    outline-offset: 2px;
}

.rfp-trigger {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.rfp-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 36vh;
    object-fit: contain;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.13));
}

.rfp-close {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 3;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: #5f514d;
    font: 400 20px/22px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.rfp-close:hover,
.rfp-close:focus-visible {
    background: #fff;
    transform: scale(1.06);
}

/* Tooltip position intentionally remains to the left of the image. */
.rfp-tooltip {
    position: absolute;
    right: calc(100% - 8px);
    top: 10px;
    width: max-content;
    max-width: min(280px, 54vw);
    padding: 9px 11px;
    border-radius: 8px;
    background: #fff;
    color: #6b5a55;
    font: 600 12px/1.35 Arial, sans-serif;
    letter-spacing: .01em;
    white-space: pre-line;
    overflow-wrap: anywhere;
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
}

.rfp-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 18px;
    border: 7px solid transparent;
    border-left-color: #fff;
}

/*
 * Hover-driven display only on devices that actually hover (mouse/trackpad).
 * On touch devices these rules never apply, so a sticky :hover after a tap
 * can no longer keep the tooltip visible.
 */
@media (hover: hover) {
    .rfp-wrap:hover .rfp-tooltip,
    .rfp-wrap:focus-within .rfp-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* Tap-toggled state (set by JS) when the image is not a link. Any screen width. */
.rfp-wrap.rfp-no-link.rfp-tooltip-open .rfp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .rfp-wrap {
        right: var(--rfp-mobile-side, 12px);
        bottom: var(--rfp-mobile-bottom, 14px);
        right: max(var(--rfp-mobile-side, 12px), env(safe-area-inset-right));
        bottom: max(var(--rfp-mobile-bottom, 14px), env(safe-area-inset-bottom));
        width: var(--rfp-mobile-width, 110px);
        max-width: calc(100vw - 32px);
    }

    .rfp-image {
        max-height: 26vh;
    }

    .rfp-close {
        top: -7px;
        right: -7px;
        width: 24px;
        height: 24px;
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rfp-wrap,
    .rfp-tooltip {
        transition: none;
    }
}