.shop-location-metro {
    align-items: center;
    gap: 12px;
}

.shop-location-metro .shop-metro-icon {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--shop-metro-color);
    color: var(--shop-metro-color);
    background: #fff;
    box-shadow: 0 0 0 5px var(--shop-metro-glow);
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition: transform .25s ease, box-shadow .25s ease;
}

.shop-location-metro .shop-metro-icon::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: shop-metro-ring 3.4s ease-out infinite;
}

.shop-location-metro .shop-metro-icon svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: currentColor;
    transform-origin: center;
    animation: shop-metro-breathe 3.4s ease-in-out infinite;
}

.shop-location:hover .shop-metro-icon {
    transform: translateY(-2px);
    box-shadow: 0 0 0 7px var(--shop-metro-glow);
}

.shop-route-button {
    gap: 16px;
}

.shop-route-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    overflow: visible;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.shop-route-arrow {
    fill: none;
    stroke: #fa8e3d;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-route-button:hover .shop-route-icon {
    transform: translate(3px, -3px);
}

.shop-location-status.is-closed {
    color: #a55d60;
}

.shop-location-status.is-closed i {
    background: #f17f86;
    box-shadow: 0 0 0 5px rgba(241, 127, 134, .14);
    animation: none;
}

@keyframes shop-metro-ring {
    0%, 55% { opacity: 0; transform: scale(.92); }
    65% { opacity: .26; }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes shop-metro-breathe {
    0%, 55%, 100% { transform: scale(1); }
    72% { transform: scale(1.06); }
}

@media (max-width: 780px) {
    .shop-location-metro .shop-metro-icon {
        width: 28px;
        height: 28px;
    }

    .shop-route-button {
        gap: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-metro-icon,
    .shop-route-icon,
    .shop-metro-icon::after,
    .shop-metro-icon svg {
        animation: none;
        transition: none;
    }
}