/* Shared finish for the standalone showroom experiences. */
:root {
    --demo-focus: #8db9ff;
    --demo-shadow: 0 18px 45px rgba(18, 32, 52, .12);
    --demo-radius: 14px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
header { box-shadow: 0 1px 0 rgba(20, 35, 55, .08); }
header strong { letter-spacing: .08em; }
section.hero { position: relative; overflow: hidden; }
section.hero::after {
    position: absolute; right: 7%; bottom: -90px; width: 260px; height: 260px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; content: "";
    pointer-events: none;
}
.wrap > h2, .section h2 { letter-spacing: -.03em; }
button, input, select, textarea { font: inherit; }
button, a { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
button:hover, a.button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(22, 45, 76, .16); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--demo-focus);
    outline-offset: 3px;
}
input, select, textarea { outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--demo-focus) !important; box-shadow: 0 0 0 3px rgba(141, 185, 255, .24); }
.demo { border-radius: 999px !important; box-shadow: var(--demo-shadow); z-index: 8; letter-spacing: .04em; }
.wrap { width: min(1120px, 100%); }
.card, .product, .item, .room, .panel, .stat, .login {
    border-radius: var(--demo-radius);
    box-shadow: 0 4px 18px rgba(21, 40, 67, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover, .product:hover, .item:hover, .room:hover { transform: translateY(-3px); box-shadow: var(--demo-shadow); }
.product button, .item button, .room button { min-height: 42px; }
.cart { box-shadow: -12px 0 35px rgba(16, 28, 45, .16) !important; }
input, select, textarea { border-radius: 10px !important; }
.notice { border-radius: 10px !important; }
.price { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
    header { padding-inline: 5% !important; }
    .wrap { padding-inline: 5% !important; }
    .demo { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}