.purchase-notice {
    color: #1d1822;
    background: #fff;
    border: 1px solid #f1e7ed;
    border-radius: 24px;
    width: min(500px, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow-y: auto;
    box-shadow: 0 24px 80px #190b21a3;
}
.purchase-notice:not([open]), .purchase-notice [hidden] { display: none; }
.purchase-notice::backdrop { background: #140e1cba; backdrop-filter: blur(3px); }
.purchase-notice__header {
    position: relative;
    padding: 25px 28px 21px;
    background: radial-gradient(ellipse at 100% 0%, #5c2543 0, transparent 72%), #231927;
    color: #fff;
}
.purchase-notice__brand { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.purchase-notice__brand > span { width: 8px; height: 8px; background: #ed9ab9; border-radius: 50%; }
.purchase-notice__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff43;
    border-radius: 50%;
    background: #ffffff13;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}
.purchase-notice__close:hover { background: #ffffff29; }
.purchase-notice__step { color: #f3b9d0; margin: 18px 0 4px; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.purchase-notice h2 { margin: 0; color: #fff; font-size: clamp(23px, 5vw, 30px); line-height: 1.2; font-weight: 800; }
.purchase-notice h2:focus { outline: none; }
.purchase-notice__progress { display: flex; gap: 5px; margin-top: 17px; }
.purchase-notice__progress > span { width: 29px; height: 3px; border-radius: 3px; background: #ffffff40; }
.purchase-notice__progress > span:first-child { background: #ed9ab9; }
.purchase-notice__body { padding: 21px 28px; color: #473d4c; font-size: 15px; line-height: 1.55; }
.purchase-notice__body p + p { margin-top: 12px; }
.purchase-notice__selection { color: #81234e; background: #fdf2f7; border: 1px solid #f2d8e6; border-radius: 12px; padding: 10px 13px; font-size: 13px; font-weight: 750; }
.purchase-notice[data-current-step="guarantee"] .purchase-notice__header {
    background: #faf4f7;
    border-top: 3px solid #a52d62;
    padding-right: 62px;
}
.purchase-notice[data-current-step="guarantee"] :is(.purchase-notice__brand, .purchase-notice__progress) { display: none; }
.purchase-notice[data-current-step="guarantee"] .purchase-notice__step { color: #6f5361; margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.purchase-notice[data-current-step="guarantee"] h2 { color: #231927; }
.purchase-notice[data-current-step="guarantee"] .purchase-notice__close { background: transparent; border-color: #e4d5dd; color: #4f3b4c; }
.purchase-notice[data-current-step="guarantee"] .purchase-notice__close:hover { background: #f1e5eb; }
#purchase-notice-guarantee p { margin: 0 0 12px; font-size: 16px; }
.purchase-notice__policy { color: #85244f; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.purchase-notice__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 28px 20px; border-top: 1px solid #f2eaf0; }
.purchase-notice__footer button { min-height: 44px; border-radius: 11px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.purchase-notice__back { border: 1px solid #eadde5; color: #4f3b4c; background: #fff; }
.purchase-notice__back:hover { background: #faf3f7; }
.purchase-notice__continue { border: 1px solid #9e2c5d; color: #fff; background: #a52d62; }
.purchase-notice__continue span { margin-left: 4px; }
.purchase-notice__continue:hover { background: #84214d; }
.purchase-notice :is(a, button):focus-visible { outline: 3px solid #cf79a0; outline-offset: 3px; }
@media (max-width: 420px) {
    .purchase-notice { border-radius: 19px; }
    .purchase-notice__header, .purchase-notice__body, .purchase-notice__footer { padding-left: 19px; padding-right: 19px; }
    .purchase-notice__footer { justify-content: stretch; }
    .purchase-notice__footer button { flex: 1 0 auto; }
}