html.sp-bf-open { overflow: hidden; }
.sp-bf-dialog {
    width: min(860px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid #4b4b4b;
    border-radius: 18px;
    background: #141414;
    color: #f5f5f5;
    overflow: hidden;
    font-family: var(--as-font-3, "Mona Sans", sans-serif);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}
.sp-bf-dialog *, .sp-bf-dialog *::before, .sp-bf-dialog *::after { box-sizing: border-box; }
.sp-bf-dialog:not([open]), .sp-bf-dialog[hidden] { display: none !important; }
.sp-bf-dialog::backdrop { background: rgba(0, 0, 0, .76); }
.sp-bf-dialog[open] { animation: sp-bf-enter 180ms ease-out; }
.sp-bf-dialog__layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.sp-bf-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #616166;
    border-radius: 50%;
    color: #fff;
    background: #202020;
    cursor: pointer;
    transition: background-color 150ms ease-out;
}
.sp-bf-dialog__close:hover { background: #383838; }
.sp-bf-dialog__close:active { background: #484848; }
.sp-bf-dialog__art { position: relative; min-height: 100%; overflow: hidden; background: #171717; }
.sp-bf-dialog__art > img:first-child { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-bf-dialog__art::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); }
.sp-bf-dialog .sp-bf-dialog__brand { position: absolute; left: 28px; bottom: 28px; z-index: 1; display: block; width: 170px; height: auto; object-fit: contain; }
.sp-bf-dialog__content { min-width: 0; padding: 52px 40px 36px; }
.sp-bf-dialog .sp-bf-dialog__campaign { margin: 0 0 12px; color: #ff754c; font-size: 18px; font-weight: 700; line-height: 1.45; }
.sp-bf-dialog #sp-bf-title { margin: 0; color: #f5f5f5; font-family: inherit; font-size: 42px; font-weight: 650; line-height: 1.1; letter-spacing: -.035em; }
.sp-bf-dialog__price { margin: 22px 0 20px; }
.sp-bf-dialog .sp-bf-dialog__price > span { display: block; color: #c9c9ce; font-size: 16px; line-height: 1.5; }
.sp-bf-dialog .sp-bf-dialog__price > strong { display: block; color: #fff; font-size: clamp(76px, 9vw, 100px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; }
.sp-bf-dialog .sp-bf-dialog__terms { margin: 0; color: #d0d0d4; font-size: 14px; line-height: 1.55; }
.sp-bf-dialog__terms a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sp-bf-dialog__terms a:hover { color: #fff; }
.sp-bf-dialog .sp-bf-dialog__validity { margin: 6px 0 24px; color: #d0d0d4; font-size: 14px; line-height: 1.55; }
.sp-bf-dialog__quote { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 15px 22px; border: 1px solid #f5f5f5; border-radius: 999px; color: #111; background: #f5f5f5; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color 150ms ease-out; }
.sp-bf-dialog__quote:hover { color: #111; background: #dedee1; }
.sp-bf-dialog__quote:active { background: #cacacc; }
.sp-bf-dialog .sp-bf-dialog__confirmation { margin: 16px 0 0; color: #b9b9c0; font-size: 13px; line-height: 1.5; }
.sp-bf-dialog a:focus-visible, .sp-bf-dialog button:focus-visible { outline: 3px solid #ff754c; outline-offset: 3px; }
@keyframes sp-bf-enter { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    .sp-bf-dialog { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 14px; }
    .sp-bf-dialog__layout { display: block; max-height: calc(100dvh - 24px); }
    .sp-bf-dialog__art { min-height: 0; height: 136px; }
    .sp-bf-dialog__art > img:first-child { object-position: center 42%; }
    .sp-bf-dialog .sp-bf-dialog__brand { left: 20px; bottom: 16px; width: 136px; }
    .sp-bf-dialog__art::after { height: 100%; }
    .sp-bf-dialog__content { padding: 24px; }
    .sp-bf-dialog .sp-bf-dialog__campaign { margin-bottom: 8px; font-size: 16px; }
    .sp-bf-dialog #sp-bf-title { font-size: 38px; }
    .sp-bf-dialog__price { margin: 16px 0; }
    .sp-bf-dialog .sp-bf-dialog__price > strong { font-size: 78px; }
    .sp-bf-dialog .sp-bf-dialog__validity { margin-bottom: 22px; }
    .sp-bf-dialog .sp-bf-dialog__confirmation { margin-top: 14px; }
}
@media (max-width: 359px), (max-height: 640px) and (max-width: 600px) {
    .sp-bf-dialog__art { height: 92px; }
    .sp-bf-dialog__content { padding: 20px; }
    .sp-bf-dialog .sp-bf-dialog__campaign { font-size: 15px; }
    .sp-bf-dialog #sp-bf-title { font-size: 34px; }
    .sp-bf-dialog__price { margin: 12px 0; }
    .sp-bf-dialog .sp-bf-dialog__price > strong { font-size: 66px; }
    .sp-bf-dialog__quote { padding-inline: 18px; font-size: 14px; }
    .sp-bf-dialog .sp-bf-dialog__confirmation { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-bf-dialog[open] { animation: sp-bf-fade 120ms ease-out; }
    @keyframes sp-bf-fade { from { opacity: .7; } to { opacity: 1; } }
}
@media (forced-colors: active) {
    .sp-bf-dialog, .sp-bf-dialog__close, .sp-bf-dialog__quote { border: 2px solid ButtonText; }
}