.bf-offer:not([open]) { display: none; }
.bf-offer { position: fixed; inset: 0; width: min(calc(100vw - 1.5rem), calc(100svh - 1.5rem), 67.5rem); height: fit-content; max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; color: var(--black); }
.bf-offer::backdrop { background: rgb(217 171 60 / .88); }
html:has(.bf-offer[open]) { overflow: hidden; }
.bf-banner { display: block; width: 100%; height: auto; }
.bf-close { position: absolute; z-index: 1; top: .25rem; right: .25rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--black); border-radius: 999px; background: var(--white); color: var(--black); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.bf-close:hover { transform: scale(1.06); }
.bf-close:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.bf-close:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .bf-close:hover, .bf-close:active { transform: none; } }