/* Background artwork is exclusive to the order page. */
.order-theme.order-art-page { background: #edf3ec; }
.order-art-page .site-header { background: #fff; }
.order-art-page .order-breadcrumbs { max-width: 1280px; padding: 20px 24px; }
.order-art-page #orderPage {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100svh - 160px);
    padding: clamp(24px, 4vw, 56px) max(24px, calc((100vw - 1280px) / 2));
    overflow: clip;
}
.order-art-page .order-scene { position: absolute; inset: 0; z-index: -2; display: block; }
.order-art-page .order-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.order-art-page #orderPage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #edf3ec38, transparent 65%); }
.order-art-page .order-intro {
    width: min(100%, 500px);
    max-width: 500px;
    margin: 0;
    padding: 32px;
    background: #fffffff7;
    border-color: #d5e1d6;
    box-shadow: 0 16px 48px #153b2426;
}
@media (max-width: 1100px) and (min-width: 901px) {
    .order-art-page .order-intro { width: 46%; min-width: 400px; padding: 28px; }
}
@media (max-width: 900px) {
    .order-art-page #orderPage { display: flow-root; min-height: 0; padding: 0 16px 28px; }
    .order-art-page .order-scene { bottom: auto; height: auto; }
    .order-art-page .order-scene img { height: auto; object-fit: contain; }
    .order-art-page #orderPage::before { display: none; }
    .order-art-page .order-intro { width: 100%; max-width: 680px; margin: calc(100vw * 2 / 3 - 12px) auto 0; padding: 26px 22px; background: #fff; }
    .order-art-page .order-breadcrumbs { padding: 16px; }
}