body { --window-radius: 20px; --scrollbar-radius: 8px; }
body.is-page-mode { --window-radius: 0px; --scrollbar-radius: 0px; }
body :is(dialog, .product-card, .settings-card, .cart-card, .clerk-dialogue) {
    border-radius: var(--window-radius);
}

body :is(.settings-card, .cart-card) {
    border: 2px solid #f8e6bf;
    box-shadow: 0 25px 70px #0007, inset 0 0 0 2px #a7784a33;
}

.settings-card { --window-content-inset: 28px; }
.cart-card { --window-content-inset: 34px; }
.settings-content, .cart-items {
    margin-right: calc(-1 * var(--window-content-inset));
    padding-right: calc(var(--window-content-inset) + 10px);
}

@media (max-width: 600px) {
    .settings-card { --window-content-inset: 18px; }
    .cart-card { --window-content-inset: 20px; }
}

:is(.settings-card, .cart-card)::-webkit-scrollbar-track:vertical {
    margin: var(--window-radius) 0;
}

:is(.settings-content, .cart-items)::-webkit-scrollbar-track {
    margin: min(var(--window-radius), 8px) 0;
}

:is(.settings-card, .cart-card)::-webkit-scrollbar-track:horizontal {
    margin: 0 var(--window-radius);
}

/* Keep the orange thumb clear of the frame's inner outline. */
:is(.product-card, .settings-card, .cart-card, .settings-content, .cart-items)::-webkit-scrollbar {
    width: 16px;
}
:is(.product-card, .settings-card, .cart-card, .settings-content, .cart-items)::-webkit-scrollbar-thumb:vertical {
    border: 4px solid transparent;
    background-clip: padding-box;
}