/* Architectural materials stay neutral; purple marks the connected commerce layer. */
.merchant-city--architectural {
    margin-top: 34px;
}
.merchant-city--architectural .merchant-city__viewport {
    height: clamp(330px, 36vw, 490px);
}
.merchant-city--architectural .merchant-city__svg {
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 85%, transparent 100%);
}
.merchant-city--architectural .mc-neighborhood {
    opacity: .24;
}
.merchant-city--architectural .mc-shop {
    --shop-accent: #673de6;
}
.merchant-city--architectural .mc-shop .mc-shop-roof {
    fill: url(#mc-terrace);
    stroke: #d2cedb;
    stroke-width: .8;
}
.merchant-city--architectural .mc-shop:hover .mc-shop-roof,
.merchant-city--architectural .mc-shop:focus-visible .mc-shop-roof,
.merchant-city--architectural .mc-shop.is-active .mc-shop-roof {
    fill: url(#mc-terrace);
    stroke: #a987ff;
    stroke-opacity: 1;
    stroke-width: 2;
}
.merchant-city--architectural .mc-side-facade > rect {
    fill: url(#mc-glass);
    opacity: 1;
}
.merchant-city--architectural .mc-facade-accent {
    transition: stroke .2s, stroke-width .2s;
}
.merchant-city--architectural .mc-shop:hover .mc-facade-accent,
.merchant-city--architectural .mc-shop:focus-visible .mc-facade-accent,
.merchant-city--architectural .mc-shop.is-active .mc-facade-accent {
    stroke: #b79bff;
    stroke-width: 3.5;
}
.merchant-city--architectural .mc-vehicle-0 { color: #b6b7c1; }
.merchant-city--architectural .mc-vehicle-1 { color: #757985; }
.merchant-city--architectural .mc-vehicle-2 { color: #673de6; }
.merchant-city--architectural .merchant-city__notice {
    background: #1c1d26ed;
    border-color: #6a627d55;
    border-radius: 10px;
    box-shadow: 0 14px 36px #0004;
    padding: 10px 14px;
}
.merchant-city--architectural .merchant-city__notice > span {
    color: #b59aff;
    background: #673de61a;
}
.merchant-city--architectural .merchant-city__notice--order { left: 18%; top: 8%; }
.merchant-city--architectural .merchant-city__notice--delivery { right: 11%; bottom: 14%; }
.merchant-city--architectural .merchant-city__detail {
    background: #1b1c25f7;
    border-color: #8a7ba655;
    box-shadow: 0 20px 65px #0007;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    right: 9%;
}
@media (max-width: 767px) {
    .merchant-city--architectural { margin-top: 30px; }
    .merchant-city--architectural .merchant-city__viewport { height: 325px; }
    .merchant-city--architectural .merchant-city__svg { width: 650px; left: calc(50% - 20px); }
    .merchant-city--architectural .merchant-city__notice--order { left: 5%; top: 8%; }
    .merchant-city--architectural .merchant-city__notice--delivery { right: 4%; bottom: 9%; }
    .merchant-city--architectural .merchant-city__detail { right: 5%; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .merchant-city--architectural .mc-facade-accent { transition: none; }
}
@media (max-width: 479px) {
    .merchant-city--architectural .merchant-city__viewport { height: 300px; }
    .merchant-city--architectural .merchant-city__svg {
        width: clamp(480px, calc(145vw + 15px), 560px);
        left: calc(50% - 24px);
    }
}