/* The current numbered marker and its photo frame share one palette token.
   The frame is inset, so it never changes image dimensions or layout. */
html body .otdelka-top-2,
html body .ostekleneie_primer {
    --vo-hotspot-frame-color: #f8bd9e;
    --vo-hotspot-frame-rgb: 248, 189, 158;
}

html body .otdelka-top-2 .photo {
    box-shadow: inset 0 0 0 3px var(--vo-hotspot-frame-color);
    transition: box-shadow 1.3s cubic-bezier(.22, 1, .36, 1) !important;
}

/* The small numbered disk in the active side card uses exactly the same tone. */
html body .otdelka-top-2 .nav-tabs > li > a .orange-square.vo-otdelka-auto-active .name > span {
    background: var(--vo-hotspot-frame-color) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .94),
        0 4px 10px rgba(var(--vo-hotspot-frame-rgb), .35) !important;
    transition: background-color 1.3s cubic-bezier(.22, 1, .36, 1),
        box-shadow 1.3s cubic-bezier(.22, 1, .36, 1) !important;
}

/* The overlay follows the actual displayed image bounds, so this is a true
   photo frame on desktop and mobile without adding a second image layer. */
html body .ostekleneie_primer .vo-osteklenie-hotspots {
    box-sizing: border-box;
    border: 3px solid var(--vo-hotspot-frame-color);
    border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .96),
        0 8px 19px rgba(var(--vo-hotspot-frame-rgb), .22);
    pointer-events: none;
    transition: border-color 1.3s cubic-bezier(.22, 1, .36, 1),
        box-shadow 1.3s cubic-bezier(.22, 1, .36, 1) !important;
}

html body .ostekleneie_primer .vo-osteklenie-hotspot.vo-osteklenie-active {
    background: var(--vo-hotspot-frame-color) !important;
    box-shadow: 0 0 0 7px rgba(var(--vo-hotspot-frame-rgb), .30),
        0 10px 23px rgba(22, 43, 41, .30) !important;
    transition: background-color 1.3s cubic-bezier(.22, 1, .36, 1),
        box-shadow 1.3s cubic-bezier(.22, 1, .36, 1),
        transform 1.3s cubic-bezier(.22, 1, .36, 1) !important;
}

html body .ostekleneie_primer .orange-square.vo-osteklenie-active {
    background: var(--vo-hotspot-frame-color) !important;
    box-shadow: 0 9px 22px rgba(var(--vo-hotspot-frame-rgb), .30),
        0 0 0 2px rgba(var(--vo-hotspot-frame-rgb), .40) !important;
    transition: background-color 1.3s cubic-bezier(.22, 1, .36, 1),
        box-shadow 1.3s cubic-bezier(.22, 1, .36, 1),
        filter 1.3s cubic-bezier(.22, 1, .36, 1),
        transform 1.3s cubic-bezier(.22, 1, .36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .otdelka-top-2 .photo,
    html body .otdelka-top-2 .orange-square.vo-otdelka-auto-active .name > span,
    html body .ostekleneie_primer .vo-osteklenie-hotspots,
    html body .ostekleneie_primer .vo-osteklenie-hotspot.vo-osteklenie-active,
    html body .ostekleneie_primer .orange-square.vo-osteklenie-active {
        transition: none !important;
    }
}